Week 6

06MA4010991AP
Computer Game Design

Week 6

3D canvas in Processing - bringing the 3rd dimension into processing

To view 3D on a 2D screen, we have to do 3D projection onto 2D canvas (screen). Processing has handled this for us. We use below code to activate a 3D canvas in processing.

void setup()
{
size(320,240,P3D);
}

For some of the primitive functions like point() and line(), they accept 2D and 3D coordinates as input parameters:

point(x,y) vs point(x,y,z)
line(x1,y1,x2,y2) vs line(x1,y1,z1,x2,y2,z2)
It also happens on translate(x,y,z)

Lets start by calling primitive function box():

void setup()
{
size(320,240,P3D);
}

void draw()
{
background(0);
box(100);
}

The result looks like this, since the top left corner of the canvas is x=0 y=0 z=0, lets try out the belows:
1) Place the cube at center of canvas

2) Make the cube spin at center of canvas

Rotating in 3D

There are 3 rotation axis of X Y Z, they refer to different directions of rotation.

Unlike some 3D modelling applications, the Y axis in processing refers to the height and Z axis refers to the depth of an object. There may need some conversion when importing 3D objects from other applications.

Print out the positions of the cubes

source

PFont font;

void setup()
{
size(800,600,P3D);
font = loadFont("arial.vlw");
}

void draw()
{
background(0);
pushMatrix();
translate(width/2,height/2);

int xSpacing = mouseX - width/2;
int ySpacing = mouseY - height/2;
int zSpacing = 100;

for(int i=-5;i<5;i++)
{
int x = i*xSpacing;
int y = i*ySpacing;
int z = i*zSpacing;
pushMatrix();
translate(x,y,z);
box(50);
String position = "x="+x +" y="+y+" z="+z;
textFont(font);
text(position,30,0);
popMatrix();
}
popMatrix();
}

Draw a plane of points() on 3D canvas

void setup()
{
size(800,600,P3D);
}

void draw()
{
background(0);
pushMatrix();
translate(width/2,height/2);
for(int j=0;j<240;j++)
{
for(int i=0;i<320;i++)
{
stroke(255);
float x = (i-160)*2 ;
float z = (j-120)*2 ;

point(x,100,z);
}
}
popMatrix();
}

Exercise:
1) convert the plane into webcam image
2) adding 3rd dimensional data using the brightness of pixel

Drawing a plane in 3D space

float boxSize = 100;

void setup()
{
size(800,600,P3D);
}

void draw()
{
background(0);
pushMatrix();
translate(width/2,height/2);
drawBox();
popMatrix();
}

void drawBox()
{
beginShape();
vertex(-boxSize, -boxSize, boxSize);
vertex( boxSize, -boxSize, boxSize);
vertex( boxSize, boxSize, boxSize);
vertex(-boxSize, boxSize, boxSize);
endShape(CLOSE);
}

Exercise: try adding the other faces to form a cube!

Textures

For any polygon in processing, we can use PImage as texture by telling where the PImage (2d) is mapped onto which vertex (3d).

>>>>

source

Lighting

Lighting gives a much better perception in 3D, also gives better information on understanding the shape. In processing, there are different kinds of lighting:

ambientLight()
directionalLight()
pointLight()
spotLight()

You can use lights() to provide a basic lighting setup.

Loading 3D models

source

For more complex shapes, you may require a 3D modelling software to build the model. Processing have an OBJ loader class to import (.obj) models.