Samin12/skills

Pipeline de Produção p5.js

Quando usar

Use quando os usuários solicitarem: esboços p5.js, código 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 baseados em 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 ruído 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 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 no primeiro render 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 "código criativo gerado por IA", está errado. Repense 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 de agrupamento emergente, ecos fantasmas com rastro, névoa de profundidade com mudança 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, cuidadoso. Cada quadro deve recompensar a visualização. Nunca fundos brancos planos. Sempre hierarquia composicional. Sempre cor intencional. Sempre microdetalhes que só aparecem na 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, tabelas, exibições de dados personalizadas	references/interaction.md
Experiência interativa	Nenhum (usuário dirige)	Esboço guiado 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 Pixel
Reativo a áudio	Arquivo de áudio / microfone	Visuais generativos orientados por som	references/interaction.md § Entrada de Áudio

Pilha

Arquivo HTML autossuficiente por projeto. Nenhuma etapa de compilação necessária.

Camada	Ferramenta	Propósito
Núcleo	p5.js 1.11.3 (CDN)	Renderização de 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 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 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

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

CONCEITO → PROJETO → 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. PROJETO — 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 um único arquivo HTML com p5.js embutido. Estrutura: globais → preload() → setup() → draw() → auxiliares → classes → manipuladores de eventos
4. 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 cor	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 (oitavado), deformação de domínio, ruído curl	references/visual-effects.md § Ruído
Sistemas de partículas	Baseados em física, agrupamento, desenho de rastros, orientados por atratores, seguindo campo de fluxo	references/visual-effects.md § Partículas
Linguagem de forma	Primitivas geométricas, vértices personalizados, curvas bezier, caminhos SVG	references/shapes-and-geometry.md
Estilo de movimento	Suavizados, baseados em mola, orientados por ruído, simulação física, interpolados, escalonados	references/animation.md
Tipografia	Fontes do sistema, OTF carregada, textToPoints() partículas de texto, cinética	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, azulejado	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) puro. 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 em negrito (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 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 que combine com o humor (não uma predefinição)
• Uma combinação de campo de ruído nova (ex.: ruído curl + deformação de domínio + feedback)
• Um comportamento de partícula único (forças personalizadas, rastros personalizados, geração personalizada)
• Uma mecânica de interação que o usuário não solicitou, mas que eleva a peça
• Uma técnica composicional que crie 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, galhos, células (controla a densidade)
• Escalas — frequência do ruído, tamanho do elemento, espaçamento (controla a textura)
• Taxas — velocidade, taxa de crescimento, decaimento (controla a energia)
• Limiares — quando o comportamento muda? (controla o drama)
• Razões — proporções, equilíbrio entre forças (controla a harmonia)

Parâmetros ruins 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 só alteram 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 só altera 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 na interação)? Construir? Decair? Transformar? Oscilar?
• Mundo de cores: Quente/frio? Monocromático? Complementar? Qual é o matiz dominante? O acento?
• Linguagem de forma: 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: Projeto 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)
• Destino da 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
• IU do visualizador — para arte generativa interativa, comece de templates/viewer.html que fornece navegação por sementes, 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 modelo primeiro, mantenha as seções fixas (navegação de sementes, ações), substitua o algoritmo e os controles de parâmetros. Isso dá 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="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);
  // 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 classes: 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: Visualização e Iteração

• 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 Performance do Chrome DevTools para verificar 60fps
• Teste na resolução de exportação alvo, não apenas no tamanho da janela
• Ajuste os parâmetros até que o visual corresponda ao conceito do Passo 1
• Itere:
  1. Execute no navegador
  2. Avalie contra o padrão criativo (é impressionante? é único?)
  3. Ajuste parâmetros (não código) primeiro
  4. Se precisar de mudanças estruturais, edite o código
  5. Repita

Passo 5: Exportação

Use a tabela de exportação para escolher o método correto:

Formato	Método	Uso
PNG	saveCanvas('nome', 'png') — salva um único quadro	Estático, prints, compartilhamento social
GIF	saveGif('nome', duracaoQuadros, opcoes) — salva loop	Animações curtas, previews
MP4	saveFrames() + ffmpeg — sequência de quadros para vídeo	Saída de alta qualidade, exibição
SVG	modo p5.js-svg — salva vetores	Impressão, dimensionamento infinito
Headless	Puppeteer — renderização em lote programática	Produção, variações paramétricas

Guia rápido de exportação GIF:

function keyPressed() {
  if (key === 'g') {
    saveGif('meuEsboco', 5); // 5 segundos de loop
  }
}

Guia rápido de exportação de quadros para MP4:

let capturing = false;
let frameCount = 0;
const totalFrames = 180; // 6 segundos a 30fps

function draw() {
  if (capturing) {
    saveCanvas('quadro-' + nf(frameCount, 4), 'png');
    frameCount++;
    if (frameCount >= totalFrames) {
      noLoop();
      capturing = false;
      print('Quadros salvos. Execute: ffmpeg -r 30 -i quadro-%04d.png -c:v libx264 output.mp4');
    }
  }
  // ... renderizar quadro normalmente
}

function keyPressed() {
  if (key === 'e') capturing = true;
}

Passo 6: Verificação Final

• Qualidade visual: A peça é visualmente impressionante? Você a emolduraria?
• Resolução: A saída corresponde ao tamanho alvo? A proporção está correta?
• Movimento: As animações são suaves? As transições são elegantes?
• Interação: A interação é intuitiva? Responsiva? Agradável?
• Desempenho: Mantém 60fps? (Verifique com DevTools)
• Originalidade: A peça mostra invenção ou é uma reciclagem de exemplos de tutorial?
• Coesão: Todos os elementos servem à mesma visão estética?
• Último pixel: Verifique a qualidade das bordas, artefatos de alias, consistência de cor

Referências

Consulte estes documentos para detalhes técnicos e exemplos:

Documento	Conteúdo
references/core-api.md	APIs centrais do p5.js, composição, buffers fora da tela, mudanças 2.0, dicas de desempenho
references/visual-effects.md	Ruído, partículas, campos de fluxo, sistemas de reação-difusão, manipulação de pixel, geração de textura
references/color-systems.md	Teoria da cor, paletas, gradientes, modos de mesclagem, percepção de cor
references/shapes-and-geometry.md	Primitivas geométricas, vértices, curvas, malhas, geometria algorítmica
references/animation.md	Funções de easing, animação baseada em física, loops, sequências temporizadas
references/interaction.md	Mouse, teclado, toque, microfone, câmera, modelos de interação
references/typography.md	Carregamento de fontes, layout de texto, textToPoints(), tipografia cinética
references/webgl-and-3d.md	Modo WebGL, iluminação, câmera, shaders GLSL, geometria 3D
references/troubleshooting.md	Problemas comuns, limitações, configuração de ambiente

Estrutura de Diretórios

project/
├── index.html          # Esboço principal (exportação)
├── templates/
│   ├── viewer.html     # Visualizador interativo (arte generativa)
│   └── basic.html      # Modelo de esboço simples
├── scripts/
│   └── serve.sh        # Servidor de desenvolvimento local
├── references/         # Documentação técnica (ver tabela acima)
├── examples/           # Esboços de exemplo (TODO: adicionar)
└── output/             # Capturas de exportação (gerado)

Metadados

• Versão: 1.0.0
• Dependências: p5.js 1.11.3 (padrão), p5.sound.js (opcional para áudio), p5.js-svg (opcional para SVG), CCapture.js (opcional para captura de vídeo), Puppeteer (opcional para renderização headless)

---

Criado a partir de Samin12/skills — faça fork, reinvente, coloque sua visão.