Module 10 : Transformations

• Topics
• Resources
• Review of Reas/Fry Examples
• In-Class Activities
• Sample Quiz Question

Topics

• Translating, Scaling, and Rotating the Coordinate System

New processing syntax:

• translate function
• scale function
• rotate function
• pushMatrix function
• popMatrix function

Resources

• 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.

Review of Reas/Fry Examples

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().

Implementation: code

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.

Implementation: code

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.

Implementation: code

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.

Implementation: code

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.

Implementation: code

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.

Implementation: code

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.

Implementation: code

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.

Implementation: code

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.

Implementation: code

In-Class Activities

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 built-in nf() function stands for number format.) Properly placing and aligning the hour numbers requres a careful combination of transformations.

Implementation: code

Sample Quiz Question