Adivina mi RGB: Guess My RGB
(susam.net)- Guess My RGB es un sencillo juego de adivinar colores en el que hay que acertar directamente los valores RGB del color de fondo de la pantalla
- El usuario mueve los sliders de la parte superior para ajustar los valores R, G y B, y buscar una combinación cercana al color de fondo
- En la pantalla se muestran los caracteres hexadecimales del 0 al 9 y de la A a la F, junto con las etiquetas R, G y B
- Con el botón
New Gamese puede iniciar una nueva partida - Con la información resumida proporcionada no se puede confirmar la puntuación, la forma en que se revela la respuesta correcta, la dificultad ni la implementación
Pantalla y objetivo
- El título es Guess My RGB
- El objetivo es ajustar los sliders para acertar el color RGB de fondo
- En la pantalla se muestran los caracteres del 0 al 9 y de la A a la F
- También se muestran las etiquetas R, G y B, lo que permite distinguir cada canal de color
Forma de control
- El texto de ayuda es “Move the sliders above to guess the background RGB colour.”
- El usuario ajusta los valores R, G y B con los sliders superiores
- Con el botón
New Gamese inicia una nueva partida
1 comentarios
Opiniones en Hacker News
Me da curiosidad cuál sería la estrategia óptima si no pudieras ver el color y solo pudieras ver la puntuación después de enviarlo.
Incluso un simple hill climbing es bastante eficiente: empiezas cada slider en 0, lo mueves hacia la derecha hasta que la puntuación baje y luego regresas un paso a la izquierda.
En promedio, parecería requerir unas 9 pruebas por slider, unas 27 por color.
Viendo la diferencia de puntuación al mover de 0 a 1, se puede estimar más o menos cuánto avanzar hacia la derecha, pero por el redondeo no sale la distancia exacta.
Con una estrategia óptima, creo que bastarían en promedio unas 4 pruebas por slider, es decir, unas 12 pruebas por color.
Como el porcentaje resultante se redondea, colores adyacentes pueden tener la misma puntuación, así que habría que repetirlo al menos dos veces.
La triangulación da dos posibles respuestas, así que eligiendo una de las dos al azar parece que se podría acertar en un promedio de 4.5 intentos.
https://en.wikipedia.org/wiki/Golden-section_search
En el rango 0-F se miden 6 y 9, y según cuál sea más alto se reduce a 0-9 o 6-F.
Luego, reduciendo el rango mientras se reutilizan los valores ya medidos, el peor caso queda en 6 pruebas por slider, con un promedio de alrededor de 5.
Siento que se puede optimizar más, pero solo llegué hasta ahí.
Consiste en elegir intentos que distribuyan los colores posibles lo más uniformemente posible entre 100 buckets de puntuación; en otras palabras, minimizando la varianza.
Más de la mitad de todos los colores pueden identificarse con solo 2 intentos.
Si se cambia el código para minimizar el tamaño del bucket más grande, el promedio empeora un poco, pero en ningún caso supera los 4 intentos.
Es una solución que se puede pegar y ejecutar en la consola del navegador del sitio.
Si ignoramos por un momento el escalado y el redondeo, las distancias desde el color objetivo hasta tres puntos arbitrarios que no estén alineados entre sí reducen los candidatos a un máximo de dos, independientemente de la precisión de cada eje.
Así que hay 50% de probabilidad de acertar en el tercer intento y 50% en el cuarto.
Con el escalado, todavía se puede ver como un problema de intersección de esferas, pero como la función de distancia no es simétrica, las esferas tienen una forma rara.
Por ejemplo, si el primer intento es un vértice del cubo, habrías elegido el punto más lejano, de modo que 1/8 del espacio tiene la misma puntuación de 0%.
Si además consideramos la pérdida de precisión por el redondeo, conviene tratarlo como un problema discreto y buscar tuplas de puntos que puedan distinguir todos los colores; tras algunos intentos, funcionaron estos cuatro puntos: [11,7,4], [4,4,8], [11,8,11], [4,11,7].
Puede que haya un conjunto más pequeño, pero una búsqueda exhaustiva para ver si tres puntos pueden distinguirlos todos requeriría alrededor de 2^48 operaciones, y podría mejorarse eligiendo el segundo punto según el primer resultado.
Este es mi truco de fiesta.
Si me describen un color, puedo decir su código hexadecimal de color.
Como podrán imaginar, soy enormemente popular en las fiestas.
La primera pista es una palabra, la segunda pista son dos palabras, y todos colocan su ficha en la posición donde creen que está su color.
Se puntúa según la distancia, así que es fácil de jugar.
https://boardgamegeek.com/boardgame/302520/hues-and-cues
Hace tiempo leí un artículo sobre cómo Netscape interpretaba como colores las palabras que no estaban en la lista oficial de nombres de colores: descartaba los caracteres que no fueran hexadecimales y luego rellenaba y dividía en chunks los caracteres restantes para formar números RGB.
Por eso “dumptruck” puede convertirse en DC0 y verse como un amarillo.
Al verlo, de inmediato hice una pequeña app que interpretaba todas las palabras de /usr/share/dict/words y las metía en una base SQLite junto con su representación de color en Lab.
Mostraba las 100 palabras falsas de color más cercanas al RGB deseado como colores reales y ordenadas por cercanía; para ser un proyecto improvisado de una noche, fue bastante divertido.
Un amarillo opaco que recuerda a una fruta agridulce de Centroamérica y del sur de Estados Unidos.
Es una frase tomada de una descripción de pintura.
Después de enviar, el color de fondo de la caja que muestra el resultado de coincidencia cambia al color que yo había adivinado.
Puede parecer obvio según el color que haya que adivinar, pero en mi caso el color era bastante gris, así que no noté esta pista visual tan importante hasta después de varios intentos.
Sin querer, se convierte en un gran anuncio de los espacios de color basados en la percepción.
Cuando ya estaba más o menos cerca, me resultaba más fácil ignorar el color y fijarme solo en el cambio de porcentaje.
Me pregunto si sería distinto con un juego como Guess My OKLCH.
Se siente como si tuviera un techo en 95%.
Aunque no está enlazado en la página, aquí está el repositorio de GitHub para quien tenga interés.
https://github.com/susam/myrgb
Justo acababa de terminar material de clase para enseñar varios formatos de color, y esto me pareció divertido
Ahí explicaba lo difícil que es elegir un color con valores RGB, porque los humanos no pensamos los colores de esa manera
Este juego es un buen ejemplo de eso
HSL es mucho más intuitivo y, si tienes noción de la rueda de color, es muy fácil definir un color por sus niveles de saturación y luminosidad
A mis estudiantes les pongo un ejercicio para definir en HSL las diferencias entre los colores de la ropa que llevan puesta
Si RGB te parece difícil de conceptualizar, también deberías probar Lab
Adiviné el primer color al primer intento, y ahora temo que de aquí en adelante solo puedo ir cuesta abajo
¿Cuál es el problema? Basta con revisar el color de fondo en las herramientas de desarrollo y normalizarlo a 16 pasos, jaja
Ya en serio, está muy bien hecho; es un juego divertido y desafiante
También me gustaría probar un spin-off de Guess my HSL
https://bottosson.github.io/posts/oklab/
https://codepen.io/kaliedarik/full/YzvYadX
La idea está buenísima
Las primeras dos veces llegué rápido al 94%, pero después me quedé totalmente atorado
El 94% parecía una especie de óptimo local, y sentía que subir o bajar cualquier deslizador un paso no lo resolvía
¿Alguien puede explicar por qué? También estaría bueno que hubiera una forma de rendirse y ver la respuesta
En el celular, por mis dedos grandes, no me di cuenta de que no estaba moviendo el deslizador exactamente un solo paso, sino de dos en dos
Primero calcula el error máximo posible respecto del color objetivo, luego divide la distancia euclidiana contra la suposición real entre esa distancia máxima y devuelve
Math.floor(100 * (1 - dist / maxDist))Es un enfoque razonable para que los porcentajes de cada ronda se sientan parecidos
Si no, un gris medio obtendría una puntuación relativamente alta con cualquier intento
Para responder la pregunta, no creo que sea posible la situación de óptimo local que mencionas
No soy matemático, pero viendo solo esta función, mientras no sea la respuesta correcta, siempre debería haber una dirección en la que mover un deslizador para obtener una puntuación más alta
Lo más probable es que se te haya escapado ese movimiento de un solo paso, y eso pasa más fácilmente cuanto más cerca estás de la respuesta
Si moviste uno y no se resolvió, antes de mover otro tienes que devolver el primer deslizador a su posición original
Cuando lo probé, con cambiar un solo número la coincidencia subía o bajaba