JavaScript con p5.js

p5.js es una librería de JavaScript pensada para crear arte generativo e interactivo en el navegador. En este proyecto encontrarás una serie de prácticas guiadas, paso a paso, para aprender a programar con p5.js creando composiciones visuales que reaccionan al ratón y al teclado.

Prácticas con p5.js

• 1. Diseño en papel
• 2. Esctructura: setup() y draw()
• 3. Formas en 2D
• 4. Interacción: mouseX y mouseY
• 5. La función map()
• 6. Modos de color: RGB y HSB
• 7. Componer más de una forma
• 8. Entrega y reto extra
• 9. Partícula rebotando: variables, random() e if
• 10. Varias partículas rebotando: arrays y for
• 11. Conectamos partículas: dist() y for anidado
• 12. Hazlo tuyo y entrega
• 13. Cohete: objeto literal
• 14. Explosión en destello: variable booleana
• 15. Explosión con chispas: push() y splice()
• 16. Fuegos artificiales: mousePressed() y funciones auxiliares
• 17. Hazlo tuyo: fuegos artificiales

Práctica 1 — Lienzo interactivo (PDF)

Práctica 2 — Partículas conectadas (PDF)

Práctica 3 — Fuegos artificiales (PDF)

Nota

Este material ha sido creado por Esther Gordo. Licencia Creative Commons Attribution-ShareAlike 4.0 International.