Un miroir qui montre chaque partie de l’écran avec un temps de retard différent. À gauche vous êtes en direct, à droite vous êtes trois secondes plus tôt. Levez le bras en marchant et il s’étire sur toute la largeur de l’image.
Vue d’ensemble
Time Mirror garde en mémoire les dernières secondes de la webcam. L’image affichée est un assemblage de ce passé : chaque bande, chaque cercle ou chaque zone de l’écran puise dans un instant différent. Immobile, vous ne voyez presque rien. Dès que vous bougez, le corps se tord et se dédouble, et un geste rapide laisse une traînée qui met plusieurs secondes à traverser l’écran.
C’est le principe du slit-scan, une technique de photographie et de cinéma où l’on compose une image avec des fentes prises à des moments successifs. Ici il tourne en temps réel, avec cinq façons de répartir le retard sur l’écran. La barre d’espace fige le temps : l’image arrêtée reste explorable, on peut changer de mode ou de réglage et parcourir les secondes enregistrées sans que rien ne bouge.
Fonctionnalités
- Cinq modes : Vertical (le retard augmente de gauche à droite), Horizontal (de haut en bas), Radial (le centre est en direct, les bords dans le passé), Waves (les retards ondulent lentement sur l’écran) et Body.
- Mode Body : la webcam repère votre silhouette. Vous restez en direct pendant que le décor derrière vous a quelques secondes de retard, ou l’inverse : le décor vit au présent et votre corps traîne derrière.
- Le présent au bout du doigt : un clic ou un toucher place le point en direct du mode radial, et on peut le faire glisser.
- Arrêt du temps : la barre d’espace fige la mémoire. On continue à changer de mode sur l’image gelée.
- Retard réglable de 0,5 à 6 secondes, en dégradé continu ou découpé en 2 à 64 bandes nettes, avec un sens que l’on peut inverser.
- Trace du présent : un léger fondu de l’image en direct par-dessus le passé, pour garder un repère.
- Couleur selon l’âge : en plus du rendu normal et du noir et blanc, une teinte qui refroidit les zones les plus anciennes, ce qui rend visible la profondeur du temps.
- Capture photo et enregistrement vidéo, bascule caméra avant/arrière sur mobile.
Sous le capot
Les images de la caméra sont rangées dans une pile de textures sur la carte graphique, environ 160 images en 640 pixels de large sur ordinateur (140 Mo), 120 images plus petites sur mobile. Chaque nouvelle image prend la place de la plus ancienne : rien n’est recopié, seul l’indice de la dernière image avance. La cadence d’enregistrement s’adapte au retard choisi, pour que toute la pile couvre exactement la durée demandée.
Un seul shader fait tout le rendu. Pour chaque pixel, il calcule un retard d’après le mode, le convertit en numéro d’image dans la pile, puis mélange les deux images voisines pour que le passage d’un instant à l’autre reste doux. Les changements de mode se font en fondu. Le mode Body utilise MediaPipe, chargé seulement quand on choisit ce mode, dans un Web Worker qui calcule une trentaine de fois par seconde un masque de la personne.
Contrôles
| Touche / geste | Action |
|---|---|
| Clic ou toucher (glisser) | Place le point présent du mode radial |
| Espace | Fige / relance le temps |
| 1 à 5 | Choisit le mode |
| M | Mode suivant |
| D | Inverse le sens du retard |
| B | Mode Body : personne en direct ou décor en direct |
| C | Change de couleur (normal, noir et blanc, teinte d’âge) |
| 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 haut / bas | Retard maximal |
| Flèches gauche / droite | Nombre de bandes |
Stack technique
- Vanilla JS, aucune dépendance, aucun build
- WebGL2 : tampon circulaire d’images en texture 2D array, rendu dans un seul shader
- MediaPipe (segmentation de la personne) dans un Web Worker, pour le mode Body
- getUserMedia et MediaRecorder : webcam et enregistrement vidéo
Cas d’usage
Un jouet pour danser ou passer la main devant la caméra et regarder le mouvement se déplier. À plusieurs, le mode Body en décor décalé fait apparaître des fantômes de ceux qui viennent de quitter le cadre. Avec l’enregistrement vidéo, on obtient des boucles courtes qui ressemblent à des effets de montage, sans montage.
Votre main droite a trois secondes de retard sur la gauche.
