Presentada por John Maeda
Hasta ahora has aprendido a pensar como un programador: escribir código con sentido, usar condicionales, repetir acciones con bucles y tomar decisiones con if. Todo eso ya lo tienes. Ahora toca dar un paso más: hacer visible el código.
En esta unidad vamos a trabajar la Programación Gráfica, que no es otra cosa que usar la programación para crear imágenes, animaciones, interacciones y arte digital. Pasamos del “el programa funciona” al “el programa se ve, se mueve y responde”. El ejemplo que vas a ver ahora —un Ping Pong hecho con p5.js— no está aquí para que lo copies, sino para que entiendas algo muy importante:
💡 Ese juego está hecho con los mismos conceptos que ya conoces
variables, condicionales, bucles, funciones…
la diferencia es que ahora el resultado es gráfico e interactivo.
¿Qué vamos a aprender en esta unidad?
A lo largo del tema vas a descubrir que dibujar con código es una forma muy potente de programar:
- Crearás puntos, líneas, figuras geométricas y composiciones visuales usando funciones.
- Harás que los programas respondan al ratón y al teclado.
- Aprenderás a transformar el espacio: mover, escalar y rotar objetos.
- Diseñarás patrones y arte generativo, donde el ordenador crea resultados únicos a partir de reglas.
- Trabajarás con imágenes, píxeles y filtros, entendiendo cómo se procesa una imagen por dentro.
- Verás cómo la programación se conecta con la naturaleza, usando ideas como Fibonacci o fractales.
Todo esto desarrolla no solo la parte técnica, sino también la creatividad computacional: pensar ideas propias, experimentar, equivocarte, mejorar… justo lo que hacen los programadores, diseñadores y desarrolladores de videojuegos reales.
¿Por qué p5.js?
Vamos a usar p5.js porque es una herramienta pensada para aprender:
- Usa JavaScript, el lenguaje que ya conoces.
- Da resultados visuales inmediatos, lo que motiva mucho más.
- Permite pasar de un dibujo simple a juegos, animaciones o arte digital sin cambiar de lenguaje.
Y ahora sí: vamos a empezar a dibujar, mover y crear con código 🚀