Lord1Egypt/awesome-skill-forge

Pipeline de Produção p5.js

Quando usar

Use quando os usuários solicitarem: esboços p5.js, coding criativo, arte generativa, visualizações interativas, animações em canvas, arte visual baseada em navegador, visualização de dados, efeitos de shader ou qualquer projeto p5.js.

O que contém

Pipeline de produção para arte visual interativa e generativa usando p5.js. Cria esboços para navegador, arte generativa, visualizações de dados, experiências interativas, cenas 3D, visuais reativos a áudio e gráficos em movimento — exportados como HTML, PNG, GIF, MP4 ou SVG. Abrange: renderização 2D/3D, sistemas de noise e partículas, campos de fluxo, shaders (GLSL), manipulação de pixels, tipografia cinética, cenas WebGL, análise de áudio, interação com mouse/teclado e exportação headless de alta resolução.

Padrão Criativo

Isto é arte visual renderizada no navegador. O canvas é o meio; o algoritmo é o pincel.

Antes de escrever uma única linha de código, articule o conceito criativo. O que essa peça comunica? O que faz o espectador parar de rolar? O que a diferencia de um exemplo de tutorial de código? O prompt do usuário é um ponto de partida — interprete-o com ambição criativa.

Excelência na primeira renderização não é negociável. A saída deve ser visualmente impactante no primeiro carregamento. Se parecer um exercício de tutorial p5.js, uma configuração padrão ou "coding criativo gerado por IA", está errado. Repense antes de enviar.

Vá além do vocabulário de referência. As funções de noise, sistemas de partículas, paletas de cores e efeitos de shader nas referências são um vocabulário inicial. Para cada projeto, combine, sobreponha e invente. O catálogo é uma paleta de tintas — você escreve a pintura.

Seja proativamente criativo. Se o usuário pedir "um sistema de partículas", entregue um sistema de partículas com comportamento de flocking emergente, ecos fantasmas com rastro, nevoeiro de profundidade com mudança de paleta e um campo de noise de fundo que respira. Inclua pelo menos um detalhe visual que o usuário não pediu, mas apreciará.

Denso, em camadas, cuidadoso. Cada frame deve recompensar a visualização. Nunca fundos brancos planos. Sempre hierarquia composicional. Sempre cor intencional. Sempre microdetalhes que só aparecem com inspeção próxima.

Estética coesa sobre quantidade de recursos. Todos os elementos devem servir a uma linguagem visual unificada — temperatura de cor compartilhada, vocabulário de espessura de traço consistente, velocidades de movimento harmoniosas. Um esboço com dez efeitos não relacionados é pior que um com três que pertencem juntos.

Modos

Modo	Entrada	Saída	Referência
Arte generativa	Semente / parâmetros	Composição visual procedural (estática ou animada)	references/visual-effects.md
Visualização de dados	Conjunto de dados / API	Gráficos interativos, diagramas, exibições de dados personalizadas	references/interaction.md
Experiência interativa	Nenhum (usuário controla)	Esboço orientado por mouse/teclado/toque	references/interaction.md
Animação / motion graphics	Linha do tempo / storyboard	Sequências temporizadas, tipografia cinética, transições	references/animation.md
Cena 3D	Descrição do conceito	Geometria WebGL, iluminação, câmera, materiais	references/webgl-and-3d.md
Processamento de imagem	Arquivo(s) de imagem	Manipulação de pixels, filtros, mosaico, pontilhismo	references/visual-effects.md § Manipulação de Pixels
Reativo a áudio	Arquivo de áudio / microfone	Visuais generativos orientados por som	references/interaction.md § Entrada de Áudio

Stack

Único arquivo HTML autossuficiente por projeto. Nenhuma etapa de build necessária.

Camada	Ferramenta	Propósito
Núcleo	p5.js 1.11.3 (CDN)	Renderização em canvas, matemática, transformações, manipulação de eventos
3D	Modo WebGL do p5.js	Geometria 3D, câmera, iluminação, shaders GLSL
Áudio	p5.sound.js (CDN)	Análise FFT, amplitude, entrada de microfone, osciladores
Exportação	saveCanvas() / saveGif() / saveFrames() integrados	Saída PNG, GIF, sequência de frames
Captura	CCapture.js (opcional)	Captura de vídeo com taxa de quadros determinística (WebM, GIF)
Headless	Puppeteer + Node.js (opcional)	Renderização automatizada de alta resolução, MP4 via ffmpeg
SVG	p5.js-svg 1.6.0 (opcional)	Saída vetorial para impressão — requer p5.js 1.x
Mídia natural	p5.brush (opcional)	Aquarela, carvão, caneta — requer p5.js 2.x + WEBGL
Textura	p5.grain (opcional)	Grão de filme, sobreposições de textura
Fontes	Google Fonts / loadFont()	Tipografia personalizada via OTF/TTF/WOFF2

Nota de Versão

p5.js 1.x (1.11.3) é o padrão — estável, bem documentado, maior compatibilidade de bibliotecas. Use isso a menos que um projeto exija recursos 2.x.

p5.js 2.x (2.2+) adiciona: async setup() substituindo preload(), modos de cor OKLCH/OKLAB, splineVertex(), API .modify() de shader, fontes variáveis, textToContours(), eventos de ponteiro. Necessário para p5.brush. Veja references/core-api.md § p5.js 2.0.

Pipeline

Todo projeto segue o mesmo caminho de 6 estágios:

CONCEITO → DESIGN → CÓDIGO → VISUALIZAÇÃO → EXPORTAÇÃO → VERIFICAÇÃO

1. CONCEITO — Articule a visão criativa: humor, mundo de cores, vocabulário de movimento, o que torna isso único
2. DESIGN — Escolha modo, tamanho do canvas, modelo de interação, sistema de cores, formato de exportação. Mapeie o conceito para decisões técnicas
3. CÓDIGO — Escreva arquivo HTML único com p5.js inline. Estrutura: globais → preload() → setup() → draw() → helpers → classes → manipuladores de eventos
4. VISUALIZAÇÃO — Abra no navegador, verifique a qualidade visual. Teste na resolução alvo. Verifique desempenho
5. EXPORTAÇÃO — Capture a saída: saveCanvas() para PNG, saveGif() para GIF, saveFrames() + ffmpeg para MP4, Puppeteer para lote headless
6. VERIFICAÇÃO — A saída corresponde ao conceito? É visualmente impactante no tamanho de exibição pretendido? Você emolduraria?

Direção Criativa

Dimensões Estéticas

Dimensão	Opções	Referência
Sistema de cor	HSB/HSL, RGB, paletas nomeadas, harmonia procedural, interpolação de gradiente	references/color-systems.md
Vocabulário de noise	Perlin noise, simplex, fractal (oitavado), domain warping, curl noise	references/visual-effects.md § Noise
Sistemas de partículas	Baseado em física, flocking, com rastro, orientado por atratores, seguindo campos de fluxo	references/visual-effects.md § Partículas
Linguagem de formas	Primitivas geométricas, vértices personalizados, curvas bezier, caminhos SVG	references/shapes-and-geometry.md
Estilo de movimento	Suavizado, baseado em mola, orientado por noise, simulação física, lerp, escalonado	references/animation.md
Tipografia	Fontes do sistema, OTF carregado, texto de partículas textToPoints(), cinético	references/typography.md
Efeitos de shader	Fragment/vertex GLSL, shaders de filtro, pós-processamento, loops de feedback	references/webgl-and-3d.md § Shaders
Composição	Grade, radial, proporção áurea, regra dos terços, dispersão orgânica, lado a lado	references/core-api.md § Composição
Modelo de interação	Seguir mouse, spawn ao clicar, arrastar, estado do teclado, orientado por rolagem, entrada de microfone	references/interaction.md
Modos de mesclagem	BLEND, ADD, MULTIPLY, SCREEN, DIFFERENCE, EXCLUSION, OVERLAY	references/color-systems.md § Modos de Mesclagem
Camadas	Buffers fora da tela createGraphics(), composição alfa, máscaras	references/core-api.md § Buffers Fora da Tela
Textura	Superfície Perlin, pontilhismo, hachura, meio-tom, ordenação de pixels	references/visual-effects.md § Geração de Textura

Regras de Variação por Projeto

Nunca use configurações padrão. Para cada projeto:

• Paleta de cores personalizada — nunca fill(255, 0, 0) cru. Sempre uma paleta projetada com 3-7 cores
• Vocabulário de espessura de traço personalizado — contrastes finos (0.5), estrutura média (1-2), ênfase ousada (3-5)
• Tratamento de fundo — nunca background(0) ou background(255) simples. Sempre texturizado, gradiente ou em camadas
• Variedade de movimento — velocidades diferentes para elementos diferentes. Primário a 1x, secundário a 0.3x, ambiente a 0.1x
• Pelo menos um elemento inventado — um comportamento de partícula personalizado, uma aplicação de noise nova, uma resposta de interação única

Invenção Específica do Projeto

Para cada projeto, invente pelo menos um dos seguintes:

• Uma paleta de cores personalizada que corresponda ao humor (não um preset)
• Uma combinação nova de campo de noise (ex.: curl noise + domain warp + feedback)
• Um comportamento de partícula único (forças personalizadas, rastros personalizados, spawn personalizado)
• Um mecanismo de interação que o usuário não solicitou, mas que eleva a peça
• Uma técnica composicional que cria hierarquia visual

Filosofia de Design de Parâmetros

Os parâmetros devem emergir do algoritmo, não de um menu genérico. Pergunte: "Quais propriedades deste sistema devem ser ajustáveis?"

Bons parâmetros expõem o caráter do algoritmo:

• Quantidades — quantas partículas, ramos, células (controla densidade)
• Escalas — frequência de noise, tamanho do elemento, espaçamento (controla textura)
• Taxas — velocidade, taxa de crescimento, decaimento (controla energia)
• Limiares — quando o comportamento muda? (controla drama)
• Proporções — proporções, equilíbrio entre forças (controla harmonia)

Maus parâmetros são controles genéricos não relacionados ao algoritmo:

• "cor1", "cor2", "tamanho" — sem sentido sem contexto
• Interruptores para efeitos não relacionados
• Parâmetros que apenas mudam a aparência, não o comportamento

Cada parâmetro deve mudar como o algoritmo pensa, não apenas como parece. Um parâmetro "turbulência" que altera as oitavas de noise é bom. Um controle deslizante "tamanho da partícula" que só muda o raio de ellipse() é superficial.

Fluxo de Trabalho

Passo 1: Visão Criativa

Antes de qualquer código, articule:

• Humor / atmosfera: O que o espectador deve sentir? Contemplativo? Energizado? Inquieto? Brincalhão?
• História visual: O que acontece ao longo do tempo (ou com interação)? Construir? Decair? Transformar? Oscilar?
• Mundo de cores: Quente/frio? Monocromático? Complementar? Qual é o matiz dominante? O acento?
• Linguagem de formas: Curvas orgânicas? Geometria nítida? Pontos? Linhas? Misto?
• Vocabulário de movimento: Deriva lenta? Explosão repentina? Pulso respiratório? Precisão mecânica?
• O que torna ISTO diferente: Qual é a única coisa que torna este esboço único?

Mapeie o prompt do usuário para escolhas estéticas. "Fundo generativo relaxante" exige algo completamente diferente de "visualização de dados glitch".

Passo 2: Design Técnico

• Modo — qual dos 7 modos da tabela acima
• Tamanho do canvas — paisagem 1920x1080, retrato 1080x1920, quadrado 1080x1080, ou responsivo windowWidth/windowHeight
• Renderer — P2D (padrão) ou WEBGL (para 3D, shaders, modos de mesclagem avançados)
• Taxa de quadros — 60fps (interativo), 30fps (animação ambiente), ou noLoop() (generativo estático)
• Alvo de exportação — exibição no navegador, PNG estático, loop GIF, vídeo MP4, vetor SVG
• Modelo de interação — passivo (sem entrada), orientado por mouse, orientado por teclado, reativo a áudio, orientado por rolagem
• Interface do visualizador — para arte generativa interativa, comece a partir de templates/viewer.html que fornece navegação por semente, controles deslizantes de parâmetros e download. Para esboços simples ou exportação de vídeo, use HTML simples

Passo 3: Codifique o Esboço

Para arte generativa interativa (exploração de semente, ajuste de parâmetros): comece a partir de templates/viewer.html. Leia o template primeiro, mantenha as seções fixas (navegação de semente, ações), substitua o algoritmo e os controles de parâmetros. Isso dá ao usuário navegação de semente (anterior/próximo/aleatório/salto), controles deslizantes de parâmetros com atualização ao vivo e download PNG — tudo conectado.

Para animações, exportação de vídeo ou esboços simples: use HTML simples:

Arquivo HTML único. Estrutura:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nome do Projeto</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> -->  <!-- exportação SVG -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/ccapture.js-npmfixed/build/CCapture.all.min.js"></script> -->  <!-- captura de vídeo -->
  <style>
    html, body { margin: 0; padding: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
<script>
// === Configuração ===
const CONFIG = {
  seed: 42,
  // ... parâmetros específicos do projeto
};

// === Paleta de Cores ===
const PALETTE = {
  bg: '#0a0a0f',
  primary: '#e8d5b7',
  // ...
};

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

// === Preload (fontes, imagens, dados) ===
function preload() {
  // font = loadFont('...');
}

// === Setup ===
function setup() {
  createCanvas(1920, 1080);
  randomSeed(CONFIG.seed);
  noiseSeed(CONFIG.seed);
  colorMode(HSB, 360, 100, 100, 100);
  // Inicialize estado...
}

// === Loop de Desenho ===
function draw() {
  // Renderize o frame...
}

// === Funções Auxiliares ===
// ...

// === Classes ===
class Particula {
  // ...
}

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

Padrões de implementação chave:

• Aleatoriedade com semente: Sempre randomSeed() + noiseSeed() para reprodutibilidade
• Modo de cor: Use colorMode(HSB, 360, 100, 100, 100) para controle intuitivo de cor
• Separação de estado: CONFIG para parâmetros, PALETTE para cores, globais para estado mutável
• Entidades baseadas em classe: Partículas, agentes, formas como classes com métodos update() + display()
• Buffers fora da tela: createGraphics() para composição em camadas, rastros, máscaras

Passo 4: Visualize e Itere

• Abra o arquivo HTML diretamente no navegador — nenhum servidor necessário para esboços básicos
• Para loadImage()/loadFont() de arquivos locais: use scripts/serve.sh ou python3 -m http.server
• Aba de Desempenho do Chrome DevTools para verificar 60fps
• Teste na resolução de exportação alvo, não apenas no tamanho da janela
• Ajuste parâmetros até que o visual corresponda ao conceito do Passo 1

Passo 5: Exporte

• PNG estático: saveCanvas('filename', 'png') — sempre salve no size do canvas, não no tamanho da janela
• GIF animado: saveGif('filename', durationInSeconds) — para GIFs de loop
• Vídeo: saveFrames() + ffmpeg, ou CCapture.js para captura no navegador
• Headless de alta resolução: Use scripts/render.sh (Puppeteer) para renderização em lote com dimensões personalizadas e efeitos de pós-processamento (ex.: noise de filme, vinheta, grain)
• SVG: Com p5.js-svg carregado, use save('filename.svg') para gráficos vetoriais

Passo 6: Verifique

Pergunte antes de enviar:

• O conceito foi realizado? A saída comunica o humor/ideia pretendida?
• É visualmente impactante? Você pararia para olhar? Ou parece um teaser do YouTube?
• Tem personalidade? O que torna esta peça diferente de qualquer outro esboço generativo?
• A implementação é sólida? Sem bugs de borda, sem gagueira de desempenho, sem relações de aspecto quebradas?
• Você emolduraria esta saída? Se a resposta for não, volte ao Passo 1.

Regra de Ouro

Nunca envie pixel não ambicioso. Cada pixel deve ganhar seu lugar. Se um efeito não serve à visão criativa, remova-o. Se uma técnica parece um copiar-colar de um tutorial, repense-a. Se o resultado poderia ter sido gerado por um prompt de IA sem direção criativa, reconstrua-o do zero.

A ambição não é sobre complexidade — é sobre intenção. Um único círculo com desfoque de movimento perfeito, suavização de borda e cor que respira tem mais ambição que mil partículas dispostas aleatoriamente.