Shiffman Daniel. Learning processing
Подождите немного. Документ загружается.
222 Learning Processing
for (int i = 0; i < cols; i + + ) {
for (int j = 0; j < rows; j + + ) {
myArray[i][j] = 0;
}
}
For example, we might write a program using a two-dimensional array to draw a grayscale image as in
Example 13–9 .
Example 13-9: Two-dimensional array
// Set up dimensions
size(200,200);
int cols = width;
int rows = height;
// Declare 2D array
int[][] myArray = new int[cols][rows];
// Initialize 2D array values
for (int i = 0; i < cols; i + + ) {
for (int j = 0; j < rows; j + + ) {
myArray[i][j] = int(random(255));
}
}
// Draw points
for (int i = 0; i < cols; i + + ) {
for (int j = 0; j < rows; j + + ) {
stroke(myArray[i][j]);
point(i,j);
}
}
A two-dimensional array can also be used to store objects, which is especially convenient for
programming sketches that involve some sort of “ grid ” or “ board. ” Example 13-10 displays a grid of Cell
objects stored in a two-dimensional array. Each cell is a rectangle whose brightness oscillates from 0–255
with a sine function .
fi g. 13.21
columns
rows
for every column
i
&
for every row
j
0123456789
0
1
2
3
4
5
6
7
8
9
fi g. 13.20
Two nested loops allow us to visit
every spot in a two-dimensional array.
For every column i, visit every row j.
Example 13-10: Two-dimensional array of objects
// 2D Array of objects
Cell[][] grid;
// Number of columns and rows in the grid
int cols = 10;
int rows = 10;
void setup() {
size(200,200);
grid = new Cell[cols][rows];
for (int i = 0; i < cols; i + + ){
for (int j = 0; j < rows; j + + ){
// Initialize each object
grid[i][j] = new Cell(i*20,j*20,20,20,i + j);
}
}
}
void draw() {
background(0);
for (int i = 0; i < cols; i + + ){
for (int j = 0; j < rows; j + + ){
// Oscillate and display each object
grid[i][j].oscillate();
grid[i][j].display();
}
}
}
// A Cell object
class Cell {
float x,y; // x,y location
float w,h; // width and height
float angle; // angle for oscillating brightness
// Cell Constructor
Cell(float tempX, float tempY, float tempW, float tempH, float tempAngle) {
x = tempX;
y = tempY;
w = tempW;
h = tempH;
angle = tempAngle;
}
// Oscillation means increase angle
void oscillate() {
angle + = 0.02;
}
void display() {
stroke(255);
// Color calculated using sine wave
fill(127 + 127*sin(angle));
rect(x,y,w,h);
}
}
fi g. 13.22
A two-dimensional array can
be used to store objects.
The counter variables i and j are also
the column and row numbers, and are
used as arguments to the constructor
for each object in the grid.
A cell object knows about its location
in the grid as well as its size with the
variables x, y, w, h.
Mathematics 223
Exercise 13-10: Develop the beginnings of a Tic-Tac-Toe game. Create a Cell object that
can exist in one of two states: O or nothing. When you click on the cell, its state changes from
nothing to “ O ” . Here is a framework to get you started.
Cell[][] board;
int cols = 3;
int rows = 3;
void setup() {
// FILL IN
}
void draw() {
background(0);
for (int i = 0; i < cols; i + + ){
for (int j = 0; j < rows; j + + ){
board[i][j].display();
}
}
}
void mousePressed() {
// FILL IN
}
// A Cell object
class Cell {
float x,y;
float w,h;
int state;
// Cell Constructor
Cell(float tempX, float tempY, float tempW, float tempH) {
// FILL IN
}
void click(int mx, int my) {
// FILL IN
}
224 Learning Processing
Exercise 13-11: If you are feeling saucy, go ahead and complete the Tic-Tac-Toe game
adding X and alternating player turns with mouse clicks.
void display() {
// FILL IN
}
}
Mathematics 225
This page intentionally left blank
Translation and Rotation (in 3D!) 227
14 Translation and Rotation (in 3D!)
“ What is the Matrix? ”
— Neo
In this chapter:
– 2D and 3D translation.
– Using P3D and OPENGL.
– Vertex shapes.
– 2D and 3D rotation.
– Saving the transformation state in the stack: pushMatrix() and popMatrix() .
14.1 The Z-Axis
As we have seen throughout this book, pixels in a two-dimensional window are described using Cartesian
coordinates: an X (horizontal) and a Y (vertical) point. is concept dates all the way back to Chapter 1,
when we began thinking of the screen as a digital piece of graph paper.
In three-dimensional space (such as the actual, real-world space where you are reading this book), a
third axis (commonly referred to as the Z -axis) refers to the depth of any given point. In a Processing
sketch’s window, a coordinate along this Z -axis indicates how far in front or behind the window a pixel
lives. Scratching your head is a perfectly reasonable response here. After all, a computer window is only
two dimensional. ere are no pixels fl oating in the air in front of or behind your LCD monitor! In this
chapter, we will examine how using the theoretical Z -axis will create the illusion of three-dimensional
space in your Processing window.
We can, in fact, create a three-dimensional illusion with what we have learned so far. For example, if you
were to draw a rectangle in the middle of the window and slowly increase its width and height, it might
appear as if it is moving toward you. See Example 14-1.
Example 14-1: A growing rectangle, or a rectangle moving toward you?
float r = 8;
void setup() {
size(200,200);
}
void draw() {
background(255);
// Display a rectangle in the middle of the screen
stroke(0);
fill(175);
rectMode(CENTER);
rect(width/2,height/2,r,r);
// Increase the rectangle size
r + + ;
}
fi g. 14.1
228 Learning Processing
Is this rectangle fl ying off of the computer screen about to bump into your nose? Technically, this is
of course not the case. It is simply a rectangle growing in size. But we have created the illusion of the
rectangle moving toward you.
Fortunately for us, if we choose to use 3D coordinates, Processing will create the illusion for us. While the
idea of a third dimension on a fl at computer monitor may seem imaginary, it is quite real for Processing.
Processing knows about perspective, and selects the appropriate two-dimensional pixels in order to create
the three-dimensional eff ect. We should recognize, however, that as soon as we enter the world of 3D
pixel coordinates, a certain amount of control must be relinquished to the Processing renderer. You can no
longer control exact pixel locations as you might with 2D shapes, because XY locations will be adjusted to
account for 3D perspective.
In order to specify points in three dimensions, the coordinates are specifi ed in the order you would expect:
x , y , z . Cartesian 3D systems can be described as “ left-handed ” or “ right-handed. ” If you use your right
hand to point your index fi nger in the positive y direction (up) and your thumb in the positive x direction
(to the right), the rest of your fi ngers will point toward the positive z direction. It is left-handed if you use
your left hand and do the same. In Processing, the system is left-handed, as shown in Figure 14.2 .
–Z
+X
+Y+Y
(0,0) (0,0)
+X
fi g. 14.2
Our fi rst goal is to rewrite Example 14-1 using the 3D capabilities of Processing. Assume the following
variables:
int x = width/2;
int y = height/2;
int z = 0;
int r = 10;
In order to specify the location for a rectangle, the rect( ) function takes four arguments: an x location,
a y location, a width, and a height.
rect(x,y,w,h);
Translation and Rotation (in 3D!) 229
Our fi rst instinct might be to add another argument to the rect( ) function.
rect(x,y, z ,w,h);
e Processing reference page for rect( ) , however, does not allow for this possibility. In order to specify 3D
coordinates for shapes in the Processing world, we must learn to use a new function, called translate( ) .
e translate( ) function is not exclusive to 3D sketches, so let’s return to two dimensions to see how it
works.
e function translate( ) moves the origin point—(0,0)—relative to its previous state. We know that when
a sketch fi rst starts, the origin point lives on the top left of the window. If we were to call the function
translate( ) with the arguments (50,50), the result would be as shown in Figure 14.3 .
Before
(100,100)
(50,50)(0,0)
After
(-50,-50) (0,0)
⇒ translate (50,50)⇒
(50,50)
fi g. 14.3
Where is the origin?
e “ origin ” in a Processing sketch is the point (0,0) in two dimensions or (0,0,0) in three
dimensions. It is always at the top left corner of the window unless you move it using translate( ) .
You can think of it as moving a pen around the screen, where the pen indicates the origin point.
In addition, the origin always resets itself back to the top left corner at the beginning of draw( ) . Any calls
to translate( ) only apply to the current cycle through the draw( ) loop. See Example 14-2.
Incorrect! We cannot use an (x,y,z) coordinate in Processing’s
shape functions such as rect(), ellipse(), line(), and so on.
Other functions in Processing can take three arguments for
x,y,z and we will see this later in the chapter.
230 Learning Processing
Example 14-2: Multiple translations
void setup() {
size(200,200);
smooth();
}
void draw() {
background(255);
stroke(0);
fill(175);
// Grab mouse coordinates, constrained to window
int mx = constrain(mouseX,0,width);
int my = constrain(mouseY,0,height);
// Translate to the mouse location
translate(mx,my);
ellipse(0,0,8,8);
// Translate 100 pixels to the right
translate(100,0);
ellipse(0,0,8,8);
// Translate 100 pixels down
translate(0,100);
ellipse(0,0,8,8);
// Translate 100 pixels left
translate(–100,0);
ellipse(0,0,8,8);
}
Now that we understand how translate( ) works, we can return to the original problem of specifying 3D
coordinates. translate( ) , unlike rect( ), ellipse( ) , and other shape functions, can accept a third argument for
a Z coordinate.
// Translation along the z-axis
translate(0,0,50);
rectMode(CENTER);
rect(100,100,8,8);
e above code translates 50 units along the Z -axis, and then draws a rectangle at (100,100). While the
above is technically correct, when using translate( ) , it is a good habit to specify the ( x , y ) location as part
of the translation, that is:
// Translation along the z-axis II
translate(100,100,50);
rectMode(CENTER);
rect(0,0,8,8);
Finally, we can use a variable for the Z location and animate the shape moving toward us.
fi g. 14.4
When using translate(), the rectangle’s location
is (0,0) since translate() moved us to the location
for the rectangle.
Translation and Rotation (in 3D!) 231
Example 14-3: A rectangle moving along the z-axis
float z = 0; // a variable for the Z (depth) coordinate
void setup() {
size(200,200,P3D);
}
void draw() {
background(0);
stroke(255);
fill(100);
// Translate to a point before displaying a shape there
translate(width/2,height/2,z);
rectMode(CENTER);
rect(0,0,8,8);
z + + ; // Increment Z (i.e. move the shape toward the viewer)
}
Although the result does not look diff erent from Example 14-1, it is quite diff erent conceptually as we have
opened the door to creating a variety of three-dimensional eff ects on the screen with Processing’s 3D engine.
size(200,200);
background(0);
stroke(255);
fill(255,100);
translate(_______,_______);
rect(0,0,100,100);
translate(_______,_______);
rect(0,0,100,100);
translate(_______,_______);
line(0,0,-50,50);
Exercise 14-1: Fill in the appropriate translate( ) functions to create this pattern. Once you are
fi nished, try adding a third argument to translate( ) to move the pattern into three dimensions.
When using (x,y,z) coordinates, we must tell
Processing we want a 3D sketch. This is done
by adding a third argument “P3D” to the size()
function. See Section 14.2 for more details.
e translate( ) function is particularly useful when you are drawing a collection of shapes relative to a
given centerpoint. Harking back to a Zoog from the fi rst 10 chapters of this book, we saw code like this:
void display() {
// Draw Zoog's body
fill(150);
rect( x,y ,w/6,h*2);
// Draw Zoog's head
fill(255);
ellipse( x,y-h/2 ,w,h);
}