写真をAtkinsonディザリングに変換

 (gazs.github.io)
1 ポイント 投稿者 GN⁺ 2025-06-08 | 1件のコメント | WhatsAppで共有
  • 写真をクラシックMacintoshの1ビットフィルター風に変換し、白黒ピクセルだけでAtkinson dithering効果を適用する
  • 各ピクセルは50%グレーを基準に黒または白になり、変換誤差が周辺ピクセルへ拡散する
  • 誤差は現在のピクセル周辺の6か所にそれぞれ1/8ずつ分配され、独特の質感を持つ白黒画像を作る
  • 結果画像は右クリックで保存できるが、ブラウザの制限によりデスクトップへドラッグして保存することはできない
  • 実装にはCanvas、Drag and Drop events、WebWorkers、FileReader APIが使われており、最新ブラウザが必要

Atkinson ditheringの処理方式

  • この実装はHyperditherとHyperScanで使われたクラシックMacintoshの1ビットフィルターを再現する
  • 処理は各ピクセルを50%グレーと比較し、黒または白に変換する仕組み
  • 変換時に生じた入力値と出力値の差は、周辺ピクセルに分散される
    • 現在のピクセルXの右側2か所にそれぞれ1/8
    • 次の行の左から3か所にそれぞれ1/8
    • さらに次の行の左1か所に1/8

デモの利用とブラウザ要件

  • レンダリングされた画像は右クリックで保存できる
  • ブラウザの制限により、画像をデスクトップへドラッグ保存することはできない
  • コードはCanvas、Drag and Drop events、WebWorkers、FileReader APIを使用する
  • 実行には最新ブラウザが必要

関連記事

1件のコメント

 
GN⁺ 2025-06-08
Hacker News のコメント

  • 今でも私が一番好きな白黒ディザリングアルゴリズムです
    大学には Mac に接続された白黒フラットベッドスキャナがあり、おそらく HyperCard のスタックで画像をスキャンして白黒画像にできました
    1988年ごろ Mac のシェアウェアゲームを作り始めたとき、大学の書店で買ったクリップアート本を手早くスキャンして「ロゴ」として使っていました
    当時は Atkinson アルゴリズムがどれほど優れているのか分かっていませんでしたが、後に別のアルゴリズムでディザリングしてみて、Bill のコードでの拡散がどれほどよくできているか分かりました
    最近では eInk カレンダープロジェクトを作っていて、さまざまな位相の月の写真を「Atkinson 風」の画像シリーズにしたかったので、リンク先のものに似たサイトを見つけ、月の写真に Atkinson ディザリングを適用しました [1]
    [1] スクリーンショットの月を参照: https://github.com/EngineersNeedArt/SystemSix/blob/10f2332b5...

    • 本当に美しい！ Bill のコードを見られる場所があれば、実際に触りながら学んでみたいです

  • 情報ダイアログの「as follows」は押さないほうがいいです
    しばらく更新されていないようで、その間にリンク先が NSFW になっています

  • 実装は素晴らしく、アンカーの download 属性に値を渡して、ダウンロードファイルにデフォルト名と .png 拡張子を付けると、もう少し良くなりそうです
    参考: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorE...

  • なぜ Sierra ディザリングではないのだろう？
    https://tannerhelland.com/2012/12/28/dithering-eleven-algori...

    • もともとは初期 Mac へのノスタルジーで、Bill Atkinson が亡くなったばかりなので再び注目されたのだと思います

  • 複数の画像を MacPaint に変換し、400k の MFS フォーマットのディスクイメージに入れられるようにするものを、空き時間に作っています
    https://github.com/minorbug/mfsjs
    このプロジェクトはここ数か月、ホームディレクトリで少しほこりをかぶっています
    Gemini Deep Research にライブラリ制作を手伝ってもらい、別の言語で再現したり改善したりしたい人のために、LLM が生成した Markdown も含めておきました

    • 「MacPaint 画像は 576 x 720 ピクセル解像度の固定形式」と書かれていますが、本当に固定形式だったのでしょうか？
      Wikipedia にもそう書かれていますが、出典がありません

  • この実装は素晴らしく、インターフェースも懐かしさを感じさせます
    今日、私の Atkinson ディザリング Web コンポーネント[0]の閲覧数がなぜ増えたのかと思っていましたが、悲しい知らせが理由でした
    オリジナルの Mac のような非常にシャープなモニターでは、Atkinson ディザリングが最も見栄えのよい画像を作るとずっと思っていました
    何かクールで80年代っぽい感じがして、去年のゲームにも使いました
    [0] https://sheep.horse/2023/1/improved_web_component_for_pixel-...

    • Retina 画面でピクセル単位にディザリングするのはかなり独特です
      写真によってはそのスタイルがかなりよく合い、写真によってはそうでもありません
      不思議と現代的な昔っぽさがあり、実際の古い写真のように個々の点が気になることはありません

  • Python で試したいなら hyperdither があります
    https://github.com/tgray/hyperdither

    • スクロールすると README の画像が茶色に変わります

  • eInk/ePaper デバイスにとても合いそうです

  • 今日亡くなったあの Atkinson と同じ人で、これは追悼なのですか？

    • ある程度はそうですが、リポジトリの最初のコミットは15年前なので、ニュースに合わせて急いで作ったものではありません
    • そうです、彼がこのアルゴリズムを発明しました
      おそらく追悼だと思います
      「発見」ではなく「発明」に訂正します。下を参照

  • そのアルゴリズムをもう少し学びたくて、https://atkinson.franzai.com/ を作りました
    いくつかの AI で再確認したので、事実関係が合っていることを願っています