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 )

O

pointLight( v1, v2, v3, position )

O

pointLight( color, x, y, z )

O

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

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/pointLight

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *