Mini Paint con p5.js
- Duración:
- 00:30
- Agrupamiento:
- En parejas
Crea un programa en p5.js que funcione como un Paint sencillo.
El programa debe permitir:
- Dibujar a mano alzada con el ratón.
- Cambiar el color del pincel usando el teclado.
- Borrar el dibujo al pulsar una tecla.
No se busca un Paint perfecto, sino que funcione correctamente y sea fácil de usar.
1️⃣ Preparar el lienzo
- Crea el
canvas. - Pon un
background()solo una vez para que el dibujo no se borre. - Define un grosor de trazo visible.
2️⃣ Dibujar con el ratón
- Usa el evento
mouseDragged(). - Dibuja líneas usando
mouseX,mouseY,pmouseXypmouseY.
3️⃣ Cambiar de color con el teclado
- Usa
keyPressed(). - Asigna distintos colores a distintas teclas (por ejemplo
r,g,b).
💡 Usa variables para guardar el color actual.
4️⃣ Borrar el dibujo
- Elige una tecla para limpiar el canvas.
- Al pulsarla, vuelve a pintar el fondo con
background().
5️⃣ Comprobar que todo funciona
- ¿Puedes dibujar sin que se borre?
- ¿Cambia el color cuando pulsas una tecla?
- ¿Se limpia el lienzo cuando toca?
👉 Si todo eso funciona, has creado tu primer programa interactivo completo.
