ハクソク

世界を動かす技術を、日本語で。

写真をアトキンソン・ディザリングに変換する

352日前原文(gazs.github.io)

概要

  • Macintosh 1-bitフィルター の実装説明
  • Hyperdither や HyperScan で使用された手法
  • ピクセルを 50%グレー と比較し、黒または白に変換
  • 差分を 隣接ピクセル に分配する処理
  • 最新ブラウザ が必要な技術使用

Macintosh 1-bitフィルターの実装概要

  • Macintosh 1-bitフィルター は、クラシックな画像処理手法
  • Hyperdither および HyperScan で初めて利用された技術
  • 各ピクセルを 50%グレー と比較し、黒または白へ変換
  • 入力と出力の差分を 隣接ピクセル に分配
    • 分配比率は 1/8ずつ、6方向に均等配分
    • 現在のピクセルを X とし、周囲6ピクセルへ配布
  • 画像は 右クリック保存 が可能
    • ドラッグ&ドロップ による保存はブラウザ制限で不可

技術的要件と使用技術

  • Canvas による画像描画
  • Drag and Dropイベント 対応
  • WebWorkers による非同期処理
  • FileReader API でファイル読み込み
  • 最新のブラウザ が必要条件
    • 古いブラウザでは一部機能が動作しない可能性

操作方法・注意点

  • 画像をキャンバスにドラッグ&ドロップ で処理開始
  • 処理後の画像は 右クリック→保存 でダウンロード可能
  • デスクトップへのドラッグ保存 は非対応（ブラウザ制限）

まとめ

  • Macintosh 1-bitフィルター はシンプルながら効果的なディザリング手法
  • 最新Web技術 を利用し、ブラウザ上で手軽に体験可能
  • 保存方法や制限 に注意しながら利用推奨

Hackerたちの意見

まだ僕のお気に入りのB&Wディザリングアルゴリズムだよ。大学にMacに繋がったB&Wのフラットベッドスキャナーがあって、... ハイパーカードのスタック？それを使って画像をスキャンしてB&W画像が得られたんだ。大学の書店で買ったクリップアート集をさっとスキャンして、1988年頃に書き始めたMacのシェアウェアゲーム用の「ロゴ」ができた。あの時は、アトキンソンのアルゴリズムがどれだけ...素晴らしいか気づいてなかったけど、後で他のアルゴリズムでディザリングを試した時、ビルのコードの拡散がどれだけ良いか分かったんだ。最近はeInkカレンダーのプロジェクトをやってて、いろんな月のフェーズの「アトキンソン風」の画像が欲しかったから、月の写真をアトキンソンディザリングするために、リンク先に似たサイトを見つけたよ。[1]

実装は素晴らしいね。ダウンロードしたファイルにデフォルト名と.png拡張子を付けることで、少し改善できると思う。アンカーの「download」プロパティに値を渡せばいいんじゃないかな。

└

彼を擁護するなら、その属性は2017年3月からブラウザで利用可能だったみたいだね[1]。一方、ディザリングツールのリポジトリの最新のコミットは2016年3月のようだ。https://github.com/gazs/canvas-atkinson-dither でも、彼は他のリポジトリでGitHubでまだ活動してるみたい。プルリクエストを受け入れてくれるかも？ :)

Pythonでやりたいなら、これがあるよ: https://github.com/tgray/hyperdither

この実装は素晴らしくて、インターフェースが懐かしい思い出を呼び起こすね。なんで僕のアトキンソンディザリングのウェブコンポーネント[0]が今日はアクセス数が増えてるのか不思議だったけど、悲しいニュースだ。アトキンソンディザリングは、オリジナルのMacみたいな本当にシャープなモニターで最高の画像を生み出すと思ってる。なんか80年代っぽくてクールに見えるから、去年のゲームでも使ったんだ。[0]

└

わー、クールなウェブコンポーネントだね！

可愛いUI！デモのGitHubリンク: https://github.com/gazs/canvas-atkinson-dither

情報ダイアログの「as follows」をクリックしない方がいいよ。これ、しばらく更新されてなかったみたいで、その間にリンクがNSFWになっちゃった。

これ、ちょっとずつ作業してるやつで、複数の画像をMacPaintの400k MFS形式のディスクイメージに変換できるんだ。https://github.com/minorbug/mfsjs このプロジェクトは、数ヶ月間僕のホームディレクトリで軽くほこりをかぶってたよ。ライブラリを作るのにジェミニディープリサーチを使ったし、他の言語で再現したい人や改善したい人のためにLLM生成のマークダウンも入れてあるよ。

サイズの選択肢に512x384があるのは面白いね。元々のMacの解像度は512x342だったのに。

└

偶然じゃないと思うよ。

└

最初のMacは本当に512x342だったよ。ごめん、君の言ってることを読み間違えちゃった。訂正だと思ったけど、君は最初から正しかったね。

数年前に作った似たようなツールだよ: http://beyondloom.com/tools/dith.html

これを投稿してくれてありがとう。すごく懐かしい！