p5.js | Función emissiveMaterial()

La función emissiveMaterial() en p5.js se usa para crear un material emisivo para una geometría con el color dado. La emisividad de un objeto le da la apariencia de que el objeto está brillando. Un material emisivo aún se mostraría con toda su fuerza incluso si no hubiera luz en la escena, a diferencia de los materiales ambientales o especulares.

Sintaxis:

emissiveMaterial( v1, [v2], [v3], [a] )

O

emissiveMaterial( color )

Parámetros: esta función acepta cuatro parámetros, como se mencionó anteriormente y se describe a continuación:

  • v1: Es un número que determina el valor de gris, o 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. Es un parámetro opcional.
  • v3: Es un número que determina el valor de azul o brillo relativo a la gama de colores actual. Es un parámetro opcional.
  • a: Es un número que denota la opacidad del material. Es un parámetro opcional.
  • color: Es un p5.Color o string de color que define el color del material.

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

Ejemplo: El siguiente ejemplo muestra que el material emisivo siempre se muestra independientemente de la luz ambiental presente.

let newFont;
let hasAmbientLight = true;
let currentEmissiveColor = "red";
  
function preload() {
  newFont = loadFont('fonts/Montserrat.otf');
}
  
function setup() {
  createCanvas(600, 300, WEBGL);
  textFont(newFont, 16);
  
  // Create checkbox to enable/disable ambient light
  redCheckbox = createCheckbox('Enable Ambient Light', true);
  redCheckbox.position(30, 250);
  redCheckbox.changed(() => hasAmbientLight = !hasAmbientLight);
  
  // Create a selector for selecting the directional light color
  lightColorSel = createSelect();
  lightColorSel.position(30, 80);
  lightColorSel.option('red');
  lightColorSel.option('green');
  lightColorSel.option('blue');
  lightColorSel.changed(() => {
    currentEmissiveColor = lightColorSel.value();
  });
}
  
function draw() {
  background('white');
  fill('black');
  
  text("Select an option below to set the emissive material color",
                                                        -285, -125);
  text("Select emissive material color", -285, -100);
  noStroke();
  
  // Enable ambient light if the checkbox is enabled
  if (hasAmbientLight)
    ambientLight(0, 0, 255);
  
  // Draw sphere which uses emissive material
  emissiveMaterial(currentEmissiveColor);
  translate(-100, 0, 0);
  sphere(50);
  translate(100, 0, 0);
  
  // Draw sphere which uses ambient material
  ambientMaterial(255);
  translate(100, 0, 0);
  sphere(50);
  translate(-100, 0, 0);
}

Producción:
emissive-toggle

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

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 *