V4TIME/V4SKILL

Pipeline de Producción en p5.js

Cuándo usar

Úsalo cuando los usuarios soliciten: bocetos con p5.js, programación creativa, arte generativo, visualizaciones interactivas, animaciones en canvas, arte visual en el navegador, visualización de datos, efectos de shader, o cualquier proyecto en p5.js.

Qué contiene

Pipeline de producción para arte visual interactivo y generativo usando p5.js. Crea bocetos en el navegador, arte generativo, visualizaciones de datos, experiencias interactivas, escenas 3D, visuales reactivos al audio y gráficos en movimiento — exportados como HTML, PNG, GIF, MP4 o SVG. Cubre: renderizado 2D/3D, ruido y sistemas de partículas, campos de flujo, shaders (GLSL), manipulación de píxeles, tipografía cinética, escenas WebGL, análisis de audio, interacción con ratón/teclado y exportación headless de alta resolución.

Estándar Creativo

Esto es arte visual renderizado en el navegador. El canvas es el medio; el algoritmo es el pincel.

Antes de escribir una sola línea de código, articula el concepto creativo. ¿Qué comunica esta pieza? ¿Qué hace que el espectador deje de desplazarse? ¿Qué la diferencia de un ejemplo de tutorial de código? El prompt del usuario es un punto de partida — interprétalo con ambición creativa.

La excelencia desde el primer render no es negociable. El resultado debe ser visualmente impactante desde la primera carga. Si parece un ejercicio de tutorial de p5.js, una configuración predeterminada, o "programación creativa generada por IA", está mal. Repiénsalo antes de entregar.

Ve más allá del vocabulario de referencia. Las funciones de ruido, sistemas de partículas, paletas de color y efectos de shader en las referencias son un vocabulario inicial. Para cada proyecto, combina, superpone e inventa. El catálogo es una paleta de pinturas — tú escribes la pintura.

Sé proactivamente creativo. Si el usuario pide "un sistema de partículas", entrega un sistema de partículas con comportamiento de flocking emergente, ecos de estela fantasma, niebla de profundidad con paleta cambiante y un campo de ruido de fondo que respire. Incluye al menos un detalle visual que el usuario no haya pedido pero que apreciará.

Denso, en capas, considerado. Cada fotograma debe recompensar la contemplación. Nunca fondos blancos planos. Siempre jerarquía compositiva. Siempre color intencional. Siempre microdetalles que solo aparecen con una inspección cercana.

Estética cohesiva sobre cantidad de funciones. Todos los elementos deben servir a un lenguaje visual unificado: temperatura de color compartida, vocabulario de grosor de trazo consistente, velocidades de movimiento armoniosas. Un boceto con diez efectos no relacionados es peor que uno con tres que encajan entre sí.

Modos

Modo	Entrada	Salida	Referencia
Arte generativo	Semilla / parámetros	Composición visual procedimental (estática o animada)	references/visual-effects.md
Visualización de datos	Conjunto de datos / API	Gráficos interactivos, tablas, visualizaciones de datos personalizadas	references/interaction.md
Experiencia interactiva	Ninguna (el usuario controla)	Boceto guiado por ratón/teclado/táctil	references/interaction.md
Animación / gráficos en movimiento	Línea de tiempo / guión gráfico	Secuencias temporizadas, tipografía cinética, transiciones	references/animation.md
Escena 3D	Descripción del concepto	Geometría WebGL, iluminación, cámara, materiales	references/webgl-and-3d.md
Procesamiento de imágenes	Archivo(s) de imagen	Manipulación de píxeles, filtros, mosaico, puntillismo	references/visual-effects.md § Manipulación de Píxeles
Reactivo al audio	Archivo de audio / micrófono	Visuales generativos impulsados por sonido	references/interaction.md § Entrada de Audio

Stack

Un único archivo HTML autocontenido por proyecto. No requiere paso de compilación.

Capa	Herramienta	Propósito
Núcleo	p5.js 1.11.3 (CDN)	Renderizado en canvas, matemáticas, transformaciones, manejo de eventos
3D	Modo WebGL de p5.js	Geometría 3D, cámara, iluminación, shaders GLSL
Audio	p5.sound.js (CDN)	Análisis FFT, amplitud, entrada de micrófono, osciladores
Exportación	saveCanvas() / saveGif() / saveFrames() incorporados	Salida PNG, GIF, secuencia de fotogramas
Captura	CCapture.js (opcional)	Captura de video con velocidad de fotogramas determinista (WebM, GIF)
Headless	Puppeteer + Node.js (opcional)	Renderizado automatizado de alta resolución, MP4 mediante ffmpeg
SVG	p5.js-svg 1.6.0 (opcional)	Salida vectorial para impresión — requiere p5.js 1.x
Medios naturales	p5.brush (opcional)	Acuarela, carboncillo, bolígrafo — requiere p5.js 2.x + WEBGL
Textura	p5.grain (opcional)	Grano de película, superposiciones de textura
Fuentes	Google Fonts / loadFont()	Tipografía personalizada mediante OTF/TTF/WOFF2

Nota de Versión

p5.js 1.x (1.11.3) es el predeterminado: estable, bien documentado, la compatibilidad de librerías más amplia. Úsalo a menos que un proyecto requiera características de 2.x.

p5.js 2.x (2.2+) añade: async setup() reemplazando a preload(), modos de color OKLCH/OKLAB, splineVertex(), API .modify() de shader, fuentes variables, textToContours(), eventos de puntero. Requerido para p5.brush. Ver references/core-api.md § p5.js 2.0.

Pipeline

Cada proyecto sigue el mismo camino de 6 etapas:

CONCEPTO → DISEÑO → CÓDIGO → VISTA PREVIA → EXPORTACIÓN → VERIFICACIÓN

1. CONCEPTO — Articula la visión creativa: estado de ánimo, mundo de color, vocabulario de movimiento, qué hace esto único
2. DISEÑO — Elige modo, tamaño de canvas, modelo de interacción, sistema de color, formato de exportación. Mapa conceptual a decisiones técnicas
3. CÓDIGO — Escribe un único archivo HTML con p5.js en línea. Estructura: globales → preload() → setup() → draw() → ayudantes → clases → manejadores de eventos
4. VISTA PREVIA — Abre en el navegador, verifica la calidad visual. Prueba a la resolución objetivo. Comprueba el rendimiento
5. EXPORTACIÓN — Captura la salida: saveCanvas() para PNG, saveGif() para GIF, saveFrames() + ffmpeg para MP4, Puppeteer para lote headless
6. VERIFICACIÓN — ¿Coincide la salida con el concepto? ¿Es visualmente impactante al tamaño de visualización previsto? ¿Lo enmarcarías?

Dirección Creativa

Dimensiones Estéticas

Dimensión	Opciones	Referencia
Sistema de color	HSB/HSL, RGB, paletas con nombre, armonía procedimental, interpolación de degradados	references/color-systems.md
Vocabulario de ruido	Ruido Perlin, simplex, fractal (octavado), deformación de dominio, ruido curl	references/visual-effects.md § Ruido
Sistemas de partículas	Basados en física, flocking, dibujo de estelas, impulsados por atractores, siguiendo campos de flujo	references/visual-effects.md § Partículas
Lenguaje de formas	Primitivas geométricas, vértices personalizados, curvas Bezier, rutas SVG	references/shapes-and-geometry.md
Estilo de movimiento	Suavizado, basado en resortes, impulsado por ruido, simulación física, lerpeado, escalonado	references/animation.md
Tipografía	Fuentes del sistema, OTF cargadas, texto de partículas con textToPoints(), cinético	references/typography.md
Efectos de shader	Fragmento/vértice GLSL, shaders de filtro, post-procesamiento, bucles de retroalimentación	references/webgl-and-3d.md § Shaders
Composición	Cuadrícula, radial, proporción áurea, regla de tercios, dispersión orgánica, mosaico	references/core-api.md § Composición
Modelo de interacción	Seguimiento de ratón, clic para generar, arrastrar, estado del teclado, guiado por desplazamiento, entrada de micrófono	references/interaction.md
Modos de mezcla	BLEND, ADD, MULTIPLY, SCREEN, DIFFERENCE, EXCLUSION, OVERLAY	references/color-systems.md § Modos de Mezcla
Capas	Búferes fuera de pantalla createGraphics(), composición alfa, enmascaramiento	references/core-api.md § Búferes Fuera de Pantalla
Textura	Superficie Perlin, punteado, tramado, medios tonos, ordenación de píxeles	references/visual-effects.md § Generación de Texturas

Reglas de Variación por Proyecto

Nunca uses configuraciones predeterminadas. Para cada proyecto:

• Paleta de color personalizada — nunca fill(255, 0, 0) crudo. Siempre una paleta diseñada con 3-7 colores
• Vocabulario de grosor de trazo personalizado — acentos finos (0.5), estructura media (1-2), énfasis audaz (3-5)
• Tratamiento del fondo — nunca background(0) o background(255) simple. Siempre texturizado, degradado o en capas
• Variedad de movimiento — diferentes velocidades para diferentes elementos. Primario a 1x, secundario a 0.3x, ambiental a 0.1x
• Al menos un elemento inventado — un comportamiento de partícula personalizado, una aplicación novedosa de ruido, una respuesta de interacción única

Invención Específica del Proyecto

Para cada proyecto, inventa al menos uno de:

• Una paleta de color personalizada que coincida con el estado de ánimo (no un preajuste)
• Una combinación novedosa de campo de ruido (p. ej., ruido curl + deformación de dominio + retroalimentación)
• Un comportamiento de partícula único (fuerzas personalizadas, estelas personalizadas, generación personalizada)
• Un mecanismo de interacción que el usuario no solicitó pero que eleva la pieza
• Una técnica compositiva que cree jerarquía visual

Filosofía de Diseño de Parámetros

Los parámetros deben surgir del algoritmo, no de un menú genérico. Pregunta: "¿Qué propiedades de este sistema deberían ser ajustables?"

Buenos parámetros exponen el carácter del algoritmo:

• Cantidades — cuántas partículas, ramas, celdas (controla la densidad)
• Escalas — frecuencia de ruido, tamaño del elemento, espaciado (controla la textura)
• Ritmos — velocidad, tasa de crecimiento, decaimiento (controla la energía)
• Umbrales — ¿cuándo cambia el comportamiento? (controla el drama)
• Relaciones — proporciones, equilibrio entre fuerzas (controla la armonía)

Malos parámetros son controles genéricos no relacionados con el algoritmo:

• "color1", "color2", "tamaño" — sin sentido sin contexto
• Interruptores para efectos no relacionados
• Parámetros que solo cambian la estética, no el comportamiento

Cada parámetro debería cambiar cómo piensa el algoritmo, no solo cómo se ve. Un parámetro "turbulencia" que cambia las octavas de ruido es bueno. Un deslizador "tamaño de partícula" que solo cambia el radio de ellipse() es superficial.

Flujo de Trabajo

Paso 1: Visión Creativa

Antes de cualquier código, articula:

• Estado de ánimo / atmósfera: ¿Qué debería sentir el espectador? ¿Contemplativo? ¿Energizado? ¿Inquietante? ¿Juguetón?
• Historia visual: ¿Qué sucede con el tiempo (o con la interacción)? ¿Construir? ¿Decaer? ¿Transformar? ¿Oscilar?
• Mundo de color: ¿Cálido/frío? ¿Monocromático? ¿Complementario? ¿Cuál es el tono dominante? ¿El acento?
• Lenguaje de formas: ¿Curvas orgánicas? ¿Geometría afilada? ¿Puntos? ¿Líneas? ¿Mixto?
• Vocabulario de movimiento: ¿Deriva lenta? ¿Explosión repentina? ¿Pulso respiratorio? ¿Precisión mecánica?
• ¿Qué hace que ESTO sea diferente?: ¿Cuál es la única cosa que hace único a este boceto?

Mapea el prompt del usuario a elecciones estéticas. "Fondo generativo relajante" exige algo completamente diferente a "visualización de datos glitch".

Paso 2: Diseño Técnico

• Modo — cuál de los 7 modos de la tabla anterior
• Tamaño del canvas — apaisado 1920x1080, retrato 1080x1920, cuadrado 1080x1080, o responsivo windowWidth/windowHeight
• Renderizador — P2D (predeterminado) o WEBGL (para 3D, shaders, modos de mezcla avanzados)
• Velocidad de fotogramas — 60fps (interactivo), 30fps (animación ambiental), o noLoop() (generativo estático)
• Objetivo de exportación — visualización en navegador, PNG estático, bucle GIF, video MP4, vector SVG
• Modelo de interacción — pasivo (sin entrada), guiado por ratón, guiado por teclado, reactivo al audio, guiado por desplazamiento
• Interfaz de usuario para el espectador — para arte generativo interactivo, comienza desde templates/viewer.html que proporciona navegación por semillas, deslizadores de parámetros y descarga. Para bocetos simples o exportación de video, usa HTML simple

Paso 3: Codificar el Boceto

Para arte generativo interactivo (exploración de semillas, ajuste de parámetros): comienza desde templates/viewer.html. Lee la plantilla primero, mantén las secciones fijas (navegación de semillas, acciones), reemplaza el algoritmo y los controles de parámetros. Esto le da al usuario semilla anterior/siguiente/aleatoria/salto, deslizadores de parámetros con actualización en vivo y descarga PNG — todo cableado.

Para animaciones, exportación de video o bocetos simples: usa HTML simple:

Archivo HTML único. Estructura:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nombre del Proyecto</title>
  <script>p5.disableFriendlyErrors = true;</script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.min.js"></script>
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/addons/p5.sound.min.js"></script> -->
  <!-- <script src="https://unpkg.com/[email protected]"></script> -->  <!-- exportación SVG -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/ccapture.js-npmfixed/build/CCapture.all.min.js"></script> -->  <!-- captura de video -->
  <style>
    html, body { margin: 0; padding: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
<script>
// === Configuración ===
const CONFIG = {
  semilla: 42,
  // ... parámetros específicos del proyecto
};

// === Paleta de Colores ===
const PALETA = {
  fondo: '#0a0a0f',
  primario: '#e8d5b7',
  // ...
};

// === Estado Global ===
let particulas = [];

// === Precarga (fuentes, imágenes, datos) ===
function preload() {
  // fuente = loadFont('...');
}

// === Configuración ===
function setup() {
  createCanvas(1920, 1080);
  randomSeed(CONFIG.semilla);
  noiseSeed(CONFIG.semilla);
  colorMode(HSB, 360, 100, 100, 100);
  // Inicializar estado...
}

// === Bucle de Dibujo ===
function draw() {
  // Renderizar fotograma...
}

// === Funciones Auxiliares ===
// ...

// === Clases ===
class Particula {
  // ...
}

// === Manejadores de Eventos ===
function mousePressed() { /* ... */ }
function keyPressed() { /* ... */ }
function windowResized() { resizeCanvas(windowWidth, windowHeight); }
</script>
</body>
</html>

Patrones de implementación clave:

• Aleatoriedad con semilla: Siempre randomSeed() + noiseSeed() para reproducibilidad
• Modo de color: Usa colorMode(HSB, 360, 100, 100, 100) para un control de color intuitivo
• Separación de estado: CONFIG para parámetros, PALETA para colores, globales para estado mutable
• Entidades basadas en clases: Partículas, agentes, formas como clases con métodos update() + display()
• Búferes fuera de pantalla: createGraphics() para composición en capas, estelas, máscaras

Paso 4: Vista Previa e Iteración

• Abre el archivo HTML directamente en el navegador — no se necesita servidor para bocetos básicos
• Para loadImage()/loadFont() desde archivos locales: usa scripts/serve.sh o python -m http.server
• Panel de Rendimiento de Chrome DevTools para verificar 60fps
• Prueba en la resolución de exportación objetivo, no solo en el tamaño de la ventana
• Ajusta parámetros hasta que lo visual coincida con el concepto del Paso 1

… [truncado para traducción]