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

 (gazs.github.io)
1 ポイント 投稿者 GN⁺ 2025-06-08 | 1件のコメント | WhatsAppで共有
  • このプロジェクトは、クラシックな Macintosh の 1-bit フィルターである Atkinson Dithering をウェブ上で実装したもの
  • 入力画像を 50% グレーと比較して白黒に変換し、その差分を隣接ピクセルへ分配
  • Canvas、Drag & Drop、WebWorkers、FileReader といった最新ブラウザー技術を活用
  • 変換後の画像は 右クリックで保存 可能
  • 画像のドラッグ保存は ブラウザーの制限 により非対応

オープンソースプロジェクトの重要性と差別化ポイント

  • Atkinson Dithering は、Hyperdither と HyperScan で使われた クラシック Macintosh のグラフィック効果
  • 複雑な画像の色情報をピクセル単位で単純化し、軽量な白黒画像の生成 に有用
  • ウェブベース実装 のため、別途ソフトウェア不要で最新ブラウザーだけあれば利用可能
  • WebWorkers により、大容量画像処理時の 非同期実行と性能最適化 が可能
  • オープンソースコードなので、機能拡張やカスタマイズ が容易

Atkinson Dithering アルゴリズム概要

  • 各ピクセルを 50% グレーの値と比較 して白黒に変換
  • 変換によって生じた差分値を、次のように 周囲 6 ピクセルへ分配
    （X: 現在のピクセル、各 1/8 を分配）
    • X 1/8 1/8
    • 1/8 1/8 1/8
    • 1/8
  • この方式で画像全体にディザリング効果を適用

実装と利用方法

  • 画像ファイルをブラウザーへ ドラッグ＆ドロップ するか、ファイル選択機能から入力
  • Canvas API を使ってリアルタイムに画像を変換・レンダリング
  • FileReader で画像データを読み込み、
  • WebWorkers を使ってディザリング処理を バックグラウンド で実行
  • 変換後の画像は 右クリック で保存可能
    （ブラウザーの制約により、画像をデスクトップへ直接ドラッグして保存することは不可）

技術スタックと対応環境

  • HTML5、JavaScript の最新 API を積極的に活用
  • 最新ブラウザー環境 が必要で、古いブラウザーでは一部機能が制限される可能性あり

結論

  • Atkinson Dithering フィルターの 簡単で直感的なウェブ実装 を提供
  • グラフィック開発、アートワーク、画像軽量化 など幅広い分野で活用可能性が高い

関連記事

1件のコメント

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

  • 今でも自分がいちばん好きなモノクロのディザリングアルゴリズムだ。
    大学では、MacにB&Wフラットベッドスキャナーをつないで、HyperCardスタックのようなプログラムで画像をスキャンし、白黒画像を作っていた記憶がある。
    大学の書店で買ったクリップアート本の画像をさっとスキャンして、1988年ごろに作り始めたMacのシェアウェアゲームの「ロゴ」に使った。
    当時はAtkinsonのアルゴリズムがどれほどすごいのか分かっていなかったが、後になってほかのディザリングアルゴリズムを試してみて、Billのコードの拡散のさせ方が本当に見事だと気づいた。
    最近では、eInkカレンダープロジェクトでMoonのさまざまな位相画像をAtkinsonスタイルに変換したくて、関連サイトを探して月の画像を変換した。

  • info dialogの"as follows"リンクはクリックしないほうがいい。
    長らく更新されておらず、今ではNSFW（職場や公共の場での閲覧に不向き）なリンクに変わっている。

  • この実装は本当に素晴らしい。
    ダウンロード時にanchorの"download"属性に値を与えれば、ファイルにデフォルト名と.png拡張子を付けられるので、ダウンロード体験を少し改善できる。
    参考: HTMLAnchorElement.download ドキュメント

    • 擁護すると、そのdownload属性は君がリンクしているとおり、2017年3月からブラウザでサポートされ始めた。
      一方で、このディザリングツールのリポジトリの最後のコミットは2016年3月のようだ。
      作者は今もGitHubで別のリポジトリに取り組んでいるようなので、おそらくpull requestを受け入れてくれるのではないかと思う。
      リンク: canvas-atkinson-dither GitHubリポジトリ

  • 自分も開発中のプロジェクトがあり、複数の画像をMacPaintに変換して400k MFSフォーマットのディスクイメージにできる。
    リンク: mfsjsプロジェクト
    ここ数か月ほど自分のホームディレクトリで少し放置されていたが、最近Gemini Deep Researchを使ってライブラリを補完した。
    ほかの言語で再現したり改善したりしたい人のために、LLMが生成したMarkdownも含めている。

  • PythonでAtkinsonディザリングを試したいなら、
    hyperdither プロジェクトがおすすめ。

  • 実装も素敵だし、インターフェースにも懐かしさがある。
    最近、自分のAtkinsonディザリングのWebコンポーネント[0]へのアクセスが増えていて不思議に思っていたが、こんな悲しい出来事があったのか。
    個人的には、AtkinsonディザリングはオリジナルのMacのような本当にシャープなモニターでいちばんきれいな画像を作ってくれる気がする。
    何かクールで80年代っぽい感じがして、去年作ったゲームにも使った。
    [0]: ピクセル単位で正確なAtkinsonディザリングWebコンポーネント

    • わあ、素敵なWebコンポーネントだ。

  • 数年前に自分が作った似たようなツール。
    Beyond Loomディザリングツール

  • サイズオプションの1つが512x384なのに、オリジナルのMacの解像度は512x342だったのが興味深い。

    • 本当に初期のMacは512x342の画面解像度だった。
      関連情報: オリジナルMacintoshの解像度
      訂正: 内容を読み返したら、実は君の言うとおりだった。

    • それは偶然ではない気がする。

  • UIがかわいくて、デモのGitHubリンクも参考になる。
    canvas-atkinson-dither GitHubリポジトリ

  • 今日亡くなったAtkinsonと同じ人物ですか？ そしてこれはその人を追悼するプロジェクトなのですか？

    • ある程度はそのとおり。
      ただ、リポジトリの最初のコミットは15年前なので、最近のニュースを聞いて急いで作られたものではない。

    • はい、このアルゴリズムはAtkinson本人が「発明」した。
      「発見」と書かれていたが、「発明」のほうがより正確だ。