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-transform-arm.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>Arm</h2>
  
  <p>The angle of each segment is controlled with the mouseX and
  mouseY position. The transformations applied to the first segment
  are also applied to the second segment because they are inside
  the same pushMatrix() and popMatrix() group.</p>
  
  <p><a href="http://processing.org/learning/basics/arm.html"><b>Original Processing.org Example:</b> Arm</a><br>
  <script type="application/processing">
  float x = 50;
  float y = 100;
  float angle1 = 0.0;
  float angle2 = 0.0;
  float segLength = 50;
  
  void setup() {
    size(200, 200);
    smooth(); 
    strokeWeight(20.0);
    stroke(0, 100);
  }
  
  void draw() {
    background(226);
    
    angle1 = (mouseX/float(width) - 0.5) * -PI;
    angle2 = (mouseY/float(height) - 0.5) * PI;
    
    pushMatrix();
    segment(x, y, angle1); 
    segment(segLength, 0, angle2);
    popMatrix();
  }
  
  void segment(float x, float y, float a) {
    translate(x, y);
    rotate(a);
    line(0, 0, segLength, 0);
  }
  </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 = 50;
  float y = 100;
  float angle1 = 0.0;
  float angle2 = 0.0;
  float segLength = 50;
  
  void setup() {
    size(200, 200);
    smooth(); 
    strokeWeight(20.0);
    stroke(0, 100);
  }
  
  void draw() {
    background(226);
    
    angle1 = (mouseX/float(width) - 0.5) * -PI;
    angle2 = (mouseY/float(height) - 0.5) * PI;
    
    pushMatrix();
    segment(x, y, angle1); 
    segment(segLength, 0, angle2);
    popMatrix();
  }
  
  void segment(float x, float y, float a) {
    translate(x, y);
    rotate(a);
    line(0, 0, segLength, 0);
  }</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.