私のRGBを当ててみて: Guess My RGB
(susam.net)- Guess My RGB は、画面の背景色のRGB値を直接当てるシンプルな色当てゲーム
- ユーザーは上部のスライダーを動かしてR、G、Bの値を調整し、背景色に近い組み合わせを探す
- 画面には0から9、AからFまでの16進数文字と、R、G、Bのラベルが一緒に表示される
New Gameボタンで新しいゲームを開始できる- スコア、正解の公開方法、難易度、実装方法は、提供された要約情報だけでは確認できない
画面と目的
- タイトルは Guess My RGB
- 目的はスライダーを調整して背景のRGB色を当てること
- 画面には0から9、AからFまでの文字が表示される
- R、G、Bのラベルも表示され、各色チャンネルを区別できる
操作方法
- 案内文は “Move the sliders above to guess the background RGB colour.”
- ユーザーは上部のスライダーでR、G、Bの値を調整する
New Gameボタンで新しいゲームを開始する
1件のコメント
Hacker News のコメント
色を見られず、送信後にスコアだけ見られるとしたら、最適戦略は何なのか気になる
単純な hill climbing（山登り法）でもかなり効率的：各スライダーを 0 から始めて、スコアが下がるまで右に動かし、その後 1 つ左に戻ればよい
平均するとスライダーごとに 9 回、1 色あたり 27 回くらいの試行が必要になりそう
0 から 1 に動かしたときのスコア差を見れば、右にどれくらい進めばよいかはだいたい推定できるが、丸めのせいで正確な距離は出ない
最適戦略なら平均でスライダーごとに 4 回、つまり 1 色あたり 12 回の試行くらいで済みそう
結果のパーセンテージの丸めのせいで、隣り合う色が同じスコアになることがあるので、少なくとも 2 回は繰り返す必要がある
三角測量の結果、正解候補が 2 つ出るので、そのどちらかをランダムに選べば平均 4.5 回の試行で当てられそう
https://en.wikipedia.org/wiki/Golden-section_search
0-F の範囲で 6 と 9 を測定し、高いほうに応じて 0-9 または 6-F に絞る
その後、すでに測定した値を再利用しながら範囲を狭めていけば、最悪の場合でスライダーあたり 6 回、平均で約 5 回になる
もっと最適化できそうだが、ここまでしか見ていない
可能な色を 100 個のスコアバケットにできるだけ均等に散らす推測を選ぶ方式、つまり分散を最小化する方式
全色の半分以上は、わずか 2 回の推測で識別できる
最大バケットサイズを最小化するようにコードを変えると平均は少し悪くなるが、どんな場合でも 4 回を超えない
サイトのブラウザコンソールに貼り付けて実行できる解法
スケーリングと丸めを少し無視すると、目標色から互いに一直線上にない任意の 3 点までの距離は、各軸の精度に関係なく候補を最大 2 つまで絞る
そのため 3 回目の推測で当たる確率が 50%、4 回目で当たる確率が 50% になる
スケーリングが入ると、依然として球の交差問題のように見なせるが、距離関数が対称ではないため球が奇妙な形になる
例えば最初の推測がキューブの頂点なら、最も遠い点を選んだことになり、空間の 1/8 が同じ 0% スコアを持つ
丸めによる精度損失まで考慮すると、離散問題として見て、すべての色を区別できる点のタプルを探すほうがよく、何度か試したところ [11,7,4], [4,4,8], [11,8,11], [4,11,7] の 4 点が機能した
より小さい集合があるかもしれないが、3 点ですべて区別可能かを全探索するにはおよそ 2^48 の作業量が必要になりそうで、最初の結果に応じて 2 点目を選べばさらに良くなるかもしれない
これは自分のパーティ芸
色を描写してくれれば 16 進カラーコードを言い当てられる
想像どおり、パーティではものすごく人気がある
最初のヒントは単語 1 つ、2 つ目のヒントは単語 2 つで、全員が自分の色の推測位置にコマを置く
距離に応じて点数を付ける方式なので遊びやすい
https://boardgamegeek.com/boardgame/302520/hues-and-cues
昔、Netscape が公式の色名リストにない単語を色として解釈する方法についての記事を読んだことがあるが、16 進数でない文字を捨て、残った文字をパディング・チャンク化して RGB 数値にする、というものだった
そのため “dumptruck” が DC0 になって黄色のように表示されることがある
それを見てすぐに、/usr/share/dict/words の全単語を解釈して Lab 色表現と一緒に sqlite DB に入れる小さなアプリを作った
目的の RGB に最も近い偽の色名単語 100 個を実際の色で表示し、近い順に並べて見せるもので、即興で作った夜のプロジェクトとしてかなり楽しかった
中央アメリカと米国南部にある甘酸っぱい果物を思わせる くすんだ黄色
ペイントの説明から取ってきた文句
送信すると、一致率の結果を表示するボックスの 背景色が自分の推測した色に変わる
当てようとしている色によっては当然に見えるかもしれないが、自分の場合は色がかなりグレーだったので、何度か推測してからようやくこの重要な視覚的ヒントに気づいた
意図せず 知覚ベースの色空間の優れた宣伝になっている
ある程度近づいてくると、色を無視してパーセンテージの変化だけを見るほうが簡単だった
Guess My OKLCH のようなゲームなら違うのか気になる
95% あたりで上限に引っかかる感じ
ページにはリンクされていないが、興味のある人向けの GitHub リポジトリはここにある
https://github.com/susam/myrgb
ちょうど複数の色形式を教える授業資料を書き終えたところだったので面白い
その中で、RGB 値で色を選ぶのがどれほど難しいかを説明した。人間は色をそういうふうには考えないから
このゲームはその良い例
HSL はずっと直感的で、色相環の感覚さえあれば、彩度と明度のレベルで色を定義するのはとても簡単
学生には、自分が着ている服の色の違いを HSL で定義してみる練習をさせている
RGB を概念化しにくいと感じるなら、Lab も試してみるといい
最初の色を一発で当てたので、ここからは下がるだけな気がして怖い
何が問題なの？ 開発者ツールで背景色を確認して、16 段階に正規化すればいいじゃない、はは
実際にはよくできていて、楽しくて挑戦しがいのあるゲーム
Guess my HSL のスピンオフもやってみたい
https://bottosson.github.io/posts/oklab/
https://codepen.io/kaliedarik/full/YzvYadX
アイデアが本当にすばらしい
最初の 2 回はすぐに 94% まで行けたが、その後完全に詰まった
94% が局所最適のように見えて、どのスライダーを 1 目盛り上げ下げしても解決しない感じだった
理由を説明できるだろうか？ それと、諦めて正解を見られる方法があるといい
スマホで指が太くて、スライダーを正確に 1 目盛りだけ動かせず、2 目盛りずつ動かしていたことに気づいていなかった
まず目標色から取り得る最大誤差を計算し、実際の推測とのユークリッド距離をその最大距離で割って、
Math.floor(100 * (1 - dist / maxDist))を返す各ラウンドのパーセントが同じように感じられるようにする方式なので妥当
そうしないと、中間のグレーはどんな推測でも相対的に高い点数になってしまう
質問に答えると、言っている局所最適の状況は起こらないと思う
数学者ではないけれど、この関数だけを見る限り、正解でない以上、常にどれか 1 つのスライダーを動かせばスコアが上がる方向があるはず
おそらくその 1 目盛りの移動を見落とした可能性が高く、正解に近づくほどそういうことが起きやすい
1 つを動かして解決しなかったなら、別のものを動かす前に最初のスライダーを元の位置に戻す必要がある
自分が試したときは、数字を 1 つ変えるだけで一致率が上がるか下がるかした