Shiffman Daniel. Learning processing

232 Learning Processing

 e display( ) function above draws all of Zoog’s parts (body and head, etc.) relative to Zoog’s x , y location.

It requires that x and y be used in both rect( ) and ellipse( ). translate( ) allows us to simply set Processing’s

origin (0,0) at Zoog’s ( x , y ) location and therefore draw the shapes relative to (0,0).

void display() {

// Move origin (0,0) to (x,y)

translate(x,y);

// Draw Zoog's body

fill(150);

rect( 0,0 ,w/6,h*2);

// Draw Zoog's head

fill(255);

ellipse(0,-h/2,w,h);

}

14.2 P3D vs. OPENGL

If you look closely at Example 14-3, you will notice that we have added a third argument to the size( )

function. Traditionally, size( ) has served one purpose: to specify the width and height of our Processing

window.  e size( ) function, however, also accepts a third parameter indicating a drawing mode.

 e mode tells Processing what to do behind the scenes when rendering the display window.  e default

mode (when none is speciﬁ ed) is “ JAVA2D, ” which employs existing Java 2D libraries to draw shapes, set

colors, and so on. We do not have to worry about how this works.  e creators of Processing took care of

the details.

If we want to employ 3D translation (or rotation as we will see later in this chapter), the JAVA2D mode

will no longer suﬃ ce. Running the example in the default mode results in the following error:

“ translate(x, y, z) can only be used with OPENGL or P3D, use translate(x, y) instead. ”

Instead of switching to translate(x,y) , we want to select a diﬀ erent mode.  ere are two options:

• P3D —P3D is a 3D renderer developed by the creators of Processing . It should also be noted that

anti-aliasing (enabled with the smooth( ) function) is not available with P3D.

• OPENGL —OPENGL is a 3D renderer that employs hardware acceleration. If you have an

OpenGL compatible graphics card installed on your computer (which is pretty much every

computer), you can use this mode. Although at the time of the writing of this book, there are still

a few, minor kinks to be worked out with this mode (you may find things look slightly different

between P3D and OPENGL), it may prove exceptionally useful in terms of speed. If you are

planning to display large numbers of shapes onscreen in a high-resolution window, this mode will

likely have the best performance.

To specify a mode, add a third argument in all caps to the size( ) function.

size(200,200); // using the default JAVA2D mode

size(200,200,P3D); // using P3D

size(200,200,OPENGL); // using OPENGL

translate() can be used to draw a collection

of shapes relative to a given point.

Translation and Rotation (in 3D!) 233

14.3 Vertex Shapes

Up until now, our ability to draw to the screen has been limited to a small list of primitive two-

dimensional shapes: rectangles, ellipses, triangles, lines, and points. For some projects, however, creating

your own custom shapes is desirable.  is can be done through the use of the functions beginShape( ) ,

endShape( ) , and vertex( ) .

Consider a rectangle. A rectangle in Processing is deﬁ ned as a reference point, as well as a width and height.

rect(50,50,100,100);

But we could also consider a rectangle to be a polygon (a closed shape bounded by line segments)

made up of four points.  e points of a polygon are called vertices (plural) or vertex (singular).  e

following code draws exactly the same shape as the rect( ) function by setting the vertices of the rectangle

individually. See Figure 14.5 .

beginShape();

vertex(50,50);

vertex(150,50);

vertex(150,150);

vertex(50,150);

endShape(CLOSE);

beginShape( ) indicates that we are going to create a custom shape made up of some

number of vertex points: a single polygon. vertex( ) speciﬁ es the points for each vertex in

the polygon and endShape( ) indicates that we are ﬁ nished adding vertices.  e argument “ CLOSE ” inside

of endShape(CLOSE) declares that the shape should be closed, that is, that the last vertex point should

connect to the ﬁ rst.

 e nice thing about using a custom shape over a simple rectangle is ﬂ exibility. For example, the sides are

not required to be perpendicular. See Figure 14.6 .

stroke(0);

fill(175);

beginShape();

vertex(50,50);

vertex(150,25);

vertex(150,175);

vertex(25,150);

endShape(CLOSE);

When using the OPENGL mode, you must also import the OPENGL library.

 is can be done by selecting the SKETCH ➝ IMPORT LIBRARY menu option or by manually

adding the following line of code to the top of your sketch (see Chapter 12 for a detailed explanation

on libraries):

import processing.opengl.*;

ﬁ g. 14.5

Exercise 14-2: Run any Processing sketch in P3D, then switch to OPENGL. Notice any

diﬀ erence?

ﬁ g. 14.6

234 Learning Processing

We also have the option of creating more than one shape, for example, in a loop, as shown in Figure 14.7 .

stroke(0);

for (int i = 0; i < 10; i + + ) {

beginShape();

fill(175);

vertex(i*20,10-i);

vertex(i*20 + 15,10 + i);

vertex(i*20 + 15,180 + i);

vertex(i*20,180-i);

endShape(CLOSE);

}

You can also add an argument to beginShape( ) specifying exactly what type of shape you want to

make.  is is particularly useful if you want to make more than one polygon. For example, if you

create six vertex points, there is no way for Processing to know that you really want to draw two

triangles (as opposed to one hexagon) unless you say beginShape(TRIANGLES) . If you do not want

to make a polygon at all, but want to draw points or lines, you can by saying beginShape(POINTS) or

beginShape(LINES) . See Figure 14.8 .

stroke(0);

beginShape(LINES);

for (int i = 10; i < width; i + = 20) {

vertex(i,10);

vertex(i,height–10);

}

endShape();

Note that LINES is meant for drawing a series of individual lines, not a continous loop. For a continuous

loop, do not use any argument. Instead, simply specify all the vertex points you need and include noFill( ) .

See Figure 14.9 .

noFill();

stroke(0);

beginShape();

for (int i = 10; i < width; i + = 20) {

vertex(i,10);

vertex(i,height–10);

}

endShape();

 e full list of possible arguments for beginShape( ) is available in the Processing reference

http://processing.org/re ference/beginShape_.html

POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS,

QUAD_STRIP

ﬁ g. 14.8

ﬁ g. 14.9

ﬁ g. 14.7

Translation and Rotation (in 3D!) 235

In addition, vertex( ) can be replaced with curveVertex( ) to join the points with curves instead of straight

lines. With curveVertex( ) , note how the ﬁ rst and last points are not displayed.  is is because they are

required to deﬁ ne the curvature of the line as it begins at the second point and ends at the second to last

point. See Figure 14.10 .

noFill();

stroke(0);

beginShape();

for (int i = 10; i < width; i + = 20) {

curveVertex(i,10);

curveVertex(i,height-10);

}

endShape();

ﬁ g. 14.10

14.4 Custom 3D Shapes

 ree-dimensional shapes can be created using beginShape( ) , endShape( ) , and vertex( ) by placing

multiple polygons side by side in the proper conﬁ guration. Let’s say we want to draw a four-sided

pyramid made up of four triangles, all connected to one point (the apex) and a ﬂ at plane (the base). If

your shape is simple enough, you might be able to get by with just writing out the code. In most cases,

however, it is best to start sketching it out with pencil and paper to determine the location of all the

vertices. One example for our pyramid is shown in Figure 14.11 .

Example 14-4 takes the vertices from Figure 14.11 and puts them in a function that allows us to draw the

pyramid with any size. (As an exercise, try making the pyramid into an object.)

size(200,200);

background(255);

stroke(0);

fill(175);

beginShape();

vertex(20, 20);

vertex(_______,_______);

endShape(_______);

Exercise 14-3: Complete the vertices for the shape pictured.

236 Learning Processing

Example 14-4: Pyramid using beginShape(TRIANGLES)

void setup() {

size(200,200,P3D);

}

void draw() {

background(255);

translate(100,100,0);

drawPyramid(150);

}

void drawPyramid(int t) {

stroke(0);

// this pyramid has 4 sides, each drawn as a separate triangle

// each side has 3 vertices, making up a triangle shape

// the parameter " t " determines the size of the pyramid

beginShape(TRIANGLES);

fill(255,150);

vertex(–t,–t,–t);

vertex( t,-t,–t);

vertex( 0, 0, t);

fill(150,150);

vertex( t,–t,–t);

vertex( t, t,–t);

vertex( 0, 0, t);

fill(255,150);

vertex( t, t,–t);

vertex(–t, t,–t);

vertex( 0, 0, t);

ﬁ g. 14.12

ﬁ g. 14.11

(0,0,10)

(10,10,10)(10,10,10)

(10,10,10)

BASE

at

z = 10

APEX

at

z = 10

Connected to

(10,10,10)

x

y

vertex(–10,–10,–10); vertex(10,–10,–10); vertex( 10,10,–10); vertex( –10, 10,–10);

vertex( 10,–10,–10); vertex(10, 10,–10); vertex(–10,10,–10); vertex(–10,–10,–10);

vertex( 0, 0, 10); vertex( 0, 0, 10); vertex( 0, 0, 10); vertex( 0, 0, 10);

Since the pyramid’s vertices are drawn relative to

a centerpoint, we must call translate() to place the

pyramid properly in the window.

The function sets the vertices for the pyramid around

the centerpoint at a ﬂ exible distance, depending on the

number passed in as an argument.

Note that each polygon

can have its own color.

Translation and Rotation (in 3D!) 237

fill(150,150);

vertex(–t, t,–t);

vertex(–t,–t,–t);

vertex( 0, 0, t);

endShape();

}

Exercise 14-4: Create a pyramid with only three sides. Include the base (for a total of four

triangles). Use the space below to sketch out the vertex locations as in Figure 14.11 .

Exercise 14-5: Create a three-dimensional cube using eight quads— beginShape(QUADS) .

(Note that a simpler way to make a cube in Processing is with the box( ) function.)

14.5 Simple Rotation

 ere is nothing particularly three dimensional about the visual result of the pyramid example.  e image

looks more like a ﬂ at rectangle with two lines connected diagonally from end to end. Again, we have

to remind ourselves that we are only creating a three-dimensional illusion , and it is not a particularly

eﬀ ective one without animating the pyramid structure within the virtual space. One way for us to

demonstrate the diﬀ erence would be to rotate the pyramid. So let’s learn about rotation.

For us, in our physical world, rotation is a pretty simple and intuitive concept. Grab a baton, twirl it, and

you have a sense of what it means to rotate an object.

Programming rotation, unfortunately, is not so simple. All sorts of questions come up. Around what axis

should you rotate? At what angle? Around what origin point? Processing oﬀ ers several functions related to

rotation, which we will explore slowly, step by step. Our goal will be to program a solar system simulation

with multiple planets rotating around a star at diﬀ erent rates (as well as to rotate our pyramid in order to

better experience its three dimensionality).

But ﬁ rst, let’s try something simple and attempt to rotate one rectangle around its center. We should be

able to get rotation going with the following three principles:

1. Shapes are rotated in Processing with the rotate( ) function.

2.  e rotate( ) function takes one argument, an angle measured in radians.

3. rotate( ) will rotate the shape in the clockwise direction (to the right) .

238 Learning Processing

OK, armed with this knowledge, we should be able to just call the rotate( ) function and pass in an angle.

Say, 45° (or PI/4 radians) in Processing . Here is our ﬁ rst (albeit ﬂ awed) attempt, with the output shown in

Figure 14.13 .

rotate(radians(45));

rectMode(CENTER);

rect(width/2,height/2,100,100);

Shoot. What went wrong?  e rectangle looks rotated, but it is in the wrong place!

 e single most important fact to remember about rotation in Processing is that

shapes always rotate around the point of origin . Where is the point of origin in this example?  e top left

corner!  e origin has not been translated.  e rectangle therefore will not spin around its own center.

Instead, it rotates around the top left corner. See Figure 14.14 .

ﬁ g. 14.13

origin

rectangle rotating around

top left origin

45

° rotation

from origin

ﬁ g. 14.14

Sure, there may come a day when all you want to do is rotate shapes around the top left corner, but until

that day comes, you will always need to ﬁ rst move the origin to the proper location before rotating, and

then display the rectangle. translate( ) to the rescue!

translate(width/2,height/2);

rotate(radians(45));

rectMode(CENTER);

rect(0,0,100,100);

We can expand the above code using the mouseX location to calculate an angle of rotation and thus animate

the rectangle, allowing it to spin. See Example 14-5 .

Because we translated in order to

rotate, the rectangle now lives at the

point (0,0).

Translation and Rotation (in 3D!) 239

Example 14-5: Rectangle rotating around center

void setup() {

size(200,200);

}

void draw() {

background(255);

stroke(0);

fill(175);

// Translate origin to center

translate(width/2,height/2);

// theta is a common name of a variable to store an angle

float theta = PI*mouseX / width;

// Rotate by the angle theta

rotate(theta);

// Display rectangle with CENTER mode

rectMode(CENTER);

rect(0,0,100,100);

}

ﬁ g. 14.15

The angle ranges from 0 to PI, based on the ratio

of mouseX location to the sketch’s width.

Exercise 14-6: Create a line that spins around its center (like twirling a baton). Draw a

circle at both endpoints.

ﬁ g. 14.16

Z-axis

Processing window

14.6 Rotation Around Different Axes

Now that we have basic rotation out of the way, we can begin

to ask the next important rotation question:

Around what axis do we want to rotate?

In the previous section, our square rotated around the Z -axis.

 is is the default axis for two-dimensional rotation. See

Figure 14.16 .

240 Learning Processing

 e rotate functions can also be used in combination.  e results of Example 14-9 are shown in Figure 14.20 .

Example 14-9: Rotate around more than one axis

void setup() {

size(200,200,P3D);

}

void draw() {

background(255);

stroke(0);

fill(175);

translate(width/2,height/2);

rotateX(PI*mouseY/height);

rotateY(PI*mouseX/width);

rectMode(CENTER);

rect(0,0,100,100);

}

Processing will also allow for rotation around the x or y -axis with the functions rotateX( ) and rotateY( ) ,

which each require P3D or OPENGL mode.  e function rotateZ( ) also exists and is the equivalent of

rotate( ). See Examples 14-6, 14-7 and 14-8.

ﬁ g. 14.20

Example 14-6: rotateZ Example 14-7: rotateX Example 14-8: rotateY

float theta = 0.0;

void setup() {

size(200,200,P3D);

}

void draw() {

background(255);

stroke(0);

fill(175);

translate(width/2,

height/2);

rotateZ(theta);

rectMode(CENTER);

rect(0,0,100,100);

theta + = 0.02;

}

float theta = 0.0;

void setup() {

size(200,200,P3D);

}

void draw() {

background(255);

stroke(0);

fill(175);

translate(width/2,

height/2);

rotateX(theta);

rectMode(CENTER);

rect(0,0,100,100);

theta + = 0.02;

}

float theta = 0.0;

void setup() {

size(200,200,P3D);

}

void draw() {

background(255);

stroke(0);

fill(175);

translate(width/2,

height/2);

rotateY(theta);

rectMode(CENTER);

rect(0,0,100,100);

theta + = 0.02;

}

ﬁ g. 14.17 ﬁ g. 14.19 ﬁ g. 14.18

Translation and Rotation (in 3D!) 241

Returning to the pyramid example, we will see how rotating makes the three-dimensional quality of

the shape more apparent.  e example is also expanded to include a second pyramid that is oﬀ set from

the ﬁ rst pyramid using translate. Note, however, that it rotates around the same origin point as the ﬁ rst

pyramid (since rotateX( ) and rotateY( ) are called before the second translate( ) ).

Example 14-10: Pyramid

float theta = 0.0;

void setup() {

size(200,200,P3D);

}

void draw() {

background(144);

theta + = 0.01;

translate(100,100,0);

rotateX(theta);

rotateY(theta);

drawPyramid(50);

// translate the scene again

translate(50,50,20);

// call the pyramid drawing function

drawPyramid(10);

}

void drawPyramid(int t) {

stroke(0);

// this pyramid has 4 sides, each drawn as a separate triangle

// each side has 3 vertices, making up a triangle shape

// the parameter "t" determines the size of the pyramid

fill(150,0,0,127);

beginShape(TRIANGLES);

vertex(–t,–t,–t);

vertex( t,–t,–t);

vertex( 0, 0, t);

fill(0,150,0,127);

vertex( t,–t,–t);

vertex( t, t,–t);

vertex( 0, 0, t);

fill(0,0,150,127);

vertex( t, t,–t);

vertex(–t, t,–t);

vertex( 0, 0, t);

fill(150,0,150,127);

vertex(–t, t,–t);

vertex(–t,–t,–t);

vertex( 0, 0, t);

endShape();

}

ﬁ g. 14.21

Shiffman Daniel. Learning processing

Подождите немного. Документ загружается.