p5.js | Función direccionalLuz()

La función direccionalLight() en p5.js se usa para crear una luz direccional con el color y la dirección especificados. Los rayos de la luz direccional viajan infinitamente a lo largo de su camino a través de la escena, por lo que la distancia de la luz no importa. Puede haber un máximo de 5 luces direccionales activas en una escena.

Sintaxis:

directionalLight( v1, v2, v3, position )

O

directionalLight( color, x, y, z )

O

directionalLight( color, position )

O

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

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.
• posición: Es un p5.Vector que denota la dirección de la luz direccional.
• color: Es un p5.Color o string de color que define el color de la luz direccional.
• x: Es un número que define la dirección del eje x de la luz.
• y: Es un número que define la dirección del eje y de la luz.
• z: Es un número que define la dirección del eje z de la luz.

El siguiente ejemplo ilustra la función direccionalLight() 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, 18);
  
  directionalLightCheck = createCheckbox(
        "Enable Directional Lights", false);
  
  directionalLightCheck.position(20, 80);
  
  // Toggle point light
  directionalLightCheck.changed(() => {
    directionalLightEnable = !directionalLightEnable;
  });
}
  
function draw() {
  background('green');
  text("Click on the checkbox to enable directional"
        + " lights in the scene.", -285, -125);
  
  if (directionalLightEnable) {
    directionalLight(255, 0, 0, height / 2, width / 2, -250);
  }
  noStroke();
  sphere(80);
}

Producción:

Ejemplo 2:

let newFont;
let directionalLightEnable = false;
  
function preload() {
  newFont = loadFont('fonts/Montserrat.otf');
}
  
function setup() {
  createCanvas(600, 300, WEBGL);
  textFont(newFont, 18);
}
  
function draw() {
  background('black');
  text("This sketch has 4 directional lights "
    + "from different directions", -285, -125);
  
  directionalLight(255, 0, 0, height / 2, width / 2, -1);
  directionalLight(0, 0, 255, -height / 2, -width / 2, -1);
  directionalLight(0, 255, 0, -height / 2, width / 2, -1);
  directionalLight(255, 255, 255, height / 2, -width / 2, -1);
  
  noStroke();
  sphere(100);
}

Producción:

Editor en línea: https://editor.p5js.org/

Configuración del entorno: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

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