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
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA