p5.js spotLight() Method

The spotLight() function in p5.js is used to create a spotlight with a given color, position, direction of light, angle and concentration. A scene can have a maximum of 5 spotlights active at one time. The coordinates of the spotlight can be set according to the below-given diagram.

Syntax: This method can be used with multiple parameters depending on the syntax.

spotLight(v1, v2, v3, x, y, z, rx, ry, rz, [angle], [conc])
spotLight(color, position, direction, [angle], [conc])
spotLight(v1, v2, v3, position, direction, [angle], [conc])
spotLight(color, x, y, z, direction, [angle], [conc])
spotLight(color, position, rx, ry, rz, [angle], [conc])
spotLight(v1, v2, v3, x, y, z, direction, [angle], [conc])
spotLight(v1, v2, v3, position, rx, ry, rz, [angle], [conc])
spotLight(color, x, y, z, rx, ry, rz, [angle], [conc])

Parameters: This function accept fifteen parameters as mentioned above and described below:

• v1: It is a number which determines the red or hue value relative to the current color mode.
• v2: It is a number which determines the green or saturation value relative to the current color mode.
• v3: It is a number which determines the blue or brightness value relative to the current mode.
• x: It is the position of the light on the x-axis.
• y: It is the position of the light on the y-axis.
• z: It is the position of the light on the z-axis.
• rx: It is the direction of light in the x-axis.
• ry: It is the direction of light in the y-axis.
• rz: It is the direction of light in the z-axis.
• angle: It provides the angle for light. The default value is PI/3.
• conc: It specifies the concentration value for the light. The default value is 100.
• color: It specifies the color of the light. It can either be color Array, CSS color string, or p5.Color value.
• position: It is a p5.Vector which specifies the position of the light.
• direction: It is a p5.Vector which specifies the direction of the light.

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

Example 1: This example show the spotlight at one specific position.

Javascript

function setup() {

  // Creating canvas with width
  // and height of 100
  createCanvas(100, 100, WEBGL);
}

function draw() {

  // Setting background colour
  // to black
  background(0);

  // Setting the spotlight
  spotLight(0, 250, 0, 20, 20,
            100, 0, 0, -1, Math.PI );
  noStroke();

  // Drawing a sphere to show
  // the spotlight
  sphere(40);
}

Output:

Example 2: This example illustrates how to change the spotlight position based on the mouse movement.

Javascript

function setup() {

  // Creating canvas with width
  // and height to 100
  createCanvas(100, 100, WEBGL);
}

function draw() {
  // Setting background colour
  // to black
  background(0);

  // Getting position based
  // on mouse movement
  let locX = mouseX - width / 2;
  let locY = mouseY - height / 2;

  // Setting the spotlight
  spotLight(0, 250, 0, locX, locY,
            100, 0, 0, -1, Math.PI );
  noStroke();

  // Drawing a sphere to show
  // the spotlight
  sphere(40);
}

Output:

Reference:https://p5js.org/reference/#/p5/spotLight