Tutorial on Processing: beginShape, endShape, mouseDragged, function, class

These two examples demonstrate the Processing facilities for drawing 3D geometric shapes and building up more complex applications through the use of function definition and class definitions.

Fixed tetrahedron
My first sketch was to build a tetrahedron: a 4 sided polyhedron in which each face is a triangle. A tetrahedron is defined by its 4 vertices. The beginShape and endShape functions are used to draw the faces in space. I use the mouseDragged function in a way demonstrated on the Processing.org site to allow the viewer to rotate around the X and Y axes to display the shapes from different angles. This tetrahedron has one face on the xy plane consisting of a triangle of 3 equal sides, angle 60 degrees. Since Processing uses radians, I define a variable rad60 to use. This first figure shows the first face.

The tetrahedron other 3 faces each are based the sides of this triangle reaching 'up' to a point above the middle of the first face. The next figure is a very rough sketch.

The global variables used are float side = 100; float rad60=60*PI/180; // radian value for 60 degrees float rotx = PI/4; // arbitrary initial value float roty = PI/4; //arbitrary initial value The sketch has 4 functions: definitions for the defined functions setup, draw and mouseDragged, and one totally defined by me, the programmer: drawtetrahedron. The Processing specified functions are: void setup() { size(800,600,P3D); } void draw() { background(0); translate(width/2.0, height/2.0, -100); rotateX(rotx); rotateY(roty); drawtetrahedron(); } void mouseDragged() { float rate = 0.01; rotx += (pmouseY-mouseY) * rate; roty += (mouseX-pmouseX) * rate;

The second example will make drawtetrahedron take parameters and produce any tetrahedron. The first example draws one specific tetrahedron. void drawtetrahedron() { beginShape(TRIANGLES); vertex(-side/2,0,0); vertex(0,sin(rad60)*(-side),0); vertex(side/2,0,0); endShape(); beginShape(TRIANGLES); vertex(-side/2,0,0); vertex(0,sin(rad60)*(-side)*.5,sin(rad60)*(side)); vertex(side/2,0,0); endShape(); beginShape(TRIANGLES); vertex(-side/2,0,0); vertex(0,sin(rad60)*(-side)*.5,sin(rad60)*(side)); vertex(0,sin(rad60)*(-side),0); endShape(); beginShape(TRIANGLES); vertex(0,sin(rad60)*(-side),0); vertex(0,sin(rad60)*(-side)*.5,sin(rad60)*(side)); vertex(side/2,0,0); endShape(); } Notice that this function draws 4 shapes based on fixed values, since the variables side and rad60 do not change. The default fill and stroke produce white triangles with black outlines. The effect of these functions is to re-draw the tetrahedron each frame, changing the rotation based on the values of rotx and roty.

Exercises:
1. Change the sketch to rotate around the Y and Z axes. 2. Isolate the rotation to be just around 1 axis, say the X axis. You do this by commenting out the line changing roty. 3. Insert a println statement in the mouseDragged function to display the changed values of rotx and roty. To make these numbers more understandable, convert them from radians to degrees.

General tetrahedron function

The challenge I set myself for the second example was to write a function that would be passed parameters specifying the specific tetrahedron. What defines a tetrahedron? Answer: 4 points in space. I decided to define a class named Pt. It would contain 3 attributes (3 object variables): x, y, and z. This meant that I would 'send' the drawtetrahedron function 4 variables as opposed to 4 times 3. The Pt class is defined as follows: class Pt { float x,y,z; Pt (float xx,float yy,float zz) { x = xx; y = yy; z = zz; } } I then decided to make the fill color also be specified in the function. This meant the function would take 3 more parameters: the Red color, Green color, and Blue color values. The sketch demonstrating the general drawtetrahedron function shows 2 tetrahedrons: one is the same as in the first sketch. In addition to the 4 global variables in the first sketch, this sketch has 8 variables of datatype Pt. Pt p1 = new Pt(-side/2,0,0); Pt p2 = new Pt(0,sin(rad60)*(-side),0); Pt p3 = new Pt(side/2,0,0); Pt p4 = new Pt(0,sin(rad60)*(-side)*.5,sin(rad60)*(side)); Pt p5 = new Pt(side,0,0); Pt p6 = new Pt(side*1.5,sin(rad60)*side,0); Pt p7 = new Pt(2*side,0,0); Pt p8 = new Pt(side*1.5,sin(rad60)*side*.5,sin(rad60)*side); The setup and the mouseDragged function are the same as in the first sketch. The draw function is similar: it includes 2 calls to the new drawtetrahedron function and makes use of the p1 through p8 variables:

void draw() { background(0); translate(width/2.0, height/2.0, -100); rotateX(rotx); rotateY(roty); drawtetrahedron(230,0,0,p1,p2,p3,p4); drawtetrahedron(100,0,100,p5,p6,p7,p8);

} The drawtetrahedron function looks about the same as the first one. It has a more complex header line because of the parameters. The calls to vertex look simpler because they invoke the passed Pt variables. void drawtetrahedron(int colR, int colG, int colB,Pt t1,Pt t2, Pt t3, Pt t4) { fill(colR,colG,colB); beginShape(TRIANGLES); vertex(t1.x,t1.y,t1.z); vertex(t2.x,t2.y,t2.z); vertex(t3.x,t3.y,t3.z); endShape(); beginShape(TRIANGLES); vertex(t1.x,t1.y,t1.z); vertex(t4.x,t4.y,t4.z); vertex(t3.x,t3.y,t3.z); endShape(); beginShape(TRIANGLES); vertex(t1.x,t1.y,t1.z); vertex(t4.x,t4.y,t4.z); vertex(t2.x,t2.y,t2.z); endShape(); beginShape(TRIANGLES); vertex(t2.x,t2.y,t2.z); vertex(t4.x,t4.y,t4.z); vertex(t3.x,t3.y,t3.z); endShape(); }

Exercises
1. Change the sketch to draw 3 parallel tetrahedrons, all lining up on the x axis. 2. Change the sketch to draw a tetrahedron based on the xz plane. 3. Change the sketch to draw one tetrahedron inside the other.