An Introduction To Programming With Processing

An Introduction to 3D in Processing

3 Dimensions
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.

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);
                        /* the OPENGL parameter is now depreciated in current versions of Processing please use the P3D parameter instead*/
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();
  }
3D Robot in Processing
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.

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! Download the Guess My Number Game.

Guess My Number Game