Question

我在使用XML中的值进行处理时创建了一个简单的条形图。这些数据是9个山脉的冰川质量平衡，为期28年。我试图用这个实现一个jquery滑块（我可以把它发布到processing.js ......我只是不知道从那里去哪里）。为了能够看到我的所有数据，现在我只是一次显示所有28年。

使用jquery滑块我希望能够在1980年到2007年之间滑动，并且只显示那些年份中的一个。我是否需要彻底更改处理代码才能使其正常工作？我发现的很多例子都没有广泛使用数组，处理草图更简单。（我在这方面很新，所以请忍受我的业余问题）。任何提示/指示都表示赞赏。

            float[] yearA = new float[28];
            String[] mountA = new String[9];
            float[] massA = new float[9];
            float[] recth = new float[9]; 
            float rectw; 

            int rectx = 10;
            int recty = 20;
            float rectht;
            void setup()

            {
              size(500,800);
            }

            void draw()

            {
              XMLElement years = new XMLElement(this, "glacier2.xml");
              println(years.getChildCount());
              int nResults = years.getChildCount();
              int x=40;
              int y=40;

              background(255);
              fill(0);

              for(int j=0; j<28; j++) {

                XMLElement yearN = years.getChild(j);
                String yearn = yearN.getAttribute("id");
                float yearnf = float(yearn);
                yearA[j] = yearnf;
                println(yearA[j]);


                for(int i=0; i<9; i++) {
                  XMLElement mountains = yearN.getChild(i);
                  String mountain = mountains.getAttribute("id");
                  String massbalance = mountains.getAttribute("massbalance");
                  float massf = float(massbalance);
                  mountA[i] = mountain;
                  massA[i] = massf;
                  rectht = map(massf, -4260, 3700, 10, 750);
                  recth[i]=rectht;
                  rectw = floor(width/10);
                  rect(rectx, recty, rectw, recth[i]);
                  rectx+=(rectw+10);
                  text(massf, rectx, recty+rectht);
                  println(massf);
                }

                rectx=10;
              }
            }

Answer 1

你不需要做很多工作，但是你需要确保做得对 - 你需要在javascript方面捕捉草图实例（参见http://processingjs.org/reference/articles/PomaxGuide#jstosketch for一个非常详细的如何。不要担心，这是一个小部分），每当你移动你的jQuery滑块，你想要调用一些

function updateSlider() {
  var year = 0 /* + someMathWith(slider.value()) */ ;
  sketch.updateYear(year);
}

在处理方面，您需要定义updateYear方法：

void updateYear(float year) {
  // update all values so that you will be drawing
  // the information for the passed year
}

所以这不是很多工作，祝你好运！

Answer 2

这是一个示例，页面底部有代码，这可能会有所帮助。但是，您需要一个WebGL浏览器来呈现页面。

http://matrix.senecac.on.ca/~asalga/DPS909/release0.2/work/3d_demos/

使用带有processing.js的jquery滑块

2 个答案: