Función p5.js debugMode()

La función debugMode() en p5.js se usa para visualizar el espacio 3D agregando una cuadrícula que indica el suelo de la geometría. También puede mostrar iconos que representan los 3 ejes. La cuadrícula podría crearse sin parámetros o personalizarse según el tamaño y las compensaciones necesarias. El trazo y el color se pueden especificar mediante las funciones stroke() y strokeWeight(). Los iconos de la cuadrícula y los ejes se basarían en el tamaño del lienzo actual.

Sintaxis:

debugMode()

O

debugMode(mode)

O

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

O

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

O

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

Parámetros: esta función tiene trece parámetros, como se mencionó anteriormente y se indican a continuación:

• mode: Esta es una constante que define si el modo se establece en GRID o AXES.
• gridSize: Es un número que define el tamaño de un lado de la cuadrícula. Es un parámetro opcional.
• gridDivisions: Es un número que define el número de divisiones en la grilla. Es un parámetro opcional.
• xOff: Es un número que define el desplazamiento del eje x desde el origen. Es un parámetro opcional.
• yOff: Es un número que define el desplazamiento del eje y desde el origen. Es un parámetro opcional.
• zOff: Es un número que define el desplazamiento del eje z desde el origen. Es un parámetro opcional.
• axesSize: Es un número que define el tamaño de los iconos de los ejes. Es un parámetro opcional.
• gridXOff: Es un número que define el desplazamiento de la cuadrícula en el eje x. Es un parámetro opcional.
• gridYOff: Es un número que define el desplazamiento de la cuadrícula en el eje y. Es un parámetro opcional.
• gridZOff: Es un número que define el desplazamiento de la cuadrícula en el eje z. Es un parámetro opcional.
• axesXOff: Es un número que define el desplazamiento de la línea del eje x. Es un parámetro opcional.
• axesYOff: Es un número que define el desplazamiento de la línea del eje y. Es un parámetro opcional.
• axesZOff: Es un número que define el desplazamiento de la línea del eje z. Es un parámetro opcional.

El siguiente ejemplo ilustra la función debugMode() en p5.js:

Ejemplo 1: Usar el modo de depuración sin ningún parámetro.

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()
}

Producción:

Ejemplo 2: uso de GRID como modo de depuración.

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);
}

Producción:

Ejemplo 3: uso de AXIS como modo de depuración.

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()
}

Producción:

Ejemplo 4: Usar el modo de depuración especificando el tamaño de la cuadrícula, las divisiones de la cuadrícula y las compensaciones del eje.

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()
}

Producción:

Ejemplo 5: Usar el modo de depuración especificando el tamaño de la cuadrícula, las divisiones de la cuadrícula, las compensaciones del eje y la cuadrícula.

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()
}

Producción:

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