Difference between revisions of "FSOSS 2010/processing.js/transforms"
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