Arte algorítmico

Fuente: Contenido adaptado de anthropics/skills (MIT).

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

Esto sucede en dos pasos:

1. Creación de filosofía algorítmica (archivo.md)
2. Exprésate creando arte generativo p5.js (archivos.html +.js)

Primero, realice esta tarea:

CREACIÓN DE FILOSOFÍA ALGORITMICA

Para comenzar, cree una FILOSOFÍA ALGORITMICA (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 ENTENDIMIENTO CRÍTICO

• Qué se recibe: Algunas aportaciones sutiles o instrucciones del usuario para tener en cuenta, pero utilizarlas como base; no debería limitar la libertad creativa.
• Qué se crea: Una filosofía algorítmica/movimiento estético generativo.
• Qué sucede a continuación: 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 y 10 % parámetros esenciales.

Considere este enfoque:

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

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

CÓMO GENERAR UNA FILOSOFÍA ALGORITMICA

Nombra el movimiento (1-2 palabras): "Turbulencia orgánica" / "Armónicos cuánticos" / "Quietud emergente"

Articular la filosofía (4-6 párrafos - conciso pero completo):

Para captar la esencia ALGORITMICA, expresar cómo se manifiesta esta filosofía a través de:

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

PAUTAS CRÍTICAS:

• Evite la redundancia: cada aspecto algorítmico debe mencionarse una vez. Evite repetir conceptos sobre la teoría del ruido, la dinámica de partículas o los principios matemáticos a menos que agregue nueva profundidad.
• Enfatice la artesanía REPETIDAMENTE: La filosofía DEBE enfatizar varias veces que el algoritmo final debe parecer como si hubiera tardado incontables horas en desarrollarse, fuera refinado con cuidado y provenga de alguien en la cima absoluta de su campo. Este encuadre es esencial: repita frases como "algoritmo meticulosamente elaborado", "el producto de una profunda experiencia computacional", "optimización minuciosa", "implementación a nivel maestro".
• Deje espacio creativo: Sea específico acerca de la dirección algorítmica, pero lo suficientemente conciso como para que el próximo Claude tenga espacio para tomar decisiones de implementación interpretativas con un nivel extremadamente alto de destreza.

La filosofía debe guiar la próxima versión para expresar ideas ALGORITMICAMENTE, no a través de imágenes estáticas. La belleza vive en el proceso, no en el cuadro 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 siguen fuerzas vectoriales y sus rastros se acumulan en mapas de densidad orgánica. Múltiples octavas de ruido crean regiones turbulentas y zonas de calma. El color surge de la velocidad y la densidad: las partículas rápidas brillan intensamente, las lentas se desvanecen hasta convertirse en sombras. El algoritmo se ejecuta hasta el equilibrio: un equilibrio meticulosamente ajustado en el que 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 en forma de ondas. 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 minuciosa calibración de frecuencia en la que cada relación se eligió cuidadosamente para producir una belleza resonante.

"Susurros recursivos" Filosofía: autosimilitud entre escalas, profundidad infinita en un espacio finito. Expresión algorítmica: Estructuras ramificadas que se subdividen recursivamente. Cada rama es ligeramente aleatoria pero está limitada por las proporciones áureas. Los sistemas L o la subdivisión recursiva generan formas en forma de árbol que se sienten tanto matemáticas como orgánicas. Sutiles perturbaciones de ruido rompen la simetría perfecta. Los pesos de línea disminuyen con cada nivel de recursividad. Cada ángulo de ramificación es producto de una profunda exploración matemática.

"Dinámica de campo" 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. Partículas que nacen en los bordes, fluyen a lo largo de líneas de campo y mueren cuando alcanzan el equilibrio o los límites. Múltiples campos pueden atraer, repeler o rotar partículas. La visualización muestra sólo las huellas: 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: embalaje de círculos aleatorios o teselación de Voronoi. Comience con puntos aleatorios y déjelos evolucionar mediante algoritmos de relajación. Las células se separan hasta alcanzar el equilibrio. Color basado en el tamaño de la celda, el número de vecinos o la distancia desde el centro. El mosaico orgánico que emerge parece aleatorio e 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 debería tener entre 4 y 6 párrafos sustanciales.

PRINCIPIOS ESENCIALES

• FILOSOFÍA ALGORITMICA: Creación de una visión del mundo computacional para expresarla a través del código
• PROCESO SOBRE PRODUCTO: siempre enfatice que la belleza surge 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 y comportamientos, no a través de una 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: enfatice repetidamente que el algoritmo final debe sentirse meticulosamente elaborado, refinado a través de innumerables iteraciones, el producto de una profunda experiencia por parte de alguien en la cima absoluta de su campo en estética computacional.

La filosofía algorítmica debe tener entre 4 y 6 párrafos. Llénelo con filosofía computacional poética que reúna la visión deseada. Evite repetir los mismos puntos. Genere esta filosofía algorítmica como un archivo.md.

DEDUCIENDO LA SEMILLA CONCEPTUAL

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

EL PRINCIPIO ESENCIAL: El concepto es una referencia sutil y de nicho incorporada dentro del propio algoritmo; 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 entretejido de manera invisible 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. Piense como un músico de jazz que cita otra canción a través de una armonía algorítmica: sólo aquellos que saben la captarán, pero todos aprecian la belleza generativa.

IMPLEMENTACIÓN DE P5.JS

Con la filosofía Y el marco conceptual establecidos, expréselo a través del código. Haga una pausa para ordenar sus pensamientos antes de continuar. Utilice únicamente la filosofía algorítmica creada y las instrucciones a continuación.

PASO 0: LEA LA PLANTILLA PRIMERO

CRÍTICO: ANTES de escribir cualquier HTML:

1. Leertemplates/viewer.htmlusando la herramienta Leer
2. Estudiar la estructura exacta, el estilo y la marca Anthropic.
3. Utilice ese archivo como PUNTO DE PARTIDA LITERAL, no solo como inspiración
4. Mantenga todas las secciones FIJAS exactamente como se muestran (encabezado, estructura de la barra lateral, colores/fuentes antrópicos, controles de semillas, botones de acción)
5. Reemplace solo las secciones VARIABLE marcadas en los comentarios del archivo (algoritmo, parámetros, controles de UI para parámetros)

Evitar:

• Creando HTML desde cero
• Inventar estilos o combinaciones de colores personalizados
• Usar fuentes del sistema o temas oscuros
• Cambiar la estructura de la barra lateral

Sigue estas prácticas:

• Copie la estructura HTML exacta de la plantilla.
• Mantenga la marca Anthropic (fuentes Poppins/Lora, colores claros, fondo degradado)
• Mantener el diseño de la barra lateral (Semilla -> Parámetros -> ¿Colores? -> Acciones)
• Reemplace solo el algoritmo p5.js y los controles de parámetros

La plantilla es la base. Construya sobre ello, no lo reconstruya.

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

REQUISITOS TÉCNICOS

Aleatoriedad sembrada (patrón de bloques de arte):

// ALWAYS use a seed for reproducibility
let seed = 12345; // or hash from user input
randomSeed(seed);
noiseSeed(seed);

Estructura de parámetros - SIGA LA FILOSOFÍA:

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

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?)
};

Para diseñar parámetros efectivos, céntrese en las propiedades que el sistema necesita para poder ajustarse en lugar de pensar en términos de "tipos de patrones".

Algoritmo central: EXPRESA LA FILOSOFÍA:

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

Para expresar la filosofía a través del código, evite pensar "¿qué patrón debo usar?" y en su lugar piense "¿cómo expresar esta filosofía a través del código?"

Si la filosofía se trata de emergencia orgánica, considere 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 belleza matemática, considere usar:

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

Si la filosofía se trata de caos controlado, considere usar:

• 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 guiar la implementación, deje que la esencia conceptual informe las decisiones creativas y originales. Construya algo que exprese la visión de esta solicitud en particular.

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

function setup() {
  createCanvas(1200, 1200);
  // Initialize your system
}

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

REQUISITOS DE ARTESANÍA

CRÍTICO: Para lograr el dominio, cree algoritmos que parezcan haber surgido a través de innumerables iteraciones realizadas por un artista generativo maestro. Ajuste cada parámetro con cuidado. Asegúrese de que cada patrón surja con un propósito. Esto NO es ruido aleatorio: es CAOS CONTROLADO y refinado a través de una profunda experiencia.

• Equilibrio: Complejidad sin ruido visual, orden sin rigidez
• Armonía de colores: paletas bien pensadas, no valores RGB aleatorios
• Composición: incluso en situaciones aleatorias, mantenga la jerarquía y el flujo visual
• Rendimiento: ejecución fluida, optimizada para tiempo real si está animada
• Reproducibilidad: La misma semilla SIEMPRE produce resultados idénticos

FORMATO DE SALIDA

Producción:

1. Filosofía algorítmica: como descuento o texto que explica la estética generativa.
2. Artefacto HTML único: arte generativo interactivo autónomo creado a partir detemplates/viewer.html(consulte el PASO 0 y la siguiente sección)

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

CREACIÓN DE ARTEFACTOS INTERACTIVOS

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

Para permitir la exploración del arte generativo, cree un artefacto HTML único e independiente. Asegúrese de que este artefacto funcione inmediatamente en claude.ai o en cualquier navegador; no se requiere configuración. Incruste todo en línea.

CRÍTICO: LO FIJO VS LO VARIABLE

El archivotemplates/viewer.htmles la base. Contiene la estructura y el estilo exactos necesarios.

FIJO (siempre incluya exactamente como se muestra):

• Estructura de diseño (encabezado, barra lateral, área principal del lienzo)
• Marca antrópica (colores de interfaz de usuario, fuentes, degradados)
• Sección de semillas en la barra lateral:
  • exhibición de semillas
  • Botones Anterior/Siguiente
  • Botón aleatorio
  • Saltar a la entrada inicial + botón Ir
• Sección de acciones en la barra lateral:
  • Botón regenerar
  • botón de reinicio

VARIABLE (personalizar para cada obra de arte):

• Todo el algoritmo p5.js (configuración/dibujo/clases)
• El objeto de parámetros (define lo que necesita el arte)
• La sección Parámetros en la barra lateral:
  • Número de controles de parámetros
  • Nombres de parámetros
  • Valores mínimo/máximo/paso para controles deslizantes
  • Tipos de control (controles deslizantes, entradas, etc.)
• Sección de colores (opcional):
  • Algunas obras de arte necesitan selectores de color
  • Algunas obras de arte pueden usar colores fijos.
  • Algunas ilustraciones pueden ser monocromáticas (no se necesitan controles de color)
  • Decidir en función de las necesidades del arte.

¡Cada obra de arte debe tener parámetros y algoritmos únicos! Las partes fijas brindan una experiencia de usuario consistente; todo lo demás expresa una visión única.

CARACTERÍSTICAS REQUERIDAS

1. Controles de parámetros

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

2. Navegación de semillas

• Mostrar el número de semilla actual
• Botones "Anterior" y "Siguiente" para recorrer las semillas
• Botón "Aleatorio" para semillas aleatorias
• Campo de entrada para saltar a una semilla específica
• Genera 100 variaciones cuando se solicite (semillas 1-100)

3. Estructura de artefacto único

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

CRÍTICO: Este es un solo artefacto. Sin archivos externos, sin importaciones (excepto p5.js CDN). Todo en línea.

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

La estructura de la barra lateral:

1. Semilla (FIJA) - Incluya siempre exactamente como se muestra:

• exhibición de semillas
• Botones Anterior/Siguiente/Aleatorio/Saltar

2. Parámetros (VARIABLE) - Crear controles para el arte:

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

Agregue tantos divs del grupo de control como parámetros haya.

3. Colores (OPCIONAL/VARIABLE) - Incluir si el arte necesita colores ajustables:

• Agregue selectores de color si los usuarios deben controlar la paleta
• Omita esta sección si el arte usa colores fijos.
• Omitir si el arte es monocromático.

4. Acciones (FIJA) - Incluya siempre exactamente como se muestra:

• Botón regenerar
• botón de reinicio
• Descargar botón PNG

Requisitos:

• Los controles de semillas deben funcionar (anterior/siguiente/aleatorio/saltar/mostrar)
• Todos los parámetros deben tener controles de UI
• Los botones Regenerar, Restablecer y Descargar deben funcionar
• Mantenga la marca Anthropic (estilo de interfaz de usuario, no colores artísticos)

USANDO EL ARTEFACTO

El artefacto HTML funciona inmediatamente:

1. En claude.ai: se muestra como un artefacto interactivo; se ejecuta instantáneamente
2. Como archivo: guárdelo y ábralo en cualquier navegador; no se necesita servidor
3. Compartir: envíe el archivo HTML; es completamente autónomo

VARIACIONES Y EXPLORACIÓN

El artefacto incluye navegación inicial de forma predeterminada (botones anterior/siguiente/aleatorio), lo que permite a los usuarios explorar variaciones sin crear múltiples archivos. Si el usuario desea que se destaquen variaciones específicas:

• Incluir ajustes preestablecidos de semillas (botones para "Variación 1: Semilla 42", "Variación 2: Semilla 127", etc.)
• Agregue un "Modo Galería" que muestre miniaturas de varias semillas una al lado de la otra
• Todo dentro del mismo artefacto

Esto es como crear una serie de impresiones a partir de la misma placa: el algoritmo es consistente, pero cada semilla revela diferentes facetas de su potencial. La naturaleza interactiva significa que los usuarios descubren sus propios favoritos explorando el espacio de semillas.

EL PROCESO CREATIVO

Solicitud de usuario -> Filosofía algorítmica -> Implementación

Cada solicitud es única. El proceso implica:

1. Interpretar la intención del usuario - ¿Qué estética se busca?
2. Crear una filosofía algorítmica (4-6 párrafos) que describa el enfoque computacional
3. Impleméntelo en el código: cree el algoritmo que exprese esta filosofía.
4. Diseñar parámetros apropiados - ¿Qué debería ser ajustable?
5. Construir controles de UI coincidentes - Controles deslizantes/entradas para esos parámetros

Las constantes:

• Branding antrópico (colores, fuentes, diseño)
• Navegación de semillas (siempre presente)
• Artefacto HTML autónomo

Todo lo demás es variable:

• El algoritmo en sí
• los parametros
• Los controles de la interfaz de usuario
• El resultado visual

Para lograr los mejores resultados, confíe en la creatividad y deje que la filosofía guíe la implementación.

RECURSOS

Esta habilidad incluye plantillas y documentación útiles:

• templates/viewer.html: PUNTO DE PARTIDA OBLIGATORIO para todos los artefactos HTML.

  • Esta es la base: contiene la estructura exacta y la marca Anthropic.
  • Mantener sin cambios: estructura de diseño, organización de la barra lateral, colores/fuentes antrópicos, controles de semillas, botones de acción
  • Reemplazar: el algoritmo p5.js, las definiciones de parámetros y los controles de la interfaz de usuario en la sección Parámetros
  • Los extensos comentarios en el archivo marcan exactamente qué conservar y qué reemplazar.

• templates/generator_template.js: referencia para las mejores prácticas y principios de estructura de código de p5.js.

  • Muestra cómo organizar parámetros, utilizar aleatoriedad inicial y estructurar clases.
  • NO es un menú de patrones: utilice estos principios para crear algoritmos únicos
  • Incrustar algoritmos en línea en el artefacto HTML (no crear archivos.js separados)

Recordatorio crítico:

• La plantilla es el PUNTO DE PARTIDA, no la inspiración
• El algoritmo es dónde crear algo único
• No copie el ejemplo del campo de flujo: cree lo que exige la filosofía
• Pero DEBE mantener la estructura exacta de la interfaz de usuario y la marca Anthropic de la plantilla.

Archivos de recursos

LICENCIA.txt

Descargar LICENCIA.txt

Recurso binario

plantillas/generator_template.js

Descargar plantillas/generator_template.js

Recurso binario

plantillas/visor.html

Descargar plantillas/viewer.html

Recurso binario

Ver en GitHub

Ver en GitHub