p5.js | función cambiada()

La función change() se activa cada vez que cambia el valor de un elemento. Se puede utilizar para detectar cambios en elementos de casillas de verificación o seleccionar elementos. También se puede usar para adjuntar un detector de eventos a un elemento.

Sintaxis:

changed(fxn)

Parámetros: Esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación.

  • fxn: esta es la función de devolución de llamada que se llamaría cada vez que se detecta un cambio. Se puede pasar ‘falso’, lo que impediría que la función de disparo anterior dejara de disparar.

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

Ejemplo 1: detección de cambios en un elemento de casilla de verificación

let red = 0;
let green = 0;
let blue = 0;
  
function setup() {
  createCanvas(600, 300);
  
  // create input boxes
  redCheckbox = createCheckbox('Red', false);
  redCheckbox.position(20, 40)
  redCheckbox.changed(redChanged);
  
  greenCheckbox = createCheckbox('Green', false);
  greenCheckbox.position(100, 40)
  greenCheckbox.changed(greenChanged);
  
  blueCheckbox = createCheckbox('Blue', false);
  blueCheckbox.position(180, 40)
  blueCheckbox.changed(blueChanged);
}
  
function draw() {
  clear()
  
  // change the fill color based
  // on current rgb the values
  fill(red, green, blue);
  rect(20, 80, 300, 300);
  
  textSize(20);
  text("Check the boxes to change the fill color", 10, 20);
}
  
  
// functions for each of the colors
function redChanged() {
  if (this.checked())
    red = 128;
  else
    red = 0;
}
  
function greenChanged() {
  if (this.checked())
    green = 128;
  else
    green = 0;
}
  
function blueChanged() {
  if (this.checked())
    blue = 128;
  else
    blue = 0;
}

Producción:

Ejemplo 2: Detectar cambios en un elemento seleccionado

let red = 0;
let green = 0;
let blue = 0;
   
function setup() {
  createCanvas(350, 300);
   
  textSize(18)
  text("Select the color to change the background color", 10, 20);
   
  // create select element
  selectElem = createSelect();
  selectElem.position(20, 40);
  selectElem.option('Slecet');
  selectElem.option('Red');
  selectElem.option('Green');
  selectElem.option('Blue');
  selectElem.changed(changeColor);
}
   
function changeColor() {
  clear();
  colorVal = this.value();
   
  if (colorVal == "Red") {
    background("red");
  }
  else if (colorVal == "Green") {
    background("green");
  }
  else if (colorVal == "Blue") {
    background("blue");
  }
  else
    background(128);
   
  text("Select the color to change the background color", 10, 20);
}

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

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 *