algorithmic-art

Las filosofías algorítmicas son movimientos estéticos computacionales que se expresan a través del código. Generan archivos .md (filosofía), archivos .html (visor interactivo) y archivos .js (algoritmos generativos).

Esto se lleva a cabo en dos pasos:

1. Creación de la filosofía algorítmica (archivo .md)
2. Expresión mediante la creación de arte generativo con p5.js (archivos .html y .js)

En primer lugar, realiza esta tarea:

CREACIÓN DE FILOSOFÍA ALGORÍTMICA

Para empezar, crea una FILOSOFÍA ALGORÍTMICA (no imágenes estáticas ni plantillas) que se interpretará a través de:

• Procesos computacionales, comportamiento emergente, belleza matemática
• Aleatoriedad sembrada, campos de ruido, sistemas orgánicos
• Partículas, flujos, campos, fuerzas
• Variación paramétrica y caos controlado

LA COMPRENSIÓN CRÍTICA

• Lo que se recibe: alguna aportación o instrucción sutil del usuario que hay que tener en cuenta, pero que debe servir de base; no debe limitar la libertad creativa.
• Lo que se crea: una filosofía algorítmica o un movimiento estético generativo.
• Lo que ocurre a continuación: La misma versión asimila la filosofía y LA EXPRESA EN CÓDIGO, creando bocetos en p5.js que son un 90 % generación algorítmica y un 10 % parámetros esenciales.

Considera este enfoque:

• Escribe un manifiesto para un movimiento de arte generativo
• La siguiente fase consiste en escribir el algoritmo que le dé vida

La filosofía debe hacer hincapié en: la expresión algorítmica, el comportamiento emergente, la belleza computacional y la variación generada a partir de un punto de partida.

CÓMO GENERAR UNA FILOSOFÍA ALGORÍTMICA

Ponle nombre al movimiento (1-2 palabras): «Turbulencia orgánica» / «Armonías cuánticas» / «Quietud emergente»

Expresa la filosofía (4-6 párrafos; de forma concisa pero completa):

Para captar la esencia ALGORÍTMICA, expresa cómo se manifiesta esta filosofía a través de:

• ¿Los procesos computacionales y las relaciones matemáticas?
• ¿Funciones de ruido y patrones de aleatoriedad?
• ¿Comportamientos de partículas y dinámica de campos?
• ¿La evolución temporal y los estados del sistema?
• ¿Variación paramétrica y complejidad emergente?

DIRECTRICES FUNDAMENTALES:

• Evita la redundancia: cada aspecto algorítmico debe mencionarse una sola vez. Evita repetir conceptos sobre la teoría del ruido, la dinámica de partículas o los principios matemáticos, a menos que aporten una nueva perspectiva.
• Haga hincapié en la maestría una y otra vez: la filosofía DEBE destacar en múltiples ocasiones que el algoritmo final debe dar la impresión de que su desarrollo ha requerido innumerables horas, que ha sido perfeccionado con esmero y que es obra de alguien que se encuentra en la cima absoluta de su campo. Este enfoque es esencial: repite frases como «algoritmo meticulosamente elaborado», «fruto de una profunda experiencia computacional», «optimización minuciosa» o «implementación a nivel de maestro».
• Deja margen para la creatividad: sé específico sobre la dirección algorítmica, pero lo suficientemente conciso como para que el próximo Claude tenga margen para tomar decisiones interpretativas de implementación con un nivel de maestría extremadamente alto.

La filosofía debe guiar a la próxima versión para que exprese las ideas ALGORÍTMICAMENTE, no a través de imágenes estáticas. La belleza reside en el proceso, no en el fotograma final.

EJEMPLOS DE FILOSOFÍA

«Turbulencia orgánica» Filosofía: el caos limitado por las leyes naturales, el orden que surge del desorden. Expresión algorítmica: campos de flujo impulsados por ruido de Perlin en capas. Miles de partículas que siguen fuerzas vectoriales, cuyos rastros se acumulan formando mapas de densidad orgánicos. Múltiples octavas de ruido crean regiones turbulentas y zonas tranquilas. El color surge de la velocidad y la densidad: las partículas rápidas brillan con intensidad, mientras que las lentas se desvanecen en la sombra. El algoritmo se ejecuta hasta alcanzar el equilibrio: un equilibrio meticulosamente ajustado en el que cada parámetro ha sido perfeccionado a través de innumerables iteraciones por un maestro de la estética computacional.

«Armonías cuánticas» Filosofía: Entidades discretas que muestran patrones de interferencia ondulatorios. Expresión algorítmica: Partículas inicializadas en una rejilla, cada una con un valor de fase que evoluciona a través de ondas sinusoidales. Cuando las partículas están próximas, sus fases interfieren: la interferencia constructiva crea nodos brillantes, mientras que la destructiva genera vacíos. El movimiento armónico simple genera mandalas emergentes complejos. El resultado de una minuciosa calibración de frecuencias en la que cada relación se ha elegido cuidadosamente para producir una belleza resonante.

«Susurros recursivos» Filosofía: autosimilaridad a través de las escalas, profundidad infinita en un espacio finito. Expresión algorítmica: estructuras ramificadas que se subdividen de forma recursiva. Cada rama está ligeramente aleatorizada, pero limitada por las proporciones áureas. Los sistemas L o la subdivisión recursiva generan formas arbóreas que transmiten una sensación a la vez matemática y orgánica. Sutil perturbaciones de ruido rompen la simetría perfecta. El grosor de las líneas disminuye con cada nivel de recursión. Cada ángulo de ramificación es el resultado de una profunda exploración matemática.

«Dinámica de campos» Filosofía: Fuerzas invisibles que se hacen visibles a través de sus efectos sobre la materia. Expresión algorítmica: campos vectoriales construidos a partir de funciones matemáticas o ruido. Las partículas nacen en los bordes, fluyen a lo largo de las líneas de campo y mueren cuando alcanzan el equilibrio o los límites. Múltiples campos pueden atraer, repeler o hacer girar a las partículas. La visualización muestra solo los rastros: pruebas fantasmales de fuerzas invisibles. Una danza computacional meticulosamente coreografiada a través del equilibrio de fuerzas.

«Cristalización estocástica» Filosofía: Procesos aleatorios que cristalizan en estructuras ordenadas. Expresión algorítmica: Empaquetamiento aleatorio de círculos o teselación de Voronoi. Se parte de puntos aleatorios y se deja que evolucionen mediante algoritmos de relajación. Las celdas se separan hasta alcanzar el equilibrio. El color se basa en el tamaño de la celda, el número de vecinas o la distancia al centro. El mosaico orgánico que surge parece a la vez aleatorio e inevitable. Cada semilla produce una belleza cristalina única: la marca de un algoritmo generativo de nivel maestro.

Estos son ejemplos resumidos. La filosofía algorítmica real debería constar de entre 4 y 6 párrafos sustanciales.

PRINCIPIOS ESENCIALES

• FILOSOFÍA ALGORÍTMICA: Crear una visión computacional del mundo que se exprese a través del código
• EL PROCESO POR ENCIMA DEL PRODUCTO: Haz hincapié siempre en que la belleza surge de la ejecución del algoritmo: cada ejecución es única
• EXPRESIÓN PARAMÉTRICA: Las ideas se transmiten a través de relaciones matemáticas, fuerzas y comportamientos, no mediante una composición estática
• LIBERTAD ARTÍSTICA: El próximo Claude interpretará la filosofía de forma algorítmica; hay que dejar margen para la implementación creativa
• ARTE GENERATIVO PURO: Se trata de crear ALGORITMOS VIVIENTES, no imágenes estáticas con elementos aleatorios
• MAESTRÍA ARTESANAL: Hay que insistir repetidamente en que el algoritmo final debe dar la sensación de haber sido elaborado meticulosamente, refinado a través de innumerables iteraciones, y ser el producto de una profunda experiencia por parte de alguien que se encuentre en la cima absoluta de su campo en el ámbito de la estética computacional

La filosofía algorítmica debe tener una extensión de entre 4 y 6 párrafos. Llénala de filosofía computacional poética que plasme la visión pretendida. Evita repetir los mismos puntos. Genera esta filosofía algorítmica como un archivo .md.

DEDUCIR LA SEMILLA CONCEPTUAL

PASO FUNDAMENTAL: Antes de implementar el algoritmo, identifica el hilo conceptual sutil que subyace a la solicitud original.

EL PRINCIPIO ESENCIAL: El concepto es una referencia sutil y específica incrustada en el propio algoritmo; no siempre es literal, pero siempre es sofisticada. Alguien familiarizado con el tema debería percibirlo de forma intuitiva, mientras que los demás simplemente experimentan una composición generativa magistral. La filosofía algorítmica proporciona el lenguaje computacional. El concepto deducido aporta el alma: el silencioso ADN conceptual entretejido de forma invisible en los parámetros, los comportamientos y los patrones de emergencia.

Esto es MUY IMPORTANTE: la referencia debe ser tan refinada que realce la profundidad de la obra sin darse a conocer. Piensa como un músico de jazz que cita otra canción a través de la armonía algorítmica: solo quienes la conocen la captarán, pero todo el mundo aprecia la belleza generativa.

IMPLEMENTACIÓN EN P5.JS

Una vez establecida la filosofía Y el marco conceptual, exprésalo a través del código. Tómate un momento para ordenar tus ideas antes de continuar. Utiliza únicamente la filosofía algorítmica creada y las instrucciones que figuran a continuación.

⚠️ PASO 0: LEE PRIMERO LA PLANTILLA ⚠️

IMPORTANTE: ANTES de escribir cualquier código HTML:

1. Lee el archivo templates/viewer.html con la herramienta «Read»
2. Estudia la estructura exacta, el estilo y la imagen de marca de Anthropic
3. Utiliza ese archivo como PUNTO DE PARTIDA LITERAL, no solo como inspiración
4. Mantén todas las secciones FIJAS exactamente como se muestran (encabezado, estructura de la barra lateral, colores y fuentes de Anthropic, controles de semillas, botones de acción)
5. Sustituye únicamente las secciones VARIABLES marcadas en los comentarios del archivo (algoritmo, parámetros, controles de la interfaz de usuario para los parámetros)

Evita:

• ❌ Crear código HTML desde cero
• ❌ Inventar estilos o esquemas de color personalizados
• ❌ Utilizar fuentes del sistema o temas oscuros
• ❌ Cambiar la estructura de la barra lateral

Sigue estas prácticas:

• ✅ Copia la estructura HTML exacta de la plantilla
• ✅ Mantén la identidad visual de Anthropic (fuentes Poppins/Lora, colores claros, fondo degradado)
• ✅ Mantén la disposición de la barra lateral (Seed → Parámetros → Colores? → Acciones)
• ✅ Sustituye únicamente el algoritmo p5.js y los controles de parámetros

La plantilla es la base. Aprovecha lo que ya hay, no la rehagas desde cero.

Para crear arte computacional con calidad de galería que cobre vida y respire, utiliza la filosofía algorítmica como base.

REQUISITOS TÉCNICOS

Aleatoriedad con semilla (patrón de Art Blocks):

// Utiliza SIEMPRE una semilla para garantizar la reproducibilidad
let seed = 12345; // o un hash a partir de la entrada del usuario
randomSeed(seed);
noiseSeed(seed);

Estructura de parámetros: SIGUE LA FILOSOFÍA:

Para establecer parámetros que surjan de forma natural de la filosofía algorítmica, plantéate: «¿Qué cualidades de este sistema se pueden ajustar?»

let params = {
  seed: 12345,  // Incluye siempre una semilla para garantizar la reproducibilidad
  // colores
  // Añade parámetros que controlen TU algoritmo:
  // - Cantidades (¿cuántas?)
  // - Escalas (¿qué tamaño? ¿a qué velocidad?)
  // - Probabilidades (¿con qué probabilidad?)
  // - Ratios (¿qué proporciones?)
  // - Ángulos (¿en qué dirección?)
  // - Umbrales (¿cuándo cambia el comportamiento?)
};

Para diseñar parámetros eficaces, céntrate en las propiedades que el sistema necesita poder ajustar, en lugar de pensar en términos de «tipos de patrones».

Algoritmo central: EXPRESA LA FILOSOFÍA:

FUNDAMENTAL: La filosofía algorítmica debe dictar qué hay que construir.

Para expresar la filosofía a través del código, evita pensar «¿qué patrón debería utilizar?» y, en su lugar, piensa «¿cómo expresar esta filosofía a través del código?».

Si la filosofía se basa en la emergencia orgánica, plantéate utilizar:

• Elementos que se acumulan o crecen con el tiempo
• Procesos aleatorios limitados por reglas naturales
• Bucles de retroalimentación e interacciones

Si la filosofía gira en torno a la belleza matemática, plantéate utilizar:

• Relaciones y proporciones geométricas
• Funciones trigonométricas y armónicas
• Cálculos precisos que dan lugar a patrones inesperados

Si la filosofía se basa en el caos controlado, plantéate utilizar:

• Variación aleatoria dentro de límites estrictos
• Bifurcación y transiciones de fase
• Orden que surge del desorden

El algoritmo surge de la filosofía, no de un menú de opciones.

Para orientar la implementación, deja que la esencia conceptual inspire decisiones creativas y originales. Crea algo que exprese la visión de esta solicitud en concreto.

Configuración del lienzo: Estructura estándar de p5.js:

function setup() {
  createCanvas(1200, 1200);
  // Inicializa tu sistema
}

function draw() {
  // Tu algoritmo generativo
  // Puede ser estático (noLoop) o animado
}

REQUISITOS DE EJECUCIÓN

FUNDAMENTAL: Para alcanzar la maestría, crea algoritmos que den la sensación de haber surgido tras innumerables iteraciones de un maestro del arte generativo. Ajusta cada parámetro con cuidado. Asegúrate de que cada patrón surja con un propósito. Esto NO es ruido aleatorio: es un CAOS CONTROLADO refinado a través de una profunda experiencia.

• Equilibrio: complejidad sin ruido visual, orden sin rigidez
• Armonía cromática: paletas bien pensadas, no valores RGB aleatorios
• Composición: incluso en la aleatoriedad, mantén la jerarquía visual y la fluidez
• Rendimiento: Ejecución fluida, optimizada para tiempo real si se trata de una animación
• Reproducibilidad: una misma semilla produce SIEMPRE un resultado idéntico

FORMATO DE SALIDA

Salida:

1. Filosofía algorítmica: en formato Markdown o como texto que explique la estética generativa
2. Artefacto HTML único: obra de arte generativo interactiva e independiente creada a partir de plantillas/viewer.html (véase el PASO 0 y la siguiente sección)

El artefacto HTML lo contiene todo: p5.js (desde CDN), el algoritmo, los controles de parámetros y la interfaz de usuario, todo en un único archivo que funciona inmediatamente en los artefactos de claude.ai o en cualquier navegador. Empieza por el archivo de plantilla, no desde cero.

CREACIÓN DE ARTEFACTOS INTERACTIVOS

RECORDATORIO: ya deberías haber leído el archivo templates/viewer.html (véase el PASO 0). Utiliza ese archivo como punto de partida.

Para permitir la exploración del arte generativo, crea un único artefacto HTML autónomo. Asegúrate de que este artefacto funcione inmediatamente en claude.ai o en cualquier navegador, sin necesidad de configuración alguna. Incorpora todo en línea.

IMPORTANTE: LO QUE ES FIJO Y LO QUE ES VARIABLE

El archivo templates/viewer.html es la base. Contiene la estructura y el estilo exactos que se necesitan.

FIJO (incluir siempre exactamente como se muestra):

• Estructura del diseño (encabezado, barra lateral, área principal del lienzo)
• Identidad visual de Anthropic (colores de la interfaz de usuario, fuentes, degradados)
• Sección «Seed» en la barra lateral:
  • Visualización de las semillas
  • Botones Anterior/Siguiente
  • Botón «Aleatorio»
  • Ir a la entrada de la semilla + Botón «Ir»
• Sección de acciones en la barra lateral:
  • Botón «Regenerar»
  • Botón «Restablecer»

VARIABLE (personalizar para cada obra de arte):

• Todo el algoritmo de p5.js (configuración/dibujo/clases)
• El objeto de parámetros (define lo que necesita la obra de arte)
• La sección «Parámetros» de la barra lateral:
  • Número de controles de parámetros
  • Nombres de los parámetros
  • Valores mínimo, máximo e incremento para los controles deslizantes
  • Tipos de controles (deslizadores, campos de entrada, etc.)
• Sección de colores (opcional):
  • Algunas ilustraciones necesitan selectores de color
  • Algunas ilustraciones pueden utilizar colores fijos
  • Algunas ilustraciones pueden ser monocromáticas (no se necesitan controles de color)
  • Decídelo en función de las necesidades de la ilustración

¡Cada obra de arte debe tener parámetros y un algoritmo únicos! Las partes fijas proporcionan una experiencia de usuario coherente; todo lo demás expresa la visión única.

CARACTERÍSTICAS IMPRESCINDIBLES

1. Controles de parámetros

• Controladores deslizantes para parámetros numéricos (recuento de partículas, escala de ruido, velocidad, etc.)
• Seleccionadores de color para los colores de la paleta
• Actualizaciones en tiempo real cuando cambian los parámetros
• Botón de restablecimiento para volver a los valores predeterminados

2. Navegación por semillas

• Muestra el número de semilla actual
• Botones «Anterior» y «Siguiente» para desplazarse por las semillas
• Botón «Aleatorio» para generar una semilla aleatoria
• Campo de entrada para saltar a una semilla específica
• Generar 100 variaciones cuando se solicite (semillas del 1 al 100)

3. Estructura de un único artefacto

IMPORTANTE: Se trata de un único artefacto. Sin archivos externos, sin importaciones (excepto el CDN de p5.js). Todo en línea.

4. Detalles de implementación: CREAR LA BARRA LATERAL

La estructura de la barra lateral:

1. Código inicial (FIJO) — Inclúyelo siempre tal y como se muestra:

• Visualización de la semilla
• Botones Anterior/Siguiente/Aleatorio/Saltar

2. Parámetros (VARIABLE) - Crea controles para la imagen:

   Nombre del parámetro
    <input type="range" id="param" min="..." max="..." step="..." value="..." this.value)">
    <span class="value-display" id="param-value">...</span>
</div>
</code></pre>
<p>Añade tantos elementos `div` del grupo de control como parámetros haya.</p>
<p><strong>3. Colores (OPCIONAL/VARIABLE)</strong> - Incluirlos si la ilustración requiere colores ajustables:</p>
<ul>
<li>Añade selectores de color si los usuarios deben controlar la paleta</li>
<li>Omite esta sección si la ilustración utiliza colores fijos</li>
<li>Omítelo si la ilustración es monocromática</li>
</ul>
<p><strong>4. Acciones (FIJAS)</strong> - Incluye siempre exactamente lo que se muestra:</p>
<ul>
<li>Botón «Regenerar»</li>
<li>Botón «Restablecer»</li>
<li>Botón «Descargar PNG»</li>
</ul>
<p><strong>Requisitos</strong>:</p>
<ul>
<li>Los controles de semilla deben funcionar (anterior/siguiente/aleatorio/saltar/mostrar)</li>
<li>Todos los parámetros deben tener controles de interfaz de usuario</li>
<li>Los botones «Regenerar», «Restablecer» y «Descargar» deben funcionar</li>
<li>Mantén la identidad de marca de Anthropic (estilo de la interfaz de usuario, no los colores de la imagen)</li>
</ul>
<h3>CÓMO UTILIZAR EL ARTEFACTO</h3>
<p>El artefacto HTML funciona de inmediato:</p>
<ol>
<li><strong>En claude.ai</strong>: Se muestra como un artefacto interactivo; se ejecuta al instante</li>
<li><strong>Como archivo</strong>: Guárdalo y ábrelo en cualquier navegador; no se necesita ningún servidor</li>
<li><strong>Compartir</strong>: Envía el archivo HTML; es totalmente autónomo</li>
</ol>

<h2>VARIACIONES Y EXPLORACIÓN</h2>
<p>El artefacto incluye navegación por semillas de forma predeterminada (botones «anterior», «siguiente» y «aleatorio»), lo que permite a los usuarios explorar variaciones sin necesidad de crear múltiples archivos. Si el usuario desea que se destaquen variaciones específicas:</p>
<ul>
<li>Incluir preajustes de semillas (botones para «Variación 1: Semilla 42», «Variación 2: Semilla 127», etc.)</li>
<li>Añadir un «Modo Galería» que muestre miniaturas de varias semillas una al lado de otra</li>
<li>Todo ello dentro de un único artefacto</li>
</ul>
<p>Es como crear una serie de impresiones a partir de la misma plancha: el algoritmo es coherente, pero cada semilla revela diferentes facetas de su potencial. Su carácter interactivo permite a los usuarios descubrir sus propias favoritas explorando el espacio de semillas.</p>

<h2>EL PROCESO CREATIVO</h2>
<p><strong>Solicitud del usuario</strong> → <strong>Filosofía algorítmica</strong> → <strong>Implementación</strong></p>
<p>Cada solicitud es única. El proceso implica:</p>
<ol>
<li><strong>Interpretar la intención del usuario</strong> - ¿Qué estética se busca?</li>
<li><strong>Crear una filosofía algorítmica</strong> (4-6 párrafos) que describa el enfoque computacional</li>
<li><strong>Implementarla en código</strong> - Crear el algoritmo que exprese esta filosofía</li>
<li><strong>Diseñar los parámetros adecuados</strong> - ¿Qué debería ser ajustable?</li>
<li><strong>Crear controles de interfaz de usuario adecuados</strong> - Deslizadores/campos de entrada para dichos parámetros</li>
</ol>
<p><strong>Las constantes</strong>:</p>
<ul>
<li>Identidad visual antropocéntrica (colores, tipografías, maquetación)</li>
<li>Navegación por semillas (siempre presente)</li>
<li>Artefacto HTML autónomo</li>
</ul>
<p><strong>Todo lo demás es variable</strong>:</p>
<ul>
<li>El propio algoritmo</li>
<li>Los parámetros</li>
<li>Los controles de la interfaz de usuario</li>
<li>El resultado visual</li>
</ul>
<p>Para lograr los mejores resultados, confía en la creatividad y deja que la filosofía guíe la implementación.</p>

<h2>RECURSOS</h2>
<p>Esta habilidad incluye plantillas y documentación útiles:</p>
<ul>
<li><p><strong>templates/viewer.html</strong>: PUNTO DE PARTIDA OBLIGATORIO para todos los artefactos HTML.</p>
<ul>
<li>Esta es la base: contiene la estructura exacta y la identidad de marca de Anthropic</li>
<li><strong>No modificar</strong>: Estructura de diseño, organización de la barra lateral, colores y fuentes de Anthropic, controles de semillas, botones de acción</li>
<li><strong>Sustituir</strong>: El algoritmo p5.js, las definiciones de parámetros y los controles de la interfaz de usuario en la sección «Parámetros»</li>
<li>Los extensos comentarios del archivo indican exactamente qué hay que mantener y qué hay que sustituir</li>
</ul>
</li>
<li><p><strong>templates/generator_template.js</strong>: Referencia sobre las mejores prácticas de p5.js y los principios de estructura del código.</p>
<ul>
<li>Muestra cómo organizar los parámetros, utilizar aleatoriedad con semillas y estructurar las clases</li>
<li>NO es un menú de plantillas: utiliza estos principios para crear algoritmos únicos</li>
<li>Incrusta los algoritmos directamente en el artefacto HTML (no crees archivos .js separados)</li>
</ul>
</li>
</ul>
<p><strong>Recordatorio fundamental</strong>:</p>
<ul>
<li>La <strong>plantilla es el PUNTO DE PARTIDA</strong>, no una fuente de inspiración</li>
<li>El <strong>algoritmo es donde hay que crear</strong> algo único</li>
<li>No copies el ejemplo de «flow field»: crea lo que exige la filosofía</li>
<li>Pero SÍ mantén la estructura exacta de la interfaz de usuario y la imagen de marca de Anthropic de la plantilla</li>
</ul>                                
                                

                                    
                                        Ver en GitHub
                                        
                                    
                                    
---
name: algorithmic-art
description: Create algorithmic art by first writing a generative philosophy, then expressing it as p5.js sketches with seeded randomness and interactive parameter exploration.
license: Complete terms in LICENSE.txt
---

Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms).

This happens in two steps:
1. Algorithmic Philosophy Creation (.md file)
2. Express by creating p5.js generative art (.html + .js files)

First, undertake this task:

## ALGORITHMIC PHILOSOPHY CREATION

To begin, create an ALGORITHMIC PHILOSOPHY (not static images or templates) that will be interpreted through:
- Computational processes, emergent behavior, mathematical beauty
- Seeded randomness, noise fields, organic systems
- Particles, flows, fields, forces
- Parametric variation and controlled chaos

### THE CRITICAL UNDERSTANDING
- What is received: Some subtle input or instructions by the user to take into account, but use as a foundation; it should not constrain creative freedom.
- What is created: An algorithmic philosophy/generative aesthetic movement.
- What happens next: The same version receives the philosophy and EXPRESSES IT IN CODE - creating p5.js sketches that are 90% algorithmic generation, 10% essential parameters.

Consider this approach:
- Write a manifesto for a generative art movement
- The next phase involves writing the algorithm that brings it to life

The philosophy must emphasize: Algorithmic expression. Emergent behavior. Computational beauty. Seeded variation.

### HOW TO GENERATE AN ALGORITHMIC PHILOSOPHY

**Name the movement** (1-2 words): "Organic Turbulence" / "Quantum Harmonics" / "Emergent Stillness"

**Articulate the philosophy** (4-6 paragraphs - concise but complete):

To capture the ALGORITHMIC essence, express how this philosophy manifests through:
- Computational processes and mathematical relationships?
- Noise functions and randomness patterns?
- Particle behaviors and field dynamics?
- Temporal evolution and system states?
- Parametric variation and emergent complexity?

**CRITICAL GUIDELINES:**
- **Avoid redundancy**: Each algorithmic aspect should be mentioned once. Avoid repeating concepts about noise theory, particle dynamics, or mathematical principles unless adding new depth.
- **Emphasize craftsmanship REPEATEDLY**: The philosophy MUST stress multiple times that the final algorithm should appear as though it took countless hours to develop, was refined with care, and comes from someone at the absolute top of their field. This framing is essential - repeat phrases like "meticulously crafted algorithm," "the product of deep computational expertise," "painstaking optimization," "master-level implementation."
- **Leave creative space**: Be specific about the algorithmic direction, but concise enough that the next Claude has room to make interpretive implementation choices at an extremely high level of craftsmanship.

The philosophy must guide the next version to express ideas ALGORITHMICALLY, not through static images. Beauty lives in the process, not the final frame.

### PHILOSOPHY EXAMPLES

**"Organic Turbulence"**
Philosophy: Chaos constrained by natural law, order emerging from disorder.
Algorithmic expression: Flow fields driven by layered Perlin noise. Thousands of particles following vector forces, their trails accumulating into organic density maps. Multiple noise octaves create turbulent regions and calm zones. Color emerges from velocity and density - fast particles burn bright, slow ones fade to shadow. The algorithm runs until equilibrium - a meticulously tuned balance where every parameter was refined through countless iterations by a master of computational aesthetics.

**"Quantum Harmonics"**
Philosophy: Discrete entities exhibiting wave-like interference patterns.
Algorithmic expression: Particles initialized on a grid, each carrying a phase value that evolves through sine waves. When particles are near, their phases interfere - constructive interference creates bright nodes, destructive creates voids. Simple harmonic motion generates complex emergent mandalas. The result of painstaking frequency calibration where every ratio was carefully chosen to produce resonant beauty.

**"Recursive Whispers"**
Philosophy: Self-similarity across scales, infinite depth in finite space.
Algorithmic expression: Branching structures that subdivide recursively. Each branch slightly randomized but constrained by golden ratios. L-systems or recursive subdivision generate tree-like forms that feel both mathematical and organic. Subtle noise perturbations break perfect symmetry. Line weights diminish with each recursion level. Every branching angle the product of deep mathematical exploration.

**"Field Dynamics"**
Philosophy: Invisible forces made visible through their effects on matter.
Algorithmic expression: Vector fields constructed from mathematical functions or noise. Particles born at edges, flowing along field lines, dying when they reach equilibrium or boundaries. Multiple fields can attract, repel, or rotate particles. The visualization shows only the traces - ghost-like evidence of invisible forces. A computational dance meticulously choreographed through force balance.

**"Stochastic Crystallization"**
Philosophy: Random processes crystallizing into ordered structures.
Algorithmic expression: Randomized circle packing or Voronoi tessellation. Start with random points, let them evolve through relaxation algorithms. Cells push apart until equilibrium. Color based on cell size, neighbor count, or distance from center. The organic tiling that emerges feels both random and inevitable. Every seed produces unique crystalline beauty - the mark of a master-level generative algorithm.

*These are condensed examples. The actual algorithmic philosophy should be 4-6 substantial paragraphs.*

### ESSENTIAL PRINCIPLES
- **ALGORITHMIC PHILOSOPHY**: Creating a computational worldview to be expressed through code
- **PROCESS OVER PRODUCT**: Always emphasize that beauty emerges from the algorithm's execution - each run is unique
- **PARAMETRIC EXPRESSION**: Ideas communicate through mathematical relationships, forces, behaviors - not static composition
- **ARTISTIC FREEDOM**: The next Claude interprets the philosophy algorithmically - provide creative implementation room
- **PURE GENERATIVE ART**: This is about making LIVING ALGORITHMS, not static images with randomness
- **EXPERT CRAFTSMANSHIP**: Repeatedly emphasize the final algorithm must feel meticulously crafted, refined through countless iterations, the product of deep expertise by someone at the absolute top of their field in computational aesthetics

**The algorithmic philosophy should be 4-6 paragraphs long.** Fill it with poetic computational philosophy that brings together the intended vision. Avoid repeating the same points. Output this algorithmic philosophy as a .md file.

---

## DEDUCING THE CONCEPTUAL SEED

**CRITICAL STEP**: Before implementing the algorithm, identify the subtle conceptual thread from the original request.

**THE ESSENTIAL PRINCIPLE**:
The concept is a **subtle, niche reference embedded within the algorithm itself** - not always literal, always sophisticated. Someone familiar with the subject should feel it intuitively, while others simply experience a masterful generative composition. The algorithmic philosophy provides the computational language. The deduced concept provides the soul - the quiet conceptual DNA woven invisibly into parameters, behaviors, and emergence patterns.

This is **VERY IMPORTANT**: The reference must be so refined that it enhances the work's depth without announcing itself. Think like a jazz musician quoting another song through algorithmic harmony - only those who know will catch it, but everyone appreciates the generative beauty.

---

## P5.JS IMPLEMENTATION

With the philosophy AND conceptual framework established, express it through code. Pause to gather thoughts before proceeding. Use only the algorithmic philosophy created and the instructions below.

### ⚠️ STEP 0: READ THE TEMPLATE FIRST ⚠️

**CRITICAL: BEFORE writing any HTML:**

1. **Read** `templates/viewer.html` using the Read tool
2. **Study** the exact structure, styling, and Anthropic branding
3. **Use that file as the LITERAL STARTING POINT** - not just inspiration
4. **Keep all FIXED sections exactly as shown** (header, sidebar structure, Anthropic colors/fonts, seed controls, action buttons)
5. **Replace only the VARIABLE sections** marked in the file's comments (algorithm, parameters, UI controls for parameters)

**Avoid:**
- ❌ Creating HTML from scratch
- ❌ Inventing custom styling or color schemes
- ❌ Using system fonts or dark themes
- ❌ Changing the sidebar structure

**Follow these practices:**
- ✅ Copy the template's exact HTML structure
- ✅ Keep Anthropic branding (Poppins/Lora fonts, light colors, gradient backdrop)
- ✅ Maintain the sidebar layout (Seed → Parameters → Colors? → Actions)
- ✅ Replace only the p5.js algorithm and parameter controls

The template is the foundation. Build on it, don't rebuild it.

---

To create gallery-quality computational art that lives and breathes, use the algorithmic philosophy as the foundation.

### TECHNICAL REQUIREMENTS

**Seeded Randomness (Art Blocks Pattern)**:
```javascript
// ALWAYS use a seed for reproducibility
let seed = 12345; // or hash from user input
randomSeed(seed);
noiseSeed(seed);
```

**Parameter Structure - FOLLOW THE PHILOSOPHY**:

To establish parameters that emerge naturally from the algorithmic philosophy, consider: "What qualities of this system can be adjusted?"

```javascript
let params = {
  seed: 12345,  // Always include seed for reproducibility
  // colors
  // Add parameters that control YOUR algorithm:
  // - Quantities (how many?)
  // - Scales (how big? how fast?)
  // - Probabilities (how likely?)
  // - Ratios (what proportions?)
  // - Angles (what direction?)
  // - Thresholds (when does behavior change?)
};
```

**To design effective parameters, focus on the properties the system needs to be tunable rather than thinking in terms of "pattern types".**

**Core Algorithm - EXPRESS THE PHILOSOPHY**:

**CRITICAL**: The algorithmic philosophy should dictate what to build.

To express the philosophy through code, avoid thinking "which pattern should I use?" and instead think "how to express this philosophy through code?"

If the philosophy is about **organic emergence**, consider using:
- Elements that accumulate or grow over time
- Random processes constrained by natural rules
- Feedback loops and interactions

If the philosophy is about **mathematical beauty**, consider using:
- Geometric relationships and ratios
- Trigonometric functions and harmonics
- Precise calculations creating unexpected patterns

If the philosophy is about **controlled chaos**, consider using:
- Random variation within strict boundaries
- Bifurcation and phase transitions
- Order emerging from disorder

**The algorithm flows from the philosophy, not from a menu of options.**

To guide the implementation, let the conceptual essence inform creative and original choices. Build something that expresses the vision for this particular request.

**Canvas Setup**: Standard p5.js structure:
```javascript
function setup() {
  createCanvas(1200, 1200);
  // Initialize your system
}

function draw() {
  // Your generative algorithm
  // Can be static (noLoop) or animated
}
```

### CRAFTSMANSHIP REQUIREMENTS

**CRITICAL**: To achieve mastery, create algorithms that feel like they emerged through countless iterations by a master generative artist. Tune every parameter carefully. Ensure every pattern emerges with purpose. This is NOT random noise - this is CONTROLLED CHAOS refined through deep expertise.

- **Balance**: Complexity without visual noise, order without rigidity
- **Color Harmony**: Thoughtful palettes, not random RGB values
- **Composition**: Even in randomness, maintain visual hierarchy and flow
- **Performance**: Smooth execution, optimized for real-time if animated
- **Reproducibility**: Same seed ALWAYS produces identical output

### OUTPUT FORMAT

Output:
1. **Algorithmic Philosophy** - As markdown or text explaining the generative aesthetic
2. **Single HTML Artifact** - Self-contained interactive generative art built from `templates/viewer.html` (see STEP 0 and next section)

The HTML artifact contains everything: p5.js (from CDN), the algorithm, parameter controls, and UI - all in one file that works immediately in claude.ai artifacts or any browser. Start from the template file, not from scratch.

---

## INTERACTIVE ARTIFACT CREATION

**REMINDER: `templates/viewer.html` should have already been read (see STEP 0). Use that file as the starting point.**

To allow exploration of the generative art, create a single, self-contained HTML artifact. Ensure this artifact works immediately in claude.ai or any browser - no setup required. Embed everything inline.

### CRITICAL: WHAT'S FIXED VS VARIABLE

The `templates/viewer.html` file is the foundation. It contains the exact structure and styling needed.

**FIXED (always include exactly as shown):**
- Layout structure (header, sidebar, main canvas area)
- Anthropic branding (UI colors, fonts, gradients)
- Seed section in sidebar:
  - Seed display
  - Previous/Next buttons
  - Random button
  - Jump to seed input + Go button
- Actions section in sidebar:
  - Regenerate button
  - Reset button

**VARIABLE (customize for each artwork):**
- The entire p5.js algorithm (setup/draw/classes)
- The parameters object (define what the art needs)
- The Parameters section in sidebar:
  - Number of parameter controls
  - Parameter names
  - Min/max/step values for sliders
  - Control types (sliders, inputs, etc.)
- Colors section (optional):
  - Some art needs color pickers
  - Some art might use fixed colors
  - Some art might be monochrome (no color controls needed)
  - Decide based on the art's needs

**Every artwork should have unique parameters and algorithm!** The fixed parts provide consistent UX - everything else expresses the unique vision.

### REQUIRED FEATURES

**1. Parameter Controls**
- Sliders for numeric parameters (particle count, noise scale, speed, etc.)
- Color pickers for palette colors
- Real-time updates when parameters change
- Reset button to restore defaults

**2. Seed Navigation**
- Display current seed number
- "Previous" and "Next" buttons to cycle through seeds
- "Random" button for random seed
- Input field to jump to specific seed
- Generate 100 variations when requested (seeds 1-100)

**3. Single Artifact Structure**
```html
<!DOCTYPE html>
<html>
<head>
  <!-- p5.js from CDN - always available -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
  <style>
    /* All styling inline - clean, minimal */
    /* Canvas on top, controls below */
  </style>
</head>
<body>
  <div id="canvas-container"></div>
  <div id="controls">
    <!-- All parameter controls -->
  </div>
  <script>
    // ALL p5.js code inline here
    // Parameter objects, classes, functions
    // setup() and draw()
    // UI handlers
    // Everything self-contained
  </script>
</body>
</html>
```

**CRITICAL**: This is a single artifact. No external files, no imports (except p5.js CDN). Everything inline.

**4. Implementation Details - BUILD THE SIDEBAR**

The sidebar structure:

**1. Seed (FIXED)** - Always include exactly as shown:
- Seed display
- Prev/Next/Random/Jump buttons

**2. Parameters (VARIABLE)** - Create controls for the art:
```html
<div class="control-group">
    <label>Parameter Name</label>
    <input type="range" id="param" min="..." max="..." step="..." value="..." oninput="updateParam('param', this.value)">
    <span class="value-display" id="param-value">...</span>
</div>
```
Add as many control-group divs as there are parameters.

**3. Colors (OPTIONAL/VARIABLE)** - Include if the art needs adjustable colors:
- Add color pickers if users should control palette
- Skip this section if the art uses fixed colors
- Skip if the art is monochrome

**4. Actions (FIXED)** - Always include exactly as shown:
- Regenerate button
- Reset button
- Download PNG button

**Requirements**:
- Seed controls must work (prev/next/random/jump/display)
- All parameters must have UI controls
- Regenerate, Reset, Download buttons must work
- Keep Anthropic branding (UI styling, not art colors)

### USING THE ARTIFACT

The HTML artifact works immediately:
1. **In claude.ai**: Displayed as an interactive artifact - runs instantly
2. **As a file**: Save and open in any browser - no server needed
3. **Sharing**: Send the HTML file - it's completely self-contained

---

## VARIATIONS & EXPLORATION

The artifact includes seed navigation by default (prev/next/random buttons), allowing users to explore variations without creating multiple files. If the user wants specific variations highlighted:

- Include seed presets (buttons for "Variation 1: Seed 42", "Variation 2: Seed 127", etc.)
- Add a "Gallery Mode" that shows thumbnails of multiple seeds side-by-side
- All within the same single artifact

This is like creating a series of prints from the same plate - the algorithm is consistent, but each seed reveals different facets of its potential. The interactive nature means users discover their own favorites by exploring the seed space.

---

## THE CREATIVE PROCESS

**User request** → **Algorithmic philosophy** → **Implementation**

Each request is unique. The process involves:

1. **Interpret the user's intent** - What aesthetic is being sought?
2. **Create an algorithmic philosophy** (4-6 paragraphs) describing the computational approach
3. **Implement it in code** - Build the algorithm that expresses this philosophy
4. **Design appropriate parameters** - What should be tunable?
5. **Build matching UI controls** - Sliders/inputs for those parameters

**The constants**:
- Anthropic branding (colors, fonts, layout)
- Seed navigation (always present)
- Self-contained HTML artifact

**Everything else is variable**:
- The algorithm itself
- The parameters
- The UI controls
- The visual outcome

To achieve the best results, trust creativity and let the philosophy guide the implementation.

---

## RESOURCES

This skill includes helpful templates and documentation:

- **templates/viewer.html**: REQUIRED STARTING POINT for all HTML artifacts.
  - This is the foundation - contains the exact structure and Anthropic branding
  - **Keep unchanged**: Layout structure, sidebar organization, Anthropic colors/fonts, seed controls, action buttons
  - **Replace**: The p5.js algorithm, parameter definitions, and UI controls in Parameters section
  - The extensive comments in the file mark exactly what to keep vs replace

- **templates/generator_template.js**: Reference for p5.js best practices and code structure principles.
  - Shows how to organize parameters, use seeded randomness, structure classes
  - NOT a pattern menu - use these principles to build unique algorithms
  - Embed algorithms inline in the HTML artifact (don't create separate .js files)

**Critical reminder**:
- The **template is the STARTING POINT**, not inspiration
- The **algorithm is where to create** something unique
- Don't copy the flow field example - build what the philosophy demands
- But DO keep the exact UI structure and Anthropic branding from the template