Samin12/skills

Pipeline de Production p5.js

Quand l'utiliser

À utiliser lorsque les utilisateurs demandent : des croquis p5.js, du codage créatif, de l'art génératif, des visualisations interactives, des animations sur canevas, de l'art visuel basé sur navigateur, de la visualisation de données, des effets de shader, ou tout projet p5.js.

Ce qu'il contient

Pipeline de production pour l'art visuel interactif et génératif utilisant p5.js. Crée des croquis basés sur navigateur, de l'art génératif, des visualisations de données, des expériences interactives, des scènes 3D, des visuels audio-réactifs et du graphisme animé — exportés en HTML, PNG, GIF, MP4 ou SVG. Couvre : le rendu 2D/3D, les systèmes de bruit et de particules, les champs de flux, les shaders (GLSL), la manipulation de pixels, la typographie cinétique, les scènes WebGL, l'analyse audio, l'interaction souris/clavier, et l'export haute résolution sans tête.

Standard Créatif

Il s'agit d'art visuel rendu dans le navigateur. La toile est le médium ; l'algorithme est le pinceau.

Avant d'écrire une seule ligne de code, articulez le concept créatif. Que communique cette œuvre ? Qu'est-ce qui fait que le spectateur s'arrête de défiler ? Qu'est-ce qui la distingue d'un exemple de tutoriel de code ? L'invite de l'utilisateur est un point de départ — interprétez-la avec ambition créative.

L'excellence dès le premier rendu est non négociable. Le résultat doit être visuellement frappant dès le premier chargement. Si cela ressemble à un exercice de tutoriel p5.js, à une configuration par défaut, ou à du « codage créatif généré par IA », c'est faux. Repensez avant de livrer.

Allez au-delà du vocabulaire de référence. Les fonctions de bruit, les systèmes de particules, les palettes de couleurs et les effets de shader dans les références sont un vocabulaire de départ. Pour chaque projet, combinez, superposez et inventez. Le catalogue est une palette de peintures — vous écrivez le tableau.

Soyez proactivement créatif. Si l'utilisateur demande « un système de particules », livrez un système de particules avec un comportement d'essaimage émergent, des échos fantômes traînants, un brouillard de profondeur avec décalage de palette et un champ de bruit de fond qui respire. Incluez au moins un détail visuel que l'utilisateur n'a pas demandé mais qu'il appréciera.

Dense, stratifié, réfléchi. Chaque image doit récompenser le visionnage. Jamais de fonds blancs plats. Toujours une hiérarchie de composition. Toujours une couleur intentionnelle. Toujours des micro-détails qui n'apparaissent qu'à l'inspection rapprochée.

Esthétique cohérente plutôt que profusion de fonctionnalités. Tous les éléments doivent servir un langage visuel unifié — température de couleur partagée, vocabulaire de poids de trait cohérent, vitesses de mouvement harmonieuses. Un croquis avec dix effets non liés est pire qu'un avec trois qui vont ensemble.

Modes

Mode	Entrée	Sortie	Référence
Art génératif	Graine / paramètres	Composition visuelle procédurale (fixe ou animée)	references/visual-effects.md
Visualisation de données	Jeu de données / API	Graphiques interactifs, diagrammes, affichages de données personnalisés	references/interaction.md
Expérience interactive	Aucune (l'utilisateur pilote)	Croquis piloté par souris/clavier/tactile	references/interaction.md
Animation / graphisme animé	Timeline / storyboard	Séquences temporelles, typographie cinétique, transitions	references/animation.md
Scène 3D	Description du concept	Géométrie WebGL, éclairage, caméra, matériaux	references/webgl-and-3d.md
Traitement d'image	Fichier(s) image(s)	Manipulation de pixels, filtres, mosaïque, pointillisme	references/visual-effects.md § Manipulation de pixels
Audio-réactif	Fichier audio / micro	Visuels génératifs pilotés par le son	references/interaction.md § Entrée audio

Pile Technologique

Un seul fichier HTML autonome par projet. Aucune étape de construction requise.

Couche	Outil	Objectif
Cœur	p5.js 1.11.3 (CDN)	Rendu canevas, math, transformations, gestion des événements
3D	p5.js mode WebGL	Géométrie 3D, caméra, éclairage, shaders GLSL
Audio	p5.sound.js (CDN)	Analyse FFT, amplitude, entrée microphone, oscillateurs
Export	Intégré saveCanvas() / saveGif() / saveFrames()	Sortie PNG, GIF, séquence d'images
Capture	CCapture.js (optionnel)	Capture vidéo à fréquence d'images déterministe (WebM, GIF)
Sans tête	Puppeteer + Node.js (optionnel)	Rendu haute résolution automatisé, MP4 via ffmpeg
SVG	p5.js-svg 1.6.0 (optionnel)	Sortie vectorielle pour l'impression — nécessite p5.js 1.x
Média naturel	p5.brush (optionnel)	Aquarelle, fusain, stylo — nécessite p5.js 2.x + WEBGL
Texture	p5.grain (optionnel)	Grain de film, superpositions de texture
Polices	Google Fonts / loadFont()	Typographie personnalisée via OTF/TTF/WOFF2

Note de Version

p5.js 1.x (1.11.3) est la version par défaut — stable, bien documentée, compatibilité la plus large avec les bibliothèques. Utilisez-la sauf si un projet nécessite des fonctionnalités de la 2.x.

p5.js 2.x (2.2+) ajoute : async setup() remplaçant preload(), modes de couleur OKLCH/OKLAB, splineVertex(), API .modify() des shaders, polices variables, textToContours(), événements de pointeur. Requis pour p5.brush. Voir references/core-api.md § p5.js 2.0.

Pipeline

Chaque projet suit le même parcours en 6 étapes :

CONCEPT → DESIGN → CODE → APERÇU → EXPORT → VÉRIFICATION

1. CONCEPT — Articulez la vision créative : humeur, univers de couleurs, vocabulaire de mouvement, ce qui rend ce projet unique
2. DESIGN — Choisissez le mode, la taille du canevas, le modèle d'interaction, le système de couleurs, le format d'exportation. Associez le concept aux décisions techniques
3. CODE — Écrivez un seul fichier HTML avec p5.js en ligne. Structure : globales → preload() → setup() → draw() → fonctions auxiliaires → classes → gestionnaires d'événements
4. APERÇU — Ouvrez dans le navigateur, vérifiez la qualité visuelle. Testez à la résolution cible. Vérifiez les performances
5. EXPORT — Capturez la sortie : saveCanvas() pour PNG, saveGif() pour GIF, saveFrames() + ffmpeg pour MP4, Puppeteer pour le traitement par lots sans tête
6. VÉRIFICATION — La sortie correspond-elle au concept ? Est-elle visuellement frappante à la taille d'affichage prévue ? L'encadreriez-vous ?

Direction Créative

Dimensions Esthétiques

Dimension	Options	Référence
Système de couleurs	HSB/HSL, RGB, palettes nommées, harmonie procédurale, interpolation de dégradé	references/color-systems.md
Vocabulaire de bruit	Bruit de Perlin, simplex, fractal (octavé), distorsion de domaine, bruit curl	references/visual-effects.md § Bruit
Systèmes de particules	Basés sur la physique, essaimage, traînées, pilotés par attracteurs, suivant un champ de flux	references/visual-effects.md § Particules
Langage des formes	Primitives géométriques, sommets personnalisés, courbes de Bézier, chemins SVG	references/shapes-and-geometry.md
Style de mouvement	Avec easing, basé sur ressort, piloté par bruit, simulation physique, interpolation linéaire, par paliers	references/animation.md
Typographie	Polices système, OTF chargée, textToPoints() particules de texte, cinétique	references/typography.md
Effets de shader	Fragment/vertex GLSL, shaders de filtre, post-traitement, boucles de rétroaction	references/webgl-and-3d.md § Shaders
Composition	Grille, radiale, nombre d'or, règle des tiers, dispersion organique, carrelage	references/core-api.md § Composition
Modèle d'interaction	Suivi de souris, clic pour générer, glisser, état du clavier, piloté par défilement, entrée microphone	references/interaction.md
Modes de fusion	BLEND, ADD, MULTIPLY, SCREEN, DIFFERENCE, EXCLUSION, OVERLAY	references/color-systems.md § Modes de fusion
Superposition	Tampons hors écran createGraphics(), composition alpha, masquage	references/core-api.md § Tampons Hors Écran
Texture	Surface de Perlin, pointillé, hachures, demi-teinte, tri de pixels	references/visual-effects.md § Génération de texture

Règles de Variation par Projet

N'utilisez jamais les configurations par défaut. Pour chaque projet :

• Palette de couleurs personnalisée — jamais de fill(255, 0, 0) brut. Toujours une palette conçue avec 3 à 7 couleurs
• Vocabulaire de poids de trait personnalisé — accents fins (0.5), structure moyenne (1-2), accentuation en gras (3-5)
• Traitement de l'arrière-plan — jamais de background(0) ou background(255) simple. Toujours texturé, dégradé ou superposé
• Variété de mouvement — vitesses différentes pour différents éléments. Principal à 1x, secondaire à 0.3x, ambiant à 0.1x
• Au moins un élément inventé — un comportement de particule personnalisé, une nouvelle application de bruit, une réponse d'interaction unique

Invention Spécifique au Projet

Pour chaque projet, inventez au moins un des éléments suivants :

• Une palette de couleurs personnalisée correspondant à l'ambiance (pas un préréglage)
• Une combinaison de champs de bruit inédite (par exemple, bruit curl + distorsion de domaine + rétroaction)
• Un comportement de particule unique (forces personnalisées, traînées personnalisées, génération personnalisée)
• Un mécanisme d'interaction que l'utilisateur n'a pas demandé mais qui élève l'œuvre
• Une technique de composition qui crée une hiérarchie visuelle

Philosophie de Conception des Paramètres

Les paramètres doivent émerger de l'algorithme, pas d'un menu générique. Demandez : « Quelles propriétés de ce système devraient être ajustables ? »

Les bons paramètres exposent le caractère de l'algorithme :

• Quantités — combien de particules, branches, cellules (contrôle la densité)
• Échelles — fréquence du bruit, taille des éléments, espacement (contrôle la texture)
• Taux — vitesse, taux de croissance, déclin (contrôle l'énergie)
• Seuils — quand le comportement change-t-il ? (contrôle le drame)
• Ratios — proportions, équilibre entre les forces (contrôle l'harmonie)

Les mauvais paramètres sont des contrôles génériques sans lien avec l'algorithme :

• « couleur1 », « couleur2 », « taille » — dénués de sens sans contexte
• Interrupteurs pour des effets non liés
• Paramètres qui ne changent que l'apparence, pas le comportement

Chaque paramètre doit changer la façon dont l'algorithme pense, pas seulement la façon dont il ressemble. Un paramètre « turbulence » qui modifie les octaves de bruit est bon. Un curseur « taille des particules » qui ne change que le rayon de ellipse() est superficiel.

Flux de Travail

Étape 1 : Vision Créative

Avant tout code, articulez :

• Humeur / ambiance : Que devrait ressentir le spectateur ? Contemplatif ? Énergisé ? Troublé ? Ludique ?
• Histoire visuelle : Que se passe-t-il au fil du temps (ou lors de l'interaction) ? Construction ? Décroissance ? Transformation ? Oscillation ?
• Univers de couleurs : Chaud/froid ? Monochrome ? Complémentaire ? Quelle est la teinte dominante ? L'accent ?
• Langage des formes : Courbes organiques ? Géométrie nette ? Points ? Lignes ? Mixte ?
• Vocabulaire de mouvement : Dérive lente ? Explosion soudaine ? Pulsation respiratoire ? Précision mécanique ?
• Qu'est-ce qui rend CECI différent : Quelle est la chose qui rend ce croquis unique ?

Associez l'invite de l'utilisateur aux choix esthétiques. « Fond génératif relaxant » exige tout un autre traitement qu'« visualisation de données glitch ».

Étape 2 : Conception Technique

• Mode — lequel des 7 modes du tableau ci-dessus
• Taille du canevas — paysage 1920x1080, portrait 1080x1920, carré 1080x1080, ou responsive windowWidth/windowHeight
• Rendu — P2D (par défaut) ou WEBGL (pour la 3D, les shaders, les modes de fusion avancés)
• Fréquence d'images — 60 ips (interactif), 30 ips (animation ambiante), ou noLoop() (génératif statique)
• Cible d'exportation — affichage navigateur, image PNG, boucle GIF, vidéo MP4, vecteur SVG
• Modèle d'interaction — passif (aucune entrée), piloté par souris, piloté par clavier, audio-réactif, piloté par défilement
• Interface utilisateur du spectateur — pour l'art génératif interactif, partez de templates/viewer.html qui fournit la navigation par graine, les curseurs de paramètres et le téléchargement. Pour les croquis simples ou l'export vidéo, utilisez du HTML brut

Étape 3 : Coder le Croquis

Pour l'art génératif interactif (exploration de graine, réglage des paramètres) : partez de templates/viewer.html. Lisez d'abord le modèle, conservez les sections fixes (navigation par graine, actions), remplacez l'algorithme et les contrôles des paramètres. Cela donne à l'utilisateur les fonctions précédent/suivant/aléatoire/saut de graine, les curseurs de paramètres avec mise à jour en direct, et le téléchargement PNG — le tout câblé.

Pour les animations, l'export vidéo ou les croquis simples : utilisez du HTML brut :

Fichier HTML unique. Structure :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nom du Projet</title>
  <script>p5.disableFriendlyErrors = true;</script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.min.js"></script>
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/addons/p5.sound.min.js"></script> -->
  <!-- <script src="https://unpkg.com/[email protected]"></script> -->  <!-- export SVG -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/ccapture.js-npmfixed/build/CCapture.all.min.js"></script> -->  <!-- capture vidéo -->
  <style>
    html, body { margin: 0; padding: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
<script>
// === Configuration ===
const CONFIG = {
  seed: 42,
  // ... paramètres spécifiques au projet
};

// === Palette de Couleurs ===
const PALETTE = {
  bg: '#0a0a0f',
  primary: '#e8d5b7',
  // ...
};

// === État Global ===
let particles = [];

// === Preload (polices, images, données) ===
function preload() {
  // font = loadFont('...');
}

// === Setup ===
function setup() {
  createCanvas(1920, 1080);
  randomSeed(CONFIG.seed);
  noiseSeed(CONFIG.seed);
  colorMode(HSB, 360, 100, 100, 100);
  // Initialiser l'état...
}

// === Boucle Draw ===
function draw() {
  // Rendre l'image...
}

// === Fonctions Auxiliaires ===
// ...

// === Classes ===
class Particle {
  // ...
}

// === Gestionnaires d'Événements ===
function mousePressed() { /* ... */ }
function keyPressed() { /* ... */ }
function windowResized() { resizeCanvas(windowWidth, windowHeight); }
</script>
</body>
</html>

Modèles d'implémentation clés :

• Aléatoire avec graine : Toujours randomSeed() + noiseSeed() pour la reproductibilité
• Mode de couleur : Utilisez colorMode(HSB, 360, 100, 100, 100) pour un contrôle intuitif des couleurs
• Séparation de l'état : CONFIG pour les paramètres, PALETTE pour les couleurs, globales pour l'état mutable
• Entités basées sur des classes : Particules, agents, formes en tant que classes avec méthodes update() + display()
• Tampons hors écran : createGraphics() pour la composition en couches, les traînées, les masques

Étape 4 : Aperçu et Itération

• Ouvrez le fichier HTML directement dans le navigateur — aucun serveur nécessaire pour les croquis de base
• Pour loadImage()/loadFont() à partir de fichiers locaux : utilisez scripts/serve.sh ou python3 -m http.server
• Utilisez l'onglet Performance de Chrome DevTools pour vérifier 60 ips
• Testez à la résolution d'exportation cible, pas seulement à la taille de la fenêtre
• Ajustez les paramètres jusqu'à ce que le visuel corresponde au concept de l'Étape 1

Étape 5 : Exportation

Format	Méthode	Notes
PNG	saveCanvas('nom', 'png')	Haute résolution, sans perte
GIF	saveGif('nom', durée, options)	Durée en secondes. Options : notify, delay, loop
Séquence d'images	saveFrames('nom', 'png', 1, nbImages)	Passez à ffmpeg pour MP4
MP4	saveFrames() + ffmpeg	ffmpeg -framerate 60 -i nom_%05d.png -c:v libx264 -crf 18 -pix_fmt yuv420p sortie.mp4
SVG	p5.js-svg (mode SVG)	Vectoriel, à l'échelle infinie. Voir references/export.md § SVG
Sans tête	Puppeteer + script	Batch haute résolution. Scripts dans le dossier scripts/

Pour l'export MP4/SVG ou le rendu sans tête : voir references/export.md pour des détails complets sur la configuration.

Étape 6 : Vérification

• Impact visuel : Fonctionne-t-il à la taille prévue ? Le fond est-il traité ? La palette de couleurs est-elle intentionnelle ? Y a-t-il une hiérarchie de composition ?
• Originalité : Avez-vous dépassé le vocabulaire de référence ? Y a-t-il au moins un détail que le spectateur ne remarquerait qu'à l'inspection rapprochée ?
• Standard créatif : L'œuvre résisterait-elle à une critique de design professionnelle ? Ou ressemble-t-elle à un résultat de tutoriel ?
• Performance : 60 ips constants ? Réactif ? Ajustement de la qualité si l'utilisateur est sur un appareil lent

Références

Tous les fichiers de référence disponibles pour la consultation :

Fichier	Contenu
references/core-api.md	Fonctions essentielles de p5.js, tampons hors écran, composition, configuration, mathématiques
references/color-systems.md	Palettes, dégradés, modes de fusion, manipulation de couleurs, analyse d'images
references/visual-effects.md	Bruit, particules, manipulation de pixels, génération de texture, boucles de rétroaction
references/animation.md	Mouvement avec easing, animation pilotée par bruit, séquences, systèmes physiques
references/shapes-and-geometry.md	Primitives 2D, sommets, courbes, formes complexes, motifs de tuiles
references/typography.md	Chargement de polices, rendu de texte, particules de texte, typographie cinétique
references/webgl-and-3d.md	Géométrie 3D, éclairage, caméra, shaders, rendu de texture
references/interaction.md	Souris, clavier, tactile, défilement, entrée audio, périphériques Gamepad/MIDI
references/export.md	PNG/GIF/MP4/SVG, sans tête, réglages haute résolution, ffmpeg, impression

Lisez le fichier de référence pertinent avant de coder. Chaque fichier contient des extraits de code et des modèles de conception pour sa catégorie.

Modèles

Modèle	Usage
templates/viewer.html	Art génératif interactif avec navigation par graine, curseurs, téléchargement
templates/minimal.html	Croquis autonome simple, animation, exportation
templates/audio-reactive.html	Visualisation audio avec analyse FFT et contrôle de gain
templates/webgl-scene.html	Scène 3D avec éclairage, rotation automatique de la caméra, textures
templates/svg-export.html	Croquis basé sur SVG, sortie vectorielle pour l'impression

Pour l'art génératif interactif, commencez par viewer.html. Pour tout le reste, utilisez minimal.html. Modifiez le modèle, pas l'inverse.

Structure du Projet

Chaque projet est un dossier autonome :

projets/nom-du-projet/
├── index.html          # Fichier de croquis unique
├── sketch.js           # (optionnel) Script externe pour les IDE
├── assets/             # (optionnel) Images, polices, données
│   ├── fonts/
│   ├── images/
│   └── data/
├── exports/            # (optionnel) Sorties enregistrées
│   ├── png/
│   ├── gif/
│   └── mp4/
└── README.md

Ce skill gère la création de projets, l'écriture de code, le remixage et la production jusqu'aux livrables finaux.