|
Chapter: An
Introduction to 3D in Processing
An Introduction to 3D in Processing
Up until now we have been using Processing to create 2D sketches, that
is sketches with 2 measurable dimensions such as width and height,
however Processing allows us easy access to another dimension that
being depth. As width is usually associated with the X axis and height
is usually associated with the Y axis, depth is commonly associated
with the Z axis in Processing.
Axes
indicating 3 Dimensions
In Processing we have access to two 3D renderers, P3D and OpenGL. The
P3D renderer is used mainly for 3D sketches on the web, the OpenGL
renderer requires that the machine running the sketch must have OpenGL
acceleration capabilities. Many modern 3D games (particularly those
that are commonly termed “platform independent”) and most 3D content
creation software uses OpenGL, as it is not specific to Processing and
a set of features that abstract the details of hardware acceleration
for software developers. Using the P3D renderer in a Processing sketch
is easy, as this renderer is simply invoked by adding an extra
parameter to the size() function. For example:
size(800, 600, P3D);
This would cause Processing to use the P3D renderer. Using the OpenGL
renderer is slightly different as this requires that the OpenGL library
is first imported:
import processing.opengl.*;
All import statements in a sketch should precede all other statements.
You can then use the OPENGL mode as a third parameter for the size()
function.
size(800, 600, OPENGL);
A typical example of a sketch using OpenGL might look something like
this:
import processing.opengl.*;
void setup(){
size(500,500,OPENGL);
}
void draw(){
background(127);
…
}
3D Primitives
In a similar way that Processing has 2D primitives such as rectangles,
ellipses, lines etc you will also find a set of 3D primitives such as a
box and a sphere. However you are free to use 2D primitives in a 3D
sketch, but not 3D Primitives in a 2D sketch. One of the fundamental
differences that separates the way in which the functions used to
render 3D primitives differs from rendering 2D primitives, is that 3D
primitives do not have parameters for X, Y and Z coordinates. For
example the function to draw a box which is box() can accept three
parameters but these parameters relate to width, height and depth.
So how to we place 3D primitives in a sketch and move them around?
This is achieved with the transform functions we have been using in our
2D sketches. The main difference is that now we have an additional axis
to consider the Z axis, as a result in a 3D sketch translate() can be
used with either 2 or 3 parameters for example:
translate(X, Y);
//or
translate(X, Y ,Z);
Where X, Y and Z would be the numerical values relating to how the
coordinate system is translated. The rotate() function can also be used
in the following context:
rotateX(num);
//or
rotateY(num);
//or
rotateZ(num);
Where num is the numerical value in radians that the coordinate system
will be rotated around the corresponding axis.
Using the box() function and translations here's an example of how we
could go about drawing a simple robot character using OpenGL:
import processing.opengl.*;
void setup(){
size(500,500,OPENGL);
}
void draw(){
background(127);
pushMatrix();
translate(width/2, (height/2)-100);
box(40);
translate(0,80);
scale(0.8,1);
box(80);
translate(70,0);
scale(1,2);
box(30);
translate(-140,0);
box(30);
translate(50,50);
scale(1,1.5);
box(30);
translate(40,0);
box(30);
popMatrix();
}
A simple robot
character using the OpenGL renderer
Creating 3D sketches can be fun, but can also become exceedingly
difficult for the beginner as you will often find that a firm grasp of
trigonometry is necessary and depending on what you are wanting to
achieve an understanding of vector math and matrices might also be a
prerequisite. However if you are interested in learning more about
creating 3D sketches the best place to start is to work your way up
from creating 2D sketches, that make use of the transformation matrix
and basic trigonometric functions, then try adapt these ideas to
include three dimensions.
Chapter: Guess My
Number Game
Guess My Number Game
Using the information you've learned, thus far you should be able to
follow the code within the guess my number game. Have some fun by
modifying the code and try to make your own!
One of the
many possible implementations of The Guess My Number Game
|
|