Learning Processing: A Beginner's Guide to Programming Images ...

242 Learning Processing
14.7
Scale
Exercise 14-7: Rotate the 3D cube you made in Exercise 14-5. Can you rotate it around the
corner or center? You can also use the Processing function box( ) to make the cube.
Exercise 14-8: Make a Pyramid class.
In addition to translate( ) and rotate( ) , there is one more function, scale( ) , that aff ects the way shapes
are oriented and drawn onscreen. scale( ) increases or decreases the size of objects onscreen. Just as with
rotate( ) , the scaling eff ect is performed relative to the origin’s location.
scale( ) takes a fl oating point value, a percentage at which to scale: 1.0 is 100%. For example, scale(0.5)
draws an object at 50% of its size and scale(3.0) increases the object’s size to 300%.
Following is a re-creation of Example 14-1 (the growing square) using scale( ) .
Example 14-11: A growing rectangle, using scale()
float r = 0.0;
void setup() {
size(200,200);
}
void draw() {
background(0);
// Translate to center of window
translate(width/2,height/2);
// Scale any shapes according to value of r
scale(r);
// Display a rectangle in the middle of the screen
stroke(255);
fill(100);
rectMode(CENTER);
rect(0,0,10,10);
// Increase the scale variable
r + = 0.02;
}
scale( ) can also take two arguments (for scaling along the x and y -axes with diff erent values) or three
arguments (for the x -, y -, and z -axes).
14.8
The Matrix: Pushing and Popping
What is the matrix?
fi g. 14.22
scale() increases the dimensions
of an object relative to the origin
by a percentage (1.0 � 100%).
Notice how in this example the
scaling effect causes the outline
of the shape to become thicker.
In order to keep track of rotations and translations and how to display the shapes according to diff erent
transformations, Processing (and just about any computer graphics software) uses a matrix.