一期は夢よ、ただ狂へ。

photo-1419231314389-cff5c1a9ff22
3

『色探しゲーム Colorfule-カラフレ』で用いた色差判定について

『色探しゲーム Colorfule-カラフレ』で用いた色差判定について

『色探しゲーム Colorfule-カラフレ』で用いた色差判定について解説したいと思います。

色を抽出

まずカメラで映したものを画像化し、そこから色を抽出するのですが、さすがにそこを自分で作るのは難しいので、Vibrant.jsというオープソースライブラリを使いました。
Vibrant.jsを使って、画像から「1番目立つ色」「目立たない色」「暗い目立つ色」「暗い目立たない色」「明るい目立つ色」の5つを抽出します。その5つのうちどれか1つでも指定される色と近ければクリア、ということにしています。

photo-1419231314389-cff5c1a9ff22

上の写真からViblant.jsを用いて色を解析した結果

 :一番目立つ色
 :目立たない色
 :暗い目立つ色
 :暗い目立たない色
 :明るい目立つ色

色の数値化

色を抽出したら、次はついに色差判定です。
もちろん色の近似具合を判定するのはコンピュータなので、「なんとなく似てるな~」という訳にはいきません。色を数値化して、その数値の差を見て判定する必要があります。

色の数値化には様々な方法があります。
最もメジャーなのは「RGB表色系」です。これは、色をいわゆる“光の3原色”と呼ばれる,,に分け、その3色がどの程度含まれているかによって色を表すものです。RGBを用いれば人間の知覚可能なほぼ全ての色を表現出来ます(レーザー光などの単一波長の光の色、つまり純粋な“赤”,“緑”,“青”は表現できません)。これは人間の目のつくりと関係しています。

人間は、目の網膜にある“錐体細胞”という特殊な細胞で色を認識するのですが、その錐体細胞は、赤に近い波長の光を認識するもの、緑に近いものを認識するもの、青に近いものを認識するものの3種類に分かれています。つまり、人間が認識可能なのは赤緑青の3種類の光のみなので、その3つを混ぜあわせれば人間が知覚可能な全ての色を再現することができるのです。

参考にしたサイト:
RGB -Wikipedia
錐体細胞 -Wikipedia

余談
人間はその3種類しか認識できませんが、例えば鳥や爬虫類、一部の虫などは錐体細胞が4種類あり、4種類の光を認識できるので、人間よりも認識可能な光の波長の範囲が広く、紫外線を見ることが出来るのです(一部のヘビは赤外線も知覚可能ですが、これは“ピッ卜器官”という特殊なセンサーによって認識しており、“目で見て”いるわけではありません)。

逆に多くの哺乳類は2種類の錐体細胞しか持っておらず、赤と緑の区別がつきません。人間を含む霊長類は3種類持っていますが、これは非常に例外的であると言えます。
かつての哺乳類は夜行性であったため、色を区別する必要が無かったのですが、昼行性で更に森に住むようになったサルの仲間は、色鮮やかなジャングルの果実を探すために、第3の色覚を手に入れたと言われています。
我々が色鮮やかな世界を見ることが出来るのは、進化の結果なのです。

参考にしたサイト:
色 -Wikipedia

L*a*b*表色系

さて、色差の話に戻ります。
まずVibrant.jsを使って画像から主だった色5種類のRGBデータを取得します。
出題された色のRGBデータと比較し、色差を求めればいいと思いきや、まだ少し問題があります。これは、コンピュータの判断する“数値的に似た色”と、人間の判断する“似た色”が異なるためです。RGBでは、赤緑青の含まれる具合を比べることしか出来ませんが、人間は“明るさ”“鮮やかさ”,“濃淡”などで色の差を判断します。そのため、カラフレではRGBではなく、別の色の数値化方法、「L*a*b*表色系」を用いました。

L*a*b*表色系(以下Lab)は、より人間の色差判断に近づけるために国際照明委員会(CIE)により提唱された色の数値化方法です。RGBは人間の目のつくりに基づいた表現方法でしたが、こちらは人間の脳のつくりに基づいたものとなっています。
Labは、明るさL*、色合い(色相)のa*,b*の3つの数値情報によって色を表します。また、これはRGBのように三原色にとらわれずに色を表せるため、人間の知覚不可能な色も表現可能です。

参考にしたサイト:
コニカミノルタ 色色雑学 色の数値化を、表色系ごとに見てみましょう。
RGBからLabへの変換:
色空間の変換(2) RGB-XYZ 変換
色空間の変換(3) XYZ-Lab 変換

色差判定

画像から取得した色、出題される色をそれぞれRGBからLabに変換し、差を計算するのですが、更に人間の色認識に近づけるために、「CIE 2000 色差式」という色差計算用の数式を使いました。これは、明るさだけでなく鮮やかさも考慮に入れたものになっています。

参考にしたサイト:
カラー検索を実装するときにぶつかった2つの壁と、その対処方法について|アライドアーキテクツ エンジニアブログ
色差計算器(CIE76,CIE2000)を作成しました でじたる小屋
コニカミノルタ 色色雑学 マンセル表色系/CIE 2000 色差式

以上で解説した様々な技術により、Colorfuleを完成させることが出来ました。
参考にしたサイト様、そしてここまで読んで下さったあなたに感謝します。

はちのす • 2016年2月22日


Previous Post

Next Post

Comments

  1. lace frontal 2017年12月7日 - 2:39 AM Reply

    lace frontal https://www.youtube.com/watch?v=ny8rUpI_98I conforme au descriptif, livraison agile, concis expression gentil du vendeur !!!

  2. bepelozy 2017年12月11日 - 7:18 AM Reply

    Siamo spiacenti, ma potrebbe dare ulteriori informazioni.
    verbal jerking

  3. Jevaatok 2017年12月21日 - 11:28 PM Reply

    I beloved up to you will obtain carried out proper here. The comic strip is attractive, your authored subject matter stylish. nevertheless, you command get bought an nervousness over that you wish be delivering the following. in poor health certainly come further previously again since precisely the similar nearly very often inside case you shield this increase.
    richard mann janet mason

コメントを残す

Your email address will not be published / Required fields are marked *