Eventos

La librería p5.js nos proporciona información de eventos por medio de variables globales predefinidas.

Por ejemplo, cuando la variable global mouseIsPressed tiene el valor true significa que el usuario esta oprimiendo el mouse, cuando tienen el valor false significa que el usuario no está oprimiendo el botón del mouse.

De manera similar, las variables mouseX y mouseY tienen los valores de la posición actual del mouse.

Como ejemplo, el siguiente código cambia el color de relleno de las figuras cuando el mouse se presiona.

if (mouseIsPressed === true) {
    fill(0,0,0);
  } 
  if (mouseIsPressed === false) {
    fill(255,255,255);
  }

Ejemplo

Este ejemplo muestra una bola que cambia de color al oprimir el botón del mouse.

Intente realizar lo siguiente en el programa a continuación:

  • Explique qué hace el ejemplo.
  • Usando eventos dibuje una bola en la posición del mouse. Ojo, la bola dibujada es negra cuando se presiona el mouse y blanca en caso contrario.
  • Ahora cambie el programa para que se vea una sola bola en todo momento y para que siga el mouse solo cuando está presionado el botón

Recuerda: siempre puedes restaurar el programa original oprimiendo el botón Restaurar.




Código de ejemplo