Learning Processing by examples

Based on p5.js examples.
Click here for the differences between p5.js and processing.
Check out p5.js references for more information.

1. Structure

1.1. Setup() and draw()

Function setup() and draw() are the basic parts of the code.

// The statements in the setup() function 
// execute once when the program begins
function setup() {
    // createCanvas must be the first statement
    // createCanvas(width, height) or createCanvas(width, height, WEBGL) for 3D
    createCanvas(720, 400); 
}

// The statements in draw() are executed until the program is stopped. Each statement is executed in sequence and after the last line is read, the first line is executed again.
function draw() { 
    background(0); // Set the background to black
}

1.2. Coordinates:

• All coordinates are measured as the distance from the origin in units of pixels. The origin [0, 0] is the coordinate in the upper left of the window and the coordinate in the lower right is [width-1, height-1].

1.3. Loop:

• By default, Processing loops through draw() continuously, and the statement in draw() function are executed in sequence. Via simply changing the values of variables in draw() function it causes a dynamic effect. e.g. (click here for the preview):

  //example - loop
  
  var y = 100;
  
  function setup() {
    createCanvas(720, 400);
    stroke(255);
  
  function draw() { 
    background(0);
    // without this statement the previous lines will remain and cause a white block
    y = y - 1; 
    if (y < 0) { 
      y = height; 
    } 
    line(0, y, width, y);  
  } 

• If only a static scene is wanted, the statements in the draw() function can be written in setup(), the draw() function can be omitted.

• When noLoop() is called (usually in the setup() function), the draw() function is stopped from executed continuously. ATTENTION: it should be the last line inside the block.

  When noLoop() is used, it's not possible to manipulate or access the screen inside event handling functions such as mousePressed() or keyPressed(). Instead, use those functions to call redraw() or loop(), which will run draw(), which can update the screen properly. This means that when noLoop() has been called, no drawing can happen, and functions like saveFrame() or loadPixels() may not be used.

  Here is an example where noLoop() is used with handling function mousePressed() which calls redraw() (click here for the preview)

  var y;
  
  function setup() {
  createCanvas(720, 400);
  stroke(255);
  noLoop();
  y = height * 0.5;
  }
  
  function draw() {
  background(0);
  y = y - 4;
  if (y < 0) {
      y = height;
  }
  line(0, y, width, y);
  }
  
  function mousePressed() {
  redraw(); 
  }

2. Form, transformation & rotation

2.1. Points, lines and basic 2D shapes

• Point: point(px, py)
• Line: line(p1x, p1y, p2x, p2y)
• triangle: triangle(p1x, p1y, p2x, p2y, p3x, p3y)
• rectangle: rect(px, py, width, height), (px, py) is the cordinate of the upper left point of the rectangle
• quadrilateral: quad(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y)
• ellipse: ellipse(px, py, width, height)

• arc: arc(px, py, width, height, start_radian, end_radian, mode) (clockwise)
  the mode argument is optional. The default mode is the OPEN stroke with a PIE fill. Other two modes are CHORD and PIE. e.g.:

  arc(0.2*width, 50, 80, 80, 0, PI+QUARTER_PI);
  arc(0.5*width, 50, 80, 80, 0, PI+QUARTER_PI, CHORD);
  noFill();
  arc(0.8*width, 50, 80, 80, 0, PI+QUARTER_PI, PIE);

  

2.2. Transformation

Transformation functions include translate(x, y), rotateX(radians)(likewise, rotateY(), rotateZ() for Y, Z axis), sclae(ratio).
Whichever function is called, the effects are applied for the statements below that function. e.g.:

function setup() {
  createCanvas(400, 200);
  background(200);
  strokeWeight(4); //noticing that scale() has an effect on it
  noFill();
  stroke(0,255,255);
  ellipse(15, 15, 30, 30);
  scale(0.5);
  stroke(255,0,255);
  rect(0,0,width,height);
  translate(30, 30);
  stroke(255,255,0);
  ellipse(15, 15, 30, 30);
  scale(0.5);
  stroke(0,0,0)
  rect(0,0,width,height); 
}

To clear up the 'accumulated effect', use push() and pop() before and after the statements with which you want to draw objects in the initial canvas (which is independent, even the fill() function called before push() will not have any effect on this canvas) e.g.(click here for the preview):

function setup() {
  createCanvas(720, 400);
}

function draw() {
  background(102);
  
  push();
  translate(width*0.2, height*0.5);
  rotate(frameCount / 200.0);
  polygon(0, 0, 82, 3); 
  pop();
  
  push();
  translate(width*0.5, height*0.5);
  rotate(frameCount / 50.0);
  polygon(0, 0, 80, 20); 
  pop();
  
  push();
  translate(width*0.8, height*0.5);
  rotate(frameCount / -100.0);
  polygon(0, 0, 70, 7); 
  pop();
}

function polygon(x, y, radius, npoints) {
  var angle = TWO_PI / npoints;
  beginShape();
  for (var a = 0; a < TWO_PI; a += angle) {
    var sx = x + cos(a) * radius;
    var sy = y + sin(a) * radius;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

2.3. Vertex and shapes

Using vertex() within the shape scope (beginShape() ... endShape()), you can easily draw shapes like polygons.

• Shape modes defined by the 'kind' parameters in beginShape(kind):

  With no mode specified, the shape can be any irregular polygon. The parameters available for beginShape() are POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, and QUAD_STRIP.
  The vertex() function with two parameters specifies a position in 2D and the vertex() function with three parameters specifies a position in 3D.
  Transformations such as translate(), rotate(), and scale() do not work within beginShape(). It is also not possible to use other shapes, such as ellipse() or rect() within beginShape().

  The figure below illustrates the shape modes:
  

  The correspondent shape functions are listed below (only the statement different from beginShape() ... endShape() are listed:

  endShape(CLOSE)	beginShape(POINTS)	beginShape(LINES)
  beginShape(TRIANGLES)	beginShape(TRIANGLE_STRIP)	beginShape(TRIANGLE_FAN)
  beginShape(QUADS)	beginShape(QUAD_STRIP)	-

• Using shape functions it is easy to creat different kinds of shapes:

  • Regular polygons:

    function polygon(x, y, radius, npoints) {
        var angle = TWO_PI / npoints;
        beginShape();
        for (var a = 0; a < TWO_PI; a += angle) {
           var sx = x + cos(a) * radius;
           var sy = y + sin(a) * radius;
           vertex(sx, sy);
        }
        endShape(CLOSE);
    }

  • Stars:

     function star(x, y, radius1, radius2, npoints) {
         var angle = TWO_PI / npoints;
         var halfAngle = angle/2.0;
         beginShape();
         for (var a = 0; a < TWO_PI; a += angle) {
             var sx = x + cos(a) * radius2;
             var sy = y + sin(a) * radius2;
             vertex(sx, sy);
             sx = x + cos(a+halfAngle) * radius1;
             sy = y + sin(a+halfAngle) * radius1;
             vertex(sx, sy);
          }
         endShape(CLOSE);
     }

2.4. Bezier

Function bezier(anchor1_x, anchor1_y, ctrl1_x, ctrl1_y, ctrl2_x, ctrl2_y, anchor2_x, anchor2_y) draws a cubic bezier on the screen.

2.5. 3D primitives

• Extruded rectangle: box(size) or box(x_size, y_size, z_size)
• Sphere: sphere(size) or sphere(x_size, y_size, z_size)