используя слайдер jquery с processing.js - PullRequest
Новая
       13

используя слайдер jquery с processing.js

0 голосов
/ 14 мая 2011

Я создаю простую гистограмму при обработке с использованием значений из 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;
              }
            }

Ответы [ 2 ]

2 голосов
/ 14 мая 2011

Вам не нужно будет выполнять большую работу, но вам нужно убедиться, что вы все делаете правильно - вам нужно поймать экземпляр эскиза на стороне 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
}

Так что это не очень большая работа, удачи!

0 голосов
/ 17 мая 2011

Вот пример с кодом внизу страницы, который может помочь. Однако для отображения страницы вам потребуется браузер WebGL.

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

...