X (Twitter)

Guide de compétences d'agent pour la création d'art génératif p5.js avec un caractère aléatoire prédéfini, des contrôles de paramètres et des flux de travail Claude Skills reproductibles.

Source: Contenu adapté de anthropics/skills (MIT).

Les philosophies algorithmiques sont des mouvements esthétiques informatiques qui s’expriment ensuite à travers du code. Générez des fichiers.md (philosophie), des fichiers.html (visionneuse interactive) et des fichiers.js (algorithmes génératifs).

Cela se déroule en deux étapes:

Création de philosophie algorithmique (fichier.md)
Exprimez-vous en créant un art génératif p5.js (fichiers.html +.js)

Tout d’abord, entreprenez cette tâche:

CRÉATION DE PHILOSOPHIE ALGORITHMIQUE

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

Processus informatiques, comportement émergent, beauté mathématique
Aléatoire ensemencé, champs de bruit, systèmes organiques
Particules, flux, champs, forces
Variation paramétrique et chaos contrôlé

LA COMPRÉHENSION CRITIQUE

Ce qui est reçu: Quelques entrées ou instructions subtiles de la part de l'utilisateur à prendre en compte, mais à utiliser comme base; cela ne devrait pas restreindre la liberté de création.
Ce qui est créé: Une philosophie algorithmique/un mouvement esthétique génératif.
Que se passe-t-il ensuite: La même version reçoit la philosophie et l'EXPRIME EN CODE - créant des croquis p5.js qui sont à 90 % de génération algorithmique, 10 % de paramètres essentiels.

Considérez cette approche:

Écrire un manifeste pour un mouvement artistique génératif
La phase suivante consiste à écrire l'algorithme qui lui donne vie

La philosophie doit mettre l'accent sur: L'expression algorithmique. Comportement émergent. Beauté informatique. Variation ensemencée.

COMMENT GÉNÉRER UNE PHILOSOPHIE ALGORITHMIQUE

Nommez le mouvement (1-2 mots): "Turbulence organique" / "Harmoniques quantiques" / "Immobilité émergente"

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

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

Processus informatiques et relations mathématiques?
Fonctions de bruit et modèles aléatoires?
Comportements des particules et dynamique des champs?
Evolution temporelle et états du système?
Variation paramétrique et complexité émergente?

** DIRECTIVES CRITIQUES: **

Évitez la redondance: Chaque aspect algorithmique doit être mentionné une 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.
Mettez l'accent sur le savoir-faire à plusieurs reprises: La philosophie DOIT insister à plusieurs reprises sur le fait que l'algorithme final doit donner l'impression qu'il a fallu d'innombrables heures à développer, qu'il a été affiné avec soin et qu'il vient de quelqu'un au sommet absolu de son domaine. Ce cadrage est essentiel – répétez des expressions telles que « algorithme méticuleusement conçu », « le produit d'une expertise informatique approfondie », « optimisation minutieuse », « implémentation de niveau maître ».
Laissez un espace créatif: soyez précis sur la direction algorithmique, mais suffisamment concis pour que le prochain Claude ait la possibilité de faire des choix de mise en œuvre interprétatifs à un niveau de savoir-faire extrêmement élevé.

La philosophie doit guider la prochaine version pour exprimer les idées ALGORITHMIQUEMENT, et non à travers des images statiques. La beauté vit dans le processus, pas dans le cadre final.

EXEMPLES DE PHILOSOPHIE

"Turbulence organique" Philosophie: Chaos contraint par la loi naturelle, ordre émergeant du désordre. Expression algorithmique: champs d'écoulement pilotés par du bruit Perlin en couches. Des milliers de particules suivent les forces vectorielles, leurs traces s'accumulant dans des cartes de densité organique. Plusieurs 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 brûlent, les plus lentes se fondent dans l'ombre. L'algorithme fonctionne jusqu'à l'équilibre - un équilibre méticuleusement réglé où chaque paramètre a été affiné au cours d'innombrables itérations par un maître de l'esthétique informatique.

"Harmoniques quantiques" Philosophie: Entités discrètes présentant des modèles d'interférence ondulatoires. Expression algorithmique: Particules initialisées sur une grille, chacune portant une valeur de phase qui évolue au travers d'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 destructrice crée des vides. Un simple mouvement harmonique génère des mandalas émergents complexes. Le résultat d’un étalonnage minutieux de fréquence où chaque rapport a été soigneusement choisi pour produire une beauté résonnante.

"Chuchotements récursifs" Philosophie: autosimilarité à travers 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 des nombres d'or. Les systèmes en L ou la subdivision récursive génèrent des formes arborescentes qui semblent à la fois mathématiques et organiques. De subtiles perturbations sonores brisent la symétrie parfaite. L'épaisseur des lignes diminue à chaque niveau de récursion. Chaque angle de branchement est le produit d’une exploration mathématique approfondie.

"Dynamique de terrain" Philosophie: Forces invisibles rendues visibles à travers leurs effets sur la matière. Expression algorithmique: Champs vectoriels construits à partir de fonctions mathématiques ou de bruit. Particules nées sur les bords, circulant le long des lignes de champ, mourant lorsqu'elles atteignent l'équilibre ou les limites. Plusieurs champs peuvent attirer, repousser ou faire pivoter les particules. La visualisation ne montre que les traces – des preuves fantomatiques de forces invisibles. Une danse informatique méticuleusement chorégraphiée grâce à l’équilibre des forces.

"Cristallisation stochastique" Philosophie: Processus aléatoires se cristallisant en structures ordonnées. Expression algorithmique: empilement de cercles aléatoires ou pavage de Voronoï. Commencez par des points aléatoires, laissez-les évoluer grâce à des algorithmes de relaxation. Les cellules se séparent jusqu'à l'équilibre. Couleur basée sur la taille des cellules, le nombre de voisins ou la distance par rapport au centre. Le carrelage organique qui en é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.

Ceci sont des exemples condensés. La philosophie algorithmique réelle devrait comprendre 4 à 6 paragraphes substantiels.

PRINCIPES ESSENTIELS

PHILOSOPHIE ALGORITHMIQUE: Création d'une vision du monde informatique à exprimer via du code
PROCESSUS SUR PRODUIT: insistez toujours sur le fait 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 - et non une composition statique
LIBERTÉ ARTISTIQUE: Le prochain Claude interprète la philosophie de manière algorithmique - offre un espace de mise en œuvre créative
ART GÉNÉRATIF PUR: il s'agit de créer des ALGORITHMES VIVANTS, et non des images statiques aléatoires.
ARTISANAT EXPERT: insistez à plusieurs reprises sur l'algorithme final qui doit être méticuleusement conçu, raffiné au fil d'innombrables itérations, le produit d'une expertise approfondie par quelqu'un au sommet absolu de son domaine en esthétique informatique.

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

DÉDUIRE LA GRAINE CONCEPTUELLE

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

LE PRINCIPE ESSENTIEL: Le concept est une référence de niche subtile intégrée dans l'algorithme lui-même - pas toujours littérale, toujours sophistiquée. Une personne familière avec le sujet devrait le ressentir intuitivement, tandis que d’autres expérimenteront simplement une composition générative magistrale. La philosophie algorithmique fournit le langage informatique. Le concept déduit fournit l’âme – l’ADN conceptuel silencieux tissé de manière invisible dans les paramètres, les comportements et les modèles d’émergence.

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

MISE EN ŒUVRE DE P5.JS

Une fois la philosophie ET le cadre conceptuel établis, exprimez-le à travers 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 LE MODÈLE EN PREMIER

CRITIQUE: AVANT d'écrire du HTML:

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

Éviter:

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

Suivez ces pratiques:

Copiez la structure HTML exacte du modèle
Conserver la marque Anthropic (polices Poppins/Lora, couleurs claires, fond dégradé)
Conserver la disposition de la barre latérale (Seed -> Paramètres -> Couleurs? -> Actions)
Remplacez uniquement l'algorithme p5.js et les contrôles de paramètres

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

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

EXIGENCES TECHNIQUES

Aléatoire ensemencé (modèle de blocs d'art):

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

Structure des paramètres - SUIVEZ LA PHILOSOPHIE:

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

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

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

Algorithme de base - EXPRIMER LA PHILOSOPHIE:

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

Pour exprimer la philosophie à travers le code, évitez de penser « quel modèle dois-je utiliser? et réfléchissez plutôt « comment exprimer cette philosophie à travers le code?

Si la philosophie concerne l'émergence organique, pensez à utiliser:

Éléments qui s'accumulent ou grandissent avec le temps
Processus aléatoires contraints par des règles naturelles
Boucles de rétroaction et interactions

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

Relations et rapports géométriques
Fonctions trigonométriques et harmoniques
Des calculs précis créant des modèles inattendus

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

Variation aléatoire dans des limites strictes
Bifurcation et transitions de phase
L’ordre émerge 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 éclairer les 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);
  // Initialize your system
}

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

EXIGENCES D'ARTISANAT

CRITIQUE: Pour atteindre la maîtrise, créez des algorithmes qui donnent l'impression d'avoir émergé au fil d'innombrables itérations par un maître artiste génératif. Ajustez soigneusement chaque paramètre. Assurez-vous que chaque modèle émerge avec un but. Ce n'est PAS un bruit aléatoire - c'est un CHAOS CONTRÔLÉ raffiné grâce à une expertise approfondie.

Équilibre: Complexité sans bruit visuel, ordre sans rigidité
Harmonie des couleurs: des palettes réfléchies, pas des valeurs RVB aléatoires
Composition: même de manière aléatoire, maintenez la hiérarchie et le flux visuels
Performance: exécution fluide, optimisée pour le temps réel si animée
Reproductibilité: la même graine produit TOUJOURS un résultat identique

FORMAT DE SORTIE

Sortie:

Philosophie algorithmique - Sous forme de démarque ou de texte expliquant l'esthétique générative
Artefact HTML unique - Art génératif interactif autonome construit à partir detemplates/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 dans n'importe quel navigateur. Commencez à partir du fichier modèle, pas à partir de zéro.

CRÉATION D'ARTEFACTS INTERACTIFS

RAPPEL:templates/viewer.htmlaurait déjà dû être 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 dans n'importe quel navigateur - aucune configuration n'est requise. Intégrez tout en ligne.

CRITIQUE: CE QUI EST FIXE VS VARIABLE

Le fichiertemplates/viewer.htmlconstitue la base. Il contient la structure et le style exacts nécessaires.

FIXÉ (toujours inclure exactement comme indiqué):

Structure de mise en page (en-tête, barre latérale, zone de canevas principale)
Branding anthropique (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
- Passer à l'entrée de départ + bouton Go
Section Actions dans la barre latérale:
- Bouton Régénérer
- Bouton de réinitialisation

VARIABLE (personnaliser pour chaque œuvre):

L'intégralité de l'algorithme p5.js (setup/draw/classes)
L'objet 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/pas pour les curseurs
- Types de contrôles (curseurs, entrées, etc.)
Section Couleurs (facultatif):
- Certains arts ont besoin de sélecteurs de couleurs
- Certains arts peuvent utiliser des couleurs fixes
- Certaines œuvres d'art peuvent être monochromes (aucun contrôle de couleur n'est nécessaire)
- Décider en fonction des besoins de l'art

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

CARACTÉRISTIQUES REQUISES

1. Contrôles des paramètres

Curseurs pour les paramètres numériques (nombre de particules, échelle 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 de réinitialisation pour restaurer les paramètres par défaut

2. Navigation des semences

Afficher le numéro de graine actuel
Boutons « Précédent » et « Suivant » pour parcourir les graines
Bouton "Aléatoire" pour une graine aléatoire
Champ de saisie pour accéder à une graine spécifique
Générez 100 variations sur demande (graines 1 à 100)

3. Structure d'artefact unique

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

CRITIQUE: Il s'agit d'un seul artefact. Pas de fichiers externes, pas d'importations (sauf p5.js CDN). Tout en ligne.

4. Détails de mise en œuvre - CONSTRUIRE LA BARRE SIDEBAR

La structure de la barre latérale:

1. Semence (FIXE) - Incluez toujours exactement comme indiqué:

Affichage des graines
Boutons Précédent/Suivant/Aléatoire/Saut

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

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

Ajoutez autant de divs de groupe de contrôle qu’il y a de paramètres.

3. Couleurs (OPTIONNEL/VARIABLE) - À inclure si l'art nécessite des couleurs réglables:

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

4. Actions (FIXE) - Incluez toujours exactement comme indiqué:

Bouton Régénérer
Bouton de réinitialisation
Bouton Télécharger PNG

Exigences:

Les contrôles des semences doivent fonctionner (précédent/suivant/aléatoire/saut/affichage)
Tous les paramètres doivent avoir des contrôles d'interface utilisateur
Les boutons Régénérer, Réinitialiser, Télécharger doivent fonctionner
Conserver la marque Anthropic (style de l'interface utilisateur, pas les couleurs de l'art)

UTILISER L'ARTEFACT

L'artefact HTML fonctionne immédiatement:

Dans claude.ai: affiché sous forme d'artefact interactif - s'exécute instantanément
Sous forme de fichier: enregistrez et ouvrez dans n'importe quel navigateur - aucun serveur n'est nécessaire
Partage: envoyez le fichier HTML - il est complètement autonome

VARIATIONS & EXPLORATION

L'artefact inclut la navigation par défaut (boutons précédent/suivant/aléatoire), permettant aux utilisateurs d'explorer les variantes sans créer plusieurs fichiers. Si l'utilisateur souhaite que des variantes spécifiques soient mises en évidence:

Inclure des préréglages de graines (boutons pour « Variation 1: Seed 42 », « Variation 2: Seed 127 », etc.)
Ajoutez un "Mode Galerie" qui affiche les vignettes de plusieurs graines côte à côte
Le tout dans le même artefact unique

C'est comme créer une série d'impressions à partir de la même plaque: l'algorithme est cohérent, mais chaque graine 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 de départ.

LE PROCESSUS CRÉATIF

Demande de l'utilisateur -> Philosophie algorithmique -> Mise en œuvre

Chaque demande est unique. Le processus implique:

Interpréter l'intention de l'utilisateur - Quelle esthétique est recherchée?
Créer une philosophie algorithmique (4 à 6 paragraphes) décrivant l'approche informatique
Implémentez-le dans le code - Construisez l'algorithme qui exprime cette philosophie
Concevoir des paramètres appropriés - Qu'est-ce qui devrait être réglable?
Créer des contrôles d'interface utilisateur correspondants - Curseurs/entrées pour ces paramètres

Les constantes:

Branding anthropique (couleurs, polices, mise en page)
Navigation des graines (toujours présente)
Artefact HTML autonome

Tout le reste est variable:

L'algorithme lui-même
Les paramètres
Les contrôles de l'interface utilisateur
Le résultat visuel

Pour obtenir les meilleurs résultats, faites confiance à la créativité et laissez la philosophie guider la mise en œuvre.

RESSOURCES

Cette compétence comprend des modèles et de la documentation utiles:

templates/viewer.html: POINT DE DÉPART REQUIS pour tous les artefacts HTML.
- Ceci est la base - contient la structure exacte et la marque Anthropic
- Conserver inchangé: structure de mise en page, organisation de la barre latérale, couleurs/polices anthropiques, contrôles de départ, boutons d'action
- Remplacer: l'algorithme p5.js, les définitions de paramètres et les contrôles de l'interface utilisateur dans la section Paramètres
- Les commentaires détaillés dans le fichier indiquent exactement ce qu'il faut conserver ou remplacer
templates/generator_template.js: référence pour les meilleures pratiques p5.js et les principes de structure du code.
- Montre comment organiser les paramètres, utiliser le caractère aléatoire prédéfini, structurer les classes
- PAS un menu de modèles - utilisez ces principes pour créer des algorithmes uniques
- Intégrez des algorithmes en ligne dans l'artefact HTML (ne créez pas de fichiers.js séparés)

Rappel critique:

Le modèle est le POINT DE DÉPART, pas l'inspiration
L'algorithme permet de créer quelque chose d'unique
Ne copiez pas l'exemple du champ de flux - construisez ce que la philosophie exige
Mais CONSERVEZ la structure exacte de l'interface utilisateur et la marque Anthropic du modèle

Fichiers de ressources

LICENCE.txt

Télécharger LICENSE.txt

Ressource binaire

modèles/générateur_template.js

Télécharger templates/generator_template.js

Ressource binaire

modèles/viewer.html

Télécharger templates/viewer.html

Ressource binaire

Voir dans GitHub

Source: Contenu adapté de anthropics/skills (MIT).

Cela se déroule en deux étapes:

Création de philosophie algorithmique (fichier.md)
Exprimez-vous en créant un art génératif p5.js (fichiers.html +.js)

Tout d’abord, entreprenez cette tâche:

CRÉATION DE PHILOSOPHIE ALGORITHMIQUE

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

Processus informatiques, comportement émergent, beauté mathématique
Aléatoire ensemencé, champs de bruit, systèmes organiques
Particules, flux, champs, forces
Variation paramétrique et chaos contrôlé

LA COMPRÉHENSION CRITIQUE

Ce qui est reçu: Quelques entrées ou instructions subtiles de la part de l'utilisateur à prendre en compte, mais à utiliser comme base; cela ne devrait pas restreindre la liberté de création.
Ce qui est créé: Une philosophie algorithmique/un mouvement esthétique génératif.
Que se passe-t-il ensuite: La même version reçoit la philosophie et l'EXPRIME EN CODE - créant des croquis p5.js qui sont à 90 % de génération algorithmique, 10 % de paramètres essentiels.

Considérez cette approche:

Écrire un manifeste pour un mouvement artistique génératif
La phase suivante consiste à écrire l'algorithme qui lui donne vie

La philosophie doit mettre l'accent sur: L'expression algorithmique. Comportement émergent. Beauté informatique. Variation ensemencée.

COMMENT GÉNÉRER UNE PHILOSOPHIE ALGORITHMIQUE

Nommez le mouvement (1-2 mots): "Turbulence organique" / "Harmoniques quantiques" / "Immobilité émergente"

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

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

Processus informatiques et relations mathématiques?
Fonctions de bruit et modèles aléatoires?
Comportements des particules et dynamique des champs?
Evolution temporelle et états du système?
Variation paramétrique et complexité émergente?

** DIRECTIVES CRITIQUES: **

Évitez la redondance: Chaque aspect algorithmique doit être mentionné une 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.
Mettez l'accent sur le savoir-faire à plusieurs reprises: La philosophie DOIT insister à plusieurs reprises sur le fait que l'algorithme final doit donner l'impression qu'il a fallu d'innombrables heures à développer, qu'il a été affiné avec soin et qu'il vient de quelqu'un au sommet absolu de son domaine. Ce cadrage est essentiel – répétez des expressions telles que « algorithme méticuleusement conçu », « le produit d'une expertise informatique approfondie », « optimisation minutieuse », « implémentation de niveau maître ».
Laissez un espace créatif: soyez précis sur la direction algorithmique, mais suffisamment concis pour que le prochain Claude ait la possibilité de faire des choix de mise en œuvre interprétatifs à un niveau de savoir-faire extrêmement élevé.

La philosophie doit guider la prochaine version pour exprimer les idées ALGORITHMIQUEMENT, et non à travers des images statiques. La beauté vit dans le processus, pas dans le cadre final.

EXEMPLES DE PHILOSOPHIE

Ceci sont des exemples condensés. La philosophie algorithmique réelle devrait comprendre 4 à 6 paragraphes substantiels.

PRINCIPES ESSENTIELS

PHILOSOPHIE ALGORITHMIQUE: Création d'une vision du monde informatique à exprimer via du code
PROCESSUS SUR PRODUIT: insistez toujours sur le fait 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 - et non une composition statique
LIBERTÉ ARTISTIQUE: Le prochain Claude interprète la philosophie de manière algorithmique - offre un espace de mise en œuvre créative
ART GÉNÉRATIF PUR: il s'agit de créer des ALGORITHMES VIVANTS, et non des images statiques aléatoires.
ARTISANAT EXPERT: insistez à plusieurs reprises sur l'algorithme final qui doit être méticuleusement conçu, raffiné au fil d'innombrables itérations, le produit d'une expertise approfondie par quelqu'un au sommet absolu de son domaine en esthétique informatique.

DÉDUIRE LA GRAINE CONCEPTUELLE

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

MISE EN ŒUVRE DE P5.JS

ÉTAPE 0: LISEZ LE MODÈLE EN PREMIER

CRITIQUE: AVANT d'écrire du HTML:

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

Éviter:

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

Suivez ces pratiques:

Copiez la structure HTML exacte du modèle
Conserver la marque Anthropic (polices Poppins/Lora, couleurs claires, fond dégradé)
Conserver la disposition de la barre latérale (Seed -> Paramètres -> Couleurs? -> Actions)
Remplacez uniquement l'algorithme p5.js et les contrôles de paramètres

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

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

EXIGENCES TECHNIQUES

Aléatoire ensemencé (modèle de blocs d'art):

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

Structure des paramètres - SUIVEZ LA PHILOSOPHIE:

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

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

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

Algorithme de base - EXPRIMER LA PHILOSOPHIE:

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

Pour exprimer la philosophie à travers le code, évitez de penser « quel modèle dois-je utiliser? et réfléchissez plutôt « comment exprimer cette philosophie à travers le code?

Si la philosophie concerne l'émergence organique, pensez à utiliser:

Éléments qui s'accumulent ou grandissent avec le temps
Processus aléatoires contraints par des règles naturelles
Boucles de rétroaction et interactions

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

Relations et rapports géométriques
Fonctions trigonométriques et harmoniques
Des calculs précis créant des modèles inattendus

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

Variation aléatoire dans des limites strictes
Bifurcation et transitions de phase
L’ordre émerge 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 éclairer les 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);
  // Initialize your system
}

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

EXIGENCES D'ARTISANAT

Équilibre: Complexité sans bruit visuel, ordre sans rigidité
Harmonie des couleurs: des palettes réfléchies, pas des valeurs RVB aléatoires
Composition: même de manière aléatoire, maintenez la hiérarchie et le flux visuels
Performance: exécution fluide, optimisée pour le temps réel si animée
Reproductibilité: la même graine produit TOUJOURS un résultat identique

FORMAT DE SORTIE

Sortie:

Philosophie algorithmique - Sous forme de démarque ou de texte expliquant l'esthétique générative
Artefact HTML unique - Art génératif interactif autonome construit à partir detemplates/viewer.html(voir ÉTAPE 0 et section suivante)

CRÉATION D'ARTEFACTS INTERACTIFS

RAPPEL:templates/viewer.htmlaurait déjà dû être lu (voir ÉTAPE 0). Utilisez ce fichier comme point de départ.

CRITIQUE: CE QUI EST FIXE VS VARIABLE

Le fichiertemplates/viewer.htmlconstitue la base. Il contient la structure et le style exacts nécessaires.

FIXÉ (toujours inclure exactement comme indiqué):

Structure de mise en page (en-tête, barre latérale, zone de canevas principale)
Branding anthropique (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
- Passer à l'entrée de départ + bouton Go
Section Actions dans la barre latérale:
- Bouton Régénérer
- Bouton de réinitialisation

VARIABLE (personnaliser pour chaque œuvre):

L'intégralité de l'algorithme p5.js (setup/draw/classes)
L'objet 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/pas pour les curseurs
- Types de contrôles (curseurs, entrées, etc.)
Section Couleurs (facultatif):
- Certains arts ont besoin de sélecteurs de couleurs
- Certains arts peuvent utiliser des couleurs fixes
- Certaines œuvres d'art peuvent être monochromes (aucun contrôle de couleur n'est nécessaire)
- Décider en fonction des besoins de l'art

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

CARACTÉRISTIQUES REQUISES

1. Contrôles des paramètres

Curseurs pour les paramètres numériques (nombre de particules, échelle 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 de réinitialisation pour restaurer les paramètres par défaut

2. Navigation des semences

Afficher le numéro de graine actuel
Boutons « Précédent » et « Suivant » pour parcourir les graines
Bouton "Aléatoire" pour une graine aléatoire
Champ de saisie pour accéder à une graine spécifique
Générez 100 variations sur demande (graines 1 à 100)

3. Structure d'artefact unique

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

CRITIQUE: Il s'agit d'un seul artefact. Pas de fichiers externes, pas d'importations (sauf p5.js CDN). Tout en ligne.

4. Détails de mise en œuvre - CONSTRUIRE LA BARRE SIDEBAR

La structure de la barre latérale:

1. Semence (FIXE) - Incluez toujours exactement comme indiqué:

Affichage des graines
Boutons Précédent/Suivant/Aléatoire/Saut

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

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

Ajoutez autant de divs de groupe de contrôle qu’il y a de paramètres.

3. Couleurs (OPTIONNEL/VARIABLE) - À inclure si l'art nécessite des couleurs réglables:

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

4. Actions (FIXE) - Incluez toujours exactement comme indiqué:

Bouton Régénérer
Bouton de réinitialisation
Bouton Télécharger PNG

Exigences:

Les contrôles des semences doivent fonctionner (précédent/suivant/aléatoire/saut/affichage)
Tous les paramètres doivent avoir des contrôles d'interface utilisateur
Les boutons Régénérer, Réinitialiser, Télécharger doivent fonctionner
Conserver la marque Anthropic (style de l'interface utilisateur, pas les couleurs de l'art)

UTILISER L'ARTEFACT

L'artefact HTML fonctionne immédiatement:

Dans claude.ai: affiché sous forme d'artefact interactif - s'exécute instantanément
Sous forme de fichier: enregistrez et ouvrez dans n'importe quel navigateur - aucun serveur n'est nécessaire
Partage: envoyez le fichier HTML - il est complètement autonome

VARIATIONS & EXPLORATION

Inclure des préréglages de graines (boutons pour « Variation 1: Seed 42 », « Variation 2: Seed 127 », etc.)
Ajoutez un "Mode Galerie" qui affiche les vignettes de plusieurs graines côte à côte
Le tout dans le même artefact unique

LE PROCESSUS CRÉATIF

Demande de l'utilisateur -> Philosophie algorithmique -> Mise en œuvre

Chaque demande est unique. Le processus implique:

Interpréter l'intention de l'utilisateur - Quelle esthétique est recherchée?
Créer une philosophie algorithmique (4 à 6 paragraphes) décrivant l'approche informatique
Implémentez-le dans le code - Construisez l'algorithme qui exprime cette philosophie
Concevoir des paramètres appropriés - Qu'est-ce qui devrait être réglable?
Créer des contrôles d'interface utilisateur correspondants - Curseurs/entrées pour ces paramètres

Les constantes:

Branding anthropique (couleurs, polices, mise en page)
Navigation des graines (toujours présente)
Artefact HTML autonome

Tout le reste est variable:

L'algorithme lui-même
Les paramètres
Les contrôles de l'interface utilisateur
Le résultat visuel

Pour obtenir les meilleurs résultats, faites confiance à la créativité et laissez la philosophie guider la mise en œuvre.

RESSOURCES

Cette compétence comprend des modèles et de la documentation utiles:

templates/viewer.html: POINT DE DÉPART REQUIS pour tous les artefacts HTML.
- Ceci est la base - contient la structure exacte et la marque Anthropic
- Conserver inchangé: structure de mise en page, organisation de la barre latérale, couleurs/polices anthropiques, contrôles de départ, boutons d'action
- Remplacer: l'algorithme p5.js, les définitions de paramètres et les contrôles de l'interface utilisateur dans la section Paramètres
- Les commentaires détaillés dans le fichier indiquent exactement ce qu'il faut conserver ou remplacer
templates/generator_template.js: référence pour les meilleures pratiques p5.js et les principes de structure du code.
- Montre comment organiser les paramètres, utiliser le caractère aléatoire prédéfini, structurer les classes
- PAS un menu de modèles - utilisez ces principes pour créer des algorithmes uniques
- Intégrez des algorithmes en ligne dans l'artefact HTML (ne créez pas de fichiers.js séparés)

Rappel critique:

Le modèle est le POINT DE DÉPART, pas l'inspiration
L'algorithme permet de créer quelque chose d'unique
Ne copiez pas l'exemple du champ de flux - construisez ce que la philosophie exige
Mais CONSERVEZ la structure exacte de l'interface utilisateur et la marque Anthropic du modèle

Art algorithmique

Table des matières

Art algorithmique

Table des matières