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
