La webcam gravée en chrome liquide façon Photoshop : vos contours se transforment en bandes métalliques qui ondulent et se déforment au rythme de votre mouvement, en temps réel.
Vue d’ensemble
Chrome cam prend le flux de la webcam et le fait passer à travers un filtre WebGL qui reproduit l’effet « Chrome » de Photoshop (Filter Gallery ▸ Sketch ▸ Chrome) : la luminance de l’image est transformée en bandes gravées qui suivent les contours réels de la scène, avec un rendu métallique posterisé. Six palettes de couleurs sont disponibles pour changer complètement l’ambiance, du chrome froid classique à des teintes plus saturées.
Ce qui distingue Chrome cam d’un simple filtre statique, c’est qu’il est réactif au mouvement : plus une zone de l’image bouge, plus elle se met à onduler et à « fondre », comme un métal liquide localement réchauffé, pendant que les zones immobiles restent une surface stable et gravée. L’appli tourne aussi bien sur desktop (raccourcis clavier, panneau de réglages) que sur mobile (bascule caméra avant/arrière, interface tactile).
Fonctionnalités
- Déformation liquide réactive au mouvement — ce qui bouge réellement à l’écran se met à onduler et se déformer, tandis que le reste de l’image reste une surface stable.
- Six palettes chrome — bascule instantanée entre plusieurs jeux de couleurs à 6 tons, du dégradé métallique classique à des ambiances plus colorées.
- Cinq réglages en direct — bandes de couleur, netteté des contours, intensité du flux liquide, saturation et luminosité, tous ajustables à la volée depuis le panneau de réglages.
- Capture photo et enregistrement vidéo — snapshot PNG instantané ou enregistrement du canvas en vidéo, avec un flux de sauvegarde adapté à iOS.
- Bascule caméra avant/arrière — sur mobile, changement de caméra à la volée avec détection automatique des appareils à caméra unique.
- Optimisé mobile — résolution de capture réduite et pipeline shader allégé sur les appareils tactiles pour rester fluide.
Sous le capot
Le rendu tient en deux passes WebGL qui tournent à chaque frame. La première compare l’image vidéo actuelle à la précédente pour calculer une carte d’« énergie de mouvement » à résolution réduite, lissée dans le temps comme un envelope follower audio (attaque instantanée, relâchement lent) plutôt qu’un simple diff qui saccaderait au rythme des frames de la caméra. La seconde passe lit cette énergie et applique le filtre chrome proprement dit : un flou léger nettoie le grain de la caméra, la luminance lissée passe dans une fonction sinusoïdale périodique pour créer les bandes gravées qui épousent les contours réels de l’image, et un champ de flux animé (bruit de Perlin fractal) fait onduler tout ça — amplifié localement là où l’énergie de mouvement est forte.
Le pipeline est pensé pour tenir sur GPU mobile : le calcul de flou et de gradient partage les mêmes échantillons de texture pour éviter de doubler les lectures, la passe d’énergie tourne en quart de résolution, et la capture caméra elle-même est réduite sur les appareils tactiles. Pour l’enregistrement vidéo, la sauvegarde sur iOS ne peut pas se faire automatiquement au moment où l’enregistrement s’arrête (Safari bloque toute ouverture différée hors du geste utilisateur direct) : l’appli affiche donc un vrai lien de téléchargement que l’utilisateur tape lui-même.
Contrôles
| Touche | Action |
|---|---|
| C | Change de palette chrome |
| P | Capture photo (PNG) |
| S | Ouvre / ferme le panneau de réglages |
| R | Démarre / arrête l’enregistrement vidéo |
| H | Masque / affiche l’interface |
| F | Plein écran |
| Flèches | Ajustement fin des bandes de couleur / du flux liquide |
Stack technique
- Vanilla JS, zéro framework
- WebGL — pipeline shader personnalisé en deux passes (énergie de mouvement + filtre chrome)
- getUserMedia — capture de la webcam, avant/arrière sur mobile
- MediaRecorder / canvas.captureStream — enregistrement vidéo du rendu
Cas d’usage
Un miroir numérique ludique pour capturer des photos et vidéos immédiatement partageables, ou simplement pour observer son propre reflet se transformer en métal vivant — démo portfolio autant que jouet visuel.
Bougez, et le métal se souvient.
