1
edit
Changes
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…'
<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, height/2);
rect(0, 0, 20, 20); // rectangle moves off the canvas
</source>
<ul><li>When we translate, scale or rotate we change the coordinate system</li></ul>
<source lang="JavaScript">
translate(width/2, height/2);
rotate(radians(45));
rect(-10, -10, 20, 20);
</source>
<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, height/2);
rect(0, 0, 20, 20); // rectangle moves off the canvas
</source>
<ul><li>When we translate, scale or rotate we change the coordinate system</li></ul>
<source lang="JavaScript">
translate(width/2, height/2);
rotate(radians(45));
rect(-10, -10, 20, 20);
</source>