V4TIME/V4SKILL

Pipeline de Produção p5.js

Quando usar

Use quando os usuários solicitarem: esboços p5.js, codificação criativa, arte generativa, visualizações interativas, animações em canvas, arte visual no 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 no 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, ruído e sistemas de partículas, campos de fluxo, shaders (GLSL), manipulação de pixels, tipografia cinética, cenas WebGL, análise de áudio, interação 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 esta 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.

A excelência na primeira renderização não é negociável. A saída deve ser visualmente impressionante na primeira carga. Se parecer um exercício de tutorial p5.js, uma configuração padrão ou "codificação criativa gerada por IA", está errado. Reflita antes de enviar.

Vá além do vocabulário de referência. As funções de ruído, 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 emergente de flocking, ecos fantasmas, névoa de profundidade com deslocamento de paleta e um campo de ruído de fundo que respira. Inclua pelo menos um detalhe visual que o usuário não pediu, mas apreciará.

Denso, em camadas, considerado. Cada quadro 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 acima da 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 do que um com três que pertencem uns aos outros.

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, visualizações de dados personalizadas	references/interaction.md
Experiência interativa	Nenhuma (usuário dirige)	Esboço orientado por mouse/teclado/toque	references/interaction.md
Animação / gráficos em movimento	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
Áudio-reativo	Arquivo de áudio / microfone	Visuais generativos guiados por som	references/interaction.md § Entrada de Áudio

Stack

Arquivo HTML único e autocontido por projeto. Nenhuma etapa de construção 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	p5.js WebGL mode	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 quadros
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 com 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 shader.modify(), fontes variáveis, textToContours(), eventos de ponteiro. Necessário para p5.brush. Veja references/core-api.md § p5.js 2.0.

Pipeline

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

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

1. CONCEITO — Articule a visão criativa: clima, mundo de cores, vocabulário de movimento, o que torna isso único
2. DESIGN — Escolha o 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 um único arquivo HTML com p5.js embutido. Estrutura: globais → preload() → setup() → draw() → auxiliares → classes → manipuladores de eventos
4. PRÉ-VISUALIZAÇÃO — Abra no navegador, verifique a qualidade visual. Teste na resolução alvo. Verifique o 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 impressionante no tamanho de exibição pretendido? Você emolduraria?

Direção Criativa

Dimensões Estéticas

Dimensão	Opções	Referência
Sistema de cores	HSB/HSL, RGB, paletas nomeadas, harmonia procedural, interpolação de gradiente	references/color-systems.md
Vocabulário de ruído	Ruído Perlin, simplex, fractal (octavado), deformação de domínio, ruído curl	references/visual-effects.md § Ruído
Sistemas de partículas	Baseado em física, flocking, desenho de rastros, orientado por atrator, seguindo campo 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 ruído, 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	Fragmento/vértice 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, ladrilhada	references/core-api.md § Composição
Modelo de interação	Seguir mouse, clicar para gerar, 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, mascaramento	references/core-api.md § Buffers Fora da Tela
Textura	Superfície Perlin, pontilhismo, hachura, meio-tom, classificaçã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 — acentos 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 em 1x, secundário em 0.3x, ambiente em 0.1x
• Pelo menos um elemento inventado — um comportamento de partícula personalizado, uma aplicação de ruído nova, uma resposta de interação única

Invenção Específica do Projeto

Para cada projeto, invente pelo menos um de:

• Uma paleta de cores personalizada combinando com o clima (não uma predefinição)
• Uma combinação de campo de ruído nova (por exemplo, ruído curl + deformação de domínio + feedback)
• Um comportamento de partícula único (forças personalizadas, rastros personalizados, geração personalizada)
• 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 surgir 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 do ruído, tamanho do elemento, espaçamento (controla textura)
• Taxas — velocidade, taxa de crescimento, decaimento (controla energia)
• Limiares — quando o comportamento muda? (controla drama)
• Razões — proporções, equilíbrio entre forças (controla harmonia)

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

• "color1", "color2", "size" — sem significado sem contexto
• Interruptores para efeitos não relacionados
• Parâmetros que mudam apenas 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 ruído é bom. Um controle deslizante "tamanho da partícula" que apenas muda o raio de ellipse() é superficial.

Fluxo de Trabalho

Passo 1: Visão Criativa

Antes de qualquer código, articule:

• Clima / atmosfera: O que o espectador deve sentir? Contemplativo? Energizado? Inquieto? Brincalhão?
• História visual: O que acontece ao longo do tempo (ou na 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 tudo 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
• Renderizador — 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, áudio-reativo, orientado por rolagem
• IU do visualizador — para arte generativa interativa, comece 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 sementes, ajuste de parâmetros): comece de templates/viewer.html. Leia o template primeiro, mantenha as seções fixas (navegação de sementes, ações), substitua o algoritmo e os controles de parâmetros. Isso fornece ao usuário navegação de sementes (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="pt">
<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 = [];

// === Pré-carregamento (fontes, imagens, dados) ===
function preload() {
  // font = loadFont('...');
}

// === Configuração ===
function setup() {
  createCanvas(1920, 1080);
  randomSeed(CONFIG.seed);
  noiseSeed(CONFIG.seed);
  colorMode(HSB, 360, 100, 100, 100);
  // Inicializar estado...
}

// === Loop de Desenho ===
function draw() {
  // Renderizar quadro...
}

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

// === Classes ===
class Particle {
  // ...
}

// === 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 de cor intuitivo
• 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: Pré-visualizar e Iterar

• 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 python -m http.server
• Guia Desempenho do Chrome DevTools para verificar 60fps
• Teste na resolução alvo de exportação, não apenas no tamanho da janela
• Ajuste os parâmetros até que o visual corresponda ao conceito do Passo 1