Skip to content
Related Articles

Related Articles

p5.js | directionalLight() Function

View Discussion
Improve Article
Save Article
  • Last Updated : 27 Apr, 2020
View Discussion
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!