Tebak RGB-ku: Guess My RGB

• Guess My RGB adalah permainan tebak warna sederhana untuk menebak langsung nilai RGB dari warna latar layar
• Pengguna menggerakkan slider di bagian atas untuk menyesuaikan nilai R, G, dan B serta mencari kombinasi yang paling mendekati warna latar
• Di layar ditampilkan karakter heksadesimal dari 0 sampai 9 dan A sampai F, bersama label R, G, dan B
• Tombol New Game dapat digunakan untuk memulai permainan baru
• Skor, cara menampilkan jawaban benar, tingkat kesulitan, dan metode implementasi tidak dapat dipastikan hanya dari informasi ringkasan yang diberikan

---

Layar dan tujuan

• Judulnya adalah Guess My RGB
• Tujuannya adalah menyesuaikan slider untuk menebak warna RGB latar belakang
• Di layar ditampilkan karakter dari 0 sampai 9 dan A sampai F
• Label R, G, dan B ditampilkan bersama untuk membedakan tiap kanal warna

Cara bermain

• Teks petunjuknya adalah “Move the sliders above to guess the background RGB colour.”
• Pengguna menyesuaikan nilai R, G, dan B dengan slider di bagian atas
• Tombol New Game memulai permainan baru

[GN⁺]

Komentar Hacker News

• Kalau kita tidak bisa melihat warnanya dan hanya bisa melihat skor setelah submit, aku penasaran apa strategi optimalnya
  Hill climbing sederhana pun cukup efisien: mulai tiap slider dari 0, geser ke kanan sampai skor turun, lalu kembali satu langkah ke kiri
  Rata-rata sepertinya butuh sekitar 9 percobaan per slider, atau sekitar 27 percobaan per warna
  Dari selisih skor saat digeser dari 0 ke 1, kita bisa memperkirakan kira-kira seberapa jauh harus bergerak ke kanan, tetapi karena pembulatan, panjang pastinya tidak bisa didapat
  Dengan strategi optimal, sepertinya rata-rata cukup sekitar 4 percobaan per slider, jadi sekitar 12 percobaan per warna

  • Untuk upaya otomasi ala kadarnya, bisa dibuat dengan menginisialisasi input RGB ke 0, menaikkan tiap kanal warna satu langkah setiap kali lalu submit, dan ketika skor tidak lagi naik, mundur satu langkah
    Karena pembulatan persentase hasil, warna yang bersebelahan bisa memiliki skor yang sama, jadi harus diulang setidaknya dua kali
  • Jika mengasumsikan skornya adalah 100 - jarak Euclidean, setelah tiga tebakan acak, jawabannya bisa dipersempit dengan triangulasi
    Hasil triangulasi menghasilkan dua kandidat jawaban, jadi jika memilih salah satunya secara acak, sepertinya bisa menebak dengan rata-rata 4,5 percobaan
  • Jika mengabaikan informasi dari angka skor itu sendiri dan hanya membandingkan sisi mana yang skornya lebih tinggi, optimasinya bisa dilakukan bukan dengan pencarian biner, melainkan pencarian ternary atau golden-section search
    https://en.wikipedia.org/wiki/Golden-section_search
    Ukur 6 dan 9 pada rentang 0-F, lalu persempit ke 0-9 atau 6-F tergantung mana yang lebih tinggi
    Setelah itu, dengan menggunakan kembali nilai yang sudah diukur sambil memperkecil rentang, kasus terburuknya menjadi 6 kali per slider, rata-ratanya sekitar 5 kali
    Sepertinya masih bisa dioptimalkan lagi, tapi aku hanya melihat sampai sini
  • Ada solusi yang bisa menebak dengan rata-rata keseluruhan sekitar 3,27 percobaan
    Caranya memilih tebakan yang menyebarkan warna-warna yang mungkin ke dalam 100 bucket skor serata mungkin, yaitu meminimalkan varians
    Lebih dari separuh semua warna bisa diidentifikasi hanya dengan 2 tebakan
    Jika kodenya diubah untuk meminimalkan ukuran bucket terbesar, rata-ratanya sedikit lebih buruk, tetapi dalam kasus apa pun tidak melewati 4 kali
    Ini adalah solusi yang bisa ditempel dan dijalankan di konsol browser situsnya
  • Perhitungan sebenarnya adalah jarak dalam ruang 3D, dan diskalakan dengan jarak terjauh yang mungkin
    Jika untuk sementara mengabaikan penskalaan dan pembulatan, jarak dari warna target ke tiga titik sembarang yang tidak segaris akan mempersempit kandidat menjadi paling banyak dua, terlepas dari presisi tiap sumbu
    Jadi peluang benar pada tebakan ketiga 50%, dan peluang benar pada tebakan keempat 50%
    Dengan penskalaan, ini masih bisa dilihat seperti masalah irisan bola, tetapi fungsi jaraknya tidak simetris sehingga bolanya berbentuk aneh
    Misalnya jika tebakan pertama adalah sebuah sudut kubus, berarti kita memilih titik terjauh, sehingga 1/8 ruang memiliki skor 0% yang sama
    Jika turut mempertimbangkan hilangnya presisi akibat pembulatan, lebih baik melihatnya sebagai masalah diskret dan mencari tuple titik yang bisa membedakan semua warna; setelah beberapa percobaan, empat titik [11,7,4], [4,4,8], [11,8,11], [4,11,7] berhasil
    Mungkin ada himpunan yang lebih kecil, tetapi untuk brute force apakah tiga titik bisa membedakan semuanya sepertinya butuh kira-kira 2^48 operasi, dan mungkin bisa lebih baik jika titik kedua dipilih berdasarkan hasil pertama

• Ini trik pestaku
  Kalau seseorang mendeskripsikan sebuah warna, aku bisa menyebutkan kode warna heksadesimalnya
  Seperti yang bisa ditebak, aku sangat populer di pesta

  • Ada juga board game dengan tema ini
    Petunjuk pertama satu kata, petunjuk kedua dua kata, dan semua orang menaruh bidak di posisi tebakan warnanya
    Skornya diberikan berdasarkan jarak, jadi mudah dimainkan
    https://boardgamegeek.com/boardgame/302520/hues-and-cues
  • Sekarang tinggal jawab dengan warna hasil interpretasi kata memakai algoritma Netscape
    Dulu aku pernah membaca artikel tentang cara Netscape menafsirkan kata yang tidak ada dalam daftar nama warna resmi sebagai warna; caranya membuang karakter yang bukan heksadesimal, lalu melakukan padding dan chunking pada karakter yang tersisa untuk menjadikannya angka RGB
    Jadi “dumptruck” bisa menjadi DC0 dan tampil seperti kuning
    Setelah melihat itu, aku langsung membuat aplikasi kecil yang menafsirkan semua kata di /usr/share/dict/words dan memasukkannya ke DB sqlite bersama representasi warna Lab
    Aplikasi itu menampilkan 100 kata warna palsu yang paling dekat dengan RGB yang diinginkan sebagai warna aktual, mengurutkannya dari yang paling dekat, dan untuk proyek malam yang dibuat spontan, itu cukup menyenangkan
  • Foto yang diambil dengan kamera Soviet pada akhir 1980-an, parfum dan boneka beruang, karpet yang tergantung di dinding, nuansa kayu gelap yang kontras dengan ringannya masa muda
  • Ungu muram yang diwarnai, mengingatkan pada senja dalam buku anak-anak tahun 1910
  • Baiklah, mari kita coba
    Kuning kusam yang mengingatkan pada buah asam-manis dari Amerika Tengah dan Amerika Serikat bagian selatan
    Ini frasa yang diambil dari deskripsi cat

• Setelah submit, warna latar kotak yang menampilkan hasil kecocokan berubah menjadi warna yang kutebak
  Tergantung warna yang ditebak, ini mungkin tampak jelas, tetapi dalam kasusku warnanya cukup abu-abu, jadi baru setelah beberapa tebakan aku menyadari petunjuk visual penting ini

• Tanpa disengaja, ini menjadi iklan yang bagus untuk ruang warna berbasis persepsi
  Saat sudah mendekati, lebih mudah mengabaikan warna dan hanya melihat perubahan persentase
  Aku penasaran apakah akan berbeda jika gamenya seperti Guess My OKLCH

  • Saat warnanya benar-benar dekat, persentasenya sepertinya tidak sepenuhnya cocok dengan persepsi
    Rasanya seperti mentok di 95%

• Tidak ditautkan di halaman, tetapi untuk yang berminat, repositori GitHub-nya ada di sini
  https://github.com/susam/myrgb

• Kebetulan saya baru saja selesai menulis materi pelajaran yang mengajarkan berbagai format warna, jadi ini menarik
  Di dalamnya saya menjelaskan betapa sulitnya memilih warna dengan nilai RGB, karena manusia tidak memikirkan warna dengan cara seperti itu
  Game ini adalah contoh yang bagus
  HSL jauh lebih intuitif, dan jika punya naluri tentang roda warna, sangat mudah mendefinisikan warna lewat tingkat saturasi dan kecerahan

  • Saya sepenuhnya setuju bahwa HSL adalah ruang warna yang enak untuk dipikirkan
    Saya memberi latihan kepada siswa untuk mendefinisikan perbedaan warna pakaian yang mereka kenakan dalam HSL
    Kalau merasa RGB sulit dikonseptualisasikan, coba juga Lab

• Saya menebak warna pertama dengan benar dalam sekali coba, dan sekarang saya takut karena rasanya setelah ini hanya bisa turun

• Apa masalahnya? Tinggal cek warna latar di developer tools lalu normalisasi ke 16 tingkat, haha
  Serius, ini dibuat dengan baik, seru, dan menantang

• Saya juga ingin mencoba spin-off Guess my HSL

  • Dan akan bagus kalau ada Guess OKlab juga
    https://bottosson.github.io/posts/oklab/
  • Bukan persis game “Guess my OKLCH”, lebih mirip “menebak urutan angka gradien”, tapi ada contoh yang memakai OKLCH
    https://codepen.io/kaliedarik/full/YzvYadX

• Idenya benar-benar keren
  Dua percobaan pertama saya cepat sampai 94%, lalu setelah itu benar-benar mentok
  94% terasa seperti optimum lokal, dan rasanya menggeser slider mana pun naik atau turun satu langkah tidak menyelesaikannya
  Bisa jelaskan alasannya? Selain itu, akan bagus kalau ada cara untuk menyerah dan melihat jawabannya

  • Saya juga mengalami masalah ini
    Di ponsel, saya tidak sadar jari saya terlalu besar sehingga tidak bisa menggeser slider tepat satu langkah, malah bergerak dua langkah sekaligus
  • Skornya didefinisikan seperti ini
    Pertama hitung galat maksimum yang mungkin dari warna target, lalu bagi jarak Euklides dari tebakan sebenarnya dengan jarak maksimum itu dan kembalikan Math.floor(100 * (1 - dist / maxDist))
    Cara ini masuk akal karena membuat persentase di setiap ronde terasa mirip
    Kalau tidak, abu-abu tengah akan mendapat skor relatif tinggi untuk tebakan apa pun
    Untuk menjawab pertanyaanmu, situasi optimum lokal yang kamu sebutkan sepertinya tidak mungkin
    Saya bukan matematikawan, tapi dari fungsi ini saja, selama belum jawaban benar, sepertinya selalu ada arah untuk menggeser salah satu slider agar mendapat skor lebih tinggi
    Kemungkinan besar kamu melewatkan gerakan satu langkah itu, dan ini makin mudah terjadi saat makin dekat ke jawaban
  • Kalau 94%, artinya cukup geser satu langkah saja ke atas atau ke bawah, jadi ada 6 kemungkinan
    Kalau kamu menggeser satu dan tidak berhasil, kamu harus mengembalikan slider pertama ke posisi semula sebelum menggeser yang lain
  • Sepertinya itu tidak mungkin
    Saat saya mencoba, mengubah satu angka saja pun menaikkan atau menurunkan tingkat kecocokan