p5.js debugMode() Function

The debugMode() function in p5.js is used for visualizing 3D space by adding a grid that indicates the ground in of geometry. It can also show icons representing the 3 axes. The grid could be created with no parameters or customized depending on the size and offsets needed. The stroke and color can be specified using the stroke() and strokeWeight() functions. The icons of the grid and the axes would be based on the size of the current canvas.

Syntax:

debugMode()

OR

debugMode(mode)

OR

debugMode(mode, [gridSize], [gridDivisions], [xOff], 
                     [yOff], [zOff])

OR

debugMode(mode, [axesSize], [xOff], [yOff], [zOff])

OR

debugMode([gridSize], [gridDivisions], [gridXOff], [gridYOff],
[gridZOff], [axesSize], [axesXOff], [axesYOff], [axesZOff])

Parameters: This function has thirteen parameters as mentioned above and given below:

• mode: This is a constant that defines whether the mode is set to GRID or AXES.
• gridSize: It is a number that defines the size of one side of the grid. It is an optional parameter.
• gridDivisions: It is a number that defines the number of divisions in the grid. It is an optional parameter.
• xOff: It is a number that defines the x-axis offset from the origin. It is an optional parameter.
• yOff: It is a number that defines the y-axis offset from the origin. It is an optional parameter.
• zOff: It is a number that defines the z-axis offset from the origin. It is an optional parameter.
• axesSize: It is a number that defines the size of the icons of the axes. It is an optional parameter.
• gridXOff: It is a number that defines the offset of the grid in the x-axis. It is an optional parameter.
• gridYOff: It is a number that defines the offset of the grid in the y-axis. It is an optional parameter.
• gridZOff: It is a number that defines the offset of the grid in the z-axis. It is an optional parameter.
• axesXOff: It is a number that defines the offset of the x-axis line. It is an optional parameter.
• axesYOff: It is a number that defines the offset of the y-axis line. It is an optional parameter.
• axesZOff: It is a number that defines the offset of the z-axis line. It is an optional parameter.

The below example illustrates the debugMode() function in p5.js:

Example 1: Using the debug mode without any parameters.

Javascript

function setup() {

  // Set canvas size
  createCanvas(600, 600, WEBGL);

  // Set the camera
  camera(100, -40, 100, 0, 0, 0, 0, 1, 0);
  normalMaterial();

  // Set the debug mode
  debugMode();
}

function draw() {
  background(200);
  orbitControl();
  box()
}

Output:

Example 2: Using the GRID as the debug mode.

Javascript

function setup() {

  // Set canvas size
  createCanvas(600, 600, WEBGL);

  // Set the camera
  camera(100, -40, 100, 0, 0, 0, 0, 1, 0);
  normalMaterial();

  // Set the debugMode to GRID
  debugMode(GRID);
}

function draw() {
  background(200);
  orbitControl();
  box(70, 70, 70);
}

Output:

Example 3: Using the AXIS as the debug mode.

Javascript

function setup() {

  // Set canvas size
  createCanvas(600, 600, WEBGL);

  // Set the camera
  camera(100, -40, 100, 0, 0, 0, 0, 1, 0);
  normalMaterial();

  // Set the debugMode to AXES
  debugMode( AXES);
}

function draw() {
  background(200);
  orbitControl();
  box()
}

Output:

Example 4: Using the debug mode by specifying the grid size, grid divisions, and the offsets of the axis.

Javascript

function setup() {

  // Set canvas size
  createCanvas(600, 600, WEBGL);

  // Set the camera
  camera(100, -40, 100, 0, 0, 0, 1, 1, 1);
  normalMaterial();

  // Set the debugMode with the
  // respective parameters
  debugMode(GRID, 150, 10, 1, 1, 1);
}

function draw() {
  background(200);
  orbitControl();
  box()
}

Output:

Example 5: Using the debug mode by specifying the grid size, grid divisions, offsets of the axis, and the grid.

Javascript

function setup() {

  // Set canvas size
  createCanvas(600, 600, WEBGL);

  // Set the camera
  camera(100, -40, 100, 0, 0, 0, 1, 1, 1);
  normalMaterial();

  // Set the debugMode with the
  // respective parameters
 debugMode(150, 10, 0, 1, 0, 20, 1, -50, 1);

}

function draw() {
  background(200);
  orbitControl();
  noStroke();
  box()
}

Output:

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