PTENES
MÓDULO 2.4 · ÚLTIMO DE LA RUTA

🌀 algorithmic-art

Crea arte generativo original con p5.js —flow fields, sistemas de partículas, randomness con seed y exploración interactiva de parámetros— directamente en tus páginas, como fondos animados y secciones dinámicas.

6
Temas
~30
Minutos
Avanzado
Nivel
Generativo
Categoría
seed(42) aleatoriedad controlada ① SEED p5.js · Noise Field ② FLOW FIELD + PARTÍCULAS <canvas> fondo hero sección activa fondo animado ③ RENDER algorithmic-art · Arte generativo original con p5.js
1

🧩 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.

p5.js
Engine de renderizado
Ruido de Perlin
Base de los campos
seed()
Reproducibilidad
emergencia
Sistemas vivos
2

🎣 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

"crear arte usando código"
"generative art"
"arte algorítmico"
"flow fields"
"particle systems"
"seeded randomness"

En qué momento del proyecto activas:

A

Sección hero diferenciada

Cuando la landing page necesita un fondo generativo, no una imagen estática

B

Fondo de sección

Secciones de «funciones» o «acerca de» con un canvas animado sutilmente en el fondo

C

Identidad visual interactiva

Cuando la marca necesita un «símbolo vivo»: arte generativo como firma

D

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
disparador
palabras clave en el mensaje
fondo hero
caso de uso #1
independiente
artefacto interactivo
identidad
símbolo de marca vivo
3

🚀 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
canvas · z-index: 0 · position: absolute · inset: 0 Título del hero z-index: 10 · relative fondo generativo texto encima · legible

Estructura de capas: canvas generativo (absoluto) + texto (relativo, z-index mayor)

z-index
canvas debajo del texto
opacidad
arte discreto
paleta
colores de la marca
movimiento reducido
accesibilidad
4

⚙️ 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

1

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.

2

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.

3

Implementación con P5.js

Código con setup() + draw() + clase Particle + campo de noise. Seed configurable.

4

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.

estructura típica — sketch.js p5.js
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);
  }
}
setup()
inicialización
draw()
bucle a 60fps
noise()
Campo de Perlin
context: fork
plantilla propia
5

💬 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.

PROMPT — pégalo en Claude Code algorithmic-art

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:

→Archivo HTML con p5.js vía CDN, listo para insertar
→Clase Particle con update()/display() limpios y comentados
→Seed configurable en la parte superior del archivo como constante
→Sliders de parámetros funcionando en tiempo real
→Media query para prefers-reduced-motion (pausa el canvas)
→Arte 100 % original — sin referencias a artistas existentes

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.

seed fijo
prod-ready
controles deslizantes
exploración en vivo
independiente
fragmento integrable
filosofía
arte original
6

🧬 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.

canvas-design
estático → generativo
animation-designer
UI sobre el canvas
brand-guidelines
paleta como entrada
Ruta 3
próximo: Medios

📋 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

4
Skills dominados
24
Temas cubiertos