使用帶有processing.js的jQuery滑塊

我使用XML中的值創建了一個簡單的條形圖。數據爲28年9個山脈的冰川質量平衡。我試圖用這個實現一個jQuery滑塊（我可以將其發佈到processing.js中......我只是不知道從哪裏去）。爲了能夠看到我所有的數據，現在我只是一次顯示所有28年。使用帶有processing.js的jQuery滑塊

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

來源

2011-05-14 HelloYellow

你不會需要做大量的工作，但你需要確保做是正確的 - 你想趕上草圖實例上的東西（見http://processingjs.org/reference/articles/PomaxGuide#jstosketch的JavaScript端一個很好的詳細知識。不要擔心，這是一小部分），只要你移動你的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 
}

所以這不是很多工作，祝你好運！

來源

2011-05-14 19:34:26

您好，感謝您的回覆。我結束了一個更簡單的路線，並在jquery滑塊中調用了「j」變量。有用！ – HelloYellow 2011-05-17 04:05:11

它的工作原理，但你現在已經用原始javascript污染了你的草圖，所以它不會再在本地處理=）工作，當然如果這個草圖永遠不會看到「真實」處理，這不是一個問題，但我覺得它支付添加額外的幾行以確保代碼分離。 – 2011-06-08 03:20:52

下面是頁面底部的代碼示例，這可能有所幫助。但是，您需要WebGL瀏覽器來呈現頁面。

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

來源

2011-05-17 03:32:38

使用帶有processing.js的jQuery滑塊

回答

相關問題