Método p5.js spotLight()

La función spotLight() en p5.js se utiliza para crear un foco con un color, una posición, una dirección de la luz, un ángulo y una concentración determinados. Una escena puede tener un máximo de 5 focos activos a la vez. Las coordenadas del foco se pueden configurar de acuerdo con el diagrama a continuación.

Sintaxis: este método se puede utilizar con varios parámetros según la sintaxis.

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])

Parámetros: Esta función acepta quince 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 en relación con el modo de color actual.
• v2: Es un número que determina el valor de verde o de saturación relativo al modo de color actual.
• v3: Es un número que determina el valor de azul o brillo relativo al modo actual.
• x: Es la posición de la luz en el eje x.
• y: Es la posición de la luz en el eje y.
• z: Es la posición de la luz en el eje z.
• rx: Es la dirección de la luz en el eje x.
• ry: Es la dirección de la luz en el eje y.
• rz: Es la dirección de la luz en el eje z.
• ángulo: Proporciona el ángulo para la luz. El valor predeterminado es PI/3.
• conc: Especifica el valor de concentración de la luz. El valor predeterminado es 100.
• color: Especifica el color de la luz. Puede ser array de colores, string de colores CSS o valor p5.Color.
• posición: Es un p5.Vector que especifica la posición de la luz.
• dirección: Es un p5.Vector que especifica la dirección de la luz.

Los siguientes ejemplos ilustran la función spotLight() en p5.js:

Ejemplo 1: Este ejemplo muestra el foco en una posición específica.

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);
}

Producción:

Ejemplo 2: Este ejemplo ilustra cómo cambiar la posición del foco en función del movimiento del mouse.

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);
}

Producción:

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