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) _

talk show tell print

#javascript-processing-example-basic-math-distance1d.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>Distance1D</h2>
  
  <p>Move the mouse left and right to control the speed and direction of the moving shapes.</p>
  
  <p><a href="http://processing.org/learning/basics/distance1d.html"><b>Original Processing.org Example:</b> Distance1D</a><br>
  <script type="application/processing">
  int thin = 8;
  int thick = 36;
  float xpos1 = 134.0;
  float xpos2 = 44.0;
  float xpos3 = 58.0;
  float xpos4 = 120.0;
  
  void setup() 
  {
    size(200, 200);
    noStroke();
    frameRate(60);
  }
  
  void draw() 
  {
    background(0);
    
    float mx = mouseX * 0.4 - width/5.0;
    
    fill(102);
    rect(xpos2, 0, thick, height/2);
    fill(204);
    rect(xpos1, 0, thin, height/2);
    fill(102);
    rect(xpos4, height/2, thick, height/2);
    fill(204);
    rect(xpos3, height/2, thin, height/2);
          
    xpos1 += mx/16;
    xpos2 += mx/64;
    xpos3 -= mx/16;
    xpos4 -= mx/64;
    
    if(xpos1 < -thin)  { xpos1 =  width; }
    if(xpos1 >  width) { xpos1 = -thin; }
    if(xpos2 < -thick) { xpos2 =  width; }
    if(xpos2 >  width) { xpos2 = -thick; }
    if(xpos3 < -thin)  { xpos3 =  width; }
    if(xpos3 >  width) { xpos3 = -thin; }
    if(xpos4 < -thick) { xpos4 =  width; }
    if(xpos4 >  width) { xpos4 = -thick; }
  }
  </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 thin = 8;
  int thick = 36;
  float xpos1 = 134.0;
  float xpos2 = 44.0;
  float xpos3 = 58.0;
  float xpos4 = 120.0;
  
  void setup() 
  {
    size(200, 200);
    noStroke();
    frameRate(60);
  }
  
  void draw() 
  {
    background(0);
    
    float mx = mouseX * 0.4 - width/5.0;
    
    fill(102);
    rect(xpos2, 0, thick, height/2);
    fill(204);
    rect(xpos1, 0, thin, height/2);
    fill(102);
    rect(xpos4, height/2, thick, height/2);
    fill(204);
    rect(xpos3, height/2, thin, height/2);
          
    xpos1 += mx/16;
    xpos2 += mx/64;
    xpos3 -= mx/16;
    xpos4 -= mx/64;
    
    if(xpos1 &lt; -thin)  { xpos1 =  width; }
    if(xpos1 &gt;  width) { xpos1 = -thin; }
    if(xpos2 &lt; -thick) { xpos2 =  width; }
    if(xpos2 &gt;  width) { xpos2 = -thick; }
    if(xpos3 &lt; -thin)  { xpos3 =  width; }
    if(xpos3 &gt;  width) { xpos3 = -thin; }
    if(xpos4 &lt; -thick) { xpos4 =  width; }
    if(xpos4 &gt;  width) { xpos4 = -thick; }
  }</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) _

(C) Æliens 20/2/2008

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.