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-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) &lt; 0.1) {
      vs = 0.0;
    }
  
    // Test if mouse is over the top bar
    if(mouseX &gt; left &amp;&amp; mouseX &lt; right &amp;&amp; mouseY &gt; ps &amp;&amp; mouseY &lt; 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 &lt; min) { ps = min; } 
      if (ps &gt; max) { ps = max; }
    }
  }
  
  void mousePressed() {
    if(over) {
      move = true;
    }
  }
  
  void mouseReleased()
  {
    move = false;
  }</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.