Un simulateur de scanner à balayage : chargez une photo, manipulez-la pendant que le capteur la parcourt, et chaque geste pendant le passage se fige en glitch art — exportable jusqu’en haute définition.
Vue d’ensemble
Scanner Glitch reproduit le principe d’un scanner à défilement (ou d’un appareil slit-scan) : une image chargée depuis le disque est affichée dans un panneau interactif où on peut la faire glisser, zoomer et pivoter, pendant qu’un « capteur » balaie l’image ligne par ligne et peint le résultat dans un second panneau. Si l’image reste immobile pendant le passage, le scan la reproduit fidèlement — mais si on la déplace, la zoome ou la fait pivoter pendant que le capteur passe dessus, le résultat se déforme, s’étire ou se déchire, exactement comme les artefacts classiques du glitch art par scanner.
Plusieurs passes de balayage peuvent se superposer sur le même résultat : un deuxième scan vient se fondre en transparence sur le premier plutôt que de l’écraser, ce qui permet d’accumuler des couches de distorsion. Le tout se pilote au clavier comme à la souris ou au doigt (pincer pour zoomer, deux doigts pour pivoter), avec annulation de geste et interface adaptée au mobile en bas d’écran.
Fonctionnalités
- Balayage manipulable en direct — pan, zoom et rotation de l’image source pendant le passage du capteur, à la souris ou au doigt (pincer-zoomer, rotation à deux doigts).
- Passes superposées — plusieurs balayages successifs se fondent en transparence sur le résultat existant au lieu de le remplacer, pour empiler les distorsions.
- Réglages de scan — vitesse de balayage, bruit, tremblement (wobble) et aberration chromatique, ajustables pendant le passage.
- Annulation par geste — chaque drag, pincement ou molette peut être annulé (Ctrl/Cmd+Z), et « Effacer » propose un « Annuler » temporaire après coup.
- Export standard et HD — téléchargement du résultat en PNG, avec une option de ré-export en haute définition qui rejoue tout l’historique du scan à une résolution bien supérieure à l’aperçu.
- Rendu façon écran CRT — lignes de balayage et vignette en overlay sur le panneau de résultat, purement visuel (jamais inclus dans l’export).
- Interface adaptative — panneau de réglages en tiroir latéral sur desktop, feuille coulissante en bas d’écran sur mobile.
Sous le capot
Le rendu s’appuie sur plusieurs couches de canvas 2D distinctes, chacune avec un rôle précis : une pour l’image source manipulée en direct, une couche transparente purement visuelle pour l’indicateur de progression du balayage, une couche hors-écran qui seule fait foi du résultat scanné (« pristine »), et le panneau de sortie visible qui n’est qu’un rendu dérivé de cette dernière. Cette séparation évite qu’un élément décoratif (comme la ligne de progression) se retrouve gravé dans le résultat final au passage du capteur. La position du capteur suit toujours combien de balayage a progressé — jamais une ligne fixe — c’est ce qui garantit qu’une image laissée immobile se reproduit fidèlement, la distorsion venant uniquement du geste de manipulation pendant le passage.
Pour l’export HD, plutôt que de scanner en direct à haute résolution (ce qui ralentirait l’interaction), chaque bande peinte pendant le balayage est enregistrée dans un historique avec un instantané de sa transformation et de ses réglages au moment précis du passage. Cocher l’export HD rejoue cet historique complet sur des canvas hors-écran à une résolution bien plus élevée, en ré-échantillonnant chaque bande à l’échelle voulue — le rejeu se fait par lots pour ne jamais geler l’interface.
Stack technique
- Vanilla JS, zéro framework
- Canvas 2D — multi-couches (source interactive, indicateur, buffer hors-écran, sortie, aperçu)
- Pointer Events — pan/zoom/rotation tactile et souris unifiés
- canvas.toBlob / URL.createObjectURL — export PNG asynchrone standard et HD
Cas d’usage
Un outil de création de glitch art à partir de n’importe quelle photo personnelle, pour produire des visuels distordus uniques à exporter et partager, ou simplement pour explorer par le geste l’esthétique du scan raté.
Ne bougez pas et l’image reste sage ; bougez, et le capteur s’en souviendra pour toujours.
