🧩 O que é / o que faz
Conceito Central
algorithmic-art é um skill de criação de arte algorítmica/generativa usando p5.js com randomness controlada por seed e exploração interativa de parâmetros. O skill parte de uma "filosofia algorítmica" — não de templates — para gerar fluxos, campos, partículas e formas emergentes que existem como sistemas vivos, não imagens estáticas.
O que o skill cria
- →Flow fields — campos vetoriais guiados por ruído de Perlin que dirigem partículas em trajetórias orgânicas
- →Particle systems — nuvens de partículas com física própria: velocidade, aceleração, vida, cor
- →Arte com seed — mesma seed = mesma arte. Reprodutibilidade total para uso em produção
- →Exploração interativa — sliders e controles para variar parâmetros em tempo real no browser
O que NÃO é
- ✗Não copia estilos de artistas existentes (evita violação de copyright)
- ✗Não usa templates prontos — parte sempre de uma filosofia original
- ✗Não é imagem estática — o canvas vive e anima em loop
- ✗Não é CSS puro — requer JavaScript e a biblioteca p5.js
💡 Filosofia algorítmica: O skill começa deduzindo um "algorithmic philosophy" — não uma lista de formas, mas um sistema de comportamento: como partículas se relacionam, que forças existem, o que emerge da interação. É isso que gera arte original.
🎣 Quando dispara
O Claude Code aciona algorithmic-art quando detecta nos seus pedidos termos relacionados a arte computacional ou generativa. A description do skill é precisa:
Gatilhos exatos da description
Em que momento do projeto você ativa:
Hero section diferenciada
Quando a landing page precisa de fundo generativo, não de imagem estática
Background de seção
Seções "features" ou "sobre" com canvas animado sutilmente ao fundo
Identidade visual interativa
Quando a marca precisa de um "símbolo vivo" — arte generativa como assinatura
Artefato standalone de arte
Exploração interativa com sliders: o usuário ajusta seed e parâmetros em tempo real
✓ PEÇA quando:
- ✓Quer fundo hero que não existe em banco de imagens
- ✓Precisa de arte reprodutível (mesma seed = mesmo resultado)
- ✓Quer explorar variações em tempo real com sliders
- ✓Precisa de canvas leve que rode no browser sem servidor
✗ EVITE quando:
- ✗O cliente exige uma ilustração específica (use imagem)
- ✗Performance é crítica em dispositivos de baixo poder
- ✗O fundo precisa de texto nítido por cima (contraste difícil)
- ✗Quer apenas uma animação CSS — use animation-designer
🚀 Como melhora suas páginas
🎯 O impacto direto: Arte algorítmica bem usada transforma uma página genérica em algo memorável — o canvas é vivo, único para aquela marca, e custa zero em licenças de imagem.
Fundos de hero generativos
Um <canvas> posicionado como position: absolute atrás do hero. Flow field em loop suave, cores da paleta da marca, seed fixo = sempre o mesmo visual. Zero imagem externa.
Seções animadas ao fundo
Particle systems discretos atrás de cards de features. Opacidade baixa, movimento suave — a seção "respira" sem distrair. Pausa em prefers-reduced-motion.
Exploração interativa
Sliders de parâmetros expostos ao usuário: velocidade do campo, número de partículas, seed. O visitante co-cria a arte — alto engajamento em páginas de produto.
✓ Aplicações que funcionam:
- ✓Hero com canvas fullwidth + texto centralizado por cima (z-index)
- ✓404 page criativa — arte generativa em tela cheia
- ✓Loading screen com partículas enquanto dados carregam
- ✓Seção "sobre" com fundo de noise field muito opaco
✗ Armadilhas comuns:
- ✗Canvas atrás de texto branco sobre fundo claro = ilegível
- ✗p5.js sem lazy load em página pesada — bloqueia LCP
- ✗Partículas demais em mobile — use mediaQuery para reduzir
- ✗Cores aleatórias sem paleta definida — visual caótico
Estrutura de camadas: canvas generativo (absoluto) + texto (relativo, z-index maior)
⚙️ Como funciona por dentro
Stack técnica
p5.js
Engine de render 2D — canvas API de alto nível. CDN ou npm.
randomSeed() / noiseSeed()
Funções nativas do p5.js. Seed inteiro → output determinístico.
noise(x, y, z)
Ruído de Perlin suave. Base de todos os flow fields e organic shapes.
createSlider() / createInput()
Controles HTML do p5.dom — sliders de parâmetros em tempo real.
Processo de geração
Deducing the Conceptual Seed
Claude lê seu pedido e constrói uma "filosofia algorítmica" — a metáfora comportamental que guia o sistema.
Algorithmic Philosophy Creation
Define forças, entidades, comportamentos emergentes — não formas. A arte surge do sistema, não do design.
P5.js Implementation
Código com setup() + draw() + classe Particle + campo de noise. Seed configurável.
Interactive Artifact Creation
Sliders expostos. Parâmetros fixos vs variáveis definidos. Output: HTML standalone ou snippet para embutir.
⚠️ Contexto fork: O SKILL.md define context: fork. Isso significa que o skill opera em uma instância de contexto separada — o Claude lê um template próprio (STEP 0) antes de implementar. Não interrompa o processo com mensagens extras durante a geração.
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);
}
}💬 Exemplo prático + PROMPT pronto
Cenário
Você está construindo a landing page de uma fintech. A hero section está plana — um gradiente azul com texto. Você quer um fundo generativo que transmita "fluxo de dados", vivo e controlado, com as cores da marca (#1e40af, #38bdf8). Deve funcionar com seed fixo para ser sempre o mesmo visual.
Crie um fundo generativo com p5.js para a hero section da minha landing page de fintech.
Filosofia: fluxo de dados financeiros — partículas que se movem como dados em rede, convergindo em nós de processamento. Sensação de ordem emergindo do caos.
Requisitos técnicos:
- seed: 1847 (fixo, reprodutível)
- cores: #1e40af (azul), #38bdf8 (ciano), fundo #0a0f1e
- ~200 partículas, flow field com noise(x*0.003, y*0.003)
- canvas absoluto atrás do texto (z-index: 0)
- respeitar prefers-reduced-motion
- sliders: velocidade e número de partículas
- HTML standalone que posso embutir como <section>
O que o skill entrega:
Variações a explorar
🌊 Flow field clássico
Partículas seguem campo vetorial de Perlin. Visual fluido, orgânico.
🕸️ Rede conectada
Pontos com linhas quando próximos. Sensação de grafo vivo.
🌀 Orbital
Partículas orbitando atratores. Sistema de forças gravitacionais.
🧬 Combina com / limites
Como último módulo da Trilha 2, algorithmic-art fecha o ciclo de identidade visual. Ele se posiciona em relação aos outros skills do curso de forma muito específica:
canvas-design
Módulo 2.3 · Trilha 2
canvas-design trabalha com Canvas API puro para composições estáticas ou semi-estáticas: logos, banners, imagens exportáveis. Arte algorítmica complementa com sistemas vivos e animados.
Use juntos: canvas-design para assets de marca exportáveis → algorithmic-art para o fundo animado que os envolve na página.
animation-designer
Módulo 3.1 · Trilha 3
animation-designer usa Framer Motion e CSS para animar elementos de UI com movimento predefinido e orquestrado. algorithmic-art gera movimento emergente sem coreografia explícita.
Use juntos: canvas generativo como fundo → animation-designer para os elementos de UI que aparecem por cima com spring animations.
theme-factory + brand-guidelines
Módulos 2.1 e 2.2
theme-factory define a paleta da marca. brand-guidelines codifica os padrões visuais. algorithmic-art usa essa paleta como entrada — as cores do flow field são as cores da marca.
Fluxo ideal: theme-factory → brand-guidelines → algorithmic-art. A arte generativa expressa a identidade da marca em movimento.
Posição no ecossistema de skills
algorithmic-art FAZ
- ✓Arte generativa original, sistema-driven
- ✓Backgrounds animados para páginas
- ✓Canvas interativo com parâmetros expostos
- ✓Seed determinístico para produção
NÃO substitui
- ✗canvas-design (assets exportáveis, composições)
- ✗animation-designer (UI motion com Framer Motion)
- ✗remotion (vídeo renderizado frame-a-frame)
- ✗3d-animation-creator (Three.js, WebGL 3D)
🔗 Combinação poderosa: brand-guidelines → algorithmic-art → animation-designer. A marca define cores, a arte generativa cria o fundo vivo, Framer Motion anima os elementos de UI sobre o canvas. Resultado: página com identidade visual coesa em movimento.
📋 Resumo do Módulo 2.4
O que você aprendeu
- ✓algorithmic-art usa p5.js com randomness controlada por seed para arte original e reprodutível
- ✓O skill parte de uma filosofia algorítmica — sistema de comportamento, não template
- ✓Flow fields e sistemas de partículas criam fundos generativos para hero sections e seções
- ✓Sliders interativos expõem parâmetros para exploração em tempo real
- ✓O canvas fica em z-index: 0, o texto em cima — estrutura de camadas essencial
- ✓canvas-design (estático) e animation-designer (UI motion) completam o ecossistema
Trilha 3 — Próxima
🎞️ Mídia
Você dominou a Trilha 2: identidade visual, paletas, brand guidelines, canvas estático e arte generativa. Agora avance para a Trilha 3 — Mídia: animation-designer, 3d-animation-creator, Remotion e seedance+HyperFrames/FFmpeg para transformar suas páginas em vídeos e animações profissionais.
Trilha 2 concluída