🧩 Qué es / qué hace
Concepto central
algorithmic-art es un skill para crear arte algorítmico/generativo usando p5.js con randomness controlada por seed y exploración interactiva de parámetros. La skill parte de una «filosofía algorítmica» —no de plantillas— para generar flujos, campos, partículas y formas emergentes que existen como sistemas vivos, no como imágenes estáticas.
Lo que crea la skill
- →Flow fields — campos vectoriales guiados por ruido de Perlin que dirigen partículas por trayectorias orgánicas
- →Sistemas de partículas — nubes de partículas con física propia: velocidad, aceleración, vida, color
- →Arte con seed — misma seed = mismo arte. Reproducibilidad total para uso en producción
- →Exploración interactiva — controles deslizantes y controles para variar parámetros en tiempo real en el navegador
Lo que NO es
- ✗No copia estilos de artistas existentes (evita infringir los derechos de autor)
- ✗No usa templates prediseñados: siempre parte de una filosofía original
- ✗No es una imagen estática: el canvas permanece activo y se anima en bucle
- ✗No es CSS puro: requiere JavaScript y la biblioteca p5.js
💡 Filosofía algorítmica: El skill empieza deduciendo una "filosofía algorítmica": no una lista de formas, sino un sistema de comportamiento: cómo se relacionan las partículas, qué fuerzas existen y qué surge de la interacción. Eso es lo que genera arte original.
🎣 Cuándo se activa
Claude Code activa algorithmic-art cuando detecta en tus solicitudes términos relacionados con el arte computacional o generativo. La descripción de la skill es precisa:
Disparadores exactos de la description
En qué momento del proyecto activas:
Sección hero diferenciada
Cuando la landing page necesita un fondo generativo, no una imagen estática
Fondo de sección
Secciones de «funciones» o «acerca de» con un canvas animado sutilmente en el fondo
Identidad visual interactiva
Cuando la marca necesita un «símbolo vivo»: arte generativo como firma
Arte independiente
Exploración interactiva con sliders: el usuario ajusta la seed y los parámetros en tiempo real
✓ PÍDELO cuando:
- ✓Quieres un fondo hero que no existe en bancos de imágenes
- ✓Necesitas arte reproducible (misma seed = mismo resultado)
- ✓Quieres explorar variaciones en tiempo real con sliders
- ✓Necesitas un canvas ligero que se ejecute en el browser sin servidor
✗ EVITA cuando:
- ✗El cliente exige una ilustración específica (usa imagen)
- ✗El rendimiento es crucial en dispositivos de baja potencia
- ✗El fondo necesita texto nítido superpuesto (contraste difícil)
- ✗Solo quieres una animación CSS: usa animation-designer
🚀 Cómo mejora tus páginas
🎯 El impacto directo: El arte algorítmico bien utilizado transforma una página genérica en algo memorable: el canvas está vivo, es único para esa marca y no cuesta nada en licencias de imágenes.
Fondos generativos para hero
Uno <canvas> posicionado como position: absolute detrás del hero. Flow field en bucle suave, colores de la paleta de la marca, seed fijo = siempre el mismo aspecto. Cero imágenes externas.
Secciones con animaciones de fondo
Sistemas de partículas discretos detrás de las tarjetas de funcionalidades. Opacidad baja, movimiento suave: la sección «respira» sin distraer. Se pausa en prefers-reduced-motion.
Exploración interactiva
Sliders de parámetros expuestos al usuario: velocidad del campo, número de partículas, seed. El visitante cocrea el arte: alto engagement en páginas de producto.
✓ Aplicaciones que funcionan:
- ✓Hero con canvas de ancho completo + texto centrado encima (z-index)
- ✓Página 404 creativa — arte generativo a pantalla completa
- ✓Pantalla de carga con partículas mientras se cargan los datos
- ✓Sección "sobre" con un fondo de noise field muy opaco
✗ Errores comunes:
- ✗Canvas detrás de texto blanco sobre un fondo claro = ilegible
- ✗p5.js sin carga diferida en una página pesada — bloquea LCP
- ✗Demasiadas partículas en móviles: usa mediaQuery para reducirlas
- ✗Colores aleatorios sin una paleta definida: aspecto caótico
Estructura de capas: canvas generativo (absoluto) + texto (relativo, z-index mayor)
⚙️ Cómo funciona por dentro
Stack técnico
p5.js
Engine de renderizado 2D: API de canvas de alto nivel. CDN o npm.
randomSeed() / noiseSeed()
Funciones nativas de p5.js. Seed entero → resultado determinista.
noise(x, y, z)
Ruido de Perlin suave. Base de todos los flow fields y organic shapes.
createSlider() / createInput()
Controles HTML de p5.dom: controles deslizantes para ajustar parámetros en tiempo real.
Proceso de generación
Deducing the Conceptual Seed
Claude lee tu pedido y construye una «filosofía algorítmica» — la metáfora de comportamiento que guía el sistema.
Creación de una filosofía algorítmica
Define fuerzas, entidades y comportamientos emergentes, no formas. El arte surge del sistema, no del diseño.
Implementación con P5.js
Código con setup() + draw() + clase Particle + campo de noise. Seed configurable.
Interactive Artifact Creation
Sliders expuestos. Parámetros fijos vs. variables definidos. Output: HTML standalone o snippet para insertar.
⚠️ Contexto fork: El SKILL.md define context: fork. Esto significa que el skill opera en una instancia de contexto separada: Claude lee una plantilla propia (STEP 0) antes de implementar. No interrumpas el proceso con mensajes adicionales durante la generación.
let particles = [];
const SEED = 42;
const NUM_PARTICLES = 300;
function setup() {
createCanvas(windowWidth, windowHeight);
// seed determinístico
randomSeed(SEED);
noiseSeed(SEED);
for (let i = 0; i < NUM_PARTICLES; i++) {
particles.push(new Particle());
}
}
function draw() {
background(10, 22, 34, 25); // trail
particles.forEach(p => { p.update(); p.display(); });
}
class Particle {
constructor() {
this.pos = createVector(random(width), random(height));
this.vel = createVector(0, 0);
}
update() {
let angle = noise(this.pos.x * 0.003, this.pos.y * 0.003) * TWO_PI * 2;
this.vel = p5.Vector.fromAngle(angle).mult(1.5);
this.pos.add(this.vel);
if (this.pos.x < 0 || this.pos.x > width) this.pos.x = random(width);
if (this.pos.y < 0 || this.pos.y > height) this.pos.y = random(height);
}
display() {
stroke(56, 189, 248, 80); strokeWeight(1.2); point(this.pos.x, this.pos.y);
}
}
💬 Ejemplo práctico + PROMPT listo
Escenario
Estás creando la landing page de una fintech. La hero section se ve plana: un gradiente azul con texto. Quieres un fondo generativo que transmita "flujo de datos", dinámico y controlado, con los colores de la marca (#1e40af, #38bdf8). Debe funcionar con una seed fija para que el visual siempre sea el mismo.
Crea un fondo generativo con p5.js para la hero section de mi landing page de fintech.
Filosofía: flujo de datos financieros — partículas que se mueven como datos en una red y convergen en nodos de procesamiento. Sensación de orden que emerge del caos.
Requisitos técnicos:
- seed: 1847 (fijo, reproducible)
- colores: #1e40af (azul), #38bdf8 (cian), fondo #0a0f1e
- ~200 partículas, flow field con noise(x*0.003, y*0.003)
- canvas absoluto detrás del texto (z-index: 0)
- respetar prefers-reduced-motion
- sliders: velocidad y cantidad de partículas
- HTML independiente que puedo insertar como <section>
Lo que entrega la skill:
Variaciones para explorar
🌊 Campo de flujo clásico
Las partículas siguen un campo vectorial de Perlin. Visual fluido y orgánico.
🕸️ Red conectada
Puntos unidos por líneas cuando están cerca. Sensación de grafo vivo.
🌀 Orbital
Partículas orbitando atractores. Sistema de fuerzas gravitacionales.
🧬 Combina con / límites
Como último módulo de la Ruta 2, algorithmic-art cierra el ciclo de identidad visual. Se posiciona en relación con las demás skills del curso de una forma muy específica:
canvas-design
Módulo 2.3 · Ruta 2
canvas-design trabaja con Canvas API puro para composiciones estáticas o semiestáticas: logos, banners, imágenes exportables. El arte algorítmico complementa con sistemas vivos y animados.
Usa juntos: canvas-design para assets de marca exportables → algorithmic-art para el fondo animado que los envuelve en la página.
animation-designer
Módulo 3.1 · Ruta 3
animation-designer usa Framer Motion y CSS para animar elementos de UI con movimiento predefinido y orquestado. algorithmic-art genera movimiento emergente sin coreografía explícita.
Usa juntos: canvas generativo como fondo → animation-designer para los elementos de UI que aparecen encima con spring animations.
theme-factory + brand-guidelines
Módulos 2.1 y 2.2
theme-factory define la paleta de la marca. brand-guidelines codifica los patrones visuales. algorithmic-art usa esta paleta como entrada: los colores del flow field son los colores de la marca.
Flujo ideal: theme-factory → brand-guidelines → algorithmic-art. El arte generativo expresa la identidad de la marca en movimiento.
Posición en el ecosistema de skills
algorithmic-art HACE
- ✓Arte generativo original, basado en sistemas
- ✓Fondos animados para páginas
- ✓Canvas interactivo con parámetros expuestos
- ✓Seed determinístico para producción
NO sustituye
- ✗canvas-design (assets exportables, composiciones)
- ✗animation-designer (movimiento de UI con Framer Motion)
- ✗remotion (video renderizado fotograma a fotograma)
- ✗3d-animation-creator (Three.js, WebGL 3D)
🔗 Combinación poderosa: brand-guidelines → algorithmic-art → animation-designer. La marca define los colores, el arte generativo crea el fondo dinámico y Framer Motion anima los elementos de UI sobre el canvas. Resultado: una página con identidad visual coherente en movimiento.
📋 Resumen del Módulo 2.4
Qué aprendiste
- ✓algorithmic-art usa p5.js con randomness controlada por seed para arte original y reproducible
- ✓El skill parte de una filosofía algorítmica — sistema de comportamiento, no plantilla
- ✓Flow fields y los sistemas de partículas crean fondos generativos para hero sections y secciones
- ✓Sliders interactivos exponen parámetros para exploración en tiempo real
- ✓El canvas queda en z-index: 0, el texto encima — estructura de capas esencial
- ✓canvas-design (estático) y animation-designer (UI motion) completan el ecosistema
Ruta 3 — Siguiente
🎞️ Medios
Dominaste la Ruta 2: identidad visual, paletas, brand guidelines, canvas estático y arte generativo. Ahora avanza a la Ruta 3 — Medios: animation-designer, 3d-animation-creator, Remotion y seedance+HyperFrames/FFmpeg para transformar tus páginas en videos y animaciones profesionales.
Ruta 2 completada