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.
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:
Example 2: This example shows the colors for the different axes of the normal material.
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:
Online editor: https://editor.p5js.org/
Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Reference: https://p5js.org/reference/#/p5/normalMaterial
