p5.js ortho() Function

The ortho() function in p5.js is used to set the orthographic projection of a 3D sketch. In this projection, all the objects with the same dimension appear the same size, regardless of their distance from the camera. The p5.ortho() method comes under the camera section in p5.js library. The optional parameters can be used to specify the frustum of the camera in all the planes.

Syntax:

ortho([left], [right], [bottom], [top], [near], [far])

Parameters: This function accepts six parameters as mentioned above and described below:

• left: It is a number that defines the camera’s frustum left plane. This is an optional parameter.
• right: It is a number that defines the camera’s frustum right plane. This is an optional parameter.
• bottom: It is a number that defines the camera’s frustum bottom plane. This is an optional parameter.
• top: It is a number that defines the camera’s frustum top plane.  This is an optional parameter.
• near: It is a number that defines the camera’s frustum near the plane. This is an optional parameter.
• far: It is a number that defines the camera’s frustum far plane. This is an optional parameter.

Note: Here, parameters surrounded by squared brackets are optional. And if no parameters were given then the default parameters used in ortho() are :

ortho(-width/2, width/2, -height/2, height/2)

The below examples illustrate the ortho() function in p5.js:

Example 1: Without using orthographic projection.

Code:

Javascript

function setup() {
  // Set the canvas
  createCanvas(600, 600, WEBGL);
}

function draw() {
  // Set the background
  background(175);

  // Set the point light of the sketch
  pointLight(255, 255, 255, 0, -200, 200);

  // Create multiple cubes in the plane
  for (let x = -200; x < 200; x += 50) {
    push();
    translate(x, 0, x - 200);

    rotateZ(frameCount * 0.02);
    rotateX(frameCount * 0.02);
    normalMaterial();
    box(50);
    pop();
  }
}

Output:

Without using orthographic projection

Example 2: Using an orthographic projection with the ortho() function.

Code:

Javascript

function setup() {

  // Set the canvas
  createCanvas(600, 600, WEBGL);
}

function draw() {

  // Set the background
  background(175);

  // Use the orthographic projection
  ortho(-200, 200, 200, -200, 0.1, 1000);
  pointLight(255, 255, 255, 0, -200, 200);

  // Create multiple cubes in the plane
  for (let x = -200; x < 200; x += 50) {
    push();
    translate(x, 0, x - 200);

    rotateZ(frameCount * 0.02);
    rotateX(frameCount * 0.02);
    normalMaterial();
    box(50);
    pop();
  }
}

Output:

Using Orthographic Projection

Example 3:

Code:

Javascript

function setup() {

  // creating canvas with given dimensions
  createCanvas(400, 400,WEBGL);

  // calling ortho method with default parameters
  ortho();
}

function draw() {
  // creating a window with white background
  background(255);

  // used to control the objects in projection
  orbitControl();

  // it will the fill the object with colors,
  // so we can easily distinguish between two objects
  normalMaterial();

  // push will save the current drawing
  push();

  // translate will transform
  // the object by given width and height
  translate(30, 0);

  // box will draw box on the screen
  // with width,height and depth of 100
  box(100);

  // pop will load the saved drawing
  pop();

  // push will save the current drawing
  push();

  // translate will transform
  // the object by given width and height
  translate(-150,0);

  // box will draw box on the screen
  // with width,height and depth of 100
  box(50);

  // pop will load the saved drawing
  pop();
}

Output:

Using Orthographic Projection

Reference: https://p5js.org/reference/#/p5/ortho