· 技術 · NOTE_03

写真の色を12の系統に分ける色相・彩度・明度で選手の個性を決める

画像走の選手は、写真から取り出した色そのものです。でも、コンピューターにとって色はただの数字の組み合わせです。それを「これは赤」「これは茶色」と人の感覚に近い形で分けるには、ひと工夫が必要でした。

色は3つの数字でできている

画面の色は、赤(R)・緑(G)・青(B)の光をどれだけ混ぜるかで表します。それぞれ 0〜255 の数字で、たとえば真っ赤は (255, 0, 0)、白は (255, 255, 255) です。この表し方は画面に色を出すには便利ですが、「この色は何色か」を判断するのには向きません。同じ「赤っぽい色」でも、数字の組み合わせはばらばらだからです。

人の感覚に近い HSL に直す

そこで、RGB を HSL という別の表し方に直します。

こうすると、「どの色か」は色相で、「どのくらい鮮やかか」は彩度で、「明るいか暗いか」は明度で、別々に扱えるようになります。

12の系統への分け方

画像走では、次の順番で色を判定しています。

  1. まず「色のない色」を分けるあざやかさがとても低い色、真っ暗に近い色、真っ白に近い色は、色相に関係なく「白・灰・黒」のどれかにします。明るければ白、暗ければ黒、その間は灰です。
  2. 次に「茶」を拾う色相が赤〜橙のあたりで、暗めで、あざやかすぎない色を茶色にします。茶色は色相だけ見ると赤や橙と同じ場所にあるので、明るさとあざやかさも合わせて判断する必要があります。
  3. 残りを色相の角度で分ける色相環を区切って、赤・橙・黄・緑・水・青・紫・桃に振り分けます。赤は輪っかの0度をまたぐので、0度付近と360度付近の両方を赤にしています。

区切りの角度は、実際の写真をいくつも試しながら決めました。たとえば、空の写真が「青」だけでなく「水」と「青」にほどよく分かれるように、黄緑の葉っぱが「黄」ではなく「緑」に入るように、といった具合です。

強さは、色の数字からそのまま決める

12系統はスキルの種類を決めるものですが、選手1人1人の強さは、もとの色の彩度と明度から細かく決めています。

同じ「赤」の選手でも、鮮やかな赤は速く、暗い赤は攻撃が強い、という個性の差が生まれます。64人がまったく同じにならないので、写真ごとにチームの性格が変わります。

相性で「じゃんけん」を作る

さらに、系統どうしには相性を決めています。水は赤と橙に強く(火を消す)、黒は白と水に強い(塗りつぶす)、といった関係です。相性のいい相手に当たると効き目が大きくなるので、「相手が赤っぽいチームなら、海の写真で挑もう」という作戦が立てられます。全体の一覧は画像走の紹介ページにまとめています。

色の分け方に「正解」はない

どこからが橙で、どこからが黄色か。これは人によっても、画面によっても感じ方が違います。画像走の分け方も、正解というより「遊んでいて納得感がある」ことを基準に調整したものです。夕焼けの写真なら赤と橙のチームに、森の写真なら緑と茶のチームに。写真を見たときの印象とチームの顔ぶれがずれないことを、いちばん大事にしています。