La programación gráfica es una rama de la informática que se centra en la creación y manipulación de imágenes, figuras y diseños visuales mediante el uso de código. A diferencia de la programación convencional, que suele ser más abstracta y orientada a la lógica, la programación gráfica permite una expresión más artística y visual. Combina los principios de las matemáticas, el diseño gráfico y la programación para generar experiencias visuales interactivas.
Antes de ponernos a dibujar y crear cosas espectaculares, necesitamos sentar las bases del entorno en el que vamos a trabajar. Tranquilo: no hay nada nuevo y raro, es el mismo JavaScript que ya conoces, solo que ahora tiene "poderes" gráficos.
Cuando entras en el editor de p5.js te encuentras con tres partes clave:
Hasta ahora escribías código línea a línea. Ahora vamos a introducir un concepto muy importante: las funciones. Una función es simplemente:
👉 un bloque de código al que le ponemos un nombre para poder usarlo cuando queramos.
En p5.js hay dos funciones que vas a usar todo el tiempo, aunque de momento no vamos a crearlas nosotros:
setup() → se ejecuta una sola vez, al empezar.draw() → se ejecuta muchas veces por segundo, como si fuera un bucle infinito.
No hace falta entender ahora cómo se crean por dentro. Quédate con esta idea:
🧠 p5.js funciona llamando a funciones que ya vienen preparadas.
Y tú solo tienes que escribir código dentro de ellas.
Segundo concepto nuevo: los objetos. Por ahora, no vamos a crear objetos, aunque sí vamos a usarlos. Un objeto es algo que:
Aquí tienes un ejemplo ya has utilizado antes:
console.log("Hola mundo");Esto es lo que sucede aquí:
console → es un objetolog() → es un método de ese objeto. significa: “usa algo que pertenece a…”Es decir, “console, usa tu método log para mostrar esto”. En p5.js pasa exactamente lo mismo:
Para empezar la programación gráfica lo importante ahora es:
objeto.metodo())Con eso ya puedes:
Más adelante profundizaremos, pero ahora mismo esto es más que suficiente para empezar a crear.
Obra publicada con Licencia Creative Commons Reconocimiento Compartir igual 4.0