Convertir une photo avec le dithering d’Atkinson

• Ce projet implémente sur le web l’Atkinson Dithering, le filtre 1 bit du Macintosh classique
• L’image d’entrée est comparée à un gris à 50 % pour être convertie en noir et blanc, puis la différence est répartie vers les pixels voisins
• Il exploite des technologies de navigateur modernes comme Canvas, Drag & Drop, WebWorkers et FileReader
• L’image convertie peut être enregistrée via un clic droit
• L’enregistrement par glisser-déposer de l’image n’est pas pris en charge en raison des limitations du navigateur

---

Importance et différenciation du projet open source

• L’Atkinson Dithering est un effet graphique classique du Macintosh utilisé dans Hyperdither et HyperScan
• En simplifiant au niveau du pixel des informations colorimétriques complexes, il est utile pour la création d’images noir et blanc légères
• Grâce à cette implémentation web, il peut être utilisé dans n’importe quel navigateur moderne sans logiciel supplémentaire
• Avec les WebWorkers, le traitement d’images volumineuses permet une exécution asynchrone et une optimisation des performances
• Le code open source facilite l’extension des fonctionnalités et la personnalisation

Aperçu de l’algorithme d’Atkinson Dithering

• Chaque pixel est comparé à une valeur de gris à 50 % pour être converti en noir et blanc
• La valeur de différence générée par cette conversion est ensuite répartie sur les 6 pixels voisins comme suit
  (X : pixel courant, distribution de 1/8 chacun)
  • X 1/8 1/8
  • 1/8 1/8 1/8
  • 1/8
• Cette méthode applique l’effet de dithering à l’ensemble de l’image

Mise en œuvre et mode d’utilisation

• Le fichier image est ajouté dans le navigateur par glisser-déposer ou via la fonction de sélection de fichier
• L’API Canvas est utilisée pour convertir et afficher l’image en temps réel
• FileReader sert à lire les données de l’image,
• et les WebWorkers exécutent le traitement de dithering en arrière-plan
• L’image convertie peut être enregistrée par clic droit
  (en raison des limites du navigateur, il n’est pas possible d’enregistrer l’image en la faisant glisser directement sur le bureau)

Stack technique et environnement pris en charge

• Utilise activement les API modernes de HTML5 et JavaScript
• Un navigateur moderne est requis, et certaines fonctions peuvent être limitées sur les navigateurs plus anciens

Conclusion

• Propose une implémentation web simple et intuitive du filtre Atkinson Dithering
• Offre un fort potentiel d’usage dans des domaines variés comme le développement graphique, l’artwork et l’allègement d’images

[GN⁺]

Commentaires Hacker News

• Ça reste mon algorithme de tramage noir et blanc préféré.
  À l’université, j’avais branché un scanner à plat N&B sur un Mac et je numérisais des images avec un programme du genre HyperCard Stack pour produire des images en noir et blanc.
  J’ai simplement scanné une image d’un livre de cliparts acheté à la librairie universitaire et je l’ai utilisée comme « logo » pour un jeu shareware Mac que j’ai commencé à écrire vers 1988.
  À l’époque, je ne savais pas à quel point l’algorithme d’Atkinson était génial, mais plus tard, après avoir essayé d’autres algorithmes de tramage, j’ai compris à quel point la diffusion du code de Bill était excellente.
  Récemment, pour un projet de calendrier eInk, je voulais convertir plusieurs images des phases de la Lune dans le style Atkinson, alors j’ai trouvé ce site et converti des images de la Lune.

• Mieux vaut ne pas cliquer sur le lien « as follows » dans la boîte de dialogue d’info.
  Comme il n’a pas été mis à jour depuis longtemps, il pointe maintenant vers un lien NSFW (inadapté au travail ou aux lieux publics).

• Cette implémentation est vraiment excellente.
  Au téléchargement, on peut encore améliorer un peu l’expérience en donnant une valeur à l’attribut download de l’ancre afin de fournir un nom de fichier par défaut avec l’extension .png.
  Référence : documentation HTMLAnchorElement.download

  • Pour le défendre, cet attribut download n’a commencé à être pris en charge par les navigateurs qu’à partir de mars 2017, comme l’indique ton lien.
    En revanche, le dernier commit du dépôt de l’outil de tramage semble dater de mars 2016.
    L’auteur est toujours actif sur GitHub avec d’autres dépôts, donc j’espère qu’il accepterait peut-être une pull request.
    Lien : dépôt GitHub canvas-atkinson-dither

• J’ai aussi un projet en cours qui permet de convertir plusieurs images en MacPaint et d’en faire une image disque au format 400k MFS.
  Lien : projet mfsjs
  Il est resté un peu à l’abandon dans mon répertoire personnel pendant quelques mois, mais récemment j’ai utilisé Gemini Deep Research pour compléter la bibliothèque.
  J’ai aussi inclus le Markdown généré par un LLM pour les personnes qui voudraient le reproduire ou l’améliorer dans un autre langage.

• Si vous voulez essayer le tramage Atkinson en Python,
  je recommande le projet hyperdither.

• L’implémentation est chouette, et l’interface a un côté nostalgique.
  Je trouvais étrange que mon composant web Atkinson dithering[0] reçoive plus de visites récemment, mais voilà qu’il y avait cette triste nouvelle.
  Personnellement, j’ai l’impression que le tramage Atkinson produit ses plus belles images sur des moniteurs vraiment nets, comme les Mac d’origine.
  Il a quelque chose de cool et de très années 80, donc je l’ai aussi utilisé dans un jeu que j’ai fait l’an dernier.
  [0]: composant web de tramage Atkinson précis au pixel

  • Waouh, super composant web.

• Un outil similaire que j’ai créé il y a quelques années :
  outil de tramage Beyond Loom

• Il est intéressant de voir que l’une des options de taille est 512x384, alors que la résolution du Mac d’origine était 512x342.

  • En effet, les premiers Mac avaient bien une résolution d’écran de 512x342.
    À ce sujet : résolution du Macintosh original
    Correction : en relisant, je me rends compte qu’en fait tu avais raison.

  • J’ai l’impression que ce n’est pas une coïncidence.

• L’interface est mignonne, et le lien GitHub de la démo vaut aussi le détour.
  dépôt GitHub canvas-atkinson-dither

• Est-ce la même personne qu’Atkinson, décédé aujourd’hui ? Et s’agit-il d’un projet en son hommage ?

  • Oui, dans une certaine mesure.
    Mais le premier commit du dépôt remonte à 15 ans, donc ce n’est pas quelque chose monté à la hâte après avoir appris la nouvelle récemment.

  • Oui, c’est bien Atkinson lui-même qui a « inventé » cet algorithme.
    J’avais écrit « découvert », mais « inventé » est plus exact.