使用带有 processing.js 的 jquery 滑块答案

【问题标题】：using a jquery slider with processing.js使用带有 processing.js 的 jquery 滑块
【发布时间】：2011-05-14 03:23:07
【问题描述】：

我正在使用 XML 中的值在处理过程中创建一个简单的条形图。数据是 28 年 9 座山脉的冰川质量平衡。我正在尝试用这个实现一个 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;
              }
            }

【问题讨论】：

标签： jquery slider processing.js

【解决方案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
}

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

【讨论】：

您好，感谢您的回复。我最终选择了一条更简单的路线，并在 jquery 滑块中调用了“j”变量。它有效！
它可以工作，但是你现在已经用原始 javascript 污染了你的草图，所以它在本机处理中将不再工作 =) 当然，如果这个草图永远不会看到“真正的”处理，那几乎不是问题，但我发现添加额外的几行以确保干净的代码分离是值得的。

【解决方案2】：

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

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

【讨论】：