錯視の芸術工学

2025年1月21日（火）13:00～16:10
芸術工学特別講義　名古屋市立大学芸術工学部

　　　錯視の芸術工学　　

北岡明佳（立命館大学総合心理学部）email

Since January 15, 2025　配布物

錯視研究について喋る機会を頂き、ありがとうございます!!

Illusion Galary @ Ritsumeikan University Osaka-Ibaraki Campus, Osaka, Japan

「茨木童子の白目と黒目」

左の茨木童子の「白目」（白目なのか？？）は白く、右のそれは黒く見えるが、同じ輝度（R149, G149, B149）である。

北岡明佳　（2024）　並置混色とオストワルト表色系の融合　2024年10月28日（月）4限・総合心理学コロキウム・立命館大学大阪いばらきキャンパス・AN110　Presentation (html)

「ドリフト錯視のいばらき童子」

いばらき童子が動いて見える。

（四色錯視の一種）

北岡明佳　（2022）　「傾き錯視と同居する静止画が動いて見える錯視の探求」　（2022年3月2日（水）15:20-16:00　　明治大学「現象数理学」研究拠点共同研究集会『第16回錯覚ワークショップ』）　Presentation (html)

「いばらき童子隠し錯視」

いばらき童子が隠れている。

Q: How to make a hidden image?

A: The principle is simple. Use the program below.

Let's make hidden images.

Merging pictures tool

「錯視的に赤いいばらき童子」

いばらき童子のお肌は赤く見えるが、黒と白の縞模様でできている。

1. 古典的な幾何学的錯視

▶錯視（視知覚における錯覚）とはどのようなものか、たとえば、古典的な幾何学的錯視（形の次元の錯視）の例はこちら。

古典的な幾何学的錯視の例。（a）ミュラー=リヤー錯視。上下の水平線分は同じ長さであるが、下の方が長く見える。（b）エビングハウス錯視。リングの中の円は左右同じ大きさであるが、大きい円のリングに囲まれた左の円よりも、小さい円のリングに囲まれた右の円の方が大きく見える。（c）ボンゾ錯視。Λや＜の頂点に近い方に置かれた対象が大きく見える。具体的には、2本の水平線分は同じ長さだが、上の方が長く見える。2つの円は同じ大きさだが、左の方が大きく見える。（d）ポッゲンドルフ錯視。2つの斜線は一直線上にあるが、右の斜線の方が上方に変位して見える。（e）ツェルナー錯視。垂直より反時計回りに45度傾いた黒い線は互いに平行だが、交互に傾いて見える。交差する短い線との交差角度の過大視の現象である。（f）へリング錯視（湾曲錯視）。水平線分が曲がって見える。上の線分は上に凸、下の線分は下に凸に見える。（g）ミュンスターベルク錯視。白と黒の正方形の列を図のようにずらして配置し、列の境界に線分を描くと、図ではそれらは水平であるが、交互に傾いて見える。本図のように線が灰色の時は、カフェウォール錯視（Café Wall illusion）と呼ばれることが多い。（h）フレーザー錯視。垂直より反時計回りに45度傾いた仮想線に沿って短い斜線の列が描かれているが、列の傾きは短い斜線の傾きの方向に変位して見える。ツェルナー錯視とは逆の錯視である。（i）フレーザー錯視の渦巻き錯視。フレーザー錯視では、傾いて見えるのは線分であるが、傾いて見える対象を円状に配置した時に観察できる錯視である。具体的には、同心円が渦巻きのように見える。

参考書

後藤倬男・田中平八（編）（2005）錯視の科学ハンドブック　東京大学出版会

アマゾン

北岡明佳　（2010）　錯視入門　朝倉書店

アマゾン

北岡明佳　（2019）　イラストレイテッド　錯視のしくみ　朝倉書店

アマゾン

2. 北岡の代表的な錯視画像

No. 1 in popularity

"Rotating snakes"

Disks appear to rotate.

Kitaoka, A. (2017). The Fraser-Wilcox illusion and its extension. A. G. Shapiro and D. Todorović (Eds.), The Oxford Compendium of Visual Illusions, Oxford University Press, pp. 500-511. PDF --- Figures --- PDF (scanned copy)

No. 2

"Primrose field"

The image appears to wave.

No. 3

"Green and blue spirals"

There appear to be spirals of light green or light blue. Actually, they are identical (r = 0, g = 255, b = 150).

No. 4

"A bulge"

The floor appears to bulge out, though this image consists of only squares.

"Cushion"

This image appears to bulge out, though it consists of squares and rectangles aligned vertically or horizontally.

No. 5

"Hatpin urchin (pink)"

The image appears to wiggle in the radial direction.

No. 6

"Drifting Emboss illusion"
(sine type)

The inset appears to move.

Recently popular 1

"Illusory reddish coke can"

The Coca-Cola can appears to be reddish, though it consists of black and white stripes.

Recently popular 2

"Who am I?"

This is a intensely degraded image, but it can be perceived as it is (Mona Lisa).

Recently popular 3

"Bamboos"

Columns appear to move.

Sometimes popular 1

(additive color change version)

Edwin Land's two-color method version

Strawberries appear to be reddish, though the pixels are not.

Sometimes popular 2

"Entangling illusion"

The two concentric rings appear to be entangled.

Sometimes popular 3

"Water spirals"

Concentric rings appear to be spirals.

Sometimes popular 4

Some observer sees red in front of blue, and another observer sees blue in front of red. pic.twitter.com/zg4eDTkWCL
— Akiyoshi Kitaoka (@AkiyoshiKitaoka) November 14, 2019

Chromostereopsis

My favorite 1

"kind of fluttering heart"

The heart apepars to move when the image is swayed.

My favorite 2

"A train that runs with its doors open"

A train appears to move rightward.

北岡明佳　（2021）　「輝度変化による運動錯視（リバースファイなど）の再検討」　（2021年3月2日（火）15:40～16:20・第15回錯覚ワークショップ（Zoom Webinar））　Presentation (html)

Amazing illusion (not my illusion but a popular demo I made) 1

A demo of the kickback illusion

Rectangles appear to wobble when caught in vertical lines, though they move coherently at a constant speed.

Howe, P. D. L., Thompson, P. G., Anstis, S., Sagreiya, H., & Livingstone, M. S. (2006). Explaining the footsteps, belly dancer, Wenceslas and kickback illusions. Journal of Vision, 6, 1396–1405. doi: 10.1167/6.12.5

Kitaoka, A. & Anstis, S. (2021). A review of the footsteps illusions. Journal of Illusion, 2, #5612, 1-22. PDF --- Website --- https://doi.org/10.47691/joi.v2.5612 --- Movies and figures

Amazing illusion (not my illusion but a popular demo I made) 2

"Ninio's extinction illusion"

There are twelve dots at crosses, but only a few dots are visible simultaneously.

Ninio, J. & Stevens, K. A. (2000). Variations on the Hermann grid: an extnction illusion. Perception, 29, 1209-1217.

3. 錯視の芸術工学講義・その1：並置混色を用いた色の錯視の理解と画像のつくり方

（1）ムンカー錯視

luminance 0.213

左の画像では、オレンジ色とピンク色の渦巻きがあるように見えるが、同じ色である。右の画像では、水色と黄緑色の渦巻きがあるように見えるが、同じ色である。

luminance 0.500

（2）加算的色変換による色の錯視の並置混色表現

錯視的に赤いコーラの缶

このコカ・コーラの缶は赤く見えるが、黒と白の縞模様でできている。

「錯視黄光背のハート」

錯視的黄色がハートの周囲に見える。

まずは、混色の基本から。

混色
（RGBを原色とした加法混色）

継時混色（時間的混色）
（RGBを原色としてそれらを時間的にずらして配置した加法混色）
ゆっくり動く下記動画をクリックすると、速く変化する継時混色のデモ動画が出ます。

並置混色（空間的混色）
（RGBを原色としてそれらを空間的にずらして配置した加法混色）

並置混色の実装

原画（1152 x 864 pixel）

96 x 96 ピクセルを1ブロックとしてダウンサンプリングする（モザイク化）

それぞれのブロックをRGBの3つのサブピクセルに分解し、空間的に配置する（並置混色化）。各サブピクセルは 32 x 96 pixel のブロックとなる。

→

各サブピクセルを 4 x 4 pixel のブロックとした並置混色画像

各サブピクセルを 1 x 1 pixel のブロックとした並置混色画像

再掲：各サブピクセルは 32 x 96 pixel のブロックの並置混色画像

上図のRのサブピクセルに100%のシアン色（GとBそれぞれ100%）を、Gのサブピクセルに100%のマゼンタ色（RとBそれぞれ100%）を、Bのサブピクセルに100%の黄色（RとGそれぞれ100%）を加法混色した画像。「CMYを原色とした減法混色の画像」と言いたくなる並置混色画像である。

各サブピクセルを 4 x 4 pixel のブロックとした並置混色画像

各サブピクセルを 1 x 1 pixel のブロックとした並置混色画像

やってみよう。

「並置混色・3サブピクセル」のウェブプログラム

ここで、3つあるサブピクセルのうち2つを統合して1つにして、サブピクセルを2つにします。

再掲・96 x 96 ピクセルを1ブロックとしてダウンサンプリングした画像

それぞれのブロックを2つのサブピクセルに分解し、空間的に配置する（並置混色化）。1つ目のサブピクセルはR、もう1つのサブピクセルはGとBを加法混色した色とする。各サブピクセルは 48 x 96 pixel のブロックとなる。

→

各サブピクセルを 4 x 4 pixel のブロックとした並置混色画像

各サブピクセルを 1 x 1 pixel のブロックとした並置混色画像

再掲：各サブピクセルは 48 x 96 pixel のブロックの並置混色画像

上図のRのサブピクセルに100%のシアン色（GとBそれぞれ100%）を、GとBの混色のサブピクセルに100%のRを加法混色した画像。

各サブピクセルを 4 x 4 pixel のブロックとした並置混色画像

さて、以上の準備のもと、色の錯視の話を始めます！

再掲　原画（1152 x 864 pixel）

再掲・96 x 96 ピクセルを1ブロックとしてダウンサンプリングした画像

再掲：各サブピクセルは 48 x 96 pixel のブロックの並置混色画像

上図のRのサブピクセルに100%のシアン色（GとBそれぞれ100%）を加法混色した画像（GとBの混色のサブピクセルには何もしない）

各サブピクセルを 4 x 4 pixel のブロックとした並置混色画像（赤みが見える）

屋根のユニオンジャックのデザイン一部が赤く見える。

拡大すると、赤い色相のピクセルはないことがわかる。赤く見えるのは色の錯視である。

やってみよう。

「並置混色・2サブピクセル」のウェブプログラム

Q その色の錯視は何？

A 加算的色変換による色の対比的錯視です。色の恒常性現象の表れの一種と考えることができます。

「加算的色変換」のウェブプログラム

「ベタ塗りの色画像生成」のウェブプログラム

sRGB規格におけるRGB値とリニア値（輝度値）の関係

「RGB値の階調値⇔リニア値（輝度値）変換」のウェブプログラム <November 21, 2022>

ムンカー錯視について

黄と青の縞の青部分に赤を乗せるとオレンジ色に見え、黄部分に赤を乗せると赤紫がかって見える。緑を乗せるとそれぞれ黄緑と青緑に見える。高空間周波数図形で錯視量が多い。

Munker, H. (1970) Farbige Gitter, Abbildung auf der Netzhaut und übertragungstheoretische Beschreibung der Farbwahrnehmung. München: Habilitationsschrift.

ムンカー錯視のページ

ムンカー錯視の作り方

台紙（クリックして高解像度ファイルをダウンロード）

「要素が弁別可能な並置混色で説明するムンカー錯視」

「４種類の色の錯視の作り方」

物理的に同じ色（R=255, G=0, B=127）のハートが錯視によってピンクとオレンジのハートに見える。左から、ムンカー錯視（Munker illusion）、色の土牢錯視（chromatic dungeon illusion）、ドット色錯視（dotted color illusion）、デヴァロイス・デヴァロイス錯視（De Valois-De Valois illusion）である。上図の高解像度ファイルはこちら（8000 x 3262 pixel, 10MB）。

References

Munker illusion	Munker, H. (1970) Farbige Gitter, Abbildung auf der Netzhaut und übertragungstheoretische Beschreibung der Farbwahrnehmung. Habilitationsschrift, Ludwig-Maximilians-Universität, München.
chromatic dungeon illusion	For the dungeon illusion: Bressan, P. (2001) Explaining lightness illusions. Perception, 30, 1031-1046. Kitaoka (2007) http://www.psy.ritsumei.ac.jp/~akitaoka/saishin22e.html
dotted color illusion	For the dotted brightness illusion: White, M. (1982) The assimilation-enhancing effect of a dotted surround upon a dotted test region. Perception, 11, 103-106. Kitaoka (2008) http://www.psy.ritsumei.ac.jp/~akitaoka/color10e.html
De Valois-De Valois illusion	De Valois, R. L. and De Valois, K. K. (1988) Spatial Vision. New York: Oxford University Press.

北岡明佳　（2012）　色の錯視いろいろ　（4）簡単で錯視量の多い色相の錯視図形の作り方　日本色彩学会誌, 36(1), 45-46. PDF（スキャンコピー）　<配布資料>

続きのページ

北岡明佳の錯視のページ