Criação de arte algorítmica usando p5.js com aleatoriedade semeada (seeded) e exploração interativa de parâmetros. Use quando os usuários solicitarem arte usando código, arte generativa, arte algorítmica, campos de fluxo ou sistemas de partículas. Crie arte algorítmica original em vez de copiar o trabalho de artistas existentes para evitar violações de direitos autorais.
Filosofias algorítmicas são movimentos estéticos computacionais que são então expressos através de código. Produza arquivos .md (filosofia), arquivos .html (visualizador interativo) e arquivos .js (algoritmos generativos).
Isso acontece em duas etapas:
Primeiro, realize esta tarefa:
Para começar, crie uma FILOSOFIA ALGORÍTMICA (não imagens estáticas ou modelos) que será interpretada através de:
Considere esta abordagem:
A filosofia deve enfatizar: Expressão algorítmica. Comportamento emergente. Beleza computacional. Variação semeada.
Nomeie o movimento (1-2 palavras): "Turbulência Orgânica" / "Harmônicas Quânticas" / "Quietude Emergente"
Articule a filosofia (4-6 parágrafos - conciso, mas completo):
Para capturar a essência ALGORÍTMICA, expresse como esta filosofia se manifesta através de:
DIRETRIZES CRÍTICAS:
A filosofia deve guiar a próxima versão para expressar ideias ALGORITMICAMENTE, não através de imagens estáticas. A beleza vive no processo, não no quadro final.
"Turbulência Orgânica" Filosofia: Caos restringido pela lei natural, ordem emergindo da desordem. Expressão algorítmica: Campos de fluxo impulsionados por ruído Perlin em camadas. Milhares de partículas seguindo forças vetoriais, seus rastros acumulando-se em mapas de densidade orgânicos. Múltiplas oitavas de ruído criam regiões turbulentas e zonas calmas. A cor emerge da velocidade e densidade - partículas rápidas brilham intensamente, as lentas desaparecem na sombra. O algoritmo roda até o equilíbrio - um balanço meticulosamente ajustado onde cada parâmetro foi refinado através de inúmeras iterações por um mestre da estética computacional.
"Harmônicas Quânticas" Filosofia: Entidades discretas exibindo padrões de interferência semelhantes a ondas. Expressão algorítmica: Partículas inicializadas em uma grade, cada uma carregando um valor de fase que evolui através de ondas senoidais. Quando as partículas estão próximas, suas fases interferem - a interferência construtiva cria nós brilhantes, a destrutiva cria vazios. O movimento harmônico simples gera mandalas emergentes complexas. O resultado de uma calibração de frequência minuciosa onde cada proporção foi cuidadosamente escolhida para produzir beleza ressonante.
"Sussurros Recursivos" Filosofia: Auto-similaridade através de escalas, profundidade infinita em espaço finito. Expressão algorítmica: Estruturas ramificadas que se subdividem recursivamente. Cada ramo ligeiramente randomizado, mas restringido por proporções áureas. L-systems ou subdivisão recursiva geram formas semelhantes a árvores que parecem tanto matemáticas quanto orgânicas. Perturbações sutis de ruído quebram a simetria perfeita. As espessuras das linhas diminuem a cada nível de recursão. Cada ângulo de ramificação é produto de profunda exploração matemática.
"Dinâmica de Campos" Filosofia: Forças invisíveis tornadas visíveis através de seus efeitos na matéria. Expressão algorítmica: Campos vetoriais construídos a partir de funções matemáticas ou ruído. Partículas nascem nas bordas, fluindo ao longo das linhas de campo, morrendo quando atingem o equilíbrio ou limites. Múltiplos campos podem atrair, repelir ou rotacionar partículas. A visualização mostra apenas os traços - evidências fantasmagóricas de forças invisíveis. Uma dança computacional meticulosamente coreografada através do equilíbrio de forças.
"Cristalização Estocástica" Filosofia: Processos aleatórios cristalizando em estruturas ordenadas. Expressão algorítmica: Empacotamento de círculos randomizado ou tesselação de Voronoi. Comece com pontos aleatórios, deixe-os evoluir através de algoritmos de relaxamento. Células se empurram até o equilíbrio. Cor baseada no tamanho da célula, contagem de vizinhos ou distância do centro. O ladrilhamento orgânico que emerge parece tanto aleatório quanto inevitável. Cada semente produz uma beleza cristalina única - a marca de um algoritmo generativo de nível mestre.
Estes são exemplos condensados. A filosofia algorítmica real deve ter 4-6 parágrafos substanciais.
A filosofia algorítmica deve ter 4-6 parágrafos. Preencha-a com filosofia computacional poética que reúna a visão pretendida. Evite repetir os mesmos pontos. Produza esta filosofia algorítmica como um arquivo .md.
ETAPA CRÍTICA: Antes de implementar o algoritmo, identifique o fio conceitual sutil da solicitação original.
O PRINCÍPIO ESSENCIAL: O conceito é uma referência sutil e de nicho embutida no próprio algoritmo - nem sempre literal, sempre sofisticada. Alguém familiarizado com o assunto deve senti-lo intuitivamente, enquanto outros simplesmente experimentam uma composição generativa magistral. A filosofia algorítmica fornece a linguagem computacional. O conceito deduzido fornece a alma - o DNA conceitual silencioso tecido invisivelmente em parâmetros, comportamentos e padrões de emergência.
Isso é MUITO IMPORTANTE: A referência deve ser tão refinada que aumente a profundidade do trabalho sem se anunciar. Pense como um músico de jazz citando outra música através da harmonia algorítmica - apenas aqueles que sabem notarão, mas todos apreciam a beleza generativa.
Com a filosofia E a estrutura conceitual estabelecidas, expresse-as através de código. Pare para reunir pensamentos antes de prosseguir. Use apenas a filosofia algorítmica criada e as instruções abaixo.
CRÍTICO: ANTES de escrever qualquer HTML:
templates/viewer.html usando a ferramenta de leituraEvite:
Siga estas práticas:
O modelo é a fundação. Construa sobre ele, não o reconstrua.
Para criar arte computacional de qualidade de galeria que vive e respira, use a filosofia algorítmica como fundação.
Aleatoriedade Semeada (Padrão Art Blocks):
// SEMPRE use uma semente para reprodutibilidade
let seed = 12345; // ou hash da entrada do usuário
randomSeed(seed);
noiseSeed(seed);
Estrutura de Parâmetros - SIGA A FILOSOFIA:
Para estabelecer parâmetros que emergem naturalmente da filosofia algorítmica, considere: "Quais qualidades deste sistema podem ser ajustadas?"
let params = {
seed: 12345, // Sempre inclua semente para reprodutibilidade
// colors
// Adicione parâmetros que controlam SEU algoritmo:
// - Quantidades (quantos?)
// - Escalas (quão grande? quão rápido?)
// - Probabilidades (quão provável?)
// - Proporções (quais proporções?)
// - Ângulos (qual direção?)
// - Limiares (quando o comportamento muda?)
};
Para projetar parâmetros eficazes, concentre-se nas propriedades que o sistema precisa para ser ajustável, em vez de pensar em termos de "tipos de padrão".
Algoritmo Central - EXPRESSE A FILOSOFIA:
CRÍTICO: A filosofia algorítmica deve ditar o que construir.
Para expressar a filosofia através de código, evite pensar "qual padrão devo usar?" e pense "como expressar esta filosofia através de código?"
Se a filosofia é sobre emergência orgânica, considere usar:
Se a filosofia é sobre beleza matemática, considere usar:
Se a filosofia é sobre caos controlado, considere usar:
O algoritmo flui da filosofia, não de um menu de opções.
Para guiar a implementação, deixe a essência conceitual informar escolhas criativas e originais. Construa algo que expresse a visão para esta solicitação específica.
Configuração do Canvas: Estrutura padrão p5.js:
function setup() {
createCanvas(1200, 1200);
// Inicialize seu sistema
}
function draw() {
// Seu algoritmo generativo
// Pode ser estático (noLoop) ou animado
}
CRÍTICO: Para alcançar a maestria, crie algoritmos que pareçam ter emergido através de inúmeras iterações por um artista generativo mestre. Ajuste cada parâmetro cuidadosamente. Garanta que cada padrão emerja com propósito. Isso NÃO é ruído aleatório - isso é CAOS CONTROLADO refinado através de profunda expertise.
Saída:
templates/viewer.html (veja PASSO 0 e próxima seção)O artefato HTML contém tudo: p5.js (do CDN), o algoritmo, controles de parâmetros e UI - tudo em um arquivo que funciona imediatamente em artefatos claude.ai ou qualquer navegador. Comece a partir do arquivo modelo, não do zero.
LEMBRETE: templates/viewer.html já deve ter sido lido (veja PASSO 0). Use esse arquivo como ponto de partida.
Para permitir a exploração da arte generativa, crie um artefato HTML único e autocontido. Garanta que este artefato funcione imediatamente no claude.ai ou em qualquer navegador - sem necessidade de configuração. Incorpore tudo inline.
O arquivo templates/viewer.html é a fundação. Ele contém a estrutura exata e o estilo necessários.
FIXO (sempre inclua exatamente como mostrado):
VARIÁVEL (personalize para cada obra de arte):
Cada obra de arte deve ter parâmetros e algoritmo únicos! As partes fixas fornecem UX consistente - todo o resto expressa a visão única.
1. Controles de Parâmetros
2. Navegação de Semente
3. Estrutura de Artefato Único
<!DOCTYPE html>
<html>
<head>
<!-- p5.js do CDN - sempre disponível -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
<style>
/* Todo o estilo inline - limpo, minimalista */
/* Canvas no topo, controles abaixo */
</style>
</head>
<body>
<div id="canvas-container"></div>
<div id="controls">
<!-- Todos os controles de parâmetros -->
</div>
<script>
// Todo o código p5.js inline aqui
// Objetos de parâmetros, classes, funções
// setup() e draw()
// Manipuladores de UI
// Tudo autocontido
</script>
</body>
</html>
CRÍTICO: Este é um artefato único. Sem arquivos externos, sem importações (exceto p5.js CDN). Tudo inline.
4. Detalhes de Implementação - CONSTRUA A BARRA LATERAL
A estrutura da barra lateral:
1. Semente (FIXO) - Sempre inclua exatamente como mostrado:
2. Parâmetros (VARIÁVEL) - Crie controles para a arte:
<div class="control-group">
<label>Nome do Parâmetro</label>
<input
type="range"
id="param"
min="..."
max="..."
step="..."
value="..."
oninput="updateParam('param', this.value)"
/>
<span class="value-display" id="param-value">...</span>
</div>
Adicione tantos divs control-group quantos forem os parâmetros.
3. Cores (OPCIONAL/VARIÁVEL) - Inclua se a arte precisar de cores ajustáveis:
4. Ações (FIXO) - Sempre inclua exatamente como mostrado:
Requisitos:
O artefato HTML funciona imediatamente:
O artefato inclui navegação de semente por padrão (botões anterior/próximo/aleatório), permitindo que os usuários explorem variações sem criar arquivos múltiplos. Se o usuário quiser variações específicas destacadas:
Isso é como criar uma série de impressões da mesma chapa - o algoritmo é consistente, mas cada semente revela diferentes facetas de seu potencial. A natureza interativa significa que os usuários descobrem seus próprios favoritos explorando o espaço de sementes.
Solicitação do usuário → Filosofia algorítmica → Implementação
Cada solicitação é única. O processo envolve:
As constantes:
Todo o resto é variável:
Para alcançar os melhores resultados, confie na criatividade e deixe a filosofia guiar a implementação.
Esta habilidade inclui modelos úteis e documentação:
templates/viewer.html: PONTO DE PARTIDA NECESSÁRIO para todos os artefatos HTML.
templates/generator_template.js: Referência para melhores práticas p5.js e princípios de estrutura de código.
Lembrete crítico: