Open In App

p5.js ambientLight() Function

Improve
Improve
Like Article
Like
Save
Share
Report

The ambientLight() function in p5.js is used to create an ambient light with the specified color. Ambient light does not have any particular source. It comes from everywhere in the canvas and illuminates objects evenly.

Syntax:

ambientLight( v1, v2, v3, [alpha] )

OR

ambientLight( value )

OR

ambientLight( gray, [alpha] )

OR

ambientLight( values )

OR

ambientLight( color )

Parameters: This function accept 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.
  • alpha: It is a number which determines the alpha value of the color.
  • value: It is a string which defines the ambient light color.
  • gray: It is a number which defines the gray value of the ambient light.
  • values: It is an array of numbers which define the red, green, blue and alpha components of the ambient light color.
  • color: It is a p5.Color which defines the color of the ambient light.

Below examples illustrates the ambientLight() function in p5.js:

Example 1:




let newFont;
let pointLightEnable = false;
  
function preload() {
  newFont = loadFont('fonts/Montserrat.otf');
}
  
function setup() {
  createCanvas(600, 300, WEBGL);
  textFont(newFont, 18);
  
  graySlider = createSlider(0, 128, 64, 1);
  graySlider.position(20, 50);
  
  pointLightCheck = createCheckbox(
       "Enable Point Light", false);
  
  pointLightCheck.position(20, 80);
  
  // Toggle point light
  pointLightCheck.changed(() => {
    pointLightEnable = !pointLightEnable;
  });
}
  
function draw() {
  background("green");
  text("Move the slider to change the ambient"
        + " light's red value.", -285, -125);
  noStroke();
  shininess(15);
  if (pointLightEnable) {
    pointLight(0, 0, 255, -width / 2,
                    -height / 2, 250);
  }
  
  grayValue = graySlider.value();
  ambientLight(grayValue, 0, 0);
  specularMaterial(250);
  sphere(100);
}


Output:
red-value

Example 2:




let newFont;
let pointLightEnable = false;
  
function preload() {
  newFont = loadFont('fonts/Montserrat.otf');
}
  
function setup() {
  createCanvas(600, 300, WEBGL);
  textFont(newFont, 18);
  
  graySlider = createSlider(0, 128, 64, 1);
  graySlider.position(20, 50);
  
  pointLightCheck = createCheckbox(
        "Enable Point Light", false);
  
  pointLightCheck.position(20, 80);
  
  // Toggle point light
  pointLightCheck.changed(() => {
    pointLightEnable = !pointLightEnable;
  });
}
  
function draw() {
  background("green");
  text("Move the slider to change the ambient"
      + " light's gray value.", -285, -125);
  noStroke();
  shininess(15);
  if (pointLightEnable) {
    pointLight(255, 0, 0, -width / 2,
                    -height / 2, 250);
  }
  
  grayValue = graySlider.value();
  ambientLight(grayValue);
  specularMaterial(250);
  sphere(100);
}


Output:
gray-value

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/ambientLight



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