Open In App

p5.js directionalLight() Function

Improve
Improve
Like Article
Like
Save
Share
Report

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:
dirLight-toggle

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:
four-directional-lights

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



Last Updated : 23 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads