p5.js | función pointLight()

La función pointLight() en p5.js se usa para crear un punto de luz con el color y la posición especificados en la escena. Una escena puede tener un máximo de 5 puntos de luz activos a la vez.

Sintaxis:

pointLight( v1, v2, v3, x, y, z )

pointLight( v1, v2, v3, position )

pointLight( color, x, y, z )

pointLight( color, position )

Parámetros: Esta función acepta ocho parámetros como se mencionó anteriormente y se describe a continuación:

v1: Es un número que determina el valor de rojo o matiz relativo a la gama de colores actual.
v2: Es un número que determina el valor de verde o de saturación relativo a la gama de colores actual.
v3: Es un número que determina el valor de azul o brillo relativo a la gama de colores actual.
x: Es un número que determina la posición del eje x de la luz.
y: Es un número que determina la posición del eje y de la luz.
z: Es un número que determina la posición del eje z de la luz.
posición: Es p5.Vector que define la posición de la luz.
color: Es una string de color o p5.Color que define el color del punto de luz.

El siguiente ejemplo ilustra la función pointLight() en p5.js:

Ejemplo 1:

let newFont;
let directionalLightEnable = false;
  
function preload() {
  newFont = loadFont('fonts/Montserrat.otf');
}
  
function setup() {
  createCanvas(600, 300, WEBGL);
  textFont(newFont, 16);
  
  redSlider = createSlider(0, 255, 128, 1);
  redSlider.position(20, 50);
  
  greenSlider = createSlider(0, 255, 128, 1);
  greenSlider.position(20, 80);
  
  blueSlider = createSlider(0, 255, 128, 1);
  blueSlider.position(20, 110);
}
  
function draw() {
  background('green');
  text("Move the sliders to change the point light's red, "+
                        "green and blue values", -285, -125);
  noStroke();
  
  redValue = redSlider.value();
  greenValue = greenSlider.value();
  blueValue = blueSlider.value();
  
  // Create a point light with the selected light color
  pointLight(redValue, greenValue, blueValue, 100, 0, 150);
  
  ambientMaterial(255);
  
  // Create the sphere on which the point light will work
  sphere(100);
}

Producción:
pointLight-slider-color

Ejemplo 2:

let newFont;
let directionalLightEnable = false;
  
function preload() {
  newFont = loadFont('fonts/Montserrat.otf');
}
  
function setup() {
  createCanvas(600, 300, WEBGL);
  textFont(newFont, 16);
  
  xPosSlider = createSlider(-150, 150, 100, 1);
  xPosSlider.position(20, 50);
  
  yPosSlider = createSlider(-300, 300, 0, 1);
  yPosSlider.position(20, 80);
  
  zPosSlider = createSlider(0, 250, 150, 1);
  zPosSlider.position(20, 110);
  
}
  
function draw() {
  background('green');
  text("Change the sliders to move the point light position "+
                          "along x, y and z axis", -285, -125);
  noStroke();
  
  xPositionValue = xPosSlider.value();
  yPositionValue = yPosSlider.value();
  zPositionValue = zPosSlider.value();
  
  // Create a point light at the selected location
  pointLight(255, 0, 0, xPositionValue, yPositionValue, zPositionValue);
  
  // Create a sphere to show the demonstrate
  // of the point light location
  translate(xPositionValue, yPositionValue, zPositionValue);
  sphere(10);
  translate(-xPositionValue, -yPositionValue, -zPositionValue);
  
  specularMaterial(255);
  
  // Create the sphere on which the point light will work
  sphere(100);
}

Producción:
PointLight-posición del control deslizante