Saint Louis University 
Computer Science 1050

Dept. of Math & Computer Science 
processing.org tutorial on 2D Transformations
Ch. 6 (pp. 7587) of the Reas/Fry book
Review the use of transformations within the userdefined functions of Ch. 9 of the Reas/Fry book (pp. 121133).
Some additional notes of my own regarding functions and transformations.
If you are interested in reviewing, the following are some (interactive) examples from the Reas/Fry reading.
Note: For convenience, we've added behavior to all of these so that the screen is cleared upon a mouse press.
Reas/Fry Example 61
The shape follows the mouse by using a translation during each call to draw().
Implementation: code
Reas/Fry Example 62
This example draws two different rectangles for each draw cycle, and shows that a second translation is compounded with the first within a draw cycle.
Implementation: code
Reas/Fry Example 63
The mouse controls the rotation based on its xcoordinate. Note well that the rotation is happening around the fixed origin of the coordinate system.
Implementation: code
Reas/Fry Example 64
This is similar to the last sketch, except that since the rectangle is centered at the origin, the rotation is around that center.
Implementation: code
Reas/Fry Example 65
In this case, an angle variable is changing with each draw, causing rotation even as the mouse stays still. But a translation is done before the rotation, so that the fixed point of the rotation is the center of the square being drawn.
Implementation: code
Reas/Fry Example 66
This example is identical to 65 except that when composing the transformation, it performs the rotation before the translation. This has greatly different effect, as the center of rotation is the original origin of the screen.
Implementation: code
Reas/Fry Example 67
Here they carefully compose a series of translates and rotations to make each rotation occur at a joint of an articulated arm.
Implementation: code
Reas/Fry Example 68
This demonstrate use of scale, with the factor based on the mouseX position. Note that the stroke weight scales as well with the coordinate system.
Implementation: code
Reas/Fry Example 69
Similar to 68, except this time they intentionally change the stroke weight inversely proportional to the scale factor so that the combinatio leaves a consistent stroke weight when drawn.
Implementation: code
Try to recreate any of the following sketches.
Propeller
This image of a propeller includes two blades, each of which is a
35x300 pixel ellipse.
Implementation: code
Moving Propeller
And now, we just need to add in an extra rotation angle based upon a
variable that increases with each frame.
Implementation: code
Flower
Use a loop to create the petals of any of the following flowers,
modeled as a number of elliptical petals evenly spaced around the
center. We model our flowers to be centered around (0,0) and then use
translation to place theme elsewhere. For maximum generality, create a
flower function with signature:
void flower(int numPetals, float petalLength, float petalWidth, color petalColor, color centerColor)
Note that there is a subtle difference between the design of the flowers on the left versus the right. Can you spot the difference? Which one looks better to you?
(Spoiler: solution)
Pizza
In this image, we carve a pizza into 11 slices (not by using arcs, but
by using a loop to draw 11 lines incident to the center of the pizza).
Implementation: code
Sunrays
In this image, our sun has 20 rays eminating outward. Each ray is
drawn as a vertical line within a loop that rotates the coordinate
system within each pass.
Implementation: code
Hands of a Clock
Here is our animation of the hands of a clock (except that we've
intentionally sped up the rate of time so that it doesn't take so long
to see changes occur). Internally, the only variable we maintain is
the number of "seconds" since the script began (where we assume each
call to draw() represents one second). The minute and hour
hands are calculated based on fractions thereof.
Implementation: code
Numbered Clock
Here is a more advanced version of the clock that includes rendering
the hour numbers. Note that if hour is an integer variable,
you can generate the text string for that hour with syntax
nf(hour). (The builtin nf()
function stands for number format.) Properly placing and aligning
the hour numbers requres a careful combination of transformations.
Implementation: code