はじめに
写真を見ると、僕たちはそこに「人」や「建物」や「猫」がいることが分かります。
でも、画像の情報をどんどん減らしていったら、どうなるのでしょうか。
どこまで減らしても、僕たちは「これは人だ」と認識できるのでしょうか。
今回は、そんなことをブラウザ上で試してみました。
使うのは、JavaScriptとCanvasです。
ただ、今回やりたかったのは、単純に「画像をドットにしてみた」ということではありません。
画像は、どこまで情報を減らしても「画像」として認識できるのか？
これを、自分で作りながら考えてみます。
See the Pen Untitled by nakajox (@joelabo) on CodePen.
今回の問い
今回の問いはシンプルです。
画像は、どこまで情報を減らしても、僕たちは画像として認識できるのか？
例えば、普通の写真をそのまま表示すれば、当然何が写っているのか分かります。
では、
-
画像を小さくする
-
ピクセルの数を減らす
-
さらに減らす
-
最後には数十個の点だけにする
としたらどうでしょう。
あるところまでは、
「粗いけど、たぶん人だな」
と分かるはずです。
でも、さらに情報を減らすと、
「……何だこれ？」
となる。
では、そのとき人間は、画像の何を手がかりにしているのでしょうか。
仮説
今回、最初に立てた仮説はこれです。
画像の情報量を減らしていくと、単純に「点の数が少なくなる」だけではなく、人間が画像として認識するために重要な情報が見えてくるのではないか。
つまり、
「画像として認識するために、人間は画像のどんな情報を使っているのか」
を考えてみます。
もちろん、今回の実験だけで人間の認知の仕組みを説明できるわけではありません。
まずは画像を実際に分解し、情報を減らしたり動かしたりすることで、どんな変化が起きるのかを観察してみます。
画像を「点」として扱ってみる
まず、コンピュータにとって画像が何なのかを考えてみます。
人間から見ると、画像は「写真」です。
しかし、コンピュータにとっては、画像は大量のピクセルの集合です。
そして、それぞれのピクセルには、
-
位置
-
色
という情報があります。
かなり単純化すると、
画像
↓
ピクセル
↓
位置 + 色
↓
大量のデータ
ということになります。
例えば、100×100ピクセルの画像なら、
100 × 100 = 10,000
個のピクセルがあります。
これをもっと減らしてみます。
100 × 100 → 10,000点
50 × 50 → 2,500点
30 × 30 → 900点
20 × 20 → 400点
10 × 10 → 100点
5 × 5 → 25点
つまり、画像を構成する情報量を意図的に減らしていくわけです。
実験してみる
ここから実際に画像をドット化します。
Canvasに画像を読み込み、画像のピクセル情報を取得します。
JavaScriptでは、Canvasから画像データを取得できます。
const imageData = ctx.getImageData(
0,
0,
canvas.width,
canvas.height
);
const data = imageData.data;
data の中には、画像の色に関する大量の数値が入っています。
基本的には、
R
G
B
A
R
G
B
A
...
という形です。
つまり、コンピュータは「写真」を見ているというより、
大量の数字を扱っている
と考えた方が近い。
ピクセルを「点」にする
今回は、このピクセル情報を使って、画像を大量の点として描画します。
イメージとしては、
画像
████████████
████████████
████████████
████████████
↓
点にする
● ● ● ● ● ●
● ● ● ● ●
● ● ● ● ● ●
という感じです。
それぞれの点について、
-
x座標
-
y座標
-
色
を持たせます。
例えば、
{
x: 100,
y: 80,
color: "rgb(120, 80, 60)"
}
のような情報を持った点を大量に作ります。
すると、画像そのものではなく、
「画像を構成している点の集合」
として扱えるようになります。
実験① 点の数を減らしてみる
まずは同じ画像を使って、点の数だけを変えてみます。
例えば、
10,000点
↓
2,500点
↓
900点
↓
400点
↓
100点
↓
25点
と、段階的に減らしてみます。
ここで見るのは、
「点の数を減らすと、画像の見え方や認識しやすさはどう変わるのか」
です。
実際に画像を並べてみると、情報を減らしても、すぐには「画像」としての意味が消えないことが分かります。
かなり粗くなっているのに、
「これは人だな」
「これは建物だな」
と分かる場合があります。
一方で、さらに情報を減らしていくと、だんだん何が写っているのか判断しにくくなっていきます。
ここで重要なのは、「何点なら認識できる」という数字を決めることではありません。
情報を減らしていくと、どんな情報が最後まで残るのか。
そこを見てみます。
情報を減らすと、何が残るのか
さらに点を減らします。
400点
↓
100点
↓
25点
と情報量を落としていくと、だんだん画像としての判断が難しくなっていきます。
でも、すべての情報が均等に重要というわけではなさそうです。
例えば、輪郭や特徴的な部分が残っているだけで、かなり粗い画像でも「何か」が分かることがあります。
そこで、次の問いが出てきます。
画像を認識するとき、人間はどの情報を手がかりにしているのでしょうか。
ただし、「点の数」だけでは決まらない
ここで、もう一つの疑問が出てきます。
例えば、同じ400点でも、
-
人の顔
-
風景
-
動物
-
建物
-
文字
では、認識しやすさが違うのではないでしょうか。
これはかなり重要です。
もしそうなら、
「画像を認識するときに重要な情報」は、画像によって違うのではないか？
ということになります。
つまり、
「何個の点があるのか」
だけではなく、
「どんな情報が残っているのか」
も重要なのかもしれません。
実験② 画像の種類を変えてみる
そこで、複数の種類の画像を同じ条件でドット化してみます。
例えば、
-
人の顔
-
動物
-
風景
-
建物
-
文字
などです。
同じ100点でも、
「人の顔だと分かる」
画像もあれば、
「何なのか全然分からない」
画像もある。
もし結果がそうなれば、単純に「情報量が多いほど認識できる」というだけでは説明できません。
人間が画像を見るときには、
形・配置・輪郭・特徴的な部分
など、特定の情報を強く使っている可能性があります。
人間は、画像のすべてを見ているのか？
ここから、少しコンピュータの話から離れてみます。
人間は、画像のすべてのピクセルを一つずつ確認して、
「これは猫だ」
「これは人だ」
と判断しているわけではありません。
一部の情報から全体を推測したり、形や配置から意味を読み取ったりしています。
例えば、かなり粗い画像でも、
「顔っぽい」
と感じることがあります。
これは、人間の視覚や認知について考えるときにも重要なポイントです。
心理学では、部分だけではなく、形や配置などをまとまりとして捉える考え方があります。
いわゆるゲシュタルト心理学なども、その背景にある考え方の一つです。
もちろん、今回の実験だけで人間の視覚認知を説明できるわけではありません。
ただ、
コンピュータが扱う情報量を減らしていくと、人間が「意味」を読み取れる仕組みについて考えるきっかけになる。
というのは、なかなか面白いところです。
せっかくなので、点を動かしてみる
ここまでやって、もう一つ試したくなりました。
せっかく画像を「点」として扱っているのなら、
その点を動かしてみたらどうなるのか？
という実験です。
マウスを近づけると、点が逃げるように動く。
さらに、マウスを離すと、
元の位置に戻っていく。
という動きを作ってみます。
See the Pen Untitled by nakajox (@joelabo) on CodePen.
点には「元の場所」を覚えさせる
ここがプログラムとして面白いところです。
それぞれの点に、
{
x: 100,
y: 80,
originalX: 100,
originalY: 80
}
のように、
現在位置
と
元の位置
を持たせます。
すると、
元の画像
↓
点が動く
↓
バラバラになる
↓
元の位置へ戻る
↓
画像になる
という動きを作れます。
画像を「壊す」
ここで最初の問いに戻ります。
点がバラバラになったとき、
それはもう画像ではないのでしょうか。
それとも、
点の位置と色という情報が残っている限り、それはまだ画像なのでしょうか。
人間から見ると、
画像 → 壊れる → 戻る
というアニメーションです。
でも、コンピュータ側から見ると、
座標を持った大量の点
が移動しているだけです。
コンピュータにとって「画像」とは何なのか
今回、最初は単純に、
「画像をドットにして、マウスで弾けるようにしたら面白そう」
くらいのところから始まりました。
でも、作っているうちに、
そもそも画像って何なんだろう？
という問いが出てきました。
人間にとって画像は、
「人」
「猫」
「街」
「思い出」
のような意味を持っています。
一方、コンピュータにとって画像は、
色と座標を持った大量のデータ
として扱えます。
同じものを見ているようで、
人間とコンピュータでは、見ているものが少し違う。
今回わかったこと
今回の実験をまとめると、こんな感じです。
1. 画像は大量のデータとして扱える
画像をピクセルに分解すると、
位置と色を持った大量の数値
として扱えます。
2. 情報を減らしても、すぐには意味が消えない
画像を粗くしても、人間はしばらくの間、
「何が写っているのか」
を認識できます。
3. 重要なのは、点の数だけではない
同じくらいの情報量でも、画像によって認識しやすさは変わります。
どのような情報が残っているのか、ということも重要そうです。
4. 「画像」と「データ」は同じものでも見え方が違う
人間には意味のある一枚の画像でも、コンピュータにとっては大量の数値です。
作ってみて、次の問いが生まれた
今回、一番面白かったのはここです。
最初の問いは、
画像は、どこまで情報を減らしても画像なのか？
でした。
でも、実際に作ってみると、次の問いが出てきました。
人間は、画像のどの情報を使って「これは○○だ」と判断しているのか？
さらに、
同じ情報量でも、なぜ認識しやすい画像と、認識しにくい画像があるのか？
という問いもあります。
つまり、
「点を動かすプログラム」を作ったつもりが、最後には「人間は画像をどう認識しているのか」という話になっていました。
おわりに
今回やったことは、技術として見ればそれほど難しいことではありません。
JavaScriptでCanvasを使って画像を読み込み、
画像
↓
ピクセル
↓
点
↓
点を動かす
↓
元の画像に戻す
という処理をしただけです。
でも、作る前と作った後では、少し見え方が変わりました。
「画像を表示する」のではなく、
画像を構成している情報を一度バラしてみる。
そうすると、
画像って何なんだろう？
という、最初には考えていなかった問いが出てきます。
技術を使うこと自体が目的ではなく、
技術を使って、何を確かめるのか。
今回も、そこから考えてみました。
参考にした考え方
今回の記事では、画像を構成するデータと、人間の知覚について考えるために、以下のような分野を参考にしました。
-
コンピュータ画像処理
-
デジタル画像のピクセル表現
-
人間の視覚・知覚
-
ゲシュタルト心理学
厳密な視覚認知実験を行ったものではなく、あくまで**「画像を実際に作って変化させることで、どんな問いが生まれるか」**を試した実験です。