Durante mucho tiempo asociamos la programación con cálculos, bases de datos, sistemas empresariales y procesos estrictamente técnicos. Sin embargo, el código también puede utilizarse como un lenguaje para dibujar, experimentar, componer y producir imágenes.
En ese territorio se encuentra p5.js, una biblioteca de JavaScript creada para acercar la programación a artistas, diseñadores, educadores, estudiantes y personas interesadas en explorar nuevas formas de expresión visual.
Con p5.js, una línea deja de ser solamente una línea. Puede responder al movimiento del cursor, cambiar de color, multiplicarse, girar, transformarse o formar parte de un sistema capaz de generar cientos de composiciones distintas.
El código deja entonces de ser una herramienta invisible y se convierte en parte de la obra.
¿Qué es p5.js?
p5.js es una biblioteca gratuita y de código abierto basada en JavaScript. Su propósito es facilitar el aprendizaje de la programación mediante la creación de dibujos, animaciones, experiencias interactivas y proyectos audiovisuales directamente en el navegador.
La comunidad de p5.js la describe como una herramienta amigable para aprender a programar y hacer arte. Está pensada para que dibujar mediante código resulte tan intuitivo como realizar un boceto en un cuaderno, pero incorporando las posibilidades propias del entorno digital: movimiento, sonido, interacción, aleatoriedad y transformación.
No es necesario comenzar siendo especialista en programación. La curiosidad, la disposición para experimentar y el interés por comprender cómo se construye una imagen son puntos de partida suficientes.
La biblioteca cuenta, además, con documentación abierta, ejemplos visuales y un editor web oficial que permite escribir y ejecutar código sin instalar programas adicionales.
Dibujar estableciendo reglas
Cuando dibujamos manualmente, tomamos decisiones continuamente: dónde colocar una línea, qué tamaño tendrá una forma, qué color utilizar y cómo organizar los elementos dentro del espacio.
Con p5.js también tomamos esas decisiones, pero las expresamos mediante instrucciones.
Podemos indicarle al programa:
- Crea un lienzo de determinadas dimensiones.
- Coloca un círculo en una posición específica.
- Repite esa figura veinte veces.
- Cambia su tamaño de manera aleatoria.
- Utiliza colores de una paleta determinada.
- Haz que las formas reaccionen al movimiento del cursor.
- Guarda el resultado como una imagen.
El programa ejecuta las reglas que hemos definido. Si introducimos variaciones o valores aleatorios, un mismo sistema puede producir resultados diferentes cada vez que se ejecuta.
Esta manera de trabajar es la base de buena parte del arte generativo: el creador no diseña únicamente una imagen final, sino también el conjunto de instrucciones que permite producirla.
La estructura básica de un proyecto
Un proyecto realizado con p5.js suele denominarse sketch, una palabra que podemos traducir como boceto. Este término expresa muy bien la naturaleza experimental de la herramienta: escribir una idea, ejecutarla, observar el resultado y modificarla.
Dos funciones aparecen constantemente en los primeros proyectos:
setup()
La función setup() se ejecuta una sola vez cuando inicia el programa. Se utiliza para preparar el proyecto, crear el lienzo y establecer las condiciones iniciales.
draw()
La función draw() se ejecuta repetidamente mientras el proyecto está activo. Gracias a este ciclo podemos producir movimiento, animaciones y respuestas interactivas.
La documentación oficial explica que setup() se utiliza para las tareas iniciales y que draw() funciona como un ciclo continuo después de esa configuración. La velocidad real depende del dispositivo y de la complejidad del proyecto.
Este sería un ejemplo sencillo:
function setup() {
createCanvas(600, 600);
background(245);
}
function draw() {
noStroke();
let tamano = random(10, 60);
fill(
random(80, 220),
random(80, 180),
random(120, 240),
70
);
circle(mouseX, mouseY, tamano);
}
En este pequeño programa, createCanvas() crea un lienzo de 600 × 600 píxeles. Cada vez que movemos el cursor sobre el lienzo, aparece un círculo con tamaño y color variables.
El resultado no está completamente predeterminado. Hemos establecido una estructura, pero cada interacción produce una composición distinta.
Ese equilibrio entre orden y variación es una de las cualidades más fascinantes de p5.js.
Del dibujo estático a la imagen viva
En un programa convencional de dibujo, normalmente colocamos cada elemento directamente sobre el lienzo. En p5.js podemos diseñar las condiciones que determinarán cómo aparecerán esos elementos.
Una figura puede depender de:
- La posición del cursor.
- El tiempo transcurrido.
- La velocidad de movimiento.
- Un valor matemático.
- Una secuencia aleatoria.
- La información almacenada en una lista.
- El sonido captado por un micrófono.
- Una imagen o un video.
- La interacción de la persona que observa la obra.
Esto permite desarrollar desde composiciones geométricas sencillas hasta sistemas de partículas, paisajes generativos, patrones, tipografías experimentales, visualizaciones de datos y experiencias audiovisuales.
p5.js también puede trabajar con elementos HTML, sonido, imágenes y gráficos tridimensionales, por lo que sus posibilidades se extienden mucho más allá del dibujo bidimensional.
¿Qué relación tiene con la arquitectura y el diseño?
La arquitectura y la programación comparten más principios de los que inicialmente imaginamos.
Ambas trabajan con:
- Geometría.
- Proporción.
- Repetición.
- Modulación.
- Jerarquía.
- Sistemas.
- Parámetros.
- Reglas de organización.
- Relaciones entre las partes y el conjunto.
Un patrón de fachada, una retícula estructural, una modulación espacial o la distribución repetitiva de ciertos componentes pueden entenderse como sistemas basados en reglas.
p5.js permite trasladar esa lógica a un entorno visual y experimental. Podemos estudiar ritmos, densidades, patrones, crecimiento, transformación y variaciones cromáticas sin dibujar manualmente cada alternativa.
Desde mi experiencia en arquitectura y BIM, encuentro especialmente interesante esa relación. En BIM construimos modelos organizados mediante información, parámetros y dependencias. En el arte generativo también creamos sistemas, aunque su propósito puede ser visual, expresivo o experimental.
En ambos casos, no trabajamos solamente con objetos aislados: diseñamos relaciones.
El valor del azar controlado
Una de las funciones más utilizadas en la programación creativa es random(), que permite generar valores aleatorios.
Esto no significa renunciar al control creativo. Por el contrario, significa determinar dentro de cuáles límites puede producirse la variación.
Podemos establecer que:
- Una forma aparezca únicamente dentro de una zona.
- Los colores pertenezcan a una paleta específica.
- El tamaño se mantenga dentro de ciertos valores.
- Ningún elemento salga del lienzo.
- Las composiciones conserven una estructura reconocible.
- Cada resultado sea diferente sin perder identidad.
El artista define el territorio y el sistema explora las posibilidades que existen dentro de él.
Por eso prefiero hablar de azar controlado. La obra no surge de una casualidad absoluta, sino de una conversación entre intención, reglas y variación.
Crear no consiste únicamente en obtener un resultado
Cuando trabajamos con p5.js, el proceso adquiere tanta importancia como la imagen final.
Cada modificación permite comprender cómo una instrucción afecta al conjunto. Cambiar un número puede transformar el ritmo de una composición. Alterar una condición puede producir un comportamiento completamente inesperado. Una equivocación puede revelar una solución visual que no habíamos imaginado.
La programación creativa nos invita a observar, probar y aprender mediante iteraciones.
El error deja de ser únicamente un problema que debe corregirse. En ocasiones se convierte en una posibilidad que merece explorarse.
¿Cómo comenzar?
La manera más sencilla de iniciar es utilizar el editor web de p5.js. Desde allí podemos crear un proyecto, escribir el código, ejecutarlo y observar inmediatamente el resultado.
Para los primeros ejercicios recomiendo avanzar en este orden:
- Crear el lienzo.
- Dibujar puntos, líneas y formas básicas.
- Aprender a utilizar color y transparencia.
- Modificar posiciones y tamaños mediante variables.
- Repetir elementos utilizando ciclos.
- Incorporar valores aleatorios.
- Agregar movimiento.
- Crear respuestas al mouse o al teclado.
- Organizar el código mediante funciones.
- Exportar y documentar los resultados.
Los tutoriales oficiales de p5.js incluyen ejercicios progresivos para aprender a crear formas, manejar variables, incorporar movimiento y agregar interactividad.
No es necesario comprender todo desde el principio. Es mejor comenzar con una forma sencilla, modificar un valor y observar qué sucede.
Una nueva manera de pensar el dibujo
p5.js no sustituye el dibujo manual, la pintura, la fotografía ni las herramientas tradicionales de diseño. Añade una nueva posibilidad: crear imágenes mediante sistemas capaces de evolucionar, reaccionar y producir variaciones.
El lápiz traza una línea.
El código puede definir cómo nace esa línea, cómo se desplaza, cuándo desaparece, qué otras líneas genera y de qué manera responde a quien la observa.
Aprender p5.js no consiste solamente en aprender una biblioteca de programación. También implica descubrir otra forma de pensar la composición, el movimiento, la geometría y el proceso creativo.
En los próximos artículos exploraremos paso a paso sus herramientas fundamentales y desarrollaremos ejercicios que conecten programación, diseño, arquitectura y arte generativo.
Porque una obra no es solamente el resultado.
También es el sistema que la hace posible.