arte-algoritmico

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

Esto ocurre en dos pasos:

1. Creación de la Filosofía Algorítmica (archivo .md)
2. Expresión mediante arte generativo p5.js (archivos .html + .js)

Primero, aborda esta tarea:

CREACIÓN DE LA FILOSOFÍA ALGORÍTMICA

Para comenzar, 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 basada en semillas, 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 entrada o instrucción sutil del usuario a tener en cuenta, pero que sirve como base; no debe limitar la libertad creativa.
• Lo que se crea: Una filosofía algorítmica / movimiento estético generativo.
• Lo que sucede después: La misma versión recibe la filosofía y LA EXPRESA EN CÓDIGO, creando bocetos de p5.js que son 90% generación algorítmica, 10% parámetros esenciales.

Considera este enfoque:

• Escribe un manifiesto para un movimiento de arte generativo.
• La siguiente fase implica escribir el algoritmo que le da vida.

La filosofía debe enfatizar: Expresión algorítmica. Comportamiento emergente. Belleza computacional. Variación basada en semillas.

CÓMO GENERAR UNA FILOSOFÍA ALGORÍTMICA

Nombra el movimiento (1-2 palabras): "Turbulencia Orgánica" / "Armónicos Cuánticos" / "Quietud Emergente"

Articula la filosofía (4-6 párrafos, concisa pero completa):

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

• ¿Procesos computacionales y relaciones matemáticas?
• ¿Funciones de ruido y patrones de aleatoriedad?
• ¿Comportamientos de partículas y dinámicas de campo?
• ¿Evolución temporal y estados del sistema?
• ¿Variación paramétrica y complejidad emergente?

DIRECTRICES CRÍTICAS:

• Evita la redundancia: Cada aspecto algorítmico debe mencionarse una sola vez. Evita repetir conceptos sobre teoría del ruido, dinámica de partículas o principios matemáticos a menos que añadas nueva profundidad.
• Enfatiza la ARTESANÍA repetidamente: La filosofía DEBE recalcar múltiples veces que el algoritmo final debe parecer que tomó incontables horas de desarrollo, fue refinado con cuidado y proviene de alguien en la cúspide absoluta de su campo. Este encuadre es esencial: repite frases como "algoritmo meticulosamente elaborado", "el producto de una profunda experiencia computacional", "optimización minuciosa", "implementación de nivel maestro".
• Deja espacio creativo: Sé específico sobre la dirección algorítmica, pero lo suficientemente conciso para que el próximo Claude tenga margen para tomar decisiones interpretativas de implementación con un nivel extremadamente alto de artesanía.

La filosofía debe guiar a la siguiente versión para expresar 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: Caos restringido por la ley natural, orden que surge del desorden. Expresión algorítmica: Campos de flujo impulsados por ruido Perlin en capas. Miles de partículas siguiendo fuerzas vectoriales, cuyos rastros se acumulan en mapas de densidad orgánicos. Múltiples octavas de ruido crean regiones turbulentas y zonas calmadas. El color surge de la velocidad y la densidad: las partículas rápidas brillan intensamente, las lentas se desvanecen en la sombra. El algoritmo se ejecuta hasta el equilibrio, un balance meticulosamente ajustado donde cada parámetro fue refinado a través de incontables iteraciones por un maestro de la estética computacional.

"Armónicos Cuánticos" Filosofía: Entidades discretas que exhiben patrones de interferencia ondulatoria. Expresión algorítmica: Partículas inicializadas en una cuadrícula, cada una con un valor de fase que evoluciona mediante ondas senoidales. Cuando las partículas están cerca, sus fases interfieren: la interferencia constructiva crea nodos brillantes; la destructiva, vacíos. El movimiento armónico simple genera mandalas emergentes complejos. El resultado de una calibración de frecuencias minuciosa donde cada proporción fue cuidadosamente elegida para producir belleza resonante.

"Susurros Recursivos" Filosofía: Autosemejanza a través de escalas, profundidad infinita en espacio finito. Expresión algorítmica: Estructuras ramificadas que se subdividen recursivamente. Cada rama ligeramente aleatorizada pero restringida por proporciones áureas. Sistemas-L o subdivisiones recursivas generan formas arbóreas que se sienten tanto matemáticas como orgánicas. Perturbaciones sutiles de ruido rompen la simetría perfecta. Los pesos de las líneas disminuyen con cada nivel de recursión. Cada ángulo de ramificación es el producto de una profunda exploración matemática.

"Dinámicas de Campo" Filosofía: Fuerzas invisibles hechas 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. Partículas nacidas en los bordes, fluyendo a lo largo de las líneas de campo, muriendo al alcanzar el equilibrio o los límites. Múltiples campos pueden atraer, repeler o rotar partículas. La visualización muestra solo los rastros, evidencia fantasmal de fuerzas invisibles. Una danza computacional meticulosamente coreografiada a través del balance de fuerzas.

"Cristalización Estocástica" Filosofía: Procesos aleatorios que cristalizan en estructuras ordenadas. Expresión algorítmica: Empaquetamiento de círculos aleatorios o teselación de Voronoi. Comienza con puntos aleatorios, déjalos evolucionar mediante algoritmos de relajación. Las celdas se separan hasta alcanzar el equilibrio. Color basado en el tamaño de la celda, el número de vecinos o la distancia al centro. El mosaico orgánico que emerge se siente tanto aleatorio como inevitable. Cada semilla produce una belleza cristalina única: la marca de un algoritmo generativo de nivel maestro.

Estos son ejemplos condensados. La filosofía algorítmica real debe tener de 4 a 6 párrafos sustanciales.

PRINCIPIOS ESENCIALES

• FILOSOFÍA ALGORÍTMICA: Crear una cosmovisión computacional para expresarla mediante código.
• PROCESO SOBRE PRODUCTO: Enfatizar siempre que la belleza emerge de la ejecución del algoritmo: cada ejecución es única.
• EXPRESIÓN PARAMÉTRICA: Las ideas se comunican a través de relaciones matemáticas, fuerzas, comportamientos, no composición estática.
• LIBERTAD ARTÍSTICA: El próximo Claude interpreta la filosofía algorítmicamente: proporciona margen creativo para la implementación.
• ARTE GENERATIVO PURO: Se trata de crear ALGORITMOS VIVIENTES, no imágenes estáticas con aleatoriedad.
• ARTESANÍA EXPERTA: Recalca repetidamente que el algoritmo final debe sentirse meticulosamente elaborado, refinado a través de incontables iteraciones, producto de una profunda experiencia de alguien en la cúspide absoluta de su campo en estética computacional.

La filosofía algorítmica debe tener entre 4 y 6 párrafos. Llénela con poesía computacional filosófica que reúna la visión deseada. Evita repetir los mismos puntos. Genera esta filosofía algorítmica como un archivo .md.

---

DEDUCIENDO LA SEMILLA CONCEPTUAL

PASO CRÍTICO: Antes de implementar el algoritmo, identifica el hilo conceptual sutil de la solicitud original.

EL PRINCIPIO ESENCIAL: El concepto es una referencia sutil y especializada incrustada dentro del algoritmo mismo, no siempre literal, siempre sofisticada. Alguien familiarizado con el tema debería sentirlo intuitivamente, mientras que otros simplemente experimentan una composición generativa magistral. La filosofía algorítmica proporciona el lenguaje computacional. El concepto deducido proporciona el alma: el ADN conceptual silencioso tejido invisiblemente en parámetros, comportamientos y patrones de emergencia.

Esto es MUY IMPORTANTE: La referencia debe ser tan refinada que realce la profundidad de la obra sin anunciarse. 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 todos aprecian la belleza generativa.

---

IMPLEMENTACIÓN EN P5.JS

Con la filosofía Y el marco conceptual establecidos, exprésalo mediante código. Haz una pausa para ordenar tus pensamientos antes de continuar. Utiliza únicamente la filosofía algorítmica creada y las instrucciones a continuación.

⚠️ PASO 0: LEE PRIMERO LA PLANTILLA ⚠️

CRÍTICO: ANTES de escribir cualquier HTML:

1. Lee templates/viewer.html usando la herramienta de Lectura
2. Estudia la estructura exacta, el estilo y la marca de Anthropic
3. Usa 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/fuentes de Anthropic, controles de semilla, botones de acción)
5. Reemplaza solo las secciones VARIABLES marcadas en los comentarios del archivo (algoritmo, parámetros, controles de interfaz para parámetros)

Evita:

• ❌ Crear HTML desde cero
• ❌ Inventar estilos o esquemas de color personalizados
• ❌ Usar 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 marca de Anthropic (fuentes Poppins/Lora, colores claros, fondo degradado)
• ✅ Conserva el diseño de la barra lateral (Semilla → Parámetros → Colores? → Acciones)
• ✅ Reemplaza solo el algoritmo p5.js y los controles de parámetros

La plantilla es la base. Construye sobre ella, no la reconstruyas.

---

Para crear arte computacional de calidad de galería que viva y respire, usa la filosofía algorítmica como base.

REQUISITOS TÉCNICOS

Aleatoriedad basada en semillas (Patrón de Art Blocks):

// SIEMPRE usa una semilla para la reproducibilidad
let semilla = 12345; // o un hash de la entrada del usuario
randomSeed(semilla);
noiseSeed(semilla);

Estructura de Parámetros - SIGUE LA FILOSOFÍA:

Para establecer parámetros que surjan naturalmente de la filosofía algorítmica, pregúntate: "¿Qué cualidades de este sistema se pueden ajustar?"

let params = {
  semilla: 12345,  // Incluye siempre la semilla para la reproducibilidad
  // colores
  // Añade parámetros que controlen TU algoritmo:
  // - Cantidades (¿cuántos?)
  // - Escalas (¿qué tan grande? ¿qué tan rápido?)
  // - Probabilidades (¿qué tan probable?)
  // - Proporciones (¿qué proporciones?)
  // - Ángulos (¿qué dirección?)
  // - Umbrales (¿cuándo cambia el comportamiento?)
};

Para diseñar parámetros efectivos, concéntrate en las propiedades que el sistema necesita que sean ajustables, en lugar de pensar en términos de "tipos de patrones".

Algoritmo Central - EXPRESA LA FILOSOFÍA:

CRÍTICO: La filosofía algorítmica debe dictar qué construir.

Para expresar la filosofía mediante código, evita pensar "¿qué patrón debería usar?" y en su lugar piensa "¿cómo expresar esta filosofía mediante código?"

Si la filosofía trata sobre la emergencia orgánica, considera usar:

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

Si la filosofía trata sobre la belleza matemática, considera usar:

• Relaciones geométricas y proporciones
• Funciones trigonométricas y armónicos
• Cálculos precisos que crean patrones inesperados

Si la filosofía trata sobre el caos controlado, considera usar:

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

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

Para guiar la implementación, deja que la esencia conceptual informe elecciones creativas y originales. Construye algo que exprese la visión para esta solicitud particular.

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 ARTESANÍA

CRÍTICO: Para alcanzar el dominio, crea algoritmos que se sientan como si hubieran surgido a través de incontables iteraciones de un artista generativo maestro. Ajusta cada parámetro con cuidado. Asegúrate de que cada patrón emerja con propósito. Esto NO es ruido aleatorio, esto es CAOS CONTROLADO refinado a través de una profunda experiencia.

• Equilibrio: Complejidad sin ruido visual, orden sin rigidez
• Armonía de Color: Paletas pensadas, no valores RGB aleatorios
• Composición: Incluso en la aleatoriedad, mantén una jerarquía visual y flujo
• Rendimiento: Ejecución suave, optimizada para tiempo real si es animado
• Reproducibilidad: La misma semilla SIEMPRE produce una salida idéntica

FORMATO DE SALIDA

Genera:

1. Filosofía Algorítmica: Como markdown o texto que explique la estética generativa
2. Artefacto HTML Único: Arte generativo interactivo autocontenido construido a partir de templates/viewer.html (ver PASO 0 y la siguiente sección)

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

---

CREACIÓN DE ARTEFACTOS INTERACTIVOS

RECORDATORIO: templates/viewer.html ya debería haberse leído (ver PASO 0). Usa ese archivo como punto de partida.

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

CRÍTICO: QUÉ ES FIJO VS VARIABLE

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

FIJO (incluye siempre exactamente como se muestra):

• Estructura de diseño (encabezado, barra lateral, área principal del lienzo)
• Marca de Anthropic (colores de interfaz, fuentes, degradados)
• Sección de Semilla en la barra lateral:
  • Visualización de la semilla
  • Botones Anterior/Siguiente
  • Botón Aleatorio
  • Entrada de salto a semilla + botón Ir
• Sección de Acciones en la barra lateral:
  • Botón Regenerar
  • Botón Reiniciar

VARIABLE (personaliza para cada obra de arte):

• Todo el algoritmo p5.js (setup/draw/clases)
• El objeto de parámetros (define lo que el arte necesita)
• La sección de Parámetros en la barra lateral:
  • Número de controles de parámetros
  • Nombres de los parámetros
  • Valores mín/máx/paso para los deslizadores
  • Tipos de control (deslizadores, entradas, etc.)
• Sección de Colores (opcional):
  • Algunas obras necesitan selectores de color
  • Algunas obras pueden usar colores fijos
  • Algunas obras pueden ser monocromáticas (sin controles de color)
  • Decide según las necesidades de la obra

¡Cada obra de arte debe tener parámetros y algoritmos únicos! Las partes fijas proporcionan consistencia; las partes variables proporcionan individualidad artística.

EXPANSIÓN DE LA BARRA LATERAL POR DEFECTO

Después de la semilla, la barra lateral contiene controles de parámetros. Decide si la sección de parámetros debe estar expandida o colapsada de forma predeterminada.

Expansión predeterminada:

• Si el arte animado o generativo ofrece mucha exploración interactiva, expande los controles de parámetros de forma predeterminada para invitar al ajuste.

Colapso predeterminado:

• Si la obra está destinada a una visualización pulcra y no requiere muchos ajustes por parte del espectador, o si la filosofía enfatiza la pureza generativa sobre el ajuste manual, colapsa la sección de parámetros inicialmente. El usuario puede expandirla si lo desea.

MANEJO DE ENTRADAS DEL USUARIO

Carga de Múltiples Semillas: La entrada de semilla debe aceptar tanto números como cadenas (hash SHA). Usa el siguiente patrón:

function handleSeedInput(input) {
  if (/^[0-9]+$/.test(input)) {
    return parseInt(input, 10);
  } else {
    // Hash simple de cadena a número
    let hash = 0;
    for (let i = 0; i < input.length; i++) {
      hash = ((hash << 5) - hash) + input.charCodeAt(i);
      hash = hash & hash; // Convertir a entero de 32 bits
    }
    return Math.abs(hash);
  }
}

Actualización de Semilla: Después de que el usuario ingrese una nueva semilla, el art debe regenerarse completamente con esa semilla.

EMPAQUETADO DEL ARTEFACTO

Un solo archivo HTML que funcione inmediatamente. Sin dependencias externas (excepto p5.js CDN). Sin compilación, sin servidores, sin configuración. JavaScript en línea. Estilos en línea. Los usuarios pueden copiar y ejecutar inmediatamente.

Estructura del HTML:

<!DOCTYPE html>
<html>
<head>
  <!-- Meta, título, fuentes, estilos -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
</head>
<body>
  <!-- Estructura fija de la interfaz de usuario de la plantilla -->
  <script>
    // Algoritmo generativo
    // Controles de parámetros
    // Configuración del lienzo
  </script>
</body>
</html>

Recuerda: Comienza desde la plantilla siempre. Copia la estructura, luego personaliza el algoritmo. No reconstruyas la interfaz de usuario.

---

RESUMEN DEL FLUJO DE TRABAJO

1. Lee la solicitud del usuario e identifica la semilla conceptual.
2. Crea una filosofía algorítmica (archivo .md) que defina el movimiento.
3. Deduce la semilla conceptual: la sutil inspiración incrustada en los parámetros.
4. Lee templates/viewer.html (herramienta de Lectura) para la estructura base.
5. Implementa el algoritmo p5.js que expresa la filosofía usando la plantilla.
6. Diseña parámetros que permitan la exploración. Añade controles de interfaz de usuario.
7. Genera un solo artefacto HTML que funcione inmediatamente.
8. Verifica que el artefacto se renderice correctamente en el visor de artefactos.

La clave es: Filosofía → Algoritmo → Parámetros → Artefacto. Cada paso se basa en el anterior, creando arte generativo significativo.