p5.js normalMaterial() Function

Last Updated : 12 Jul, 2025
The normalMaterial() function in p5.js is used to create a normal material for an object. A normal material is not affected by any light and also does not reflect any light. The surface facing the x-axis becomes red, the surface facing the y-axis becomes green and the surface facing the z-axis becomes blue. It is usually used as a placeholder material for debugging. Syntax: 
normalMaterial()
Parameters: This function does not accept any parameters. Below example illustrates the normalMaterial() function in p5.js: Example 1: This example shows that the normal material is not affected by light. javascript 
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);
}
Output: normalMat-comparison Example 2: This example shows the colors for the different axes of the normal material. javascript 
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);
}
Output: normalMat-colors-movement Online editor: https://editor.p5js.org/ Environment Setup: https://www.geeksforgeeks.org/javascript/p5-js-soundfile-object-installation-and-methods/ Reference: https://p5js.org/reference/#/p5/normalMaterial
Comment

Explore