p5.js | función createButton()

La función createButton() se usa para crear un elemento de botón en el DOM (Document Object Model). La función .size() se usa para establecer el tamaño del elemento del botón. La función .mousePressed() se usa para especificar el comportamiento del botón del mouse al presionarlo.
Nota: Esta función requiere la biblioteca p5.dom. Así que agregue la siguiente línea en la sección principal del archivo index.html .

<script src=
"https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js">
</script>

Sintaxis:

createButton( label, value )

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

etiqueta: este parámetro contiene la etiqueta que se muestra en el botón.
value: este parámetro contiene el valor del botón.

Valor devuelto: Devuelve un elemento de puntero que contiene el objeto de Node creado.

Nota: este elemento de botón se puede vincular con varios eventos de JavaScript, como presionar el mouse, hacer clic con el mouse, soltar el mouse, etc.

Ejemplo: este ejemplo usa la función createButton() para cambiar el color de fondo usando el elemento de botón p5.js.

// Create a variable for button object
var color_button;
   
// Create a function to change the background-color
function change_background() {
      
    // Pick a random number for r value
    r = random(255);
      
    // Pick a random number for g value
    g = random(255);
      
    // Pick a random number for b value
    b = random(255);
      
    // Set a random background-color
    background(r, g, b);
}
   
function setup() {
      
    // Create a canvas
    createCanvas(400, 400);
      
    // Set an initial background-color
    background(50);
      
    // Create the button
    color_button = createButton("Change Color");
      
    // Position the button
    color_button.position(150, 200);
      
    // When the button is clicked change_background()
    // function is called
    color_button.mouseClicked(change_background);
}

Producción: