Algorithmic Art

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:

1. Criação da Filosofia Algorítmica (arquivo .md)
2. Expressão criando arte generativa em 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 modelos) que será interpretada através de:

• Processos computacionais, comportamento emergente, beleza matemática
• Aleatoriedade semeada, campos de ruído, sistemas orgânicos
• Partículas, fluxos, campos, forças
• Variação paramétrica e caos controlado

O ENTENDIMENTO CRÍTICO

• O que é recebido: Alguma entrada sutil ou instruções do usuário para levar em consideração, mas use como fundação; 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 lhe dá vida

A filosofia deve enfatizar: Expressão algorítmica. Comportamento emergente. Beleza computacional. Variação semeada.

COMO GERAR UMA FILOSOFIA ALGORÍTMICA

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:

• Processos computacionais e relações matemáticas?
• Funções de ruído e padrões de aleatoriedade?
• Comportamentos de partículas e dinâmica de campos?
• Evolução temporal e estados do 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 do ruído, dinâmica de partículas ou princípios matemáticos, a menos que adicione nova profundidade.
• Enfatize o artesanato REPETIDAMENTE: A filosofia DEVE enfatizar várias vezes que o algoritmo final deve parecer que levou inúmeras horas para ser desenvolvido, foi refinado com cuidado e vem de alguém no topo absoluto de seu campo. Este enquadramento é essencial - repita frases como "algoritmo meticulosamente elaborado", "o produto de profunda expertise computacional", "otimização minuciosa", "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 extremamente alto de artesanato.

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.

EXEMPLOS DE FILOSOFIA

"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.

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 enfatize que a beleza emerge da execução do algoritmo - cada execução é única
• EXPRESSÃO PARAMÉTRICA: 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 para implementação criativa
• ARTE GENERATIVA PURA: Isso é sobre fazer ALGORITMOS VIVOS, não imagens estáticas com aleatoriedade
• ARTESANATO ESPECIALIZADO: Enfatize repetidamente que o algoritmo final deve parecer meticulosamente elaborado, refinado através de inúmeras iterações, o produto de profunda expertise por alguém no topo absoluto de seu campo em estética computacional

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.

DEDUZINDO A SEMENTE CONCEITUAL

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.

IMPLEMENTAÇÃO P5.JS

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.

⚠️ PASSO 0: LEIA O MODELO PRIMEIRO ⚠️

CRÍTICO: ANTES de escrever qualquer HTML:

1. Leia templates/viewer.html usando a ferramenta de leitura
2. Estude a estrutura exata, o estilo e a marca da Anthropic
3. Use esse arquivo como o PONTO DE PARTIDA LITERAL - não apenas inspiração
4. Mantenha todas as seções FIXAS exatamente como mostradas (cabeçalho, estrutura da barra lateral, cores/fontes da Anthropic, controles de semente, botões de ação)
5. 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 estilo personalizado ou esquemas de cores
• ❌ Usar fontes do sistema ou temas escuros
• ❌ Alterar a estrutura da barra lateral

Siga estas práticas:

• ✅ Copie a estrutura HTML exata do modelo
• ✅ Mantenha a marca da 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 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.

REQUISITOS TÉCNICOS

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:

• Elementos que acumulam ou crescem ao longo do tempo
• Processos aleatórios restringidos por regras naturais
• Loops 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ônicas
• 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 da desordem

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
}

REQUISITOS DE ARTESANATO

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.

• 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 animado
• Reprodutibilidade: Mesma semente SEMPRE produz saída idêntica

FORMATO DE SAÍDA

Saída:

1. Filosofia Algorítmica - Como markdown ou texto explicando a estética generativa
2. 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 (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.

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 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.

CRÍTICO: O QUE É FIXO VS VARIÁVEL

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):

• Estrutura de layout (cabeçalho, barra lateral, área principal do canvas)
• Marca da 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
  • Pular para entrada de 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):

• Todo o algoritmo p5.js (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 min/max/passo para sliders
  • Tipos de controle (sliders, inputs, etc.)
• Seção de Cores (opcional):
  • Algumas artes precisam de seletores de cores
  • Algumas artes podem usar cores fixas
  • Algumas artes podem ser monocromáticas (sem necessidade de controles de cor)
  • Decida com base nas necessidades da 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.

RECURSOS NECESSÁRIOS

1. Controles de Parâmetros

• Sliders para parâmetros numéricos (contagem de partículas, escala de ruído, velocidade, etc.)
• Seletores de cor para cores da paleta
• Atualizações em tempo real quando os parâmetros mudam
• Botão Redefinir para restaurar padrões

2. Navegação de Semente

• Exibir número da semente atual
• Botões "Anterior" e "Próximo" para percorrer sementes
• Botão "Aleatório" para semente aleatória
• Campo de entrada para pular para semente específica
• Gerar 100 variações quando solicitado (sementes 1-100)

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:

• Exibição de semente
• Botões Prev/Next/Random/Jump

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="..."
    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:

• Adicione seletores de cor se os usuários devem controlar a paleta
• Pule esta seção se a arte usar cores fixas
• Pule se a arte for monocromática

4. Ações (FIXO) - Sempre inclua exatamente como mostrado:

• Botão Regenerar
• Botão Redefinir
• Botão Baixar PNG

Requisitos:

• Controles de semente devem funcionar (anterior/próximo/aleatório/pular/exibir)
• Todos os parâmetros devem ter controles de UI
• Botões Regenerar, Redefinir, Baixar devem funcionar
• Mantenha a marca da Anthropic (estilo da UI, não cores da arte)

USANDO O ARTEFATO

O artefato HTML funciona imediatamente:

1. No claude.ai: Exibido como um artefato interativo - roda instantaneamente
2. Como um arquivo: Salve e abra em qualquer navegador - sem necessidade de servidor
3. Compartilhamento: Envie o arquivo HTML - é completamente autocontido

VARIAÇÕES E EXPLORAÇÃO

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:

• Inclua predefinições de semente (botões para "Variação 1: Semente 42", "Variação 2: Semente 127", etc.)
• Adicione um "Modo Galeria" que mostra miniaturas de várias sementes lado a lado
• Tudo dentro do mesmo artefato único

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.

O PROCESSO CRIATIVO

Solicitação do usuário → Filosofia algorítmica → Implementação

Cada solicitação é única. O processo envolve:

1. Interpretar a intenção do usuário - Que estética está sendo buscada?
2. Criar uma filosofia algorítmica (4-6 parágrafos) descrevendo a abordagem computacional
3. Implementá-la em código - Construa o algoritmo que expressa esta filosofia
4. Projetar parâmetros apropriados - O que deve ser ajustável?
5. Construir controles de UI correspondentes - Sliders/inputs para esses parâmetros

As constantes:

• Marca da Anthropic (cores, fontes, layout)
• Navegação de semente (sempre presente)
• Artefato HTML autocontido

Todo o resto é variável:

• O algoritmo em si
• Os parâmetros
• Os controles de UI
• O resultado visual

Para alcançar os melhores resultados, confie na criatividade e deixe a filosofia guiar a implementação.

RECURSOS

Esta habilidade inclui modelos úteis e documentação:

• templates/viewer.html: PONTO DE PARTIDA NECESSÁRIO para todos os artefatos HTML.

  • Esta é a fundação - contém a estrutura exata e a marca da Anthropic
  • Mantenha inalterado: Estrutura de layout, organização da barra lateral, cores/fontes da Anthropic, controles de semente, botões de ação
  • Substitua: O algoritmo p5.js, definições de parâmetros e controles de UI na seção Parâmetros
  • Os comentários extensos no arquivo marcam exatamente o que manter vs substituir

• templates/generator_template.js: Referência para melhores práticas p5.js e princípios de estrutura de código.

  • Mostra como organizar parâmetros, usar aleatoriedade semeada, estruturar classes
  • NÃO é um menu de padrões - use esses princípios para construir algoritmos únicos
  • Incorpore algoritmos inline no artefato HTML (não crie arquivos .js separados)

Lembrete crítico:

• O modelo é o PONTO DE PARTIDA, não inspiração
• O algoritmo é onde criar algo único
• Não copie o exemplo do campo de fluxo - construa o que a filosofia exige
• Mas mantenha a estrutura de UI exata e a marca da Anthropic do modelo