La webcam transformée en case de comic book : cel-shading, contours encrés, trame Ben-Day et lignes de vitesse, en temps réel.
Vue d’ensemble
Cartoon cam prend le flux de la webcam et le fait passer à travers un filtre WebGL qui imite l’esthétique d’un comic book occidental façon Lichtenstein plutôt que le manga : couleurs aplaties en bandes de cel-shading, contour d’encre épais et volontairement exagéré, trame de points Ben-Day qui couvre presque toute la gamme de tons pour teinter l’image d’un vrai grain d’impression, un léger décalage chromatique façon plaques d’imprimerie mal alignées, un fond qui peut blanchir vers le papier, et des lignes de vitesse qui s’allument là où l’image bouge vraiment — la classique convention d’action des comics.
C’est la troisième direction visuelle de l’application : une première version en posterize plat ne lisait pas comme « cartoon », une deuxième version plus proche du manga (screentone en niveaux de gris limité aux ombres) donnait un rendu trop japonisant. La version actuelle assume pleinement le comic book occidental, avec une trame colorée qui reste visible jusque dans les tons moyens plutôt que de se cantonner aux ombres.
Fonctionnalités
- Cel-shading à bandes réglables — la luminance est quantifiée en 2 à 6 paliers, sans jamais désaturer les couleurs.
- Trame Ben-Day colorée — une grille de points façon impression BD, qui teinte l’image plutôt que de la noircir, visible du milieu de gamme jusqu’aux ombres.
- Contour d’encre exagéré — détection de contours avec halo, pour un trait épais et « bavé » façon dessin encré à la main.
- Fond papier — les zones claires peuvent blanchir vers un fond blanc façon page de comic, sans jamais inverser toute l’image.
- Lignes de vitesse réactives au mouvement — des traits d’encre radiaux s’allument automatiquement là où l’image bouge, comme les codes visuels de l’action en BD.
- Huit réglages en direct — épaisseur du trait, sensibilité des contours, nombre de paliers, saturation, intensité de la trame, lignes de vitesse, halo et fond papier.
- Capture photo et enregistrement vidéo — snapshot PNG et export vidéo du rendu, avec bascule caméra avant/arrière sur mobile.
Sous le capot
Le rendu tient en deux passes WebGL. La première calcule une carte de mouvement à résolution réduite, lissée dans le temps (attaque instantanée, relâchement progressif), qui sert uniquement à faire flamber les lignes de vitesse là où ça bouge vraiment. La seconde applique le filtre comic proprement dit, dans l’ordre : un léger décalage horizontal opposé des canaux rouge et bleu pour simuler un mauvais calage d’impression, un cel-shading qui reste fidèle à la teinte d’origine plutôt qu’un posterize par canal (qui donnerait des couleurs boueuses), une trame de points Ben-Day tournée à 18° et calculée en pixels d’écran pour rester indépendante du ratio de l’image, un contour d’encre par détection de gradient avec un halo plus large en dessous pour l’épaissir, et enfin un fond papier qui blanchit les zones claires sans jamais toucher les ombres — le tout composé pour que le trait d’encre et les lignes de vitesse restent toujours visibles par-dessus le fond papier.
L’application partage l’essentiel de son architecture (gestion caméra, capture PNG/vidéo, panneau de réglages latéral, plein écran, raccourcis clavier) avec les autres filtres webcam WebGL du site — seul le filtre lui-même change d’une appli à l’autre.
Contrôles
| Touche | Action |
|---|---|
| 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 |
| ↑ / ↓ | Ajuste l’épaisseur du trait |
| ← / → | Ajuste l’intensité des lignes de vitesse |
Stack technique
- Vanilla JS, zéro framework
- WebGL — pipeline shader personnalisé en deux passes (énergie de mouvement + filtre comic)
- 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 se transformer en personnage de comic book et capturer photos ou vidéos immédiatement partageables, ou simplement une démo portfolio de traitement d’image WebGL en temps réel.
Chaque mouvement devient une case, chaque case mérite son trait d’encre.
