using a jquery slider with processing.js

I am creating a simple bar graph in processing using values from an XML. The data is glacier mass balance for 9 mountain ranges for 28 years. I am trying to implement a jquery slider with this (I can post it into processing.js...I just don't know where to go from there). To be able to see all my data, right now I am just showing all 28 years at once.

With a jquery slider I want to be able to slide between the years 1980 to 2007 and show the bars with only one of those years. Do I need to change my processing code drastically to make this work? A lot of the examples I found weren't using arrays extensively and the processing sketches were simpler. (I am pretty new at this so please bear with my amateur question). Any hints/pointers are appreciated.

            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;
              }
            }

---

You won't need to do a lot of work, but you will need to make sure to do it right - you'll want to catch the sketch instance on the javascript side of things (see http://processingjs.org/reference/articles/PomaxGuide#jstosketch for a nicely detailed how. Don't worry, it's a small section) and whenever you move your jQuery slider, you want to call some

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

On the Processing side of things, you'll want that updateYear method defined:

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

So it's not a great deal of work, good luck!

---

Here's an example with code at the bottom of the page, which may help. However, you'll need a WebGL browser to render the page.

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