Bouge devant la webcam et ton corps se dissout en une nuée de papillons qui s’envolent dans un sous-bois baigné de lumière.
Vue d’ensemble
Papillon cam n’affiche jamais l’image de la caméra. Des milliers de papillons volent en permanence au-dessus d’une photo de sous-bois, mais ils restent invisibles tant que rien ne bouge. Dès qu’un geste passe devant la webcam, ceux qui se trouvent sur son chemin apparaissent, battent des ailes et dessinent ta silhouette, avant de s’effacer doucement quand tu t’immobilises.
Par défaut, les ailes prennent les couleurs de ce que filme la caméra : tes vêtements, ta peau et la pièce autour de toi se retrouvent peints sur les papillons. Un halo chaud s’échappe du mouvement comme un rayon de soleil entre les feuilles, et le reste du décor se floute légèrement. L’expérience est une adaptation de Butterflies de Daniel Brown, enrichie de teintes de vrais papillons, d’un choix de fond (dont ta propre photo) et de réglages sur la nuée.
Fonctionnalités
- Ton corps en papillons : seuls les papillons situés là où tu bouges deviennent visibles, ta silhouette se reconstitue en battements d’ailes.
- Ailes couleur webcam : chaque papillon reprend les couleurs de l’image filmée à sa position, de façon symétrique sur ses deux ailes.
- Teintes naturelles : Monarque, Morpho, Citron, Piéride ou un mélange façon jardin, avec fondu enchaîné entre elles.
- Choix du fond : une forêt de résineux tapissée de mousse, une forêt d’automne, un noir profond qui fait ressortir le halo, ou ta propre photo (chargée localement, jamais envoyée).
- Sept curseurs de réglage : nombre de papillons (jusqu’à 3000), taille, vitesse de vol, sensibilité, durée de vie après le mouvement, flou du fond, intensité de la lumière.
- Capture photo et enregistrement vidéo : export PNG instantané ou capture vidéo du rendu, avec gestion dédiée du téléchargement sur iOS. Bascule caméra avant/arrière sur mobile.
Sous le capot
À chaque image, la différence avec l’image précédente est ajoutée à une carte de mouvement en basse résolution qui s’estompe d’elle-même en quelques secondes : c’est la mémoire du geste. Cette carte est floutée deux fois, puis étirée en rayons vers le bas de l’écran pour produire le halo de lumière.
Les papillons sont dessinés en une seule passe : chacun est une paire d’ailes posée sur un repère 3D aléatoire, qui monte en boucle et bat des ailes en échangeant largeur et profondeur. Leur shader de sommets lit la carte de mouvement à leur position pour décider de leur visibilité, et leur shader de pixels échantillonne la caméra sous chaque aile et sous son reflet pour colorer le papillon de façon symétrique. Les formes d’ailes sont dessinées par le programme lui-même au démarrage. Une dernière passe floute le décor partout sauf là où tu bouges, puis ajoute la lumière.
Contrôles
| Touche / geste | Action |
|---|---|
| Bouger devant la caméra | Fait apparaître les papillons |
| C | Change la couleur des ailes |
| B | Change le fond |
| P | Capture une photo PNG |
| R | Démarre / arrête l’enregistrement vidéo |
| S | Ouvre / ferme le panneau de réglages |
| H | Masque / affiche l’interface |
| F | Plein écran |
| Flèches | Nombre de papillons (haut/bas) et taille (gauche/droite) |
| Bouton caméra (mobile) | Bascule caméra avant / arrière |
Stack technique
- Vanilla JS, aucune dépendance, aucun build
- WebGL : carte de mouvement, flous séparables, halo en zoom-blur, jusqu’à 3000 papillons dessinés en un seul appel
- Canvas 2D : formes d’ailes générées au démarrage, aucune image à télécharger
- getUserMedia : flux webcam, avec bascule caméra avant/arrière sur mobile
- MediaRecorder : enregistrement vidéo, avec chemin de sauvegarde dédié pour iOS
Cas d’usage
Une expérience douce et contemplative, à projeter en installation ou à essayer avec des enfants : il suffit de lever les bras pour qu’une nuée s’envole. Le fond personnalisé permet de faire voler les papillons dans n’importe quel décor, et la capture vidéo garde une trace de la danse.
Il suffit de bouger pour devenir une nuée.
