Difference between revisions of "FSOSS 2010/processing.js/transforms"
(Created page with '<b>Transformations</b> <ul> <li>Order is important!</li> <li>Let's try to rotate a square</li> </ul> <source lang="JavaScript"> rotate(radians(45)); translate(width/2, heigh…') |
|||
| (One intermediate revision by the same user not shown) | |||
| Line 2: | Line 2: | ||
<ul> | <ul> | ||
<li>Order is important!</li> | <li>Order is important!</li> | ||
| − | <li>Let's try to rotate a square</li> | + | <li>Let's try to rotate a square in place</li> |
</ul> | </ul> | ||
| 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 23: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
