en utilisant un curseur jquery avec processing.js

Question

Je crée un graphique à barres simple dans le traitement en utilisant des valeurs d'un XML. Les données sont le bilan massique des glaciers pour 9 chaînes de montagnes depuis 28 ans. J'essaye d'implémenter un curseur de jquery avec ceci (je peux le signaler dans processing.js ... Je ne sais juste pas où aller à partir de là). Pour pouvoir voir toutes mes données, je ne fais que montrer les 28 années à la fois. Avec un curseur jquery je veux être capable de glisser entre les années 1980 à 2007 et montrer les barres avec une seule de ces années. Dois-je changer radicalement mon code de traitement pour que cela fonctionne? Beaucoup d'exemples que j'ai trouvés n'utilisaient pas beaucoup de tableaux et les croquis de traitement étaient plus simples. (Je suis assez nouveau à ce sujet alors s'il vous plaît supporter avec ma question amateur). Tous les conseils/pointeurs sont appréciés.

  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

Vous aurez pas besoin de faire beaucoup de travail, mais vous devez vous assurer de bien le faire - vous aurez envie de prendre l'exemple croquis sur le côté javascript des choses (voir http://processingjs.org/reference/articles/PomaxGuide#jstosketch pour une façon bien détaillée. ne vous inquiétez pas, il est une petite section) et chaque fois que vous déplacez votre curseur jQuery, vous voulez appeler certains

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

du côté de traitement des choses, vous voulez que la méthode updateYear définie :

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

Donc ce n'est pas beaucoup de travail, bonne chance!

Answer 2

Voici un exemple avec du code au bas de la page, ce qui peut aider. Cependant, vous aurez besoin d'un navigateur WebGL pour rendre la page.

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