topical media & game development

topical media & game development

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

#javascript-processing-example-basic-inputs-storinginput.htm / htm


  <!DOCTYPE html>
  <html><head>
  <script src="javascript-processing-example-processing.js"></script>
  <script src="javascript-processing-example-init.js"></script>
  <link rel="stylesheet" href="javascript-processing-example-style.css">
  </head><body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1>
  <h2>StoringInput</h2>
  
  <p>Move the mouse across the screen to change the position
  of the circles. The positions of the mouse are recorded
  into an array and played back every frame. Between each
  frame, the newest value are added to the end of each array
  and the oldest value is deleted.</p>
  
  <p><a href="http://processing.org/learning/basics/storinginput.html"><b>Original Processing.org Example:</b> StoringInput</a><br>
  <script type="application/processing">
  int num = 60;
  float mx[] = new float[num];
  float my[] = new float[num];
  
  void setup() 
  {
    size(200, 200);
    smooth();
    noStroke();
    fill(255, 153); 
  }
  
  void draw() 
  {
    background(51); 
    
    // Reads throught the entire array
    // and shifts the values to the left
    for(int i=1; i<num; i++) {
      mx[i-1] = mx[i];
      my[i-1] = my[i];
    } 
    // Add the new values to the end of the array
    mx[num-1] = mouseX;
    my[num-1] = mouseY;
    
    for(int i=0; i<num; i++) {
      ellipse(mx[i], my[i], i/2, i/2);
    }
  }
  </script><canvas width="200" height="200"></canvas></p>
  <div style="overflow: hidden; height: 0px; width: 0px;"></div>
  
  <pre><b>// All Examples Written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a>
  // unless otherwise stated.</b>
  int num = 60;
  float mx[] = new float[num];
  float my[] = new float[num];
  
  void setup() 
  {
    size(200, 200);
    smooth();
    noStroke();
    fill(255, 153); 
  }
  
  void draw() 
  {
    background(51); 
    
    // Reads throught the entire array
    // and shifts the values to the left
    for(int i=1; i&lt;num; i++) {
      mx[i-1] = mx[i];
      my[i-1] = my[i];
    } 
    // Add the new values to the end of the array
    mx[num-1] = mouseX;
    my[num-1] = mouseY;
    
    for(int i=0; i&lt;num; i++) {
      ellipse(mx[i], my[i], i/2, i/2);
    }
  }</pre>
  </body></html>

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.