Computer Science 1050
processing.org tutorial on 2D Transformations
Ch. 6 (pp. 75-87) of the Reas/Fry book
Review the use of transformations within the user-defined functions of Ch. 9 of the Reas/Fry book (pp. 121-133).
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 6-1
The shape follows the mouse by using a translation during each call to draw().
Reas/Fry Example 6-2
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.
Reas/Fry Example 6-3
The mouse controls the rotation based on its x-coordinate. Note well that the rotation is happening around the fixed origin of the coordinate system.
Reas/Fry Example 6-4
This is similar to the last sketch, except that since the rectangle is centered at the origin, the rotation is around that center.
Reas/Fry Example 6-5
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.
Reas/Fry Example 6-6
This example is identical to 6-5 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.
Reas/Fry Example 6-7
Here they carefully compose a series of translates and rotations to make each rotation occur at a joint of an articulated arm.
Reas/Fry Example 6-8
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.
Reas/Fry Example 6-9
Similar to 6-8, 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.
Try to recreate any of the following sketches.
This image of a propeller includes two blades, each of which is a 35x300 pixel ellipse.
And now, we just need to add in an extra rotation angle based upon a variable that increases with each frame.
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?
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).
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.
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.
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 built-in nf() function stands for number format.) Properly placing and aligning the hour numbers requres a careful combination of transformations.