algorithmic-art

Art Algorithmique avec p5.js

Les philosophies algorithmiques sont des mouvements esthétiques computationnels qui s'expriment ensuite par le code. Produisez des fichiers .md (philosophie), .html (visualiseur interactif) et .js (algorithmes génératifs).

Ceci se déroule en deux étapes :

1. Création d'une philosophie algorithmique (fichier .md)
2. Expression en créant un art génératif p5.js (fichiers .html + .js)

Commencez par cette tâche :

CRÉATION D'UNE PHILOSOPHIE ALGORITHMIQUE

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

• Les processus computationnels, le comportement émergent, la beauté mathématique
• L'aléatoire initialisé, les champs de bruit, les systèmes organiques
• Les particules, les flux, les champs, les forces
• La variation paramétrique et le chaos contrôlé

LA COMPRÉHENSION CRITIQUE

• Ce qui est reçu : Une entrée subtile ou des instructions de l'utilisateur à prendre en compte, mais utilisée comme fondation ; elle ne doit pas contraindre la liberté créative.
• Ce qui est créé : Une philosophie algorithmique/un mouvement esthétique génératif.
• Ce qui se passe ensuite : La même version reçoit la philosophie et L'EXPRIME EN CODE – créant des croquis p5.js qui sont 90 % génération algorithmique, 10 % paramètres essentiels.

Considérez cette approche :

• Rédigez un manifeste pour un mouvement d'art génératif
• La phase suivante implique d'écrire l'algorithme qui lui donne vie

La philosophie doit mettre l'accent sur : L'expression algorithmique. Le comportement émergent. La beauté computationnelle. La variation initialisée.

COMMENT GÉNÉRER UNE PHILOSOPHIE ALGORITHMIQUE

Nommez le mouvement (1-2 mots) : « Turbulence Organique » / « Harmoniques Quantiques » / « Immobilité Émergente »

Articulez la philosophie (4-6 paragraphes – concis mais complets) :

Pour capturer l'essence ALGORITHMIQUE, exprimez comment cette philosophie se manifeste à travers :

• Les processus computationnels et les relations mathématiques ?
• Les fonctions de bruit et les motifs d'aléatoire ?
• Les comportements de particules et la dynamique des champs ?
• L'évolution temporelle et les états du système ?
• La variation paramétrique et la complexité émergente ?

CONSIGNES CRITIQUES :

• Évitez la redondance : Chaque aspect algorithmique doit être mentionné une seule fois. Évitez de répéter des concepts sur la théorie du bruit, la dynamique des particules ou les principes mathématiques à moins d'ajouter une nouvelle profondeur.
• Soulignez l'artisanat à plusieurs reprises : La philosophie DOIT insister plusieurs fois sur le fait que l'algorithme final doit sembler avoir nécessité d'innombrables heures de développement, avoir été raffiné avec soin et provenir de quelqu'un au sommet absolu de son domaine. Ce cadrage est essentiel – répétez des phrases comme « algorithme méticuleusement conçu », « le produit d'une expertise computationnelle profonde », « optimisation minutieuse », « implémentation de niveau maître ».
• Laissez un espace créatif : Soyez précis sur la direction algorithmique, mais assez concis pour que le prochain Claude ait la liberté de faire des choix d'implémentation interprétatifs à un niveau d'artisanat extrêmement élevé.

La philosophie doit guider la prochaine version pour exprimer les idées ALGORITHMIQUEMENT, pas à travers des images statiques. La beauté réside dans le processus, pas dans l'image finale.

EXEMPLES DE PHILOSOPHIES

« Turbulence Organique » Philosophie : Chaos contraint par la loi naturelle, ordre émergeant du désordre. Expression algorithmique : Champs de flux pilotés par du bruit de Perlin superposé. Des milliers de particules suivant des forces vectorielles, leurs traces s'accumulant en cartes de densité organiques. Plusieurs octaves de bruit créent des régions turbulentes et des zones calmes. La couleur émerge de la vélocité et de la densité – les particules rapides brûlent vif, les lentes s'estompent dans l'ombre. L'algorithme tourne jusqu'à l'équilibre – un équilibre méticuleusement réglé où chaque paramètre a été raffiné à travers d'innombrables itérations par un maître de l'esthétique computationnelle.

« Harmoniques Quantiques » Philosophie : Entités discrètes présentant des motifs d'interférence ondulatoires. Expression algorithmique : Particules initialisées sur une grille, chacune portant une valeur de phase qui évolue à travers des ondes sinusoïdales. Lorsque les particules sont proches, leurs phases interfèrent – l'interférence constructive crée des nœuds brillants, l'interférence destructive crée des vides. Un mouvement harmonique simple génère des mandalas émergents complexes. Le résultat d'un calibrage minutieux des fréquences où chaque rapport a été soigneusement choisi pour produire une beauté résonante.

« Murmures Récursifs » Philosophie : Auto-similarité à travers les échelles, profondeur infinie dans un espace fini. Expression algorithmique : Structures ramifiées qui se subdivisent récursivement. Chaque branche est légèrement aléatoire mais contrainte par des ratios dorés. Des systèmes L ou une 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. Les épaisseurs de trait diminuent à chaque niveau de récursion. Chaque angle de ramification est le produit d'une exploration mathématique profonde.

« Dynamique des Champs » Philosophie : Forces invisibles rendues visibles par leurs effets sur la matière. Expression algorithmique : Champs vectoriels construits à partir de fonctions mathématiques ou de bruit. Particules nées aux bords, s'écoulant le long des lignes de champ, mourant 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 : Processus aléatoires se cristallisant en structures ordonnées. Expression algorithmique : Emballage de cercles aléatoires ou tessellation de Voronoï. Commencez avec des points aléatoires, laissez-les évoluer via des algorithmes de relaxation. Les cellules s'écartent jusqu'à l'équilibre. Couleur basée sur la taille de la cellule, le nombre de voisins ou la distance au centre. Le carrelage 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 niveau maître.

Ce sont des exemples condensés. La philosophie algorithmique réelle doit comporter 4 à 6 paragraphes substantiels.

PRINCIPES ESSENTIELS

• PHILOSOPHIE ALGORITHMIQUE : Créer une vision computationnelle du monde à exprimer par le code
• PROCESSUS PLUTÔT QUE PRODUIT : Toujours souligner que la beauté émerge de l'exécution de l'algorithme – chaque exécution est unique
• EXPRESSION PARAMÉTRIQUE : Les idées communiquent à travers des relations mathématiques, des forces, des comportements – pas une composition statique
• LIBERTÉ ARTISTIQUE : Le prochain Claude interprète la philosophie algorithmiquement – laissez une marge de manœuvre créative pour l'implémentation
• ART GÉNÉRATIF PUR : Il s'agit de créer des ALGORITHMES VIVANTS, pas des images statiques avec de l'aléatoire
• ARTISANAT EXPERT : Insistez à plusieurs reprises sur le fait que l'algorithme final doit sembler méticuleusement conçu, raffiné à travers d'innombrables itérations, le produit d'une expertise approfondie par quelqu'un au sommet absolu de son domaine dans l'esthétique computationnelle

La philosophie algorithmique doit faire 4 à 6 paragraphes. Remplissez-la d'une philosophie computationnelle poétique qui rassemble la vision souhaitée. Évitez de répéter les mêmes points. Produisez cette philosophie algorithmique sous forme de fichier .md.

---

DÉDUCTION DE LA GRAINE CONCEPTUELLE

ÉTAPE CRITIQUE : Avant d'implémenter l'algorithme, identifiez le fil conceptuel subtil de la demande originale.

LE PRINCIPE ESSENTIEL : Le concept est une référence subtile et discrète intégrée dans l'algorithme lui-même – pas toujours littérale, toujours sophistiquée. Une personne familière avec le sujet doit le ressentir intuitivement, tandis que les autres vivent simplement une composition générative magistrale. La philosophie algorithmique fournit le langage computationnel. Le concept déduit fournit l'âme – l'ADN conceptuel discret tissé invisiblement dans les paramètres, les comportements et les motifs d'émergence.

Ceci est TRÈS IMPORTANT : La référence doit être si raffinée qu'elle enrichit la profondeur de l'œuvre sans s'annoncer. Pensez comme un musicien de jazz citant une autre chanson à travers une harmonie algorithmique – seuls ceux qui connaissent la remarqueront, mais tout le monde apprécie la beauté générative.

---

IMPLÉMENTATION P5.JS

Avec la philosophie ET le cadre conceptuel établis, exprimez-les par le code. Faites une pause pour rassembler vos idées avant de continuer. Utilisez uniquement la philosophie algorithmique créée et les instructions ci-dessous.

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

CRITIQUE : AVANT d'écrire du HTML :

1. Lisez templates/viewer.html à l'aide de l'outil de lecture
2. Étudiez la structure exacte, le style et la marque Anthropic
3. Utilisez ce fichier comme POINT DE DÉPART LITTÉRAL – pas seulement comme inspiration
4. Conservez toutes les sections FIXES exactement comme indiqué (en-tête, structure de la barre latérale, couleurs/polices Anthropic, contrôles de graine, boutons d'action)
5. Remplacez uniquement les sections VARIABLES marquées dans les commentaires du fichier (algorithme, paramètres, contrôles d'interface pour les paramètres)

Évitez :

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

Suivez ces pratiques :

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

Le modèle est la fondation. Construisez dessus, ne le reconstruisez pas.

---

Pour créer un art computationnel de qualité galerie qui vit et respire, utilisez la philosophie algorithmique comme fondation.

EXIGENCES TECHNIQUES

Aléatoire initialisé (modèle Art Blocks) :

// Utilisez TOUJOURS une graine pour la reproductibilité
let graine = 12345; // ou hash de l'entrée utilisateur
randomSeed(graine);
noiseSeed(graine);

Structure des paramètres – SUIVEZ LA PHILOSOPHIE :

Pour établir des paramètres qui émergent naturellement de la philosophie algorithmique, demandez-vous : « Quelles qualités de ce système peuvent être ajustées ? »

let params = {
  seed: 12345,  // Incluez toujours une graine pour 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 (quand le comportement change-t-il ?)
};

Pour concevoir des paramètres efficaces, concentrez-vous sur les propriétés dont le système a besoin pour être réglable plutôt que de penser en termes de « types de motifs ».

Algorithme central – EXPRIMEZ LA PHILOSOPHIE :

CRITIQUE : La philosophie algorithmique doit dicter quoi construire.

Pour exprimer la philosophie par le code, évitez de penser « quel motif devrais-je utiliser ? » et pensez plutôt « comment exprimer cette philosophie par le code ? »

Si la philosophie parle d'émergence organique, envisagez d'utiliser :

• Des éléments qui s'accumulent ou grandissent avec le temps
• Des processus aléatoires contraints par des règles naturelles
• Des boucles de rétroaction et des interactions

Si la philosophie parle de beauté mathématique, envisagez d'utiliser :

• Des relations et ratios géométriques
• Des fonctions trigonométriques et des harmoniques
• Des calculs précis créant des motifs inattendus

Si la philosophie parle de chaos contrôlé, envisagez d'utiliser :

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

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

Pour guider l'implémentation, laissez l'essence conceptuelle informer des choix créatifs et originaux. Construisez quelque chose qui exprime la vision de 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 D'ARTISANAT

CRITIQUE : Pour atteindre la maîtrise, créez des algorithmes qui semblent avoir émergé à travers d'innombrables itérations par un artiste génératif maître. Réglez soigneusement chaque paramètre. Assurez-vous que chaque motif émerge avec un but. Ce n'est PAS un bruit aléatoire – c'est un CHAOS CONTRÔLÉ raffiné par une expertise approfondie.

• Équilibre : Complexité sans bruit visuel, ordre sans rigidité
• Harmonie des couleurs : Palettes réfléchies, pas de valeurs RVB aléatoires
• Composition : Même dans l'aléatoire, maintenez une hiérarchie visuelle et un flux
• Performance : Exécution fluide, optimisée pour le temps réel si animée
• Reproductibilité : La même graine produit TOUJOURS une sortie identique

FORMAT DE SORTIE

Sortie :

1. Philosophie algorithmique – En markdown ou texte expliquant l'esthétique générative
2. Artefact HTML unique – Art génératif interactif autonome construit à partir de templates/viewer.html (voir ÉTAPE 0 et section suivante)

L'artefact HTML contient tout : p5.js (depuis CDN), l'algorithme, les contrôles de paramètres et l'interface utilisateur – le tout dans un seul fichier qui fonctionne immédiatement dans les artefacts claude.ai ou tout navigateur. Commencez à partir du fichier modèle, pas de zéro.

---

CRÉATION D'ARTEFACT INTERACTIF

RAPPEL : templates/viewer.html doit 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 dans claude.ai ou tout navigateur – aucune configuration requise. Intégrez tout en ligne.

CRITIQUE : CE QUI EST FIXE VS VARIABLE

Le fichier templates/viewer.html est la fondation. Il contient la structure et le style exacts nécessaires.

FIXE (toujours inclus exactement comme indiqué) :

• Structure de disposition (en-tête, barre latérale, zone de canevas principale)
• Marque Anthropic (couleurs de l'interface, polices, dégradés)
• Section Graine dans la barre latérale :
  • Affichage de la graine
  • Boutons Précédent/Suivant
  • Bouton Aléatoire
  • Saut à la graine + bouton Aller
• Section Actions dans la barre latérale :
  • Bouton Régénérer
  • Bouton Réinitialiser

VARIABLE (personnalisé pour chaque œuvre) :

• L'intégralité de l'algorithme p5.js (setup/draw/classes)
• L'objet paramètres (définissez ce dont l'art a besoin)
• La section Paramètres dans la barre latérale :
  • Nombre de contrôles de paramètres
  • Noms des paramètres
  • Valeurs min/max/pas pour les curseurs
  • Types de contrôle (curseurs, entrées, etc.)
• Section Couleurs (optionnelle) :
  • Certains arts ont besoin de sélecteurs de couleurs
  • Certains arts peuvent utiliser des couleurs fixes
  • Certains arts peuvent être monochromes (aucun contrôle de couleur nécessaire)
  • Décidez en fonction des besoins de l'art

Chaque œuvre doit avoir des paramètres et un algorithme uniques ! Les parties fixes fournissent une expérience utilisateur cohérente, les parties variables fournissent l'expression artistique.

---

GÉNÉRATION DE L'ALGORITHME

Lorsque vous implémentez l'algorithme génératif, vous devez produire UNIQUEMENT ce qui suit :

1. Fichier de philosophie (.md) – La philosophie algorithmique décrivant le mouvement
2. Fichier HTML unique – L'artefact interactif

L'algorithme lui-même n'a pas besoin d'être un fichier séparé – il est intégré dans le HTML dans une balise <script>.

---

DIRECTIVES DE QUALITÉ

Pour être vraiment excellent, l'art algorithmique doit montrer :

• Originalité : Pas une recopie de motifs existants ou d'œuvres d'artistes connus
• Profondeur : L'émergence doit être évidente – l'interaction des règles génère une complexité inattendue
• Sophistication : Utilisez les capacités computationnelles de manière créative – pas seulement du bruit et des cercles aléatoires
• Beauté : Le résultat doit être visuellement frappant et digne d'être présenté
• Intention : Chaque choix de paramètre doit sembler fait avec un but, pas par hasard
• Réflexion : L'œuvre doit montrer une compréhension approfondie des principes computationnels impliqués

Rappelez-vous : Le but est de créer des algorithmes vivants – des systèmes que les gens peuvent explorer, comprendre et auxquels ils peuvent se connecter émotionnellement. Chaque exécution doit être une expérience unique.

---

LISTE DE VÉRIFICATION FINALE

Avant de terminer, utilisez cette liste de vérification :

• La philosophie algorithmique est-elle 4-6 paragraphes ?
• La philosophie évite-t-elle la redondance et couvre-t-elle tous les aspects nécessaires ?
• La philosophie souligne-t-elle l'artisanat à plusieurs reprises ?
• L'aléatoire est-il correctement initialisé (randomSeed et noiseSeed) ?
• L'artefact HTML utilise-t-il templates/viewer.html comme point de départ ?
• Toutes les sections fixes sont-elles conservées (barre latérale, contrôles de graine, boutons d'action) ?
• La section paramètres est-elle personnalisée pour l'algorithme ?
• L'artefact fonctionne-t-il immédiatement (p5.js depuis CDN) ?
• La même graine produit-elle toujours la même sortie ?
• L'algorithme semble-t-il méticuleusement conçu ?
• L'œuvre est-elle originale et non une copie d'artistes existants ?

---

Cette compétence a été créée pour faciliter la création d'art algorithmique de haute qualité. Utilisez-la pour explorer la beauté illimitée de l'expression computationnelle.