Devine mon RGB : Guess My RGB

 (susam.net)
2 points par GN⁺ 2024-04-01 | 1 commentaires | Partager sur WhatsApp
  • Guess My RGB est un jeu de devinette de couleur simple qui consiste à retrouver directement les valeurs RGB de la couleur de fond de l’écran
  • L’utilisateur déplace les curseurs en haut pour ajuster les valeurs R, G et B, afin de trouver une combinaison proche de la couleur de fond
  • L’écran affiche les caractères hexadécimaux de 0 à 9 et de A à F, ainsi que les libellés R, G et B
  • Le bouton New Game permet de démarrer une nouvelle partie
  • Le score, la manière dont la bonne réponse est révélée, la difficulté et le mode d’implémentation ne peuvent pas être déterminés à partir des seules informations récapitulatives fournies

Écran et objectif

  • Le titre est Guess My RGB
  • L’objectif est d’ajuster les curseurs pour retrouver la couleur RGB de fond
  • L’écran affiche les caractères de 0 à 9 et de A à F
  • Les libellés R, G et B sont également affichés, ce qui permet de distinguer chaque canal de couleur

Commandes

  • Le texte d’instruction est « Move the sliders above to guess the background RGB colour. »
  • L’utilisateur ajuste les valeurs R, G et B à l’aide des curseurs situés en haut
  • Le bouton New Game démarre une nouvelle partie

À lire aussi

1 commentaires

 
GN⁺ 2024-04-01
Commentaires sur Hacker News

  • Je me demande quelle serait la stratégie optimale si on ne pouvait pas voir la couleur et seulement consulter le score après avoir soumis
    Même un simple hill climbing est assez efficace : il suffit de partir de 0 pour chaque curseur, de le déplacer vers la droite jusqu’à ce que le score baisse, puis de revenir d’un cran vers la gauche
    En moyenne, cela demanderait environ 9 essais par curseur, soit 27 essais par couleur
    En regardant l’écart de score lorsqu’on passe de 0 à 1, on peut estimer grossièrement jusqu’où aller vers la droite, mais l’arrondi empêche d’obtenir la distance exacte
    Avec une stratégie optimale, on devrait pouvoir s’en sortir avec environ 4 essais par curseur en moyenne, soit 12 essais par couleur

    • Pour une tentative d’automatisation du pauvre, on peut écrire quelque chose qui réinitialise les entrées RGB à 0, augmente chaque canal d’une unité, soumet, puis revient d’un cran dès que le score ne monte plus
      À cause de l’arrondi du pourcentage résultant, des couleurs adjacentes peuvent avoir le même score, donc il faut répéter au moins deux fois
    • Si on suppose que le score vaut 100 - distance euclidienne, alors après trois suppositions aléatoires on peut resserrer la bonne réponse par triangulation
      La triangulation donne deux candidats possibles, donc en en choisissant un au hasard, on pourrait trouver en 4,5 essais en moyenne
    • Si l’on ignore l’information contenue dans la valeur du score elle-même pour ne comparer que quel côté obtient le meilleur score, on peut optimiser non pas avec une recherche binaire mais avec une recherche ternaire ou une recherche par section dorée
      https://en.wikipedia.org/wiki/Golden-section_search
      Sur l’intervalle 0-F, on mesure 6 et 9, puis selon le plus élevé on réduit à 0-9 ou 6-F
      Ensuite, en réutilisant les valeurs déjà mesurées tout en réduisant l’intervalle, on arrive dans le pire des cas à 6 essais par curseur, et à environ 5 en moyenne
      Il y a sans doute moyen d’optimiser davantage, mais je me suis arrêté là
    • Il existe une solution qui trouve la réponse en environ 3,27 essais en moyenne
      L’idée est de choisir des suppositions qui répartissent les couleurs possibles aussi uniformément que possible dans 100 buckets de score, autrement dit de minimiser la variance
      Plus de la moitié de toutes les couleurs peuvent être identifiées en seulement 2 suppositions
      Si on modifie le code pour minimiser la taille du plus gros bucket, la moyenne se dégrade légèrement mais on ne dépasse jamais 4 essais
      C’est une solution qu’on peut coller dans la console du navigateur sur le site pour l’exécuter
    • Le calcul réel porte sur une distance dans un espace tridimensionnel, mise à l’échelle selon la plus grande distance possible
      Si l’on ignore un instant cette mise à l’échelle et l’arrondi, les distances entre la couleur cible et trois points arbitraires non alignés permettent de réduire les candidats à deux au maximum, indépendamment de la précision sur chaque axe
      On a donc 50 % de chances de réussir au troisième essai, puis 50 % au quatrième
      Avec la mise à l’échelle, on peut toujours voir ça comme un problème d’intersection de sphères, mais la fonction de distance n’est pas symétrique, donc les sphères ont une forme étrange
      Par exemple, si la première supposition est un sommet du cube, on a choisi le point le plus éloigné possible, si bien qu’un huitième de l’espace partage le même score de 0 %
      En tenant compte aussi de la perte de précision due à l’arrondi, il vaut mieux traiter cela comme un problème discret et chercher des tuples de points permettant de distinguer toutes les couleurs ; après quelques essais, les quatre points [11,7,4], [4,4,8], [11,8,11], [4,11,7] ont fonctionné
      Il existe peut-être un ensemble plus petit, mais pour vérifier par force brute si trois points suffisent à tout distinguer, il faudrait sans doute quelque chose comme 2^48 opérations, et choisir le deuxième point en fonction du premier résultat pourrait encore améliorer les choses

  • C’est mon tour de soirée
    Si on me décrit une couleur, je peux donner son code couleur hexadécimal
    Comme vous vous en doutez, ça fait un tabac en soirée

    • Il existe aussi un jeu de société sur ce thème
      Le premier indice est un mot, le second est deux mots, et chacun place son pion à l’endroit où il pense que sa couleur se trouve
      Le score dépend de la distance, donc c’est facile à jouer
      https://boardgamegeek.com/boardgame/302520/hues-and-cues
    • Maintenant, il suffit de répondre avec la couleur correspondant aux mots interprétés par l’algorithme de Netscape
      J’avais lu autrefois un article expliquant comment Netscape interprétait comme couleur des mots absents de la liste officielle des noms de couleurs : les caractères non hexadécimaux étaient supprimés, puis le reste était paddé et découpé pour produire des valeurs RGB
      Ainsi, « dumptruck » pouvait devenir DC0 et donner quelque chose comme du jaune
      En voyant ça, j’ai immédiatement créé une petite appli qui interprétait tous les mots de /usr/share/dict/words et les stockait dans une base sqlite avec leur représentation de couleur Lab
      Elle affichait les 100 faux mots de couleur les plus proches d’un RGB donné sous forme de vraies couleurs, triés par proximité, et c’était un projet du soir improvisé plutôt amusant
    • Une photo prise avec un appareil photo soviétique de la fin des années 1980, avec une sensation de nostalgie et d’ours en peluche, un tapis accroché au mur, et du bois sombre qui contraste avec la légèreté de la jeunesse
    • Un violet mélancolique colorisé qui rappelle le crépuscule dans un livre pour enfants de 1910
    • D’accord, allons-y
      Un jaune terne qui évoque un fruit aigre-doux d’Amérique centrale et du sud des États-Unis
      C’est une formule reprise d’une description de peinture

  • Après avoir soumis, la couleur de fond de la boîte qui affiche le taux de correspondance devient celle que j’ai devinée
    Cela peut sembler évident selon la couleur à trouver, mais dans mon cas elle était assez grise, donc ce n’est qu’après quelques essais que j’ai remarqué cet indice visuel important

  • C’est devenu involontairement une excellente publicité pour les espaces colorimétriques perceptuels
    Quand on s’en rapprochait un peu, il était plus simple d’ignorer la couleur et de ne regarder que l’évolution du pourcentage
    Je me demande si ce serait différent avec un jeu du type Guess My OKLCH

    • Quand les couleurs deviennent vraiment proches, le pourcentage ne semble pas correspondre complètement à la perception
      On a l’impression qu’il y a un plafond à 95 %

  • Ce n’est pas lié depuis la page, mais pour celles et ceux que ça intéresse, voici le dépôt GitHub
    https://github.com/susam/myrgb

  • Je venais justement de finir des supports de cours sur différents formats de couleur, c'est amusant
    J'y expliquais à quel point il est difficile de choisir une couleur à partir de valeurs RGB, parce que ce n'est pas ainsi que les humains pensent la couleur
    Ce jeu en est un bon exemple
    HSL est bien plus intuitif, et avec un minimum d'intuition du cercle chromatique, il devient très facile de définir une couleur par son niveau de saturation et de luminosité

    • Je suis tout à fait d'accord sur le fait que HSL est un bon espace colorimétrique pour raisonner
      Je fais faire aux étudiants un exercice où ils doivent définir en HSL les différences entre les couleurs des vêtements qu'ils portent
      Si vous trouvez RGB difficile à conceptualiser, vous pouvez aussi essayer Lab

  • J'ai trouvé la première couleur du premier coup, et maintenant j'ai peur que ça ne fasse que descendre à partir d'ici

  • C'est quoi le problème ? Il suffit de vérifier la couleur d'arrière-plan dans les outils de développement et de la normaliser sur 16 niveaux, haha
    Plus sérieusement, c'est un jeu bien conçu, amusant et stimulant

  • J'aimerais bien essayer un spin-off Guess my HSL

  • L'idée est vraiment excellente
    Les deux premières fois, je suis rapidement monté jusqu'à 94 %, puis j'ai complètement bloqué
    94 % ressemblait à un optimum local, avec l'impression qu'augmenter ou diminuer n'importe quel curseur d'un cran ne réglait rien
    Quelqu'un pourrait expliquer pourquoi ? Et ce serait bien aussi d'avoir un moyen d'abandonner et de voir la bonne réponse

    • J'ai eu le même problème
      Sur téléphone, avec mes gros doigts, je ne me rendais pas compte que je n'arrivais pas à déplacer le curseur d'un seul cran et que je le bougeais de deux crans à chaque fois
    • Le score est défini comme ceci
      On calcule d'abord l'erreur maximale possible par rapport à la couleur cible, puis on divise la distance euclidienne de la proposition réelle par cette distance maximale et on renvoie Math.floor(100 * (1 - dist / maxDist))
      C'est une approche raisonnable pour que le pourcentage semble à peu près similaire d'une manche à l'autre
      Sinon, un gris moyen obtiendrait un score relativement élevé quelle que soit la proposition
      Pour répondre à la question, la situation d'optimum local mentionnée ne semble pas possible
      Je ne suis pas mathématicien, mais à voir cette fonction, il semble qu'à moins d'être sur la bonne réponse, il y ait toujours une direction où déplacer un curseur pour obtenir un meilleur score
      Vous avez sans doute raté ce déplacement d'un cran, et cela arrive plus facilement quand on se rapproche de la bonne réponse
    • À 94 %, cela veut dire qu'il suffit de bouger d'un seul cran vers le haut ou vers le bas, donc il y a 6 possibilités
      Si vous en avez déplacé un sans résoudre le problème, il faut remettre le premier curseur à sa position d'origine avant d'en essayer un autre
    • Ça ne me semble pas possible
      Quand j'ai essayé, le simple fait de changer un seul nombre faisait monter ou baisser le taux de correspondance