processing.js가있는 jquery 슬라이더 사용

Question

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

Answer 1

당신은 많은 작업을 수행 할 필요가 없습니다 것입니다,하지만 당신은 바로 그것을 할 수 있는지 확인해야합니다 - 당신은 일 (대한 http://processingjs.org/reference/articles/PomaxGuide#jstosketch 참조의 자바 스크립트 측면에 스케치 인스턴스를 잡으려고 할 것 어떻게 잘 상세한입니다. 걱정하지 마세요, 그것은 작은 부분이다) 당신이 당신의 jQuery 슬라이더를 이동 할 때마다, 당신은, 당신이 updateYear 방법을 정의하는 것이 좋습니다 사물의 처리 측면에서 일부

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

를 호출 할 :

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/