Interesting and complex sketches can be created when you combine the
When you apply multiple transformations, the order makes a big difference. A
translate() followed by a
rotate() then a
scale() function will not create the same results if the order of operations were changed.
Look at the code below to see how each transformation functions are pieced together to create the animation of a rectangle, placed in the middle of the canvas, rotating from its center.
rectMode(CENTER); translate(width/2, height/2); rotate(radians(frameCount)); fill(255,0,0); rect(0, 0, 100, 100);
Now, let’s change the order of operations. This time, we call the
translate() function before the
rotate() function. Everything else will remain the same, but notice how the resulting animation is wildly different.
rectMode(CENTER); rotate(radians(frameCount)); translate(width/2, height/2); fill(255,0,0); rect(0, 0, 100, 100);
As you can see that the rectangle rotates from the upper left corner of the canvas in this new version. The rectangle is still translated to the center of the canvas, but only after the
rotate() function has been applied. The rectangle leaves the canvas for a time because the rotation is happening at the default origin of the canvas at its top-left corner.
After the first
push() function, translate the first rectangle with a red outline to be in the center of the canvas.
Calculate the x and y positions for the
translate() function relative to the
translate() function, write a line to rotate the rectangle by
frameCount in radians. Notice how the red rectangle is rotating at the center of the canvas.
Below the second
push() function for the blue rectangle, rotate the rectangle by the
frameCount in radians.
rotate() function you just added, translate the second rectangle to be in the center of the canvas.
Notice how this blue rectangle is rotating from the top-left corner and only appears on the canvas once in a while.