#javascript-processing-example-topic-simulate-spring.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>Spring</h2> <p>Click, drag, and release the horizontal bar to start the spring.</p> <p><a href="http://processing.org/learning/topics/spring.html"><b>Original Processing.org Example:</b> Spring</a><br> <script type="application/processing"> // Spring drawing constants for top bar int s_height = 16; // Height int left = 50; // Left position int right = 150; // Right position int max = 100; // Maximum Y value int min = 20; // Minimum Y value boolean over = false; // If mouse over boolean move = false; // If mouse down and over // Spring simulation constants float M = 0.8; // Mass float K = 0.2; // Spring constant float D = 0.92; // Damping float R = 60; // Rest position // Spring simulation variables float ps = 60.0; // Position float vs = 0.0; // Velocity float as = 0; // Acceleration float f = 0; // Force void setup() { size(200, 200); rectMode(CORNERS); noStroke(); } void draw() { background(102); updateSpring(); drawSpring(); } void drawSpring() { // Draw base fill(0.2); float b_width = 0.5 * ps + -8; rect(width/2 - b_width, ps + s_height, width/2 + b_width, 150); // Set color and draw top bar if(over || move) { fill(255); } else { fill(204); } rect(left, ps, right, ps + s_height); } void updateSpring() { // Update the spring position if(!move) { f = -K * (ps - R); // f=-ky as = f / M; // Set the acceleration, f=ma == a=f/m vs = D * (vs + as); // Set the velocity ps = ps + vs; // Updated position } if(abs(vs) < 0.1) { vs = 0.0; } // Test if mouse is over the top bar if(mouseX > left && mouseX < right && mouseY > ps && mouseY < ps + s_height) { over = true; } else { over = false; } // Set and constrain the position of top bar if(move) { ps = mouseY - s_height/2; if (ps < min) { ps = min; } if (ps > max) { ps = max; } } } void mousePressed() { if(over) { move = true; } } void mouseReleased() { move = false; } </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> // Spring drawing constants for top bar int s_height = 16; // Height int left = 50; // Left position int right = 150; // Right position int max = 100; // Maximum Y value int min = 20; // Minimum Y value boolean over = false; // If mouse over boolean move = false; // If mouse down and over // Spring simulation constants float M = 0.8; // Mass float K = 0.2; // Spring constant float D = 0.92; // Damping float R = 60; // Rest position // Spring simulation variables float ps = 60.0; // Position float vs = 0.0; // Velocity float as = 0; // Acceleration float f = 0; // Force void setup() { size(200, 200); rectMode(CORNERS); noStroke(); } void draw() { background(102); updateSpring(); drawSpring(); } void drawSpring() { // Draw base fill(0.2); float b_width = 0.5 * ps + -8; rect(width/2 - b_width, ps + s_height, width/2 + b_width, 150); // Set color and draw top bar if(over || move) { fill(255); } else { fill(204); } rect(left, ps, right, ps + s_height); } void updateSpring() { // Update the spring position if(!move) { f = -K * (ps - R); // f=-ky as = f / M; // Set the acceleration, f=ma == a=f/m vs = D * (vs + as); // Set the velocity ps = ps + vs; // Updated position } if(abs(vs) < 0.1) { vs = 0.0; } // Test if mouse is over the top bar if(mouseX > left && mouseX < right && mouseY > ps && mouseY < ps + s_height) { over = true; } else { over = false; } // Set and constrain the position of top bar if(move) { ps = mouseY - s_height/2; if (ps < min) { ps = min; } if (ps > max) { ps = max; } } } void mousePressed() { if(over) { move = true; } } void mouseReleased() { move = false; }</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.