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…') |
|||
| 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> | ||
Revision as of 22:15, 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);