Processing で補色残像のデモを作ってみた

任意のカラー画像で補色残像を体験できるプログラムを Processing で作ってみました。

プログラムを実行すると "stimulus.jpg" という画像ファイルを読み込んで変換します。 まず補色画像と注視点が表示され，30 秒後にグレースケール画像に切り替わります。 グレースケール画像が表示されている状態でウィンドウをクリックすると，再び補色画像を呈示するステップに戻ります。

実行中に S キー押下で補色画像とグレースケール画像を保存します。 出力されるファイルの名前はそれぞれ "comp_image.jpg" と "gray_image.jpg" です。 上書きの確認などは一切ありませんので，もし使用される場合にはご注意ください。 万が一，大事なファイルが消えたとしても責任はとれません。

ソースコード

有名な Big Spanish Castle のチュートリアルにある内容をそのまま実装しただけです。

技術的なお話

補色画像は，単純に階調を反転させるのではなく，輝度を調整した上で反転させています。

Photoshop を用いた本家の解説では，ブレンドモードを「輝度」にして 50% グレーでの塗りつぶしを実行しているのですが，このブレンドモードを実装するのに少々手こずりました。 はじめは，カラーモデルを HSB に設定し，各ピクセルの Brightness を 50% グレーと同じ値に書き換えるように実装したのですが，出力された画像は Photoshop で作成した画像よりも全体的にかなり明るくなっていました。

どうやら，Photoshop のブレンドモードで使用される「輝度」は HSB カラーモデルの Brightness ではないようです。 ブレンドモードの同じグループに「色相」や「彩度」があるので，てっきりそうだと思い込んでしまっていたのが敗因でした。 今になって思えば，Brightness は「明度」と訳されることが多いと思いますし，英語版での表記は Luminosity となっていましたので，もっと早くに気づくべきだったのですが……。

いろいろ調べた結果，Adobe PDF Reference Archive に Blend Modes Addendum（PDF） という資料を見つけました。 この資料によると，Photoshop では輝度の計算に YUV を使用しており，ブレンドモードを「輝度」にした場合には，source と destination の輝度の差だけ RGB 各成分を単純に増減し，最後に RGB 各成分の値が範囲に収まるように 3 つまとめてスケーリングしているようです。

この資料の計算式をそのまま記述したところ，めでたく Photoshop で作成した画像と同じ結果が得られました（当たり前ですが）。