あの美しい白黒に!写真をアトキンソンディザリングで変換
引用元:https://news.ycombinator.com/item?id=44212446
Atkinsonディザリング、今でも一番好きだなー。大学に白黒のフラットベッドスキャナーがあって、Mac上でHypercardスタック?が動いてて、スキャンして白黒画像にできたんだ。大学の書店で拾ったクリップアート集をサッとスキャンして、1988年頃に書き始めたMacのシェアウェアゲームの”ロゴ”にしたんだよね。当時はAtkinsonアルゴリズムがどれだけ…いい…か気づかなかったんだけど、後で他のアルゴリズムで試した時にBillのコードの拡散処理がいかに素晴らしいかわかったよ。最近はeInkカレンダーのプロジェクトで月の写真を使いたくて、リンク先のサイトみたいなとこで月の写真をAtkinsonディザリングしたんだ[1]。
[1] スクショで月見てね: https://github.com/EngineersNeedArt/SystemSix/blob/10f2332b5…
マジでこれきれい!Billのコードってどこかで見れる?自分で触ってみたいな〜、勉強になりそう!
情報ダイアログの”as follows”はクリックしちゃダメだよ。これ、しばらく更新されてないみたいで、リンク先がヤバい(NSFW)になってる!
サイトの作った人がこのスレッドに気づくとは限らないから、できれば連絡してあげるのが親切だね!私はGitHubでissue立てて知らせといたよ: https://github.com/gazs/canvas-atkinson-dither/issues/2
更新されたみたいで、正しいページに飛ぶようになったよ!
実装はすごいけど、ダウンロードファイルに最初から名前(.pngつき)が付くともっと使いやすいかも。anchorタグの”download”プロパティ使うとできるよ。ここ見て: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorE…
作った人のために言うと、その機能(download属性)はMDNのリンクだと2017年3月から使えるけど、このツールが入ってるリポジトリの最終更新は2016年3月なんだよね。
でも他のリポジトリではGitHubで活動してるみたいだから、プルリクエスト送ったらマージしてくれるかも?:)
リポジトリ: https://github.com/gazs/canvas-atkinson-dither
MDNリンク: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorE…
てか、記事が今日のだと思ってたから、てっきり最近できたツールかと勘違いしてたわ。PR送ってみようかなー。…CoffeeScriptか。”久しぶりに聞く名前だな…本当に長い間聞いてない…”って感じ。
> CoffeeScript
2010年代はこれでOKだったんだよ。
当時はこれで良かったんだって:p
https://www.youtube.com/watch?v=dOV5WXISM24
悪いなんて言ってないじゃん、久しぶりに聞いたって言っただけだよ。何か古いものをすぐ「ダメ」みたいに言うのは若い人の考え方みたいだけど、そうだった頃の自分も、もうだいぶ前だな〜。
CoffeeScriptだって?こういうタスクこそ、コーディングエージェントが役立ちそうだよね。
小さなPRなのに、複雑さの9割が古いツールチェーンを復活させることになりそうだなんて?
なんでSierraじゃないの?ディザリングアルゴリズム11種類に関する記事リンクだよ。https://tannerhelland.com/2012/12/28/dithering-eleven-algori…
もともとは初期のMacへのノスタルジーだったんだろうね。ビル・アトキンソンがちょうど亡くなったから再浮上したんだと思う。
それなら、こっちも楽しめるかもね。ditherpunkに関する記事リンクだよ。https://surma.dev/things/ditherpunk/
MacPaint形式に画像を変換できるプロジェクトをちまちまやってるんだ。400kのMFS形式ディスクイメージに入るんだよ。Gemini Deep Researchでライブラリ作って、LLM生成Markdownも入れたんだ。他の言語で再現したり改善したい人は見てみて。https://github.com/minorbug/mfsjs
’MacPaint画像の形式は固定で、解像度は576 x 720ピクセルだ’って書いてあったけど、本当に固定なの?Wikipediaにそう書いてあるけど、典拠がないんだよね。
この実装すごいね、UIも懐かしい!自分のAtkinson ditheringのweb-component[0]へのアクセスが今日多かったのはなんでかなと思ってたんだ。悲しいニュースだったんだね。オリジナルのMacみたいなクリアなモニターで一番綺麗に見えると思ってたよ。なんかクールで80年代っぽいんだよね。去年のゲームでも使ったんだ。[0] https://sheep.horse/2023/1/improved_web_component_for_pixel-…
Retina画面でピクセル単位のディザリングはすごいね。写真によってはめっちゃ雰囲気出るけど、そうじゃないのもある。なんか新しいのに古っぽい変な感じ。でも、昔の写真みたいにドットがうるさくないのはいいね。
ありがとう!元々はピクセルごとのディザリングだけにしたかったんだけど、難しくてさ。でも結果見たら低解像度も要るなって思ったんだ。特に細かい写真だと高品質な雑誌印刷みたいで良い感じだよ。でも、確かに細かすぎると見づらいっていうのはその通りだね。
これPythonでやりたいなら、これがあるよ: https://github.com/tgray/hyperdither
スクロールすると、READMEにある画像が茶色になるんだけど。
Einkとかepaperのデバイスにめちゃくちゃ合いそうだね。
今日亡くなったAtkinsonさんと同じ人?これ追悼なの?
まあ、そういう側面もあるかもだけど、このリポジトリの最初のコミットは15年前なんだよね。ニュースを受けて急いで作ったものじゃないよ。
デザインツールとしてのディザリング大好き。Atkinsonさんや関連アルゴリズムを紹介してくれた皆に拍手!子供の頃からの思い出がたくさん詰まってるんだ。あとさ、dithermark.comもめっちゃ良いよ。
そうだよ、彼がアルゴリズムを「発明」したんだ。そうに違いないね。(「発見」から修正。詳しくは以下を見てね)
アルゴリズムを発明したんだって。重みの選び方とか配置は、 practical concerns (実用上の問題)のバランスをとるための微調整らしいよ、数学の法則じゃないってさ。
こんな単純な組み合わせ、もっと早く見つかってると思ってたよ。1993年の Robert Ulichney の Digital Halftoning って本を確認したら、Floyd and Steinberg (1975), Jarvis, Judice, and Ninke (1976), Stucki (1981), Stevenson and Arce (1985) の4つしか載ってなかったんだ。Atkinson のはいつごろなんだろう?
Macintosh のリリースで使われたから、 Stevenson and Arce より前のはずだよ。他のみたいに formally published (公式に発表)された記述は doubt (疑わしい)な。Wikipedia では Floyd-Steinberg dithering の variant (派生)って書いてあるし、 prior work (先行研究)を at least (少なくとも)いくつか知ってたと思うよ。
もっとコメントを表示(1)
そのアルゴリズムは、 precious weights (貴重な重み)を含めて、 our universe (僕たちの宇宙)の外にも can exist (存在できる)んだ。 matter (物質)はいらない、 maths (数学)だけ needs (必要)。Discovered (発見された)が correct (正しい)ね。
なんでも our universe (僕たちの宇宙)の外に can exist (存在できる)なんて bold (大胆)に言うね、知ってるみたいな口ぶりで。よく the Realm of Forms (イデア界)に visit (訪問)するの?
あの algo (アルゴリズム)についてもうちょっと learn (学び)たかったから、これだよ
https://atkinson.franzai.com/
some AIs (いくつかのAI)で double checked (再確認)したから factually correct (事実として正しい)と hope (願う)よ。
似たような tool (ツール)を several years ago (数年前)に wrote (作った)んだよ
http://beyondloom.com/tools/dith.html
UIかわいいね!
デモのGitHubリンクこれだよ→ https://github.com/gazs/canvas-atkinson-dither
うちのオーディオ機器を変換してみたよ。Pioneerだから金属部分が多いんだけど、2560x1440ですごくキレイに見える。良いディザだね!
何か間違ってる?
写真を取り込んでデスクトップに保存しようとしたら、形式不明のファイルになっちゃうんだけど。
ファイル名と拡張子がないんじゃないかな。ファイル名に.pngを付けてリネームしたらうまくいくと思うよ。
あはは!
まさか初代Macが知らない形式だなんて、全然思いつかなかったよ。ありがとう!
サイズオプションに512x384があるのは面白いね。元のMacの解像度は512x342だったのに。
初代Macは本当に512x342だったよ。 https://512pixels.net/2025/05/original-macintosh-resolution/
編集: ごめん、君の言ってることを勘違いしてたよ。ずっと正しかったんだね。
ごめん、この記事で使ってるJavaScriptやCSSってどこで手に入れたの?めちゃくちゃサイズ小さいんだけど。
びっくりするかもしれないけど、CSSもJavaScriptも手書きで書けるんだぜ。
俺も手書きしてるよ。