カメラ画像の成分分解表示アプリ

ウェブカメラなどからキャプチャした画像を各色成分に分解して、リアルタイムで表示するウェブアプリを作成した。何か目立つ色のマーカーを用意すれば、カメラ画像の中からその部分を特定できるのではないかと考え、評価のために作成したものである。

p5.jsを使用。表示しているのはRGBの各成分と、彩度（satulation）と輝度（brightness）。それぞれの値をグレースケールの画像で表示している。

当初、PCでは問題なく表示されるのに、スマホやタブレットでは表示が崩れる状態になっていた。

原因はcreateGraphicsでバッファを生成するときに、デバイスのピクセル密度を使っているためだった。

pixelDensity(1)とすることで、ピクセル密度についての効果を無効にすることができる。

カメラ画像から取得できるのはRGBの値であり、彩度の値はRGBの値から計算して求める。

RGBの値のうち、最大のものをCmax、最小のものをCminとすると、彩度は(Cmax-Cmin)/Cmaxで求められ、色があざやかなほど1に近い値となる。

明るい部分ではこの式で問題ないのだが、暗い部分になると、見た目のあざやかさよりも大きい値が出てしまう。そこで、今回は(Cmax-Cmin)を彩度として扱っている。明るいほど彩度が高く出ることになるが、そもそも暗い部分はあまり検出しないようにする意図もあり、こちらの式で求めることにした。