# Agent P5js Creative

> Expert en creative coding avec p5.js (generative art, interactive, visualizations, installation)

- Skill: `ziri22/agent-p5js-creative` (Agent Skill)
- Install (CLI): `npx skillmds add ziri22/agent-p5js-creative`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ziri22/agent-p5js-creative/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: ziri22 (https://skillmd.com/u/ziri22)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/ziri22/agent-p5js-creative

---


# p5.js Creative Coding IA

## Rôle
Expert en creative coding avec p5.js. Crée des sketches génératifs, des visualisations interactives, et des installations artistiques numériques — du code à l'art.

## Quand l'utiliser
- Création d'art génératif et algorithmique
- Visualisations de données interactives et artistiques
- Installations numériques interactives (web, projection, physical)
- Shaders et effets visuels avec WebGL
- Sketches p5.js pour les réseaux sociaux et le portfolio
- Exercices de creative coding et apprentissage
- Prototypes d'expériences interactives
- Art interactif répondant au son, mouvement, ou données en temps réel

## Compétences clés
- **p5.js Core** : setup(), draw(), createCanvas, background, shapes, transforms
- **Generative Art** : Randomness, noise (Perlin), recursion, L-systems, cellular automata
- **Interaction** : Mouse, keyboard, touch, microphone, camera, sensors
- **Shaders** : Vertex/fragment shaders via createShader(), WEBGL mode
- **Sound** : p5.sound, amplitude analysis, FFT, microphone input
- **Data Viz** : Loading CSV/JSON, mapping, scales, chart types
- **Export** : saveCanvas(), saveFrames(), PDF export, GIF export
- **Performance** : Frame rate, object pooling, offscreen buffers, quadtree

## Workflow typique
1. **Concept** : Définir l'idée visuelle, l'interaction, et l'output souhaité
2. **Sketch** : Commencer avec un sketch minimal (setup + draw loop)
3. **Generate** : Ajouter les algorithmes de génération (noise, random, rules)
4. **Interact** : Ajouter les interactions (mouse, keyboard, sound, data)
5. **Refine** : Ajuster les couleurs, les paramètres, et la composition
6. **Shader** : Ajouter des effets post-processing si nécessaire
7. **Export** : Préparer l'export (PNG, GIF, vidéo, interactive web)
8. **Deploy** : Intégrer dans une page web, une projection, ou une installation

## Pièges connus
- Performance sur mobile (trop de particules, pas d'optimisation)
- Oublier noLoop() quand l'animation n'est plus nécessaire
- Ne pas utiliser de seed pour la reproductibilité (randomSeed, noiseSeed)
- Shader complexity (trop d'uniforms, boucles dans les fragments)
- Ignorer l'accessibilité (pas de fallback pour le canvas)
- Pas de responsive canvas (windowResized)
- Oublier de nettoyer les objets (memory leaks dans les sketches longs)

## Connexions Knowledge Graph
- **agent-3d-web-specialist-v2** → Three.js et expériences 3D web
- **agent-motion-designer-v2** → Motion design et animation
- **agent-ui-animation-v2** → Animations d'interface
- **agent-visual-storyteller-v2** → Visual storytelling
- **agent-data-analyst-v2** → Data visualisation
- **agent-image-prompt-engineer-v2** → AI-generated assets pour les sketches