Du sable tombe du haut de l’écran et s’accumule sur vous : sur la tête, les épaules, les bras tendus. Penchez la tête et tout le sable coule de ce côté. Sortez du cadre et il reste une statue de sable à votre forme, qui s’écroule quelques secondes plus tard.
Vue d’ensemble
Sablier transforme votre silhouette en obstacle physique. La webcam repère votre corps, et chaque grain qui tombe s’y pose, glisse le long de vos bras ou forme une petite dune dans le creux de votre main. Bougez doucement et le tas vous suit ; bougez d’un coup et il s’effondre en avalanche. Levez la main sous un tas et vous le soulevez.
La gravité suit l’inclinaison de votre tête : penchez-la vers une épaule et le sable de tout l’écran part de ce côté, comme si vous incliniez un plateau. Quand vous quittez le cadre, votre dernière silhouette se remplit de sable figé, puis se défait grain par grain. Le son suit ce qui se passe à l’écran : un chuintement sourd quand les grains se posent, un grondement quand un tas s’écroule, rien quand tout est immobile.
Fonctionnalités
- Votre corps comme obstacle : le sable s’accumule sur votre silhouette, et vos gestes le poussent dans le sens du mouvement.
- Gravité à la tête : l’inclinaison de la tête oriente la chute du sable, avec une petite jauge qui montre la direction.
- Des pouvoirs dans les mains : fermez le poing et tout explose. Le sable et la pluie sont projetés hors de l’écran depuis votre main, et rien ne retombe tant que le poing reste serré. Ouvrez la paume, doigts tendus, et le temps s’arrête : les gouttes restent suspendues en l’air, et les éclats d’une explosion aussi.
- Statue de sable : en sortant du cadre, vous laissez une sculpture de votre silhouette qui s’écroule toute seule.
- Trois matières : sable, neige qui flotte et s’accroche, eau qui s’étale et laisse couler le sable au fond.
- Six couleurs, et du sable en couches : les grains gardent leur couleur, donc en changeant de teinte en cours de route on empile des strates. La palette Strata le fait toute seule en arc-en-ciel.
- Pluie ou jets, à la quantité et à la vitesse voulues : du goutte-à-goutte au ralenti jusqu’à une averse deux fois plus rapide, avec de un à douze jets qui grossissent avec la densité. Un plancher en mode sablier qui se vide quand le tas devient trop haut, ou un plancher ouvert ou fermé.
- Verser au doigt ou à la souris : on peut ajouter du sable n’importe où en glissant sur l’écran, même sans caméra.
- Capture photo et enregistrement vidéo avec le son, bascule caméra avant/arrière sur mobile.
Sous le capot
L’écran est une grille d’environ 60 000 cases, une case par grain. À chaque pas, un grain essaie de descendre ; s’il est bloqué, il tente les deux diagonales, et le sable s’éboule parfois d’une case sur le côté pour adoucir les pentes. Pour une gravité penchée, chaque grain tire au sort entre les deux directions qui encadrent l’angle voulu : les tas glissent alors en pente continue au lieu de sauter d’un angle à l’autre.
La silhouette vient de MediaPipe, qui calcule une trentaine de fois par seconde un masque de la personne, lissé pour que les bords ne tremblent pas. Quand ce masque avance sur un grain, le grain est poussé dans le sens d’où vient le corps. Un deuxième module repère les coins des yeux pour mesurer l’inclinaison de la tête, et un troisième suit les mains pour reconnaître un poing fermé ou une paume ouverte. Les trois tournent en parallèle pour ne pas se ralentir. L’affichage passe par un shader qui lit la grille comme une carte de relief : contours adoucis, crêtes éclairées, ombre portée sur l’image de la caméra.
Contrôles
| Touche / geste | Action |
|---|---|
| Pencher la tête | Oriente la gravité |
| Poing fermé | Explosion qui vide l’écran, la pluie reprend à l’ouverture de la main |
| Paume ouverte, doigts tendus | Arrête le temps |
| Glisser (souris / doigt) | Verse du sable |
| Espace | Efface le sable |
| T | Change de matière (sable, neige, eau) |
| C | Change de couleur |
| O | Change de source (pluie ou jets) |
| B | Change de fond (caméra, ombre, nuit) |
| G | Active / coupe la gravité à la tête |
| M | Coupe / remet le son |
| 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 | Densité du flot |
| Flèches gauche / droite | Nombre de jets |
Stack technique
- Vanilla JS, aucune dépendance, aucun build
- Simulation de sable sur grille en tableaux typés, gravité à angle libre
- MediaPipe (segmentation de la personne et repères du visage) dans un Web Worker
- WebGL2 : rendu en relief dans un seul shader
- Web Audio : bruit filtré piloté par la simulation, en stéréo
- getUserMedia et MediaRecorder : webcam, enregistrement vidéo avec le son
Cas d’usage
Un jouet à essayer à plusieurs devant l’écran, pour voir qui garde le plus de sable sur les épaules. Les couleurs en couches et l’enregistrement vidéo en font aussi un petit atelier pour fabriquer des boucles à partager.
Restez immobile, et vous finirez sous la dune.
