補色残像 JavaScript の説明
戻る


このプログラムは,補色残像の実験を行うものです.

使い方は次のようになります.
  1. まず,元になる画像ファイルを用意します.ファイル形式は,Img エレメントで表示できるものであれば何でも使えると思います.
  2. 「ファイル(画像)」でそのファイルを選択します.選択したファイルのサムネイルが表示されます.
  3. 「輝度調整」で輝度の調整(後述)を行うかどうかを選択し,「作成」をクリックします.
  4. 元の画像からグレースケール画像と補色画像が作成されます.作成が完了すると,グレースケール画像が表示されます.
  5. 「補色」をクリックすると補色画像が表示されます.20 秒間補色画像が表示された後,グレースケール画像に戻ります.
補色残像について解説しているサイトなどを見ると,そこで使われている補色画像には主に二つのタイプがあります.ひとつは元の画像を単にネガにしたもの,もうひとつはネガにすると共に,各ピクセルの輝度を 50% に揃えたものです.
ここで言う「輝度」は,HSV(HSB) 色空間の明度や HSL 色空間の輝度のことではありません.実際の画像を見る限りでは,次の変換式で求められる輝度(またはそれに近いもの)を使っているようです.
Y = 0.299R + 0.587G + 0.114B
Y:輝度
R,G,B は,RGB 形式で表した色の赤,緑,青の値
NTSC 方式のテレビ放送などでも使われているもので,人間が見て感じる明るさに近いものです.
どちらのタイプの画像を作成するかを「輝度調整」で選択します.「輝度調整」をチェックすると,輝度を 50% にする処理を行います.
補色画像の例

元画像
元画像

補色画像 輝度調整なし
補色画像
補色画像 輝度調整あり
補色画像
一度にはどちらか一方のタイプの画像しか作成されません.画像作成後に「輝度調整」を変更しても,表示される補色画像のタイプは変わりませんので,別のタイプの画像を使うときは,再度作成を行ってください.