Adivinhe meu RGB: Guess My RGB

 (susam.net)
2 pontos por GN⁺ 2024-04-01 | 1 comentários | Compartilhar no WhatsApp
  • Guess My RGB é um jogo simples de adivinhar cores em que você tenta acertar diretamente os valores RGB da cor de fundo da tela
  • O usuário move os sliders na parte superior para ajustar os valores de R, G e B, procurando uma combinação próxima à cor de fundo
  • A tela exibe os caracteres hexadecimais de 0 a 9 e de A a F, junto com os rótulos R, G e B
  • É possível iniciar um novo jogo com o botão New Game
  • Pontuação, forma de revelar a resposta, nível de dificuldade e detalhes de implementação não podem ser confirmados apenas com as informações resumidas fornecidas

Tela e objetivo

  • O título é Guess My RGB
  • O objetivo é ajustar os sliders para acertar a cor RGB de fundo
  • A tela exibe caracteres de 0 a 9 e de A a F
  • Os rótulos R, G e B são exibidos junto, permitindo distinguir cada canal de cor

Forma de interação

  • A mensagem de orientação é “Move the sliders above to guess the background RGB colour.”
  • O usuário ajusta os valores de R, G e B usando os sliders na parte superior
  • O botão New Game inicia um novo jogo

Leituras relacionadas

1 comentários

 
GN⁺ 2024-04-01
Opiniões no Hacker News

  • Fico curioso sobre qual seria a estratégia ótima se você não pudesse ver a cor e só pudesse ver a pontuação depois de enviar
    Um simples hill climbing já é bem eficiente: comece cada slider em 0, mova-o para a direita até a pontuação cair e então volte uma casa para a esquerda
    Em média, acho que seriam necessárias umas 9 tentativas por slider, cerca de 27 tentativas por cor
    Pela diferença de pontuação ao mover de 0 para 1, dá para estimar aproximadamente quanto avançar para a direita, mas por causa do arredondamento não se obtém a distância exata
    Com uma estratégia ótima, acho que bastariam em média 4 tentativas por slider, ou seja, cerca de 12 tentativas por cor

    • Como uma tentativa de automação “de pobre”, daria para inicializar a entrada RGB em 0, aumentar cada canal de cor uma casa por vez e enviar; quando a pontuação não subir mais, voltar uma casa
      Como o percentual do resultado é arredondado, cores adjacentes podem ter a mesma pontuação, então é preciso repetir pelo menos duas vezes
    • Se assumirmos que a pontuação é 100 - distância euclidiana, depois de três palpites aleatórios dá para estreitar a resposta por triangulação
      A triangulação produz dois candidatos de resposta; escolhendo um dos dois aleatoriamente, parece que daria para acertar em média em 4,5 tentativas
    • Se ignorarmos a informação do número da pontuação em si e compararmos apenas qual lado tem pontuação maior, dá para otimizar com busca ternária ou busca pela seção áurea, não com busca binária
      https://en.wikipedia.org/wiki/Golden-section_search
      No intervalo 0-F, meça 6 e 9 e, conforme o lado com pontuação mais alta, reduza para 0-9 ou 6-F
      Depois, reutilizando valores já medidos enquanto se reduz o intervalo, o pior caso fica em 6 tentativas por slider, e a média em cerca de 5
      Acho que dá para otimizar mais, mas só fui até aqui
    • Existe uma solução que acerta com uma média geral de cerca de 3,27 tentativas
      A ideia é escolher palpites que distribuam as cores possíveis o mais uniformemente possível entre os 100 buckets de pontuação, isto é, minimizando a variância
      Mais da metade de todas as cores pode ser identificada com apenas 2 palpites
      Se o código for alterado para minimizar o tamanho do maior bucket, a média piora um pouco, mas nunca passa de 4 em nenhum caso
      É uma solução que pode ser colada e executada no console do navegador do site
    • O cálculo real é a distância em um espaço tridimensional, escalada pela maior distância possível
      Ignorando por um momento a escala e o arredondamento, as distâncias da cor-alvo até três pontos arbitrários que não estejam em linha reta reduzem os candidatos a no máximo dois, independentemente da precisão de cada eixo
      Portanto, há 50% de chance de acertar no terceiro palpite e 50% no quarto
      Com a escala, ainda dá para encarar como um problema de interseção de esferas, mas a função de distância não é simétrica, então as esferas ficam com um formato estranho
      Por exemplo, se o primeiro palpite for um vértice do cubo, você escolheu o ponto mais distante, então 1/8 do espaço recebe a mesma pontuação de 0%
      Considerando também a perda de precisão causada pelo arredondamento, é melhor tratar como um problema discreto e procurar tuplas de pontos capazes de distinguir todas as cores; depois de algumas tentativas, os quatro pontos [11,7,4], [4,4,8], [11,8,11], [4,11,7] funcionaram
      Pode haver um conjunto menor, mas fazer uma busca exaustiva para saber se três pontos conseguem distinguir tudo exigiria algo em torno de 2^48 operações, e talvez desse para melhorar escolhendo o segundo ponto de acordo com o primeiro resultado

  • Esse é meu truque de festa
    Se você descrever uma cor, consigo dizer o código hexadecimal da cor
    Como dá para imaginar, faço um sucesso enorme em festas

    • Também existe um jogo de tabuleiro sobre esse tema
      A primeira pista é uma palavra, a segunda pista são duas palavras, e todos colocam suas peças na posição em que acham que está a própria cor
      A pontuação é dada pela distância, então é fácil de jogar
      https://boardgamegeek.com/boardgame/302520/hues-and-cues
    • Agora é só responder com a cor obtida interpretando palavras pelo algoritmo do Netscape
      Li certa vez um texto sobre como o Netscape interpretava como cores palavras que não estavam na lista oficial de nomes de cores: ele descartava caracteres que não fossem hexadecimais e fazia padding e divisão em blocos dos caracteres restantes para formar os números RGB
      Por isso “dumptruck” podia virar DC0 e aparecer como uma cor amarela
      Ao ver isso, imediatamente fiz um pequeno app que interpretava todas as palavras de /usr/share/dict/words e as colocava em um banco SQLite junto com uma representação de cor Lab
      Ele mostrava as 100 palavras falsas de cor mais próximas do RGB desejado, exibidas com suas cores reais e ordenadas por proximidade; foi um projetinho noturno improvisado bem divertido
    • Uma foto tirada com uma câmera soviética no fim dos anos 1980, perfume e um ursinho de pelúcia, um tapete pendurado na parede, uma sensação de madeira escura em contraste com a leveza da juventude
    • Um roxo melancólico colorizado que lembra o crepúsculo em um livro infantil de 1910
    • Beleza, vamos lá
      Um amarelo opaco que lembra uma fruta agridoce da América Central e do sul dos Estados Unidos
      É uma frase tirada de uma descrição de tinta

  • Depois de enviar, a cor de fundo da caixa que mostra o resultado da correspondência muda para a cor que eu chutei
    Dependendo da cor a ser adivinhada, isso pode parecer óbvio, mas no meu caso a cor era bem acinzentada, então só percebi essa dica visual importante depois de alguns palpites

  • Sem querer, isso acaba sendo uma ótima propaganda para espaços de cor baseados na percepção
    Quando eu estava chegando perto, era mais fácil ignorar a cor e olhar só para a mudança no percentual
    Fico curioso se seria diferente em um jogo como Guess My OKLCH

    • Quando a cor fica realmente próxima, o percentual não parece corresponder totalmente à percepção
      Dá a sensação de bater em um teto nos 95%

  • A página não tem link para ele, mas para quem tiver interesse, o repositório no GitHub está aqui
    https://github.com/susam/myrgb

  • Por coincidência, eu tinha acabado de terminar materiais de aula ensinando vários formatos de cor, então achei divertido
    Neles, eu explicava como é difícil escolher uma cor por valores RGB, porque humanos não pensam em cores desse jeito
    Este jogo é um ótimo exemplo disso
    HSL é muito mais intuitivo e, se você tiver uma noção de círculo cromático, fica muito fácil definir uma cor em termos de saturação e luminosidade

    • Concordo totalmente que HSL é um espaço de cor bom para raciocinar
      Faço os alunos praticarem definindo em HSL as diferenças entre as cores das roupas que estão vestindo
      Se você acha RGB difícil de conceitualizar, vale experimentar Lab também

  • Acertei a primeira cor de primeira, e agora estou com medo de que daqui para frente só possa piorar

  • Qual é o problema? É só verificar a cor de fundo nas ferramentas de desenvolvedor e normalizar para 16 níveis, haha
    Falando sério, é bem feito, divertido e desafiador

  • Também gostaria de ver um spin-off Guess my HSL

  • A ideia é muito legal
    Nas duas primeiras vezes cheguei rapidamente a 94%, mas depois fiquei completamente travado
    94% parecia um ótimo local, e dava a sensação de que aumentar ou diminuir qualquer controle deslizante em uma posição não resolvia
    Alguém consegue explicar por quê? Também seria bom haver uma forma de desistir e ver a resposta

    • Eu também tive esse problema
      No celular, eu não percebi que, por causa do meu dedo grande, eu não conseguia mover o controle deslizante exatamente uma posição; ele estava pulando de duas em duas
    • A pontuação é definida assim
      Primeiro calcula-se o maior erro possível em relação à cor-alvo; depois divide-se a distância euclidiana do palpite real por essa distância máxima e retorna-se Math.floor(100 * (1 - dist / maxDist))
      É uma forma válida de fazer com que as porcentagens pareçam semelhantes a cada rodada
      Caso contrário, um cinza médio receberia uma pontuação relativamente alta para qualquer palpite
      Respondendo à pergunta, não acho que a situação de ótimo local mencionada seja possível
      Não sou matemático, mas olhando só para essa função, parece que, a menos que seja a resposta correta, sempre haverá uma direção em que mover um dos controles deslizantes aumenta a pontuação
      É bem provável que você tenha perdido esse movimento de uma posição, e isso acontece mais facilmente quanto mais perto você chega da resposta
    • Se é 94%, isso significa que basta mover apenas uma posição para cima ou para baixo, então há 6 possibilidades
      Se você moveu uma e não resolveu, precisa devolver o primeiro controle deslizante à posição original antes de mover outro
    • Acho que isso não é possível
      Quando testei, mudar só um número já fazia a porcentagem de correspondência subir ou descer