将 jquery 滑块与processing.js 结合使用

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 了解详细的操作方法。别担心，这是一个小部分）并且每当您移动 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/