#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 < -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; } }</pre> </body></html>
(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.