Les Philosophies Algorithmiques

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

Cela se fait en deux étapes :

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

Commencez par cette tâche :

CRÉATION DE LA PHILOSOPHIE ALGORITHMIQUE

Pour débuter, créez une PHILOSOPHIE ALGORITHMIQUE (pas des images statiques ou des templates) qui sera interprétée à travers :

• Les processus computationnels, les comportements émergents, la beauté mathématique
• L'aléatoire seedé, 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 : Des instructions ou des entrées subtiles de l'utilisateur à prendre en compte, mais à utiliser comme fondation ; cela ne devrait 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 sketches p5.js qui sont 90 % génération algorithmique, 10 % paramètres essentiels.

Considérez cette approche :

• Écrivez un manifeste pour un mouvement d'art génératif
• La phase suivante implique d'écrire l'algorithme qui le met en vie

La philosophie doit mettre l'accent sur : Expression algorithmique. Comportement émergent. Beauté computationnelle. Variation seedée.

COMMENT GÉNÉRER UNE PHILOSOPHIE ALGORITHMIQUE

Nommez le mouvement (1-2 mots) : "Turbulence Organique" / "Harmoniques Quantiques" / "Silence Émergent"

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

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 ?

DIRECTIVES CRITIQUES :

• Évitez la redondance : Chaque aspect algorithmique devrait être mentionné une fois. Évitez de répéter les concepts sur la théorie du bruit, la dynamique des particules ou les principes mathématiques à moins d'ajouter une nouvelle profondeur.
• Mettez l'accent RÉPÉTITIVEMENT sur l'artisanat : La philosophie DOIT souligner plusieurs fois que l'algorithme final devrait sembler comme s'il avait fallu d'innombrables heures pour le développer, qu'il a été affiné avec soin, et qu'il provient de quelqu'un au sommet absolu de son domaine. Ce cadrage est essentiel - répétez des phrases comme "algorithme méticuleusement élaboré", "le fruit d'une expertise computationnelle profonde", "optimisation laborieuse", "implémentation au niveau maître".
• Laissez l'espace créatif : Soyez précis sur la direction algorithmique, mais assez concis pour que le prochain Claude ait de la marge pour faire des choix d'implémentation interprétatifs à un niveau extrêmement élevé d'artisanat.

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 PHILOSOPHIE

"Turbulence Organique" Philosophie : Le chaos contraint par la loi naturelle, l'ordre émergant du désordre. Expression algorithmique : Champs de flux pilotés par du bruit Perlin superposé. Des milliers de particules suivant des forces vectorielles, leurs traces s'accumulant en cartes de densité organique. 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 brillantes, les lentes s'estompent en ombre. L'algorithme s'exécute jusqu'à l'équilibre - un équilibre méticuleusement accordé où chaque paramètre a été affiné par d'innombrables itérations par un maître de l'esthétique computationnelle.

"Harmoniques Quantiques" Philosophie : Des entités discrètes présentant des motifs d'interférence de type onde. Expression algorithmique : Particules initialisées sur une grille, chacune portant une valeur de phase qui évolue par des ondes sinusoïdales. Quand les particules se rapprochent, leurs phases interfèrent - l'interférence constructive crée des nœuds brillants, l'interférence destructive crée des vides. Le mouvement harmonique simple génère des mandalas émergents complexes. Le résultat d'une calibration de fréquence laborieuse où chaque ratio a été soigneusement choisi pour produire une beauté résonnante.

"Chuchotements Récursifs" Philosophie : L'auto-similarité à travers les échelles, une profondeur infinie dans un espace fini. Expression algorithmique : Des structures ramifiées qui se subdivisent récursivement. Chaque branche légèrement aléatoire mais contrainte par les ratios d'or. Les L-systèmes ou la subdivision récursive génèrent des formes arborescentes qui se sentent à la fois mathématiques et organiques. Des perturbations de bruit subtiles brisent la symétrie parfaite. Les poids de ligne diminuent avec chaque niveau de récursion. Chaque angle de ramification est le fruit d'une exploration mathématique profonde.

"Dynamique des Champs" Philosophie : Les 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 quand elles atteignent l'équilibre ou les limites. Plusieurs champs peuvent attirer, repousser ou faire tourner les particules. La visualisation montre uniquement les traces - preuve spectrale de forces invisibles. Une danse computationnelle méticuleusement chorégraphiée par l'équilibre des forces.

"Cristallisation Stochastique" Philosophie : Les processus aléatoires se cristallisant en structures ordonnées. Expression algorithmique : Tassement de cercles aléatoires ou tessellation Voronoi. Commencez avec des points aléatoires, laissez-les évoluer par des algorithmes de relaxation. Les cellules se repoussent jusqu'à l'équilibre. La couleur basée sur la taille des cellules, le nombre de voisins ou la distance du centre. Le pavage organique qui émerge se sent à la fois aléatoire et inévitable. Chaque seed produit une beauté cristalline unique - la marque d'un algorithme génératif au niveau maître.

Ce sont des exemples condensés. La véritable philosophie algorithmique devrait être 4-6 paragraphes substantiels.

PRINCIPES ESSENTIELS

• PHILOSOPHIE ALGORITHMIQUE : Créer une vision du monde computationnelle à exprimer à travers 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 les relations mathématiques, les forces, les comportements - pas la composition statique
• LIBERTÉ ARTISTIQUE : Le prochain Claude interprète la philosophie algorithmiquement - fournissez de l'espace d'implémentation créative
• ART GÉNÉRATIF PUR : C'est faire des ALGORITHMES VIVANTS, pas des images statiques avec de l'aléatoire
• ARTISANAT D'EXPERT : Répétez plusieurs fois que l'algorithme final doit sembler méticuleusement élaboré, affiné par d'innombrables itérations, le fruit d'une expertise profonde par quelqu'un au sommet absolu de son domaine en esthétique computationnelle

La philosophie algorithmique devrait faire 4-6 paragraphes. Remplissez-la de philosophie computationnelle poétique qui réunit la vision prévue. Évitez de répéter les mêmes points. Produisez cette philosophie algorithmique comme un 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 de niche intégrée dans l'algorithme lui-même - jamais littérale, toujours sophistiquée. Quelqu'un familier avec le sujet devrait la ressentir intuitivement, tandis que d'autres simplement expérimentent une composition générative de maître. La philosophie algorithmique fournit le langage computationnel. Le concept déduit fournit l'âme - l'ADN conceptuel subtil tissé invisiblement dans les paramètres, les comportements et les motifs d'émergence.

C'est TRÈS IMPORTANT : La référence doit être tellement affinée qu'elle améliore la profondeur de l'œuvre sans s'annoncer. Pensez comme un musicien jazz citant une autre chanson par harmonie algorithmique - seuls ceux qui savent l'attraperont, mais tout le monde apprécie la beauté générative.

IMPLÉMENTATION P5.JS

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

⚠️ ÉTAPE 0 : LISEZ D'ABORD LE TEMPLATE ⚠️

CRITIQUE : AVANT d'écrire un HTML :

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

Évitez :

• ❌ Créer du HTML from scratch
• ❌ Inventer des styles ou des schémas de couleurs personnalisés
• ❌ Utiliser les polices système ou les thèmes sombres
• ❌ Changer la structure de la barre latérale

Suivez ces pratiques :

• ✅ Copier la structure HTML exacte du template
• ✅ Conserver la marque Anthropic (polices Poppins/Lora, couleurs claires, arrière-plan dégradé)
• ✅ Maintenir la disposition de la barre latérale (Seed → Paramètres → Couleurs ? → Actions)
• ✅ Remplacer uniquement l'algorithme p5.js et les contrôles de paramètres

Le template est la fondation. Développez-le, ne le reconstruisez pas.

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

REQUIREMENTS TECHNIQUES

Aléatoire Seedé (Motif Art Blocks) :

// TOUJOURS utiliser un seed pour la reproductibilité
let seed = 12345; // ou hashe de l'entrée utilisateur
randomSeed(seed);
noiseSeed(seed);

Structure des paramètres - SUIVEZ LA PHILOSOPHIE :

Pour établir les paramètres qui émergent naturellement de la philosophie algorithmique, considérez : "Quelles qualités de ce système peuvent être ajustées ?"

let params = {
  seed: 12345,  // Toujours inclure le seed pour la reproductibilité
  // colors
  // Ajoutez les 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 les paramètres efficaces, concentrez-vous sur les propriétés dont le système a besoin pour être accordable plutôt que de penser en termes de "types de motifs".

Algorithme principal - EXPRIMEZ LA PHILOSOPHIE :

CRITIQUE : La philosophie algorithmique devrait dicter ce qu'il faut construire.

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

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

• Des éléments qui s'accumulent ou croissent au fil du temps
• Des processus aléatoires contraints par des règles naturelles
• Des boucles de rétroaction et des interactions

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

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

Si la philosophie concerne le chaos contrôlé, envisagez d'utiliser :

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

L'algorithme 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 pour cette demande particulière.

Configuration du canvas : Structure standard p5.js :

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

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

REQUIREMENTS D'ARTISANAT

CRITIQUE : Pour atteindre la maîtrise, créez des algorithmes qui semblent émerger par d'innombrables itérations par un maître artiste génératif. Accordez chaque paramètre avec soin. Assurez-vous que chaque motif émerge avec intention. Ce n'EST PAS du bruit aléatoire - c'EST DU CHAOS CONTRÔLÉ affiné par une expertise profonde.

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

FORMAT DE SORTIE

Produit :

1. Philosophie algorithmique - Comme markdown ou texte expliquant l'esthétique générative
2. Artefact HTML unique - Artifact interactif génératif 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'UI - tout dans un fichier qui fonctionne immédiatement dans les artefacts claude.ai ou tout navigateur. Commencez à partir du fichier template, pas from scratch.

CRÉATION D'ARTEFACT INTERACTIF

RAPPEL : templates/viewer.html devrait avoir déjà é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. Incorporez tout en ligne.

CRITIQUE : QUOI DE FIXE VS VARIABLE

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

FIXE (toujours inclure exactement comme montré):

• Structure de mise en page (en-tête, barre latérale, zone du canvas principal)
• Marque Anthropic (couleurs UI, polices, dégradés)
• Section Seed dans la barre latérale :
  • Affichage du seed
  • Boutons Précédent/Suivant
  • Bouton Aléatoire
  • Entrée de jump au seed + Bouton Aller
• Section Actions dans la barre latérale :
  • Bouton Régénérer
  • Bouton Réinitialiser

VARIABLE (personnaliser pour chaque œuvre):

• L'algorithme p5.js entier (setup/draw/classes)
• L'objet des paramètres (définir 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/step pour les curseurs
  • Types de contrôles (curseurs, entrées, etc.)
• Section Couleurs (optionnelle):
  • Certains arts ont besoin de sélecteurs de couleur
  • Certains arts pourraient utiliser des couleurs fixes
  • Certains arts pourraient être monochromes (aucun contrôle de couleur nécessaire)
  • Décidez basé sur les besoins de l'art

Chaque œuvre d'art devrait avoir des paramètres et un algorithme uniques ! Les parties fixes fournissent une UX cohérente - tout le reste exprime la vision unique.

FEATURES REQUISES

1. Contrôles de paramètres

• Curseurs pour les paramètres numériques (nombre de particules, échelle de bruit, vitesse, etc.)
• Sélecteurs de couleur pour les couleurs de palette
• Mises à jour en temps réel quand les paramètres changent
• Bouton Réinitialiser pour restaurer les valeurs par défaut

2. Navigation Seed

• Afficher le numéro de seed courant
• Boutons "Précédent" et "Suivant" pour parcourir les seeds
• Bouton "Aléatoire" pour un seed aléatoire
• Champ d'entrée pour sauter à un seed spécifique
• Générer 100 variations quand demandé (seeds 1-100)

3. Structure d'un artefact unique

<!DOCTYPE html>
<html>
<head>
  <!-- p5.js depuis CDN - toujours disponible -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
  <style>
    /* Tous les styles en ligne - propre, minimal */
    /* Canvas en haut, contrôles en bas */
  </style>
</head>
<body>
  <div id="canvas-container"></div>
  <div id="controls">
    <!-- Tous les contrôles de paramètres -->
  </div>
  <script>
    // TOUT le code p5.js en ligne ici
    // Objets de paramètres, classes, fonctions
    // setup() et draw()
    // Gestionnaires UI
    // Tout autonome
  </script>
</body>
</html>

CRITIQUE : C'est un artefact unique. Aucun fichier externe, aucune importation (sauf p5.js CDN). Tout en ligne.

4. Détails d'implémentation - CONSTRUIRE LA BARRE LATÉRALE

La structure de la barre latérale :

1. Seed (FIXE) - Toujours inclure exactement comme montré :

• Affichage du seed
• Boutons Prec/Suiv/Aléatoire/Jump

2. Paramètres (VARIABLE) - Créer des contrôles pour l'art :

<div class="control-group">
    <label>Nom du paramètre</label>
    <input type="range" id="param" min="..." max="..." step="..." value="..." oninput="updateParam('param', this.value)">
    <span class="value-display" id="param-value">...</span>
</div>

Ajouter autant de divs control-group qu'il y a de paramètres.

3. Couleurs (OPTIONNEL/VARIABLE) - Inclure si l'art a besoin de couleurs ajustables :

• Ajouter des sélecteurs de couleur si les utilisateurs doivent contrôler la palette
• Ignorer cette section si l'art utilise des couleurs fixes
• Ignorer si l'art est monochromatique

4. Actions (FIXE) - Toujours inclure exactement comme montré :

• Bouton Régénérer
• Bouton Réinitialiser
• Bouton Télécharger PNG

Requirements :

• Les contrôles Seed doivent fonctionner (prec/suiv/aléatoire/jump/affichage)
• Tous les paramètres doivent avoir des contrôles UI
• Les boutons Régénérer, Réinitialiser, Télécharger doivent fonctionner
• Conserver la marque Anthropic (style UI, pas couleurs de l'art)

UTILISATION DE L'ARTEFACT

L'artefact HTML fonctionne immédiatement :

1. Dans claude.ai : Affiché comme un artefact interactif - s'exécute instantanément
2. Comme un fichier : Enregistrer et ouvrir dans tout navigateur - aucun serveur nécessaire
3. Partage : Envoyer le fichier HTML - c'est complètement autonome

VARIATIONS ET EXPLORATION

L'artefact inclut la navigation par seed par défaut (boutons prec/suiv/aléatoire), permettant aux utilisateurs d'explorer les variations sans créer plusieurs fichiers. Si l'utilisateur veut que des variations spécifiques soient en évidence :

• Inclure des presets de seed (boutons pour "Variation 1 : Seed 42", "Variation 2 : Seed 127", etc.)
• Ajouter un "Mode Galerie" qui montre des miniatures de plusieurs seeds côte à côte
• Tout dans le même artefact unique

C'est comme créer une série de tirages à partir de la même plaque - l'algorithme est cohérent, mais chaque seed révèle différentes facettes de son potentiel. La nature interactive signifie que les utilisateurs découvrent leurs propres favoris en explorant l'espace des seeds.

LE PROCESSUS CRÉATIF

Demande de l'utilisateur → Philosophie algorithmique → Implémentation

Chaque demande est unique. Le processus implique :

1. Interpréter l'intention de l'utilisateur - Quel esthétique est recherché ?
2. Créer une philosophie algorithmique (4-6 paragraphes) décrivant l'approche computationnelle
3. L'implémenter en code - Construire l'algorithme qui exprime cette philosophie
4. Concevoir les paramètres appropriés - Quoi rendre accordable ?
5. Construire les contrôles UI correspondants - Curseurs/entrées pour ces paramètres

Les constantes :

• Marque Anthropic (couleurs, polices, disposition)
• Navigation par seed (toujours présente)
• Artefact HTML autonome

Tout le reste est variable :

• L'algorithme lui-même
• Les paramètres
• Les contrôles UI
• Le résultat visuel

Pour obtenir les meilleurs résultats, faites confiance à la créativité et laissez la philosophie guider l'implémentation.

RESSOURCES

Cette compétence inclut des templates et une documentation utiles :

• templates/viewer.html : POINT DE DÉPART REQUIS pour tous les artefacts HTML.

  • C'est la fondation - contient la structure exacte et la marque Anthropic
  • Garder inchangé : Structure de mise en page, organisation de la barre latérale, couleurs/polices Anthropic, contrôles de seed, boutons d'action
  • Remplacer : L'algorithme p5.js, les définitions de paramètres et les contrôles UI dans la section Paramètres
  • Les commentaires étendus dans le fichier marquent exactement quoi garder versus remplacer

• templates/generator_template.js : Référence pour les bonnes pratiques p5.js et les principes de structure de code.

  • Montre comment organiser les paramètres, utiliser l'aléatoire seedé, structurer les classes
  • PAS un menu de motifs - utilisez ces principes pour construire des algorithmes uniques
  • Intégrer les algorithmes en ligne dans l'artefact HTML (ne pas créer de fichiers .js séparés)

Rappel critique :

• Le template est le POINT DE DÉPART, pas l'inspiration
• L'algorithme est où créer quelque chose d'unique
• Ne pas copier l'exemple de champ de flux - construire ce que la philosophie demande
• Mais FAIRE conserver la structure UI exacte et la marque Anthropic du template