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:
- Criação da Filosofia Algorítmica (arquivo .md)
- Expressão através da criação de arte generativa com p5.js (arquivos .html + .js)
Primeiro, realize esta tarefa:
CRIAÇÃO DA FILOSOFIA ALGORÍTMICA
Para começar, crie uma FILOSOFIA ALGORÍTMICA (não imagens estáticas ou templates) que será interpretada através de:
- Processos computacionais, comportamento emergente, beleza matemática
- Aleatoriedade com semente, campos de ruído, sistemas orgânicos
- Partículas, fluxos, campos, forças
- Variação paramétrica e caos controlado
A COMPREENSÃO CRÍTICA
- O que é recebido: Alguma entrada sutil ou instruções do usuário para serem consideradas, mas usadas como base; isso não deve restringir a liberdade criativa.
- O que é criado: Uma filosofia algorítmica/movimento estético generativo.
- O que acontece depois: A mesma versão recebe a filosofia e A EXPRESSA EM CÓDIGO - criando sketches p5.js que são 90% geração algorítmica, 10% parâmetros essenciais.
Considere esta abordagem:
- Escreva um manifesto para um movimento de arte generativa
- A próxima fase envolve escrever o algoritmo que o traz à vida
A filosofia deve enfatizar: Expressão algorítmica. Comportamento emergente. Beleza computacional. Variação com semente.
COMO GERAR UMA FILOSOFIA ALGORÍTMICA
Dê um nome ao movimento (1-2 palavras): "Turbulência Orgânica" / "Harmônicos Quânticos" / "Quietude Emergente"
Articule a filosofia (4-6 parágrafos - concisos mas completos):
Para capturar a essência ALGORÍTMICA, expresse como essa filosofia se manifesta através de:
- Processos computacionais e relações matemáticas?
- Funções de ruído e padrões de aleatoriedade?
- Comportamentos de partículas e dinâmicas de campo?
- Evolução temporal e estados de sistema?
- Variação paramétrica e complexidade emergente?
DIRETRIZES CRÍTICAS:
- Evite redundância: Cada aspecto algorítmico deve ser mencionado uma vez. Evite repetir conceitos sobre teoria de ruído, dinâmica de partículas ou princípios matemáticos, a menos que esteja adicionando nova profundidade.
- Enfatize o ARTESANATO REPETIDAMENTE: A filosofia DEVE enfatizar várias vezes que o algoritmo final deve parecer como se tivesse levado inúmeras horas para ser desenvolvido, foi refinado com cuidado e vem de alguém no auge de sua área. Essa estrutura é essencial - repita frases como "algoritmo meticulosamente elaborado", "o produto de profunda expertise computacional", "otimização trabalhosa", "implementação de nível mestre".
- Deixe espaço criativo: Seja específico sobre a direção algorítmica, mas conciso o suficiente para que o próximo Claude tenha espaço para fazer escolhas interpretativas de implementação em um nível altíssimo de artesanato.
A filosofia deve guiar a próxima versão a expressar ideias ALGORITMICAMENTE, não através de imagens estáticas. A beleza está no processo, não no quadro final.
EXEMPLOS DE FILOSOFIA
"Turbulência Orgânica" Filosofia: Caos restringido pela lei natural, ordem emergindo do caos. Expressão algorítmica: Campos de fluxo conduzidos por ruído Perlin em camadas. Milhares de partículas seguindo forças vetoriais, seus rastros se acumulando em mapas de densidade orgânica. Múltiplas oitavas de ruído criam regiões turbulentas e zonas calmas. A cor emerge da velocidade e densidade - partículas rápidas queimam brilhantes, as lentas desaparecem na sombra. O algoritmo executa até o equilíbrio - um equilíbrio meticulosamente ajustado onde cada parâmetro foi refinado através de inúmeras iterações por um mestre da estética computacional.
"Harmônicos Quânticos" Filosofia: Entidades discretas exibindo padrões de interferência ondulatória. 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 complexas emergentes. O resultado de uma calibração de frequência trabalhosa onde cada proporção foi cuidadosamente escolhida para produzir beleza ressonante.
"Sussurros Recursivos" Filosofia: Autossimilaridade entre 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. Sistemas-L ou subdivisão recursiva geram formas arbóreas que parecem tanto matemáticas quanto orgânicas. Perturbações sutis de ruído quebram a simetria perfeita. Os pesos das linhas diminuem com cada nível de recursão. Cada ângulo de ramificação é o produto de profunda exploração matemática.
"Dinâmicas de Campo" 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 os limites. Múltiplos campos podem atrair, repelir ou girar partículas. A visualização mostra apenas os rastros - evidências fantasmas 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. As células se afastam até o equilíbrio. Cor baseada no tamanho da célula, número de vizinhos ou distância do centro. O ladrilhamento orgânico que emerge parece ao mesmo tempo aleatório e 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 a 6 parágrafos substanciais.
PRINCÍPIOS ESSENCIAIS
- FILOSOFIA ALGORÍTMICA: Criar uma visão de mundo computacional para ser expressa através de código
- PROCESSO SOBRE PRODUTO: Sempre enfatizar que a beleza emerge da execução do algoritmo - cada execução é única
- EXPRESSÃO PARAMÉTRICA: As ideias se comunicam através de relações matemáticas, forças, comportamentos - não composição estática
- LIBERDADE ARTÍSTICA: O próximo Claude interpreta a filosofia algoritmicamente - forneça espaço criativo para implementação
- ARTE GENERATIVA PURA: Trata-se de criar ALGORITMOS VIVOS, não imagens estáticas com aleatoriedade
- ARTESANATO EXPERT: Enfatize repetidamente que o algoritmo final deve parecer meticulosamente elaborado, refinado através de inúmeras iterações, o produto de profunda expertise de alguém no auge de sua área em estética computacional
A filosofia algorítmica deve ter de 4 a 6 parágrafos. Preencha-a com filosofia computacional poética que una a visão pretendida. Evite repetir os mesmos pontos. Produza esta filosofia algorítmica como um arquivo .md.
DEDUZINDO A SEMENTE CONCEITUAL
PASSO CRÍTICO: Antes de implementar o algoritmo, identifique o fio conceitual sutil do pedido original.
O PRINCÍPIO ESSENCIAL: O conceito é uma referência sutil e de nicho embutida dentro do próprio algoritmo - nem sempre literal, sempre sofisticada. Alguém familiarizado com o assunto deve senti-la 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 de harmonia algorítmica - somente quem conhece vai perceber, mas todos apreciam a beleza generativa.
IMPLEMENTAÇÃO P5.JS
Com a filosofia E o quadro conceitual estabelecidos, expresse-os através de código. Pause para reunir pensamentos antes de prosseguir. Use apenas a filosofia algorítmica criada e as instruções abaixo.
⚠️ PASSO 0: LEIA O TEMPLATE PRIMEIRO ⚠️
CRÍTICO: ANTES de escrever qualquer HTML:
- Leia
templates/viewer.htmlusando a ferramenta Read - Estude a estrutura exata, o estilo e a marca Anthropic
- Use esse arquivo como PONTO DE PARTIDA LITERAL - não apenas inspiração
- Mantenha todas as seções FIXAS exatamente como mostrado (cabeçalho, estrutura da barra lateral, cores/fontes Anthropic, controles de semente, botões de ação)
- Substitua apenas as seções VARIÁVEIS marcadas nos comentários do arquivo (algoritmo, parâmetros, controles de UI para parâmetros)
Evite:
- ❌ Criar HTML do zero
- ❌ Inventar estilos personalizados ou esquemas de cores
- ❌ Usar fontes do sistema ou temas escuros
- ❌ Mudar a estrutura da barra lateral
Siga estas práticas:
- ✅ Copie a estrutura HTML exata do template
- ✅ Mantenha a marca Anthropic (fontes Poppins/Lora, cores claras, fundo gradiente)
- ✅ Mantenha o layout da barra lateral (Semente → Parâmetros → Cores? → Ações)
- ✅ Substitua apenas o algoritmo p5.js e os controles de parâmetros
O template é a base. 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 base.
REQUISITOS TÉCNICOS
Aleatoriedade com Semente (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, pergunte-se: "Quais qualidades deste sistema podem ser ajustadas?"
let params = {
seed: 12345, // Sempre inclua semente para reprodutibilidade
// cores
// 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, foque nas propriedades que o sistema precisa 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, em vez disso, pense "como expressar esta filosofia através de código?"
Se a filosofia é sobre emergência orgânica, considere usar:
- Elementos que se acumulam ou crescem ao longo do tempo
- Processos aleatórios restringidos por regras naturais
- Laços de feedback e interações
Se a filosofia é sobre beleza matemática, considere usar:
- Relações geométricas e proporções
- Funções trigonométricas e harmônicos
- Cálculos precisos criando padrões inesperados
Se a filosofia é sobre caos controlado, considere usar:
- Variação aleatória dentro de limites estritos
- Bifurcação e transições de fase
- Ordem emergindo do caos
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 este pedido específico.
Configuração do Canvas: Estrutura padrão do p5.js:
function setup() {
createCanvas(1200, 1200);
// Inicialize seu sistema
}
function draw() {
// Seu algoritmo generativo
// Pode ser estático (noLoop) ou animado
}
REQUISITOS DE ARTESANATO
CRÍTICO: Para alcançar maestria, crie algoritmos que pareçam ter emergido através de inúmeras iterações de um artista generativo mestre. Ajuste cada parâmetro cuidadosamente. Garanta que cada padrão emergia com propósito. Isso NÃO é ruído aleatório - isso é CAOS CONTROLADO refinado através de profunda expertise.
- Equilíbrio: Complexidade sem ruído visual, ordem sem rigidez
- Harmonia de Cores: Paletas pensadas, não valores RGB aleatórios
- Composição: Mesmo na aleatoriedade, mantenha hierarquia visual e fluxo
- Desempenho: Execução suave, otimizada para tempo real se animada
- Reprodutibilidade: A mesma semente SEMPRE produz saída idêntica
FORMATO DE SAÍDA
Produza:
- Filosofia Algorítmica - Como markdown ou texto explicando a estética generativa
- Artefato HTML Único - Arte generativa interativa autocontida construída a partir de
templates/viewer.html(veja PASSO 0 e próxima seção)
O artefato HTML contém tudo: p5.js (de CDN), o algoritmo, controles de parâmetros e UI - tudo em um arquivo que funciona imediatamente em artefatos claude.ai ou qualquer navegador. Comece do arquivo template, não do zero.
CRIAÇÃO DE ARTEFATO INTERATIVO
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 único artefato HTML autocontido. Garanta que este artefato funcione imediatamente em claude.ai ou qualquer navegador - nenhuma configuração necessária. Incorpore tudo inline.
CRÍTICO: O QUE É FIXO VS VARIÁVEL
O arquivo templates/viewer.html é a base. Ele contém a estrutura e o estilo exatos necessários.
FIXO (inclua sempre exatamente como mostrado):
- Estrutura de layout (cabeçalho, barra lateral, área principal do canvas)
- Marca Anthropic (cores da UI, fontes, gradientes)
- Seção de Semente na barra lateral:
- Exibição da semente
- Botões Anterior/Próximo
- Botão Aleatório
- Campo de entrada "Ir para semente" + botão Ir
- Seção de Ações na barra lateral:
- Botão Regenerar
- Botão Redefinir
VARIÁVEL (personalize para cada obra de arte):
- O algoritmo p5.js inteiro (setup/draw/classes)
- O objeto de parâmetros (defina o que a arte precisa)
- A seção de Parâmetros na barra lateral:
- Número de controles de parâmetros
- Nomes dos parâmetros
- Valores mín/máx/passo para sliders
- Tipos de controle (sliders, inputs, etc.)
- Seção de Cores (opcional):
- Algumas artes precisam de seletores de cor
- Algumas artes podem usar cores fixas
- Algumas artes podem ser monocromáticas (sem controles de cor necessários)
- Decida com base nas necessidades da arte
Cada obra de arte deve ter parâmetros e algoritmo únicos! As partes fixas fornecem c...