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-easing.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>Easing</h2>
  
  <p>Move the mouse across the screen and the symbol will follow.  
  Between drawing each frame of the animation, the program
  calculates the difference between the position of the 
  symbol and the cursor. If the distance is larger than
  1 pixel, the symbol moves half of the distance from its
  current position toward the cursor.</p>
  
  <p><a href="http://processing.org/learning/basics/easing.html"><b>Original Processing.org Example:</b> Easing</a><br>
  <script type="application/processing">
  float x;
  float y;
  float targetX, targetY;
  float easing = 0.05;
  
  void setup() 
  {
    size(200, 200); 
    smooth();
    noStroke();  
  }
  
  void draw() 
  { 
    background( 51 );
    
    targetX = mouseX;
    float dx = mouseX - x;
    if(abs(dx) > 1) {
      x += dx * easing;
    }
    
    targetY = mouseY;
    float dy = mouseY - y;
    if(abs(dy) > 1) {
      y += dy * easing;
    }
    
    ellipse(x, y, 33, 33);
  }
  </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>
  float x;
  float y;
  float targetX, targetY;
  float easing = 0.05;
  
  void setup() 
  {
    size(200, 200); 
    smooth();
    noStroke();  
  }
  
  void draw() 
  { 
    background( 51 );
    
    targetX = mouseX;
    float dx = mouseX - x;
    if(abs(dx) &gt; 1) {
      x += dx * easing;
    }
    
    targetY = mouseY;
    float dy = mouseY - y;
    if(abs(dy) &gt; 1) {
      y += dy * easing;
    }
    
    ellipse(x, y, 33, 33);
  }</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.