The directionalLight() function in p5.js is used to create a directional light with the specified color and direction. The rays of the directional light travel infinitely along their path through the scene, hence the distance of the light does not matter. There can be a maximum of 5 directional lights active in a scene.
Syntax:
directionalLight( v1, v2, v3, position )
OR
directionalLight( color, x, y, z )
OR
directionalLight( color, position )
OR
directionalLight( v1, v2, v3, x, y, z )
Parameters: This function accepts eight parameters as mentioned above and described below:
- v1: It is a number which determines the red or hue value relative to the current color range.
- v2: It is a number which determines the green or saturation value relative to the current color range.
- v3: It is a number which determines the blue or brightness value relative to the current color range.
- position: It is a p5.Vector that denotes the direction of the directional light.
- color: It is a p5.Color or color string that defines the color of the directional light.
- x: It is a number that defines the x-axis direction of the light.
- y: It is a number that defines the y-axis direction of the light.
- z: It is a number that defines the z-axis direction of the light.
Below example illustrates the directionalLight() function in p5.js:
Example 1:
let newFont; let directionalLightEnable = false; function preload() { newFont = loadFont('fonts/Montserrat.otf'); } function setup() { createCanvas(600, 300, WEBGL); textFont(newFont, 18); directionalLightCheck = createCheckbox( "Enable Directional Lights", false); directionalLightCheck.position(20, 80); // Toggle point light directionalLightCheck.changed(() => { directionalLightEnable = !directionalLightEnable; }); } function draw() { background('green'); text("Click on the checkbox to enable directional" + " lights in the scene.", -285, -125); if (directionalLightEnable) { directionalLight(255, 0, 0, height / 2, width / 2, -250); } noStroke(); sphere(80); } |
Output:
Example 2:
let newFont; let directionalLightEnable = false; function preload() { newFont = loadFont('fonts/Montserrat.otf'); } function setup() { createCanvas(600, 300, WEBGL); textFont(newFont, 18); } function draw() { background('black'); text("This sketch has 4 directional lights " + "from different directions", -285, -125); directionalLight(255, 0, 0, height / 2, width / 2, -1); directionalLight(0, 0, 255, -height / 2, -width / 2, -1); directionalLight(0, 255, 0, -height / 2, width / 2, -1); directionalLight(255, 255, 255, height / 2, -width / 2, -1); noStroke(); sphere(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/directionalLight
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
