Arte generativo con p5.js: guía para principiantes

p5.js es una biblioteca de JavaScript de código abierto que permite crear arte generativo, animaciones interactivas y visualizaciones en el navegador sin instalar nada. Con este recurso aprenderás a abrir el editor online, dibujar tus primeras formas, añadir movimiento e introducir aleatoriedad — los cuatro fundamentos del arte generativo.

Qué es p5.js y por qué usarlo para arte generativo

p5.js es la reinterpretación en JavaScript de Processing, el entorno de programación creativa creado en 2001 por Casey Reas y Ben Fry en el MIT Media Lab. En 2013, Lauren Lee McCarthy —artista y docente de UCLA— desarrolló p5.js con el objetivo de llevar los principios de Processing al navegador web, haciéndolo accesible sin instalación ni configuración de entorno.

Cuatro razones concretas para elegirlo como primer entorno de arte generativo:

• Sin instalación: el editor oficial funciona en el navegador en editor.p5js.org. El código se ejecuta y el resultado aparece al instante.
• Documentación extensa en español: la comunidad de p5.js ha traducido la referencia oficial y existe material de aprendizaje en castellano producido por el propio equipo de Processing Foundation.
• Curva de entrada baja, techo alto: un sketch básico cabe en 10 líneas; los mismos conceptos escalan a instalaciones interactivas complejas. Tyler Hobbs, uno de los artistas de arte generativo más reconocidos del circuito NFT y de galería, construyó su serie Fidenza con herramientas derivadas de Processing.
• Versión 2.0 disponible desde 2025: p5.js 2.0 —lanzado en abril de 2025— añade soporte completo para fuentes variables, shaders en JavaScript, nuevos espacios de color (LAB, OKLab) y un sistema unificado de eventos de puntero. La versión 1.x sigue siendo soportada y es la más usada en tutoriales existentes; la 2.0 se volverá la versión por defecto del editor online en agosto de 2026.

Configurar el entorno: editor online vs. local

Para empezar, la opción más directa es el editor online. Para proyectos más complejos o trabajo offline, la instalación local es preferible.

Editor online (recomendado para principiantes):

1. Ir a editor.p5js.org.
2. Crear una cuenta gratuita para poder guardar los sketches.
3. El editor tiene dos paneles: el código a la izquierda, el resultado visual a la derecha. El botón Play ejecuta el sketch.
4. La consola inferior muestra errores y mensajes de console.log().

Entorno local:

1. Instalar VS Code y la extensión Live Server.
2. Descargar p5.js desde p5js.org/download o usar el CDN en el HTML: <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.min.js"></script>.
3. Crear un archivo index.html que cargue la biblioteca y un archivo sketch.js con el código.
4. Abrir con Live Server para ver los cambios en tiempo real.

La diferencia práctica: el editor online es más rápido para explorar; el entorno local permite trabajar con archivos externos (imágenes, sonido, fuentes) y proyectos con múltiples archivos.

Tu primer sketch: líneas, formas y colores

Todo sketch en p5.js tiene dos funciones base: setup(), que se ejecuta una sola vez al inicio, y draw(), que se ejecuta en bucle. Un sketch mínimo funcional:

function setup() {
  createCanvas(600, 400);
  background(20);
}

function draw() {
  fill(255, 100, 50);
  noStroke();
  ellipse(300, 200, 80, 80);
}

Este código crea un canvas de 600×400 píxeles, fondo casi negro, y dibuja un círculo naranja en el centro. Los conceptos que introduce:

• createCanvas(ancho, alto) — define las dimensiones del área de dibujo.
• background(valor) — pinta el fondo. Un número entre 0–255 es una escala de grises; tres valores son RGB.
• fill(r, g, b) — color de relleno para las formas siguientes.
• noStroke() — elimina el contorno de las formas.
• ellipse(x, y, ancho, alto) — dibuja una elipse centrada en (x, y). Con ancho = alto el resultado es un círculo.

Otras funciones de forma básicas: rect(x, y, w, h) para rectángulos, line(x1, y1, x2, y2) para líneas, triangle(x1, y1, x2, y2, x3, y3) para triángulos. El sistema de coordenadas tiene el origen (0,0) en la esquina superior izquierda, con x creciendo hacia la derecha e y hacia abajo — diferente a la geometría cartesiana clásica.

Añadir movimiento: la función draw() y animaciones básicas

draw() se ejecuta por defecto a 60 fotogramas por segundo. Esto convierte cualquier variable que cambie con el tiempo en una animación. El patrón más directo es usar la variable integrada frameCount —que incrementa en 1 en cada fotograma— como motor de cambio:

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(20, 20, 30);
  let x = (frameCount * 2) % width;
  fill(100, 200, 255);
  noStroke();
  ellipse(x, height / 2, 40, 40);
}

El círculo se mueve horizontalmente de izquierda a derecha y vuelve al inicio al llegar al borde. El operador % (módulo) es fundamental en arte generativo para crear ciclos y evitar que los valores salgan del rango visible.

Otra variable integrada útil es mouseX y mouseY, que devuelven la posición del cursor en tiempo real. Sustituir la posición fija del círculo por mouseX, mouseY convierte el sketch en una herramienta de dibujo interactiva con dos palabras.

Para controlar la velocidad de la animación: frameRate(24) en setup() reduce los fotogramas por segundo, lo que da una sensación más cinematográfica o deliberada. frameRate() sin argumento devuelve los fps actuales —útil para diagnóstico de rendimiento.

Aleatoriedad y arte generativo: la función random()

La diferencia entre un sketch animado y arte generativo en sentido estricto suele ser la aleatoriedad: la capacidad del sistema de producir resultados distintos en cada ejecución sin que el artista especifique cada detalle. La función central es random():

• random(max) — devuelve un número decimal entre 0 y max.
• random(min, max) — devuelve un número entre min y max.
• random(array) — devuelve un elemento aleatorio del array.

Ejemplo de sistema generativo simple — 100 círculos con posición, tamaño y opacidad aleatorias, regenerados en cada ejecución:

function setup() {
  createCanvas(800, 600);
  background(10);
  noLoop();

  for (let i = 0; i < 100; i++) {
    let x = random(width);
    let y = random(height);
    let d = random(5, 60);
    let alpha = random(80, 255);
    fill(180, 100, random(200, 255), alpha);
    noStroke();
    ellipse(x, y, d, d);
  }
}

noLoop() en setup() detiene el bucle de draw() — el resultado se genera una sola vez. Esto es el patrón base del arte generativo estático: una composición diferente en cada apertura del sketch.

Para composiciones repetibles, randomSeed(número) fija la semilla del generador de números pseudoaleatorios. El mismo número de semilla produce siempre la misma composición — un mecanismo fundamental para las series generativas editadas (como las que usan artistas como Tyler Hobbs o Vera Molnár en sus procesos digitales).

Ejemplos inspiradores de artistas que usan p5.js

La comunidad de p5.js incluye artistas con trayectorias documentadas en festivales, galerías y plataformas de arte digital:

• Lauren Lee McCarthy — creadora de p5.js y artista cuya práctica examina sistemas de vigilancia y automatización. Su trabajo SOMEONE recibió el Golden Nica de Ars Electronica.
• Tyler Hobbs — conocido por su serie Fidenza, construida con flujo de campo (flow fields) en Processing/p5.js. Su trabajo es una referencia técnica para quienes combinan aleatoriedad controlada con estética visual precisa.
• Melissa Wiederrecht — artista de arte generativo que trabaja con p5.js y ha exhibido en contextos de arte digital y NFT. Es parte del grupo de artistas documentados en exhibiciones que vinculan Processing y p5.js.
• Aleksandra Jovanić — artista que trabaja regularmente con p5.js, documentada en la exhibición Compositions in Code del Museum of the Moving Image (Nueva York).

El repositorio de sketches públicos en editor.p5js.org es en sí mismo un archivo de referencia: miles de proyectos abiertos que muestran cómo otros resolvieron problemas de visualización concretos.