Eventos

Hasta ahora tus programas dibujaban, pero no reaccionaban. En el momento en el que usas eventos, el programa empieza a escuchar lo que haces: mover el ratón, hacer clic o pulsar una tecla. En p5.js no tienes que detectar nada a mano. El propio entorno se encarga de hacerlo y llama a ciertas funciones automáticamente cuando ocurre algo. Tú solo decides qué debe pasar.

Eventos de ratón

Para empezar, no necesitas conocerlos todos. Con estos tienes más que suficiente:

mousePressed() → se ejecuta cuando haces clic.
mouseMoved() → se ejecuta cuando mueves el ratón.
mouseDragged() → se ejecuta cuando mueves el ratón con el botón pulsado.

Ejemplo práctico: dibujar donde esté el ratón al hacer clic.

function setup() {
  createCanvas(400, 300);
  background(220);
}

function mousePressed() {
  circle(mouseX, mouseY, 30);
}

📌 Cada clic dibuja un círculo en la posición del ratón.

Eventos de teclado

El teclado sirve para controlar el programa.

El evento más usado es:

keyPressed() → se ejecuta cuando pulsas una tecla.

Ejemplo práctico: cambiar el color según la tecla.

function setup() {
  createCanvas(400, 300);
  background(220);
}

function keyPressed() {
  if (key === 'r') {
    background(255, 0, 0);
  }
  if (key === 'g') {
    background(0, 255, 0);
  }
}

📌 El programa reacciona según la tecla que pulses.

Variables de eventos (información en tiempo real)

p5.js mantiene variables que se actualizan solas y que usarás muchísimo:

mouseX, mouseY → posición actual del ratón.
key → tecla pulsada (como carácter).
keyCode → código de teclas especiales (flechas, ESC, etc.).

Ejemplo: seguir al ratón.

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(220);
  circle(mouseX, mouseY, 40);
}

📌 El círculo sigue al ratón en tiempo real.

Puntos Clave

No memorices funciones. Quédate con esto:

p5.js detecta eventos por ti
Tú escribes qué hacer cuando ocurren
Los eventos convierten un dibujo en algo interactivo

Aquí es donde la programación gráfica se vuelve realmente interesante: pasas de “mirar un dibujo” a interactuar con él. En el siguiente paso combinaremos eventos con condicionales y movimiento, y ya estaremos muy cerca de hacer videojuegos 🎮🚀

Dibujar