0D

Points

The point() is the simplest of the graphic primitives. When invoked with two coordinate parameters, it positions a point in the X-Y space. When invoked with three coordinate parameters, it positions a point in the X-Y-Z space. A point, in geometric sense, does not have dimension, but it can be assigned an occupation in pixels and a color, by the functions strokeWeight() and stroke(), respectively. For example, the simple Processing sketch

	  stroke(180,0,0);
	  strokeWeight(10);
	  point(60,60);
	

Collections of points

A set of points can be grouped into a single object (cloud of points) by the delimiters beginShape(POINTS) and endShape(). Between them each point has to be specified with the vertex() function. Transformations of rotation, translation, and scaling do not apply to the inside of composite objects described with beginShape() and endShape(), but they can precede the definition of a composite object and apply to the whole.

1D

Straight Lines

The line() draws a line segment between two points in the plane or the 3D space, with width and color that can be set with strokeWeight() and stroke(), respectively.

Collections of segments

A set of segments can be defined, as we saw for points, by the delimiters beginShape() and endShape(). Between them, vertices are listed by calls to the function vertex(). Using the invocation beginShape(LINES) the vertices are taken in couples, each identifying a segment. With the argument-free invocation beginShape() the vertices, taken one after the other, define a polygonal line. With the closure endShape(CLOSE) the line is closed on itself by linking the first and last vertices. The color of such polygon can be set by using the fill() function or, conversely, left equal to the background color with the noFill().

Curves

The function curve(), when called with eight parameters, draws a curve on the image plane, with initial and final points determined, respectively, by the second and third couple of coordinates passed as arguments. The first and last couple of coordinates define two control points for the curve, which is an interpolating spline, thus passing for all four points.

Definition 1: Spline

Piecewise-polynomial curve, with polynomials connected with continuity at the knots

Note:

See Introduction to Splines and, for an introduction to the specific kind of splines (Catmull-Rom) used in Processing, the term spline in Wikipedia.

As opposed to the curve(), in the bezier() function call the two control points specified by the four middle parameters are not points touched by the curve. They only serve to define the shape of the approximating Bézier curve, which has the following interesting properties:

stroke(255, 0, 0); 
line(93, 40, 10, 10); 
line(90, 90, 15, 80); 
stroke(0, 0, 0); 
noFill();
bezier(93, 40, 10, 10, 90, 90, 15, 80);
	

There are other methods that allow to read the coordinates or the slope of the tangent to an arbitrary point of a Bézier or spline curve. Such point can be specified by a parameter t t that can go from 0 0 (first extreme) to 1 1 (second extreme). It is also possible to set the precision of approximating or interpolating curves in 3D. For details see the Processing reference manual .

The Processing sketch in table shows the difference between the spline interpolating curve and the Bézier curve

            
                
void setup() {
  c1x = 120;
  c1y = 110;
  c2x = 50;
  c2y = 70;
  background(200);
  stroke(0,0,0);
  size(200, 200);
}

int D1, D2;
int X, Y;
int c1x, c1y, c2x, c2y;

void draw() {
  if (mousePressed == true) {
    X = mouseX; Y = mouseY;
    // selection of the point that is modified
    D1 = (X - c1x)*(X - c1x) + (Y - c1y)*(Y - c1y); 
    D2 = (X - c2x)*(X - c2x) + (Y - c2y)*(Y - c2y);
    if (D1 < D2) {
    c1x = X; c1y = Y;
    }
    else {
     c2x = X; c2y = Y;
     }
    }
    background(200);
    stroke(0,0,0);
    strokeWeight(1);
    
    noFill();
    beginShape(); 
    curveVertex(10,  10); 
    curveVertex(10,  10); 
    curveVertex(c2x, c2y); 
    curveVertex(c1x, c1y); 
    curveVertex(190, 190); 
    curveVertex(190, 190); 
    endShape(); 
       
    stroke(255,30,0);
    bezier(10,10,c2x,c2y,c1x,c1y,190,190);
    strokeWeight(4);
    point(c1x,c1y);
    point(c2x,c2y);
}
                   	      
	    

2D

Triangles

The triangle is the fundamental construction element for 3D graphics. In fact, by juxtaposition of triangles one can approximate any continuous surface. In Processing, however, the triangles are specified in 2D by the primitive triangle(), whose six parameters correspond to the coordinates of the vertices in the image window. Even though each triangle is defined in 2D, it can be rotated and translated in the 3D space, as it happens in the Processing sketch

 void setup(){ size(200, 200, P3D); fill(210, 20,
	20); }

	float angle = 0;

	void draw(){
	    background(200); // clear image
	    stroke(0,0,0);
	    angle += 0.005;
	    rotateX(angle);
	    triangle(10,10,30,70,80,80);
	}	    

	

Collections of triangles

A set of triangles can be defined, similarly to what we did for points and segments, by the delimiters beginShape() and endShape(). Between them, the vertices of the triangles are listed by calls to the function vertex(). By the invocation beginShape(TRIANGLES) the vertices are taken in triples, each defining a triangle, while the invocation beginShape(TRIANGLE_STRIP) takes the vertices one after the other to define a strip mad of triangular facets. If the vertex() has three arguments, the vertices are located in the 3D space and the corresponding triangles identify planar surfaces in space.

Quadrilaterals

Rectangles are defined, in Processing, by the function rect() of four parameters, where the first couple specifies, by default, the position in the the 2D plane of the top-left corner, and the third and fourth parameters specify the width and height, respectively. The meaning of the first couple of parameters can be changed with the function rectMode(): rectMode(CORNER) gives the default positioning; rectMode(CENTER) gives the positioning of the center of the rectangle at the specified point; with the rectMode(CORNERS) the four parameters are interpreted as the coordinates of the top-left and bottom-right vertices, respectively. A generic quadrilateral is defined by the coordinates of its four vertices, passed as parameters to the function quad(). It is important to notice that in 3D, while a triangle stays planar in any case, a quadruple of points does not necessarily lay on a plane. Viceversa, the quadrilaterals that are defined by 3D roto-translations of quadruples of 2D vertices, remain planar. Processing allows only eight parameters to be passed to quad(), thus forcing the definition of a quadrilateral as a quadruple of vertices in 2D.

Collections of quadrilaterals

A set of quadrilaterals can be defined, similarly to what we saw for triangles, by the delimiters beginShape() and endShape(). Between them, vertices are listed by calls to the function vertex(). By using the invocation beginShape(QUADS) the vertices are taken in quadruples, each identifying a quadrilateral, while the invocation beginShape(QUAD_STRIP) takes the vertices one after the other to define a strip mad of quadrilateral facets. If the vertex() have three parameters, the planarity of the resulting faces is not ensured, and the resulting rendering can be misleading. For instance, by running the code

	    size(200,200,P3D);
	    lights();
	    beginShape(QUADS);
	    vertex(20,31, 33);
	    vertex(80, 40, 38);
	    vertex(75, 88, 50);
	    vertex(49, 85, 74);
	    endShape();
	  

Polygons

A generic polygon is defined as a set of vertices, and it has a surface that can be colored. In Processing the vertices are listed within a couple beginShape(POLYGON); - endShape(); Actually, the polygon has to be intended in a generalized sense, as it is possible to use the bezierVertex() and curveVertex() to specify curved profiles. For instance, the reader may try to draw the moon:

	    fill(246, 168, 20);
	    beginShape(POLYGON); 
	    vertex(30, 20); 
	    bezierVertex(80, 10, 80, 75, 30, 75); 
	    bezierVertex(50, 70, 60, 25, 30, 20); 
	    endShape(); 
	  

Ellipses

The function ellipse() draws an ellipse in the 2D plane. Its four parameters are interpreted, as in the case of rect(), as position followed by width and height. The position can be set in different ways according to the ellipseMode(), whose parameter can take values CORNER, CORNERS, CENTER, CENTER_RADIUS. The first couple of these possible values have to be referred to the rectangle that is circumscribed to the ellipse.

3D

Processing offers a very limited repertoire of 3D-object primitives, essentially only balls and boxes.

Boxes

The function box() produces a cube when invoked with a single parameter (edge), a parallelepiped when invoked with three parameters (width, height, depth).

Balls

The function sphere() produces, by an approximating polyhedron, a sphere whose radius is specified as a parameter.The function sphereDetail() can be used to specify the number of vertices of the polyhedron that approximates the ideal sphere.

Perspective projections

A perspective projection is defined by a center of projection and a plane of projection. The projector rays connect the points in the scene with the center of projection, thus highlighting the corresponding points in the plane of projection. The Figure 1 shows a section where the plane of projection produces a straight line whose abscissa is -d d , and the center of projection is in the origin.

Figure 1

In general, the projection of a point having homogeneous coordinates xyz1 x y z 1 onto a plane orthogonal to the z z axis and intersecting such axis in position -d d is obtained, in homogeneous coordinates, by multiplication with the matrix 10000100001000-1d0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 d 0 . The projected point becomes xyz-zd x y z z d , which can be normalized by multiplication of all its element by -dz d z . As a result, we obtain -xdz-ydz-d1 x d z y d z d 1

Parallel views

Parallel views are obtained by taking the center of projection back to infinity ( ∞ ). In this way, the projector rays are all parallel.

Casting shadows

As we have seen, Processing has a local illumination model, thus being impossible to cast shadows directly. However, by manipulating the affine transformation matrices we can cast shadows onto planes. The method is called flashing in the eye, thus meaning that the optical center of the scene is moved to the point where the light source is positioned, and then a perspective transformation is made, with a plane of projection that coincides with the plane where we want to cast the shadow on.

Example 3

The following program projects on the floor the shadow produced by a light source positioned on the y y axis. The result is shown in Figure 2

Figure 2

Casting a shadow

size(200, 200, P3D);
float centro = 100; 
float yp = 70; //floor (plane of projection) distance from center
float yl = 40; //height of light (center of projection) from center

translate(centro, centro, 0); //center the world on the cube

noFill();
box(yp*2); //draw of the room

pushMatrix();
  fill(250); noStroke();
  translate(0, -yl, 0); // move the virtual light bulb higher
  sphere(4); //draw of the light bulb
  stroke(10);
popMatrix();

pushMatrix(); //draw of the wireframe cube
  noFill();
  rotateY(PI/4); rotateX(PI/3);
  box(20);
popMatrix();

// SHADOW PROJECTION BY COMPOSITION 
// OF THREE TRANSFORMATIONS (the first one in 
// the code is the last one to be applied)

translate(0, -yl, 0); // shift of the light source and the floor back 
	              // to their place (see the translation below)

applyMatrix(1, 0, 0, 0,
            0, 1, 0, 0,
            0, 0, 1, 0,
            0, 1/(yp+yl), 0, 0); // projection on the floor
                                 // moved down by yl

translate(0, yl, 0); // shift of the light source to center
                     // and of the floor down by yl

pushMatrix();    // draw of the cube that generate the shadow
  fill(120, 50); // by means of the above transformations
  noStroke();
  rotateY(PI/4); rotateX(PI/3);
  box(20);
popMatrix();