p5.js | Función normalMaterial()

La función normalMaterial() en p5.js se usa para crear un material normal para un objeto. Un material normal no se ve afectado por ninguna luz y tampoco refleja ninguna luz. La superficie que mira hacia el eje x se vuelve roja, la superficie que mira hacia el eje y se vuelve verde y la superficie que mira hacia el eje z se vuelve azul. Por lo general, se utiliza como material de marcador de posición para la depuración.

Sintaxis:

normalMaterial()

Parámetros: Esta función no acepta ningún parámetro.

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

Ejemplo 1: Este ejemplo muestra que el material normal no se ve afectado por la luz.

let newFont;
let hasLight = true;
  
function preload() {
  newFont = loadFont('fonts/Montserrat.otf');
}
  
function setup() {
  createCanvas(600, 300, WEBGL);
  textFont(newFont, 16);
  
  lightCheckbox = createCheckbox('Enable Light', true);
  lightCheckbox.position(30, 250);
  lightCheckbox.changed(() => hasLight = !hasLight);
}
  
function draw() {
  background('white');
  fill('black');
  
  text("Use the mouse to rotate/move the scene", -285, -125);
  noStroke();
  orbitControl();
  
  // Enable lights when the checkbox is checked
  if (hasLight)
    directionalLight(color('red'), height / 2, width / 2, -250);
  
  // Draw the sphere which uses ambient material
  ambientMaterial(255);
  translate(-100, 0, 0);
  sphere(80);
  translate(100, 0, 0);
  
  // Draw sphere which uses normal material
  normalMaterial();
  translate(100, 0, 0);
  sphere(80);
  translate(-100, 0, 0);
}

Producción:
normalMat-comparison

Ejemplo 2: Este ejemplo muestra los colores para los diferentes ejes del material normal.

let newFont;
let hasNormalMaterial = true;
  
function preload() {
  newFont = loadFont('fonts/Montserrat.otf');
}
  
function setup() {
  createCanvas(600, 300, WEBGL);
  textFont(newFont, 16);
}
  
function draw() {
  background('white');
  fill('black');
  
  text("Use the mouse to rotate/move the scene", -285, -125);
  // text("Select directional light color", -285, -100);
  shininess(10);
  noStroke();
  orbitControl();
  
  // Use the normal material
  normalMaterial();
  
  // Create the box
  rotateX(60)
  rotateY(120)
  rotateZ(60)
  box(100);
}

Producción:
normalMat-colors-movement