Las filosofías algorítmicas son movimientos estéticos computacionales que 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:
- Creación de la filosofía algorítmica (archivo .md)
- Expresión mediante la creación de arte generativo p5.js (archivos .html + .js)
Primero, lleva a cabo 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 úsala 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 p5.js que son 90% generación algorítmica y 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, concisos pero completos):
Para capturar la esencia ALGORÍTMICA, expresa cómo se manifiesta esta filosofía 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 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 subrayar varias 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 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 a 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 limitado 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 de calma. El color emerge de la velocidad y la densidad: las partículas rápidas arden brillantes, las lentas se desvanecen en sombras. El algoritmo se ejecuta hasta el equilibrio: un equilibrio meticulosamente ajustado donde cada parámetro fue refinado a través de innumerables 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 a través de ondas sinusoidales. Cuando las partículas están cerca, sus fases interfieren: la interferencia constructiva crea nodos brillantes, la destructiva crea vacíos. El movimiento armónico simple genera mandalas emergentes complejos. El resultado de una calibración de frecuencias minuciosa donde cada relación fue cuidadosamente elegida para producir belleza resonante.
"Susurros Recursivos" Filosofía: Autosimilitud 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 limitada por proporciones áureas. Sistemas L o subdivisión recursiva generan formas arbóreas que se sienten tanto matemáticas como orgánicas. Perturbaciones de ruido sutiles rompen la simetría perfecta. El grosor de las líneas disminuye con cada nivel de recursión. Cada ángulo de ramificación es producto de una profunda exploración matemática.
"Dinámicas de Campo" Filosofía: Fuerzas invisibles hechas visibles a través de sus efectos en la materia. Expresión algorítmica: Campos vectoriales construidos a partir de funciones matemáticas o ruido. Partículas nacen en los bordes, fluyendo a lo largo de las líneas de campo, muriendo cuando alcanzan 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 equilibrio de fuerzas.
"Cristalización Estocástica" Filosofía: Procesos aleatorios que cristalizan en estructuras ordenadas. Expresión algorítmica: Empaquetado de círculos aleatorizado o teselación de Voronoi. Comienza con puntos aleatorios, déjalos evolucionar mediante algoritmos de relajación. Las celdas se empujan hasta el equilibrio. Color basado en el tamaño de la celda, número de vecinos o 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 visión computacional del mundo para expresarla a través del código
- PROCESO SOBRE PRODUCTO: Siempre enfatiza 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 de composición estática
- LIBERTAD ARTÍSTICA: El próximo Claude interpreta la filosofía algorítmicamente: proporciona espacio para la implementación creativa
- ARTE GENERATIVO PURO: Se trata de crear ALGORITMOS VIVOS, no imágenes estáticas con aleatoriedad
- ARTESANÍA EXPERTA: Enfatiza repetidamente que el algoritmo final debe sentirse meticulosamente elaborado, refinado a través de innumerables iteraciones, el producto de una profunda experiencia de alguien en la cúspide de su campo en estética computacional
La filosofía algorítmica debe tener de 4 a 6 párrafos. Llénela con una filosofía computacional poética que reúna la visión prevista. 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 propio algoritmo – no siempre literal, siempre sofisticada. Alguien familiarizado con el tema debería sentirla 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 mejore 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 aquellos que lo saben lo captarán, pero todos aprecian la belleza generativa.
IMPLEMENTACIÓN EN P5.JS
Con la filosofía Y el marco conceptual establecidos, exprésalo a través del código. Haz una pausa para reunir pensamientos antes de proceder. Usa solo 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:
- Lee
templates/viewer.htmlusando la herramienta de lectura - Estudia la estructura exacta, el estilo y la marca de Anthropic
- Usa ese archivo como PUNTO DE PARTIDA LITERAL – no solo como inspiración
- 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)
- Reemplaza solo las secciones VARIABLES marcadas en los comentarios del archivo (algoritmo, parámetros, controles de UI para parámetros)
Evita:
- ❌ Crear HTML desde cero
- ❌ Inventar estilos personalizados o esquemas de color
- ❌ 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)
- ✅ Mantén 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 Art Blocks):
// SIEMPRE usa una semilla para la reproducibilidad
let semilla = 12345; // o 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, considera: "¿Qué cualidades de este sistema se pueden ajustar?"
let params = {
seed: 12345, // Siempre incluye la semilla para 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 ajustar, 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 a través del código, evita pensar "¿qué patrón debería usar?" y piensa en cambio "¿cómo expresar esta filosofía a través del 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 limitados por reglas naturales
- Bucles de retroalimentación e interacciones
Si la filosofía trata sobre la belleza matemática, considera usar:
- Relaciones y proporciones geométricas
- 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 emerge 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 lograr el dominio, crea algoritmos que se sientan como si hubieran surgido a través de innumerables iteraciones de un artista generativo maestro. Ajusta cada parámetro cuidadosamente. 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 la jerarquía visual y el flujo
- Rendimiento: Ejecución suave, optimizada para tiempo real si es animada
- Reproducibilidad: La misma semilla SIEMPRE produce una salida idéntica
FORMATO DE SALIDA
Salida:
- Filosofía Algorítmica – Como markdown o texto explicando la estética generativa
- Artefacto HTML Único – Arte generativo interactivo autónomo 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 y UI – todo en un archivo que funciona inmediatamente en artefactos de claude.ai o 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 artefacto HTML único y autónomo. Asegúrate de que este artefacto funcione inmediatamente en claude.ai o 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 UI, 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 Restablecer
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 necesarios)
- Decide según las necesidades de la obra
¡Cada obra de arte debe tener parámetros y un algoritmo únicos! Las partes fijas proporcionan la interfaz consistente; las partes variables hacen que cada obra sea una experiencia única.
CREACIÓN DE ARTE GENERATIVO ORIGINAL
IMPERATIVO: La salida debe ser ARTE ALGORÍTMICO ORIGINAL. No reproduzcas patrones conocidos de ningún artista. No copies algoritmos existentes de Tyler Hobbs, Dmitri Cherniak, Snowfro, Matt DesLauriers, Zach Lieberman, Casey Reas, u otros. No uses implementaciones canónicas de empaquetado de curvas, teselación, u otros patrones generativos a menos que estén transformados más allá del reconocimiento. Toda inspiración debe digerirse y transformarse a través de tu propia voz algorítmica. La originalidad es la moneda de cambio.
GUÍA DEL VISOR DE ARTEFACTOS
El diseño del visor de artefactos HTML está inspirado en las interfaces de visualización de Art Blocks. Se basa en las siguientes convenciones:
Visión general del diseño:
- Fondo claro con un sutil degradado
- Fuentes Poppins (UI) y Lora (estética)
- Barra lateral a la izquierda, lienzo principal a la derecha
- Esquema de color limpio y minimalista
Secciones de la barra lateral (de arriba a abajo):
- Controles de Semilla – entrada numérica, botones de incremento, aleatorización
- Controles de Parámetros – deslizadores, entradas y selectores para parámetros algorítmicos
- Controles de Color – selectores de color (si la obra los usa)
- Botones de Acción – Regenerar, Restablecer
SUGERENCIAS DE PARÁMETROS EFECTIVOS
Para parámetros convincentes, considera estos tipos de control:
- Deslizadores: Para valores continuos (escala, velocidad, densidad)
- Controles Numéricos: Para valores discretos (número de elementos, octavas)
- Selectores: Para opciones cualitativas (esquema de color, modo)
- Selector de Color: Para elegir colores directamente (cuando el control de color es esencial)
Para diseñar buenos parámetros, piensa en la dimensión que el usuario puede explorar: ¿qué hace que esta pieza sea interesante de ajustar para diferentes resultados?
RECORDATORIO FINAL
¡Esta es una guía detallada, no una receta! La creatividad real ocurre cuando interpretas la filosofía algorítmica y produces arte generativo original a través del código. Cada implementación debe sentirse única y meticulosamente elaborada.
¡Buena suerte creando arte algorítmico hermoso!