Difference between revisions of "FSOSS 2010/processing.js/transforms"

From CDOT Wiki
Jump to: navigation, search
 
Line 18: Line 18:
 
rect(-10, -10, 20, 20);
 
rect(-10, -10, 20, 20);
 
</source>
 
</source>
 +
 +
<ul>
 +
<li>Since Processing saves states, we need a way to undo transformations</li>
 +
<li>Use <b>pushMatrix()</b> to make a save point and <b>popMatrix()</b> to undo</li>
 +
</ul>

Latest revision as of 22:27, 27 October 2010

Transformations

  • Order is important!
  • Let's try to rotate a square in place
rotate(radians(45));
translate(width/2, height/2);
rect(0, 0, 20, 20); // rectangle moves off the canvas
  • When we translate, scale or rotate we change the coordinate system
translate(width/2, height/2);
rotate(radians(45));
rect(-10, -10, 20, 20);
  • Since Processing saves states, we need a way to undo transformations
  • Use pushMatrix() to make a save point and popMatrix() to undo