Shiffman Daniel. Learning processing
Подождите немного. Документ загружается.
242 Learning Processing
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.
14.7 Scale
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?
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.
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.
Translation and Rotation (in 3D!) 243
is concept is best illustrated with an example. Let’s give ourselves an assignment: Create a Processing
sketch where two rectangles rotate at diff erent speeds in diff erent directions around their respective
centerpoints.
As we start developing this example, we will see where the problems arise and how we will need to
implement the functions pushMatrix( ) and popMatrix( ) .
Starting with essentially the same code from Section 14.4, we can rotate a square around the Z -axis in
the top left corner of the window. See Example 14-12.
Example 14-12: Rotating one square
float theta1 = 0;
void setup() {
size(200,200,P3D);
}
void draw() {
background (255);
stroke(0);
fill(175);
rectMode(CENTER);
translate(50,50);
rotateZ(theta1);
rect(0,0,60,60);
theta1 + = 0.02;
}
How matrix transformations work is beyond the scope of this book; however, it is useful to simply know
that the information related to the coordinate system is stored in what is known as a transformation
matrix. When a translation or rotation is applied, the transformation matrix changes. From time to time,
it is useful to save the current state of the matrix to be restored later. is will ultimately allow us to move
and rotate individual shapes without them aff ecting others.
fi g. 14.23
What is the matrix?
A matrix is a table of numbers with rows and columns. In Processing , a transformation matrix is used
to describe the window orientation —is it translated or rotated? You can view the current matrix at
any time by calling the function printMatrix( ) . is is what the matrix looks like in its “ normal ”
state, with no calls to translate( ) or rotate( ) .
1.0000 0.0000 0.0000
0.0000 1.0000 0.0000
244 Learning Processing
Making some minor adjustments, we now implement a rotating square in the bottom right-hand corner .
Example 14-13: Rotating another square
float theta2 = 0;
void setup() {
size(200,200,P3D);
}
void draw() {
background (255);
stroke(0);
fill(175);
rectMode(CENTER);
translate(150,150);
rotateY(theta2);
rect(0,0,60,60);
theta2 + = 0.02;
}
Without careful consideration, we might think to simply combine the two programs. e setup( ) function
would stay the same, we would incorporate two globals, theta1 and theta2, and call the appropriate
translation and rotation for each rectangle. We would also adjust translation for the second square from
translate(150,150) to translate(100,100) , since we have already translated to (50,50) with the fi rst square .
float theta1 = 0;
float theta2 = 0;
void setup() {
size(200,200,P3D);
}
void draw() {
background(255);
stroke(0);
fill(175);
rectMode(CENTER);
translate(50,50);
rotateZ(theta1);
rect(0,0,60,60);
theta1 + = 0.02;
translate(100,100);
rotateY(theta2);
rect(0,0,60,60);
theta2 + = 0.02;
}
fi g. 14.24
fi g. 14.25
This fi rst call to rotateZ() affects
all shapes drawn afterward. Both
squares rotate around the center
of the fi rst square.
Translation and Rotation (in 3D!) 245
Running this example will quickly reveal a problem. e fi rst (top left) square rotates around its center .
However, while the second square does rotate around its center, it also rotates around the fi rst square!
Remember, all calls to translate and rotate are relative to the coordinate system’s previous state. We need a
way to restore the matrix to its original state so that individual shapes can act independently.
Saving and restoring the rotation/translation state is accomplished with the functions pushMatrix( ) and
popMatrix( ) . To get started, let’s think of them as saveMatrix( ) and restoreMatrix( ) . (Note there are no
such functions.) Push save. Pop restore.
For each square to rotate on its own, we can write the following algorithm (with the new parts bolded).
1. Save the current transformation matrix. is is where we started, with (0,0) in the top left corner of
the window and no rotation.
2. Translate and rotate the fi rst rectangle.
3. Display the fi rst rectangle.
4. Restore matrix from Step 1 so that it isn’t aff ected by Steps 2 and 3!
5. Translate and rotate the second rectangle.
6. Display the second rectangle.
Rewriting our code in Example 14-14 gives the correct result as shown in Figure 14.26 .
Example 14-14: Rotating both squares
float theta1 = 0;
float theta2 = 0;
void setup() {
size(200,200,P3D);
}
void draw() {
background(255);
stroke(0);
fill(175);
rectMode(CENTER);
pushMatrix();
translate(50,50);
rotateZ(theta1);
rect(0,0,60,60);
popMatrix();
pushMatrix();
translate(150,150);
rotateY(theta2);
rect(0,0,60,60);
popMatrix();
theta1 + = 0.02;
theta2 + = 0.02;
}
fi g. 14.26
1
2
4
5
6
3
246 Learning Processing
Although technically not required, it is a good habit to place pushMatrix( ) and popMatrix( ) around
the second rectangle as well (in case we were to add more to this code). A nice rule of thumb when
starting is to use pushMatrix( ) and popMatrix( ) before and after translation and rotation for all shapes
so that they can be treated as individual entities. In fact, this example should really be object oriented,
with every object making its own calls to pushMatrix( ), translate( ), rotate( ) , and popMatrix( ) .
See Example 14-5 .
Example 14-15: Rotating many things using objects
// An array of Rotater objects
Rotater[] rotaters;
void setup() {
size(200,200);
rotaters = new Rotater[20];
// Rotaters are made randomly
for (int i = 0; i < rotaters.length; i + + ) {
rotaters[i] = new Rotater(random(width),random(height),random(–0.1,0.1),random(48));
}
}
void draw() {
background(255);
// All Rotaters spin and are displayed
for (int i = 0; i < rotaters.length; i + + ) {
rotaters[i].spin();
rotaters[i].display();
}
}
// A Rotater class
class Rotater {
float x,y; // x,y location
float theta; // angle of rotation
float speed; // speed of rotation
float w; // size of rectangle
Rotater(float tempX, float tempY, float tempSpeed, float tempW) {
x = tempX;
y = tempY;
theta = 0; // Angle is always initialized to 0
speed = tempSpeed;
w = tempW;
}
// Increment angle
void spin() {
theta + = speed;
}
// Display rectangle
void display() {
rectMode(CENTER);
stroke(0);
fi g. 14.27
Translation and Rotation (in 3D!) 247
fill(0,100);
// Note the use of pushMatrix()
// and popMatrix() inside the object's
// display method!
pushMatrix();
translate(x,y);
rotate(theta);
rect(0,0,w,w);
popMatrix();
}
}
Interesting results can also be produced from nesting multiple calls to pushMatrix( ) and popMatrix( ).
ere must always be an equal amount of calls to both pushMatrix( ) and popMatrix( ), but they do not
always have to come one right after the other.
To understand how this works, let’s take a closer look at the meaning of “ push ” and “ pop. ” “ Push ” and
“ pop ” refer to a concept in computer science known as a stack. Knowledge of how a stack works will help
you use pushMatrix( ) and popMatrix( ) properly.
A stack is exactly that: a stack. Consider an English teacher getting settled in for a night of grading
papers stored in a pile on a desk, a stack of papers. e teacher piles them up one by one and reads them
in reverse order of the pile. e fi rst paper placed on the stack is the last one read. e last paper added
is the fi rst one read. Note this is the exact opposite of a queue. If you are waiting in line to buy tickets
to a movie, the fi rst person in line is the fi rst person to get to buy tickets, the last person is the last. See
Figure 14.28 .
INBOX
STACK
First one
out
First one
in
QUEUE
First one in & out
Tickets
fi g. 14.28
Pushing refers to the process of putting something in the stack, popping to taking something out. is
is why you must always have an equal number of pushMatrix( ) and popMatrix( ) calls. You can’t pop
something if it does not exist! (If you have an incorrect number of pushes and pops, Processing will say:
“ Too many calls to popMatrix() (and not enough to pushMatrix). ”
Using the rotating squares program as a foundation, we can see how nesting pushMatrix( ) and
popMatrix( ) is useful. e following sketch has one circle in the center (let’s call it the sun) with another
circle rotating it (let’s call it earth) and another two rotating around it (let’s call them moon #1 and
moon #2).
pushMatrix() and popMatrix() are called
inside the class’ display() method. This
way, every Rotater object is rendered
with its own independent translation
and rotation!
248 Learning Processing
Example 14-16: Simple solar system
// Angle of rotation around sun and planets
float theta = 0;
void setup() {
size(200,200);
smooth();
}
void draw() {
background(255);
stroke(0);
// Translate to center of window
// to draw the sun.
translate(width/2,height/2);
fill(255,200,50);
ellipse(0,0,20,20);
// The earth rotates around the sun
pushMatrix();
rotate(theta);
translate(50,0);
fill(50,200,255);
ellipse(0,0,10,10);
// Moon #1 rotates around the earth
pushMatrix();
rotate(–theta*4);
translate(15,0);
fill(50,255,200);
ellipse(0,0,6,6);
popMatrix();
// Moon #2 also rotates around the earth
pushMatrix();
rotate(theta*2);
translate(25,0);
fill(50,255,200);
ellipse(0,0,6,6);
popMatrix();
popMatrix();
theta + = 0.01;
}
pushMatrix( ) and popMatrix( ) can also be nested inside for or while loops with rather unique and
interesting results. e following example is a bit of a brainteaser, but I encourage you to play around
with it .
fi g. 14.29
pushMatrix() is called to save the transformation
state before drawing moon #1. This way we can
pop and return to earth before drawing moon #2.
Both moons rotate around the earth (which itself
is rotating around the sun).
Translation and Rotation (in 3D!) 249
Example 14-17: Nested push and pop
// Global angle for rotation
float theta = 0;
void setup() {
size(200, 200);
smooth();
}
void draw() {
background(100);
stroke(255);
// Translate to center of window
translate(width/2,height/2);
// Loop from 0 to 360 degrees (2*PI radians)
for(float i = 0; i < TWO_PI; i + = 0.2) {
// Push, rotate and draw a line!
pushMatrix();
rotate(theta + i);
line(0,0,100,0);
// Loop from 0 to 360 degrees (2*PI radians)
for(float j = 0; j < TWO_PI; j + = 0.5) {
// Push, translate, rotate and draw a line!
pushMatrix();
translate(100,0);
rotate(–theta–j);
line(0,0,50,0);
// We're done with the inside loop, pop!
popMatrix();
}
// We're done with the outside loop, pop!
popMatrix();
}
endShape();
// Increment theta
theta + = 0.01;
}
Exercise 14-9: Take either your pyramid or your cube shape and make it into a class. Have
each object make its own call to pushMatrix( ) and popMatrix( ) . Can you make an array
of objects all rotating independently in 3D?
14.9 A Processing Solar System
Using all the translation, rotation, pushing, and popping techniques in this chapter, we are ready to build
a Processing solar system. is example will be an updated version of Example 14-16 in the previous
section (without any moons), with two major changes:
• Every planet will be an object, a member of a Planet class.
• An array of planets will orbit the sun.
fi g. 14.30
The transformation state is saved
at the beginning of each cycle
through the for loop and restored
at the end. Try commenting out
these lines to see the difference!
250 Learning Processing
Example 14-18: Object-oriented solar system
// An array of 8 planet objects
Planet[] planets = new Planet[8];
void setup() {
size(200,200);
smooth();
// The planet objects are initialized using the counter variable
for (int i = 0; i < planets.length; i + + ) {
planets[i] = new Planet(20 + i*10,i + 8);
}
}
void draw() {
background(255);
// Drawing the Sun
pushMatrix();
translate(width/2,height/2);
stroke(0);
fill(255);
ellipse(0,0,20,20);
// Drawing all Planets
for (int i = 0; i < planets.length; i + + ) {
planets[i].update();
planets[i].display();
}
popMatrix();
}
class Planet {
float theta; // Rotation around sun
float diameter; // Size of planet
float distance; // Distance from sun
float orbitspeed; // Orbit speed
Planet(float distance_, float diameter_) {
distance = distance_;
diameter = diameter_;
theta = 0;
orbitspeed = random(0.01,0.03);
}
void update() {
// Increment the angle to rotate
theta + = orbitspeed;
}
void display() {
pushMatrix();
rotate(theta); // rotate orbit
translate(distance,0); // translate out distance
fi g. 14.31
Each planet object keeps track
of its own angle of rotation.
Before rotation and translation,
the state of the matrix is saved
with pushMatrix().
Translation and Rotation (in 3D!) 251
stroke(0);
fill(175);
ellipse(0,0,diameter,diameter);
// Afer we are done, restore matrix!
popMatrix();
}
}
Exercise 14-10: How would you add moons to the planets? Hint: Write a Moon class that
is virtually identical to the Planet. en, incorporate a Moon variable into the Planet class.
(In Chapter 22, we will see how this could be made more effi cient with advanced OOP
techniques.)
Exercise 14-11: Extend the solar system example into three dimensions. Try using sphere( )
or box( ) instead of ellipse( ) . Note sphere( ) takes one argument, the sphere’s radius. box( ) can
take one argument (size, in the case of a cube) or three arguments (width, height, and depth.)
Once the planet is drawn, the matrix
is restored with popMatrix() so that
the next planet is not affected.