Transformations apply to everything that after the transformation was put in effect. As a result a transformation must be undone if one wants to restore the standard configuration. (An alternative is to push and pop.) For example, scaling by 2 would have to be followed by a scaling of 1/2 to undue it.
Currently scale(), translate(), and rotate() are not automatically reset every time a new frame is drawn. In the above MyCanvas when drawing the purple rectangle, translate had to undone after each time a frame was drawn and the rotate angle was the same every time. This means that there is a little difference in the coding for the purple rectangles.
| draw() coding for p5 canvas fill("purple"); translate(240, 230); rotate(angle); rect(0, 0, 20, 40); fill("yellow"); ellipse(5, 10, 6, 6); angle += QUARTER_PI; | draw() coding of MyCanvas named "can" can.fill("purple"); can.translate(240, 230); can.rotate(canAngle); can.rect(0, 0, 20, 40); can.fill("yellow"); can.ellipse(5, 10, 6, 6); can.translate(-240, -230); |
| scale(s, y) scale(s) | The top rectangles show scaling by (.5), (5,4), and (.4,.5) (giving a final result of no scaling). |
| translate(x, y) | The green rectangle was translated by (50, 10), the magenta one by an additional (30, 10). Things were reset using translating by (-80, -20). |
| rotate(angle) | The angle is always in radians. You can use radians(degrees) to convert degrees to radians or use radians = degrees * PI/180. The green rectangle was rotated by -5 degrees, magenta by an additional -70 degrees. Things were reset for the red rectangle by a rotation of +75 degrees. Notice that the center of rotation is at (0, 0) unless translate(...) is used. That is the reason a total rotation of -90 degrees was not used for the magenta rectangle. |
Additional MyCanvas methods used: createMyCanvas, parent, background, textSize, text, and rect.
p5.js file: transform.pjs
James Brink, 5/13/2020