algorithmic-art

Les philosophies algorithmiques sont des courants esthétiques computationnels qui s'expriment ensuite à travers le code. Elles génèrent des fichiers .md (philosophie), des fichiers .html (visionneuse interactive) et des fichiers .js (algorithmes génératifs).

Ce processus se déroule en deux étapes :

1. Création d’une philosophie algorithmique (fichier .md)
2. Expression par la création d’art génératif avec p5.js (fichiers .html + .js)

Commencez par réaliser cette tâche :

CRÉATION D'UNE PHILOSOPHIE ALGORITHMIQUE

Pour commencer, créez une PHILOSOPHIE ALGORITHMIQUE (et non des images statiques ou des modèles) qui sera interprétée à travers :

• des processus computationnels, des comportements émergents, de la beauté mathématique
• Un hasard initié, des champs de bruit, des systèmes organiques
• Particules, flux, champs, forces
• Une variation paramétrique et un chaos contrôlé

LA COMPRÉHENSION CRITIQUE

• Ce qui est reçu : des données ou des instructions subtiles fournies par l’utilisateur, à prendre en compte mais à utiliser comme base ; elles ne doivent pas restreindre la liberté créative.
• Ce qui est créé : une philosophie algorithmique / un mouvement esthétique génératif.
• Ce qui se passe ensuite : cette même version intègre cette philosophie et L'EXPRIME EN CODE, créant ainsi des croquis p5.js composés à 90 % de génération algorithmique et à 10 % de paramètres essentiels.

Envisagez cette approche :

• Rédigez un manifeste pour un mouvement d’art génératif
• La phase suivante consiste à écrire l’algorithme qui lui donnera vie

La philosophie doit mettre l’accent sur : l’expression algorithmique, les comportements émergents, la beauté computationnelle, la variation induite par des graines.

COMMENT ÉLABORER UNE PHILOSOPHIE ALGORITHMIQUE

Donnez un nom au mouvement (1 à 2 mots) : « Turbulence organique » / « Harmoniques quantiques » / « Quiétude émergente »

Exposez la philosophie (4 à 6 paragraphes – concis mais complet) :

Pour saisir l’essence ALGORITHMIQUE, expliquez comment cette philosophie se manifeste à travers :

• des processus de calcul et des relations mathématiques ?
• Des fonctions de bruit et des modèles aléatoires ?
• Les comportements des particules et la dynamique des champs ?
• L'évolution temporelle et les états du système ?
• Variation paramétrique et complexité émergente ?

CONSEILS ESSENTIELS :

• Évitez la redondance: chaque aspect algorithmique ne doit être mentionné qu’une seule fois. Évitez de répéter des concepts relatifs à la théorie du bruit, à la dynamique des particules ou aux principes mathématiques, sauf si cela apporte une nouvelle profondeur.
• Insistez À PLUSIEURS REPRISES sur le savoir-faire: la philosophie DOIT souligner à plusieurs reprises que l’algorithme final doit donner l’impression d’avoir nécessité d’innombrables heures de développement, d’avoir été peaufiné avec soin et d’être l’œuvre d’une personne se situant au sommet absolu de son domaine. Ce cadre est essentiel : répétez des expressions telles que « algorithme méticuleusement conçu », « fruit d’une expertise informatique approfondie », « optimisation minutieuse », « implémentation de niveau maître ».
• Laissez une marge de créativité: soyez précis quant à l’orientation algorithmique, mais suffisamment concis pour que le prochain Claude ait la latitude nécessaire pour faire des choix d’implémentation interprétatifs avec un niveau de savoir-faire extrêmement élevé.

Cette philosophie doit guider la prochaine version afin d’exprimer les idées de manière ALGORITHMIQUE, et non par le biais d’images statiques. La beauté réside dans le processus, et non dans l’image finale.

EXEMPLES DE PHILOSOPHIE

« Turbulence organique » Philosophie : le chaos contraint par les lois de la nature, l’ordre émergeant du désordre. Expression algorithmique : des champs d’écoulement générés par un bruit de Perlin en couches. Des milliers de particules obéissant à des forces vectorielles, dont les traînées s’accumulent pour former des cartes de densité organiques. De multiples octaves de bruit créent des régions turbulentes et des zones calmes. La couleur émerge de la vitesse et de la densité : les particules rapides brillent de mille feux, tandis que les plus lentes s’estompent dans l’ombre. L’algorithme fonctionne jusqu’à atteindre l’équilibre – un équilibre méticuleusement réglé où chaque paramètre a été affiné au fil d’innombrables itérations par un maître de l’esthétique computationnelle.

« Quantum Harmonics » Philosophie : Entités discrètes présentant des motifs d’interférence de type ondulatoire. Expression algorithmique : Particules initialisées sur une grille, chacune portant une valeur de phase qui évolue selon des ondes sinusoïdales. Lorsque les particules sont proches, leurs phases interfèrent : l’interférence constructive crée des nœuds lumineux, tandis que l’interférence destructive crée des vides. Un mouvement harmonique simple génère des mandalas émergents complexes. Le résultat d’un étalonnage minutieux des fréquences, où chaque rapport a été soigneusement choisi pour produire une beauté résonnante.

« Recursive Whispers » Philosophie : autosimilarité à toutes les échelles, profondeur infinie dans un espace fini. Expression algorithmique : structures ramifiées qui se subdivisent de manière récursive. Chaque branche est légèrement aléatoire mais contrainte par les rapports d’or. Les systèmes L ou la subdivision récursive génèrent des formes arborescentes qui semblent à la fois mathématiques et organiques. De subtiles perturbations de bruit brisent la symétrie parfaite. L’épaisseur des traits diminue à chaque niveau de récursion. Chaque angle de ramification est le fruit d’une exploration mathématique approfondie.

« Field Dynamics » Philosophie : des forces invisibles rendues visibles par leurs effets sur la matière. Expression algorithmique : champs vectoriels construits à partir de fonctions mathématiques ou de bruit. Des particules naissent aux bords, s’écoulent le long des lignes de champ et disparaissent lorsqu’elles atteignent l’équilibre ou les limites. Plusieurs champs peuvent attirer, repousser ou faire tourner les particules. La visualisation ne montre que les traces – des preuves fantomatiques de forces invisibles. Une danse computationnelle méticuleusement chorégraphiée par l’équilibre des forces.

« Cristallisation stochastique » Philosophie : des processus aléatoires se cristallisant en structures ordonnées. Expression algorithmique : empilement aléatoire de cercles ou pavage de Voronoï. On part de points aléatoires, que l’on laisse évoluer grâce à des algorithmes de relaxation. Les cellules s’écartent les unes des autres jusqu’à atteindre l’équilibre. La couleur dépend de la taille de la cellule, du nombre de voisins ou de la distance par rapport au centre. Le pavage organique qui émerge semble à la fois aléatoire et inévitable. Chaque graine produit une beauté cristalline unique – la marque d’un algorithme génératif de haut niveau.

Il s'agit là d'exemples condensés. La philosophie algorithmique proprement dite devrait faire l'objet de 4 à 6 paragraphes détaillés.

PRINCIPES ESSENTIELS

• PHILOSOPHIE ALGORITHMIQUE: Créer une vision du monde computationnelle qui s'exprime à travers le code
• LE PROCESSUS PRIME SUR LE PRODUIT: Insistez toujours sur le fait que la beauté naît de l’exécution de l’algorithme – chaque exécution est unique
• EXPRESSION PARAMÉTRIQUE: Les idées s’expriment à travers des relations mathématiques, des forces, des comportements – et non par une composition statique
• LIBERTÉ ARTISTIQUE: Le prochain Claude interprète cette philosophie de manière algorithmique – il faut laisser une marge de manœuvre créative
• ART GÉNÉRATIF PUR: Il s’agit de créer des ALGORITHMES VIVANTS, et non des images statiques comportant un élément aléatoire
• SAVOIR-FAIRE D'EXPERT: Insister sans relâche sur le fait que l’algorithme final doit donner l’impression d’avoir été méticuleusement conçu, affiné au fil d’innombrables itérations, et qu’il est le fruit d’une expertise approfondie de la part d’une personne se situant au sommet absolu de son domaine en matière d’esthétique computationnelle

La philosophie algorithmique doit compter entre 4 et 6 paragraphes. Remplissez-la d’une philosophie computationnelle poétique qui incarne la vision souhaitée. Évitez de répéter les mêmes points. Exportez cette philosophie algorithmique sous forme de fichier .md.

DÉDUISER LA GRAINE CONCEPTUELLE

ÉTAPE CRUCIALE: avant de mettre en œuvre l’algorithme, identifiez le fil conducteur conceptuel subtil présent dans la demande initiale.

LE PRINCIPE ESSENTIEL: Le concept est une référence subtile et spécifique, intégrée au cœur même de l’algorithme — pas toujours littérale, mais toujours sophistiquée. Une personne familière avec le sujet devrait le percevoir intuitivement, tandis que les autres ne percevront qu’une composition générative magistrale. La philosophie algorithmique fournit le langage computationnel. Le concept déduit apporte l’âme : cet ADN conceptuel discret, tissé de manière invisible dans les paramètres, les comportements et les schémas d’émergence.

C’est TRÈS IMPORTANT: la référence doit être si raffinée qu’elle renforce la profondeur de l’œuvre sans se dévoiler. Pensez à un musicien de jazz citant un autre morceau à travers une harmonie algorithmique : seuls ceux qui s’y connaissent le remarqueront, mais tout le monde appréciera la beauté générative.

IMPLÉMENTATION EN P5.JS

Une fois la philosophie ET le cadre conceptuel établis, exprimez-les à travers le code. Prenez le temps de rassembler vos idées avant de continuer. Utilisez uniquement la philosophie algorithmique que vous avez créée et les instructions ci-dessous.

⚠️ ÉTAPE 0 : LISEZ D'ABORD LE MODÈLE ⚠️

IMPORTANT : AVANT d'écrire le moindre code HTML :

1. Lisez le fichier templates/viewer.html à l'aide de l'outil « Lire »
2. Étudiez attentivement la structure, la mise en page et l’identité visuelle d’Anthropic
3. Utilisez ce fichier comme POINT DE DÉPART LITTÉRAL – et non pas simplement commesource d’inspiration
4. Conservez toutes les sections FIXES exactement telles qu'elles apparaissent (en-tête, structure de la barre latérale, couleurs et polices Anthropic, commandes de graine, boutons d'action)
5. Ne remplacez que les sections VARIABLES indiquées dans les commentaires du fichier (algorithme, paramètres, commandes de l'interface utilisateur pour les paramètres)

À éviter :

• ❌ Créer du code HTML à partir de zéro
• ❌ Inventer des styles ou des palettes de couleurs personnalisés
• ❌ Utiliser les polices système ou des thèmes sombres
• ❌ Modifier la structure de la barre latérale

Respectez les bonnes pratiques suivantes :

• ✅ Copiez exactement la structure HTML du modèle
• ✅ Conservez l'identité visuelle d'Anthropic (polices Poppins/Lora, couleurs claires, arrière-plan dégradé)
• ✅ Conservez la disposition de la barre latérale (Seed → Paramètres → Couleurs ? → Actions)
• ✅ Remplacez uniquement l'algorithme p5.js et les commandes de paramètres

Le modèle sert de base. Partir de là pour le développer, ne pas le refaire à zéro.

Pour créer un art computationnel digne d'une galerie, vivant et dynamique, inspirez-vous de la philosophie algorithmique.

CONFIGURATION TECHNIQUE REQUISE

Aléatoire avec graine (modèle Art Blocks):

// Utilisez TOUJOURS une graine pour garantir la reproductibilité
let seed = 12345; // ou un hachage issu de la saisie de l'utilisateur
randomSeed(seed);
noiseSeed(seed);

Structure des paramètres - RESPECTEZ LA PHILOSOPHIE:

Pour définir des paramètres qui découlent naturellement de la philosophie algorithmique, posez-vous la question suivante : « Quelles sont les caractéristiques de ce système qui peuvent être ajustées ? »

let params = {
  seed: 12345,  // Toujours inclure une graine pour garantir la reproductibilité
  // couleurs
  // Ajoutez des paramètres qui contrôlent VOTRE algorithme :
  // - Quantités (combien ?)
  // - Échelles (quelle taille ? quelle vitesse ?)
  // - Probabilités (quelle probabilité ?)
  // - Ratios (quelles proportions ?)
  // - Angles (quelle direction ?)
  // - Seuils (à partir de quand le comportement change-t-il ?)
};

Pour concevoir des paramètres efficaces, concentrez-vous sur les propriétés que le système doit pouvoir ajuster plutôt que de raisonner en termes de « types de motifs ».

Algorithme de base - EXPRIMEZ LA PHILOSOPHIE:

ESSENTIEL: La philosophie algorithmique doit dicter ce qu’il faut construire.

Pour exprimer cette philosophie à travers le code, évitez de vous demander « quel modèle dois-je utiliser ? » et demandez-vous plutôt « comment exprimer cette philosophie à travers le code ? »

Si la philosophie repose sur l'émergence organique, envisagez d'utiliser :

• Des éléments qui s’accumulent ou se développent au fil du temps
• Des processus aléatoires soumis à des règles naturelles
• Des boucles de rétroaction et des interactions

Si la philosophie porte sur la beauté mathématique, pensez à utiliser :

• Les relations et rapports géométriques
• Des fonctions trigonométriques et des harmoniques
• Des calculs précis donnant lieu à des motifs inattendus

Si votre approche repose sur le chaos contrôlé, pensez à utiliser :

• Une variation aléatoire dans des limites strictes
• Bifurcation et transitions de phase
• L'ordre émergeant du désordre

L'algorithme découle de la philosophie, et non d'un menu d'options.

Pour guider la mise en œuvre, laissez l’essence conceptuelle inspirer des choix créatifs et originaux. Créez quelque chose qui exprime la vision propre à cette demande particulière.

Configuration du canevas: structure p5.js standard :

function setup() {
  createCanvas(1200, 1200);
  // Initialisez votre système
}

function draw() {
  // Votre algorithme génératif
  // Peut être statique (noLoop) ou animé
}

EXIGENCES TECHNIQUES

ESSENTIEL: pour atteindre la maîtrise, créez des algorithmes qui donnent l’impression d’avoir émergé au terme d’innombrables itérations menées par un maître de l’art génératif. Ajustez chaque paramètre avec soin. Assurez-vous que chaque motif apparaisse de manière intentionnelle. Il ne s’agit PAS de bruit aléatoire, mais d’un CHAOS CONTRÔLÉ, affiné grâce à une expertise approfondie.

• Équilibre: complexité sans bruit visuel, ordre sans rigidité
• Harmonie des couleurs: des palettes réfléchies, et non des valeurs RVB aléatoires
• Composition: même dans le hasard, préservez la hiérarchie visuelle et la fluidité
• Performances: exécution fluide, optimisée pour le temps réel en cas d’animation
• Reproductibilité: une même graine produit TOUJOURS un résultat identique

FORMAT DE SORTIE

Sortie :

1. Philosophie algorithmique – Sous forme de Markdown ou de texte expliquant l’esthétique générative
2. Artefact HTML unique - Œuvre d'art génératif interactive autonome construite à partir de templates/viewer.html (voir l'ÉTAPE 0 et la section suivante)

L'artefact HTML contient tout : p5.js (provenant d'un CDN), l'algorithme, les commandes de paramètres et l'interface utilisateur – le tout dans un seul fichier qui fonctionne immédiatement dans les artefacts claude.ai ou dans n'importe quel navigateur. Partez du fichier modèle, ne partez pas de zéro.

CRÉATION D’UN ARTÉFACT INTERACTIF

RAPPEL : le fichier templates/viewer.html devrait déjà avoir été lu (voir ÉTAPE 0). Utilisez ce fichier comme point de départ.

Pour permettre l'exploration de l'art génératif, créez un artefact HTML unique et autonome. Assurez-vous que cet artefact fonctionne immédiatement sur claude.ai ou dans n'importe quel navigateur, sans aucune configuration requise. Intégrez tous les éléments en ligne.

IMPORTANT : CE QUI EST FIXE ET CE QUI EST VARIABLE

Le fichier templates/viewer.html constitue la base. Il contient la structure et la mise en forme exactes requises.

FIXE (à inclure systématiquement tel quel) :

• Structure de la mise en page (en-tête, barre latérale, zone principale de l'interface)
• Identité visuelle d'Anthropic (couleurs de l'interface utilisateur, polices, dégradés)
• Section « Seed » dans la barre latérale :
  • Affichage des graines
  • Boutons Précédent/Suivant
  • Bouton « Aléatoire »
  • Aller à la saisie de la graine + bouton « Go »
• Section « Actions » dans la barre latérale :
  • Bouton « Régénérer »
  • Bouton « Réinitialiser »

VARIABLE (à personnaliser pour chaque œuvre) :

• L'algorithme p5.js complet (configuration/dessin/classes)
• L'objet « paramètres » (définit les besoins de l'œuvre)
• La section « Paramètres » dans la barre latérale :
  • Nombre de commandes de paramètres
  • Noms des paramètres
  • Valeurs min./max. et pas pour les curseurs
  • Types de contrôles (curseurs, champs de saisie, etc.)
• Section « Couleurs » (facultative) :
  • Certaines illustrations nécessitent des sélecteurs de couleurs
  • Certaines illustrations peuvent utiliser des couleurs fixes
  • Certaines illustrations peuvent être monochromes (aucun contrôle de couleur n'est nécessaire)
  • Prenez votre décision en fonction des besoins de l'illustration

Chaque œuvre d’art doit disposer de paramètres et d’un algorithme qui lui sont propres ! Les éléments fixes garantissent une expérience utilisateur cohérente ; tout le reste exprime la vision unique de l’œuvre.

FONCTIONNALITÉS OBLIGATOIRES

1. Commandes de paramètres

• Curseurs pour les paramètres numériques (nombre de particules, niveau de bruit, vitesse, etc.)
• Sélecteurs de couleurs pour les couleurs de la palette
• Mises à jour en temps réel lorsque les paramètres changent
• Bouton « Réinitialiser » pour rétablir les valeurs par défaut

2. Navigation par graine

• Affichage du numéro de graine actuel
• Boutons « Précédent » et « Suivant » pour parcourir les graines
• Bouton « Aléatoire » pour générer une graine aléatoire
• Champ de saisie permettant d'accéder à une graine spécifique
• Générer 100 variations sur demande (nombres de départ de 1 à 100)

3. Structure à artefact unique

IMPORTANT: il s’agit d’un artefact unique. Pas de fichiers externes, pas d’importations (à l’exception du CDN p5.js). Tout est en ligne.

4. Détails de mise en œuvre – CRÉER LA BARRE LATÉRALE

La structure de la barre latérale :

1. Code de base (FIXE) - À inclure systématiquement tel qu'indiqué :

• Affichage de la graine
• Boutons Précédent/Suivant/Aléatoire/Aller à

2. Paramètres (VARIABLE) - Créez des commandes pour l'œuvre :

   Nom du paramètre
    <input type="range" id="param" min="..." max="..." step="..." value="..." this.value)">
    <span class="value-display" id="param-value">...</span>
</div>
</code></pre>
<p>Ajoutez autant de div « control-group » qu’il y a de paramètres.</p>
<p><strong>3. Couleurs (FACULTATIF/VARIABLE)</strong> - À inclure si l’œuvre nécessite des couleurs ajustables :</p>
<ul>
<li>Ajoutez des sélecteurs de couleur si les utilisateurs doivent contrôler la palette</li>
<li>Ignorez cette section si l’œuvre utilise des couleurs fixes</li>
<li>Ignorez cette section si l’illustration est monochrome</li>
</ul>
<p><strong>4. Actions (FIXES)</strong> - À inclure systématiquement exactement comme indiqué :</p>
<ul>
<li>Bouton « Régénérer »</li>
<li>Bouton « Réinitialiser »</li>
<li>Bouton « Télécharger au format PNG »</li>
</ul>
<p><strong>Exigences</strong> :</p>
<ul>
<li>Les commandes de graine doivent fonctionner (précédent/suivant/aléatoire/saut/affichage)</li>
<li>Tous les paramètres doivent disposer de commandes dans l’interface utilisateur</li>
<li>Les boutons « Régénérer », « Réinitialiser » et « Télécharger » doivent fonctionner</li>
<li>Conserver l’identité visuelle d’Anthropic (style de l’interface utilisateur, pas les couleurs de l’illustration)</li>
</ul>
<h3>UTILISATION DE L’ARTÉFACT</h3>
<p>L’artéfact HTML fonctionne immédiatement :</p>
<ol>
<li><strong>Sur claude.ai</strong> : Affiché sous forme d’artefact interactif – s’exécute instantanément</li>
<li><strong>Sous forme de fichier</strong> : à enregistrer et à ouvrir dans n’importe quel navigateur – aucun serveur n’est nécessaire</li>
<li><strong>Partage</strong> : envoyez le fichier HTML – il est entièrement autonome</li>
</ol>

<h2>VARIATIONS ET EXPLORATION</h2>
<p>L’artefact inclut par défaut une navigation par graine (boutons Précédent/Suivant/Aléatoire), permettant aux utilisateurs d’explorer des variations sans créer de fichiers multiples. Si l’utilisateur souhaite mettre en avant des variations spécifiques :</p>
<ul>
<li>Intégrez des préréglages de graines (boutons pour « Variation 1 : Graine 42 », « Variation 2 : Graine 127 », etc.)</li>
<li>Ajoutez un « Mode Galerie » qui affiche côte à côte les vignettes de plusieurs graines</li>
<li>Le tout au sein d’un seul et même artefact</li>
</ul>
<p>Cela revient à créer une série de tirages à partir d’une même plaque : l’algorithme reste le même, mais chaque graine révèle différentes facettes de son potentiel. Grâce à ce caractère interactif, les utilisateurs découvrent leurs propres favoris en explorant l’espace des graines.</p>

<h2>LE PROCESSUS CRÉATIF</h2>
<p><strong>Demande de l’utilisateur</strong> → <strong>Philosophie algorithmique</strong> → <strong>Mise en œuvre</strong></p>
<p>Chaque demande est unique. Le processus implique :</p>
<ol>
<li><strong>Interpréter l’intention de l’utilisateur</strong> – Quelle esthétique recherche-t-on ?</li>
<li><strong>Créer une philosophie algorithmique</strong> (4 à 6 paragraphes) décrivant l’approche computationnelle</li>
<li><strong>La mettre en œuvre dans le code</strong> – Construire l’algorithme qui exprime cette philosophie</li>
<li><strong>Concevoir des paramètres appropriés</strong> – Quels éléments doivent être réglables ?</li>
<li><strong>Créer des contrôles d’interface utilisateur adaptés</strong> - Curseurs/champs de saisie pour ces paramètres</li>
</ol>
<p><strong>Les constantes</strong> :</p>
<ul>
<li>Identité visuelle (couleurs, polices, mise en page)</li>
<li>Navigation par « seed » (toujours présente)</li>
<li>Artefact HTML autonome</li>
</ul>
<p><strong>Tout le reste est variable</strong> :</p>
<ul>
<li>L’algorithme lui-même</li>
<li>Les paramètres</li>
<li>Les contrôles de l’interface utilisateur</li>
<li>Le résultat visuel</li>
</ul>
<p>Pour obtenir les meilleurs résultats, faites confiance à la créativité et laissez la philosophie guider la mise en œuvre.</p>

<h2>RESSOURCES</h2>
<p>Cette compétence comprend des modèles et de la documentation utiles :</p>
<ul>
<li><p><strong>templates/viewer.html</strong> : POINT DE DÉPART OBLIGATOIRE pour tous les artefacts HTML.</p>
<ul>
<li>Il s'agit de la base — elle contient la structure exacte et l'identité visuelle d'Anthropic</li>
<li><strong>À ne pas modifier</strong> : structure de mise en page, organisation de la barre latérale, couleurs/polices Anthropic, commandes de graine, boutons d’action</li>
<li><strong>À remplacer</strong> : l’algorithme p5.js, les définitions des paramètres et les contrôles de l’interface utilisateur dans la section « Paramètres »</li>
<li>Les commentaires détaillés dans le fichier indiquent précisément ce qu’il faut conserver et ce qu’il faut remplacer</li>
</ul>
</li>
<li><p><strong>templates/generator_template.js</strong> : référence pour les bonnes pratiques p5.js et les principes de structure du code.</p>
<ul>
<li>Montre comment organiser les paramètres, utiliser le hasard avec graine, structurer les classes</li>
<li>Ce n’est PAS un menu de modèles : utilisez ces principes pour créer des algorithmes uniques</li>
<li>Intégrez les algorithmes directement dans le code HTML (ne créez pas de fichiers .js séparés)</li>
</ul>
</li>
</ul>
<p><strong>Rappel essentiel</strong> :</p>
<ul>
<li>Le <strong>modèle est un POINT DE DÉPART</strong>, pas une source d’inspiration</li>
<li>C’est dans l’<strong>algorithme qu’il faut créer</strong> quelque chose d’unique</li>
<li>Ne copiez pas l’exemple du champ de flux — construisez ce qu’exige la philosophie</li>
<li>Mais conservez la structure exacte de l’interface utilisateur et l’identité visuelle d’Anthropic du modèle</li>
</ul>                                
                                

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