Dither & ASCII

En trois gestes

1. Déposez votre image. Une photo, un logo, une capture — ou tapez simplement un mot. Elle ne quitte pas votre navigateur : elle est réduite et tramée sur place.
2. Choisissez un look. Journal, Game Boy, Terminal, Néon, Vaporwave, Blueprint… puis affinez : l'algorithme, la taille de la cellule, la palette, le contraste, l'animation et ce qui se passe sous le pointeur — révéler l'image nette, repousser les points, lancer une onde.
3. Emportez. L'image PNG est gratuite, sans compte. Le code s'emporte avec un abonnement : un seul bloc à coller, le moteur est dedans, rien à déposer à côté.

Mettre l'effet sur votre site

Le bloc à coller

Le bouton Copier le bloc met dans votre presse-papier un bloc HTML complet : le conteneur, le moteur (environ 20 Ko) et vos réglages, votre image comprise. Collez-le où vous voulez — un bandeau d'accueil, une section, une carte — et rechargez. Il n'y a rien d'autre à installer, aucun fichier à déposer, aucune bibliothèque à charger.

La page autonome

Un fichier unique qui fonctionne seul, même hors ligne. Pour l'intégrer sans y toucher, appelez-le dans un cadre :

<iframe src="effect-labs-dither.html" style="width:100%;height:420px;border:0"
        title="trame animée" loading="lazy"></iframe>

Modifier après coup

Les réglages sont écrits en clair à la fin du bloc : changez la palette, le mode ou l'animation directement dans le code, sans revenir ici.

Comment c'est fabriqué

Le tramage — le dithering — vient de l'imprimerie : pour reproduire une photo avec de l'encre noire, on la découpe en points dont la taille ou la densité suit la lumière. Le principe est resté le même ; seul l'écran a changé.

Deux familles cohabitent dans l'outil. Le tramage ordonné (matrice de Bayer) compare la luminosité de chaque cellule à un seuil qui varie selon un motif fixe — c'est la trame régulière de la Game Boy. La diffusion d'erreur (Floyd-Steinberg, Atkinson) arrondit chaque cellule et reporte l'écart sur ses voisines — c'est la trame organique des premiers Macintosh. Le halftone, les lignes et l'ASCII sont trois façons de dessiner la même information.

// Bayer 4 × 4, le cœur de l'affaire : un seuil différent par cellule
const M = [[0,8,2,10],[12,4,14,6],[3,11,1,9],[15,7,13,5]];
for (let y = 0; y < rows; y++) for (let x = 0; x < cols; x++) {
  const seuil = (M[y % 4][x % 4] + 0.5) / 16;      // entre 0 et 1
  const clair = luminosite[y * cols + x] > seuil;   // vrai ou faux : l'encre ou pas
  if (clair) ctx.fillRect(x * cell, y * cell, cell, cell);
}

L'animation ne touche pas à l'image : elle fait glisser la matrice, respirer la luminosité ou passer une bande claire. Sous le pointeur, l'outil redessine l'image nette dans un cercle, ou déplace les cellules. Tout se passe dans un canvas 2D, sans WebGL ni bibliothèque.

Ce qui marche, ce qui ne marche pas

• Les logos et les portraits rendent le mieux : des contrastes francs, des formes lisibles même en gros points.
• Une photo très détaillée demande une cellule petite (3 à 5 px) et un contraste un peu relevé, sinon elle se noie.
• L'ASCII lit surtout la luminosité : sur une image claire, inversez clair et sombre ou baissez la luminosité.
• Sur téléphone, le survol devient un toucher : l'effet suit le doigt. Les visiteurs qui ont réduit les animations voient une image fixe.

Questions fréquentes

L'outil est-il gratuit ?

L'aperçu, tous les réglages et l'export en image PNG sont gratuits, sans compte. Seul l'export du code demande un abonnement.

Mon image est-elle envoyée quelque part ?

Non pendant que vous réglez : tout se passe dans votre navigateur. Elle n'est transmise qu'au moment d'exporter le code, réduite à 640 px, pour être embarquée dans le bloc — puis elle n'est pas conservée.

Combien pèse l'effet sur ma page ?

Le moteur fait environ 20 Ko, plus votre image réduite — en général 30 à 80 Ko. Rien n'est chargé depuis un serveur tiers.

Est-ce que ça marche sur WordPress, Webflow ou Framer ?

Oui : le bloc se colle dans n'importe quel module HTML. Il n'a besoin d'aucun fichier à côté.

Puis-je changer les couleurs après coup ?

Oui. Les réglages sont écrits en clair à la fin du bloc livré.

À voir aussi : les fonds animés, les effets de texte et les autres générateurs.