मेरा RGB पहचानो: Guess My RGB

 (susam.net)
2 पॉइंट द्वारा GN⁺ 2024-04-01 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • Guess My RGB एक सरल रंग अनुमान गेम है, जिसमें स्क्रीन की बैकग्राउंड RGB वैल्यू को सीधे पहचानना होता है
  • उपयोगकर्ता ऊपर दिए गए slider को खिसकाकर R, G, B वैल्यू समायोजित करता है और बैकग्राउंड रंग के करीब का संयोजन ढूँढता है
  • स्क्रीन पर 0 से 9, A से F तक के hexadecimal अक्षर और R, G, B लेबल साथ में दिखते हैं
  • New Game बटन से नया गेम शुरू किया जा सकता है
  • स्कोर, सही उत्तर दिखाने का तरीका, कठिनाई, और implementation का तरीका उपलब्ध सारांश जानकारी से पुष्टि नहीं किया जा सकता

स्क्रीन और लक्ष्य

  • शीर्षक Guess My RGB है
  • लक्ष्य slider समायोजित करके बैकग्राउंड RGB रंग का अनुमान लगाना है
  • स्क्रीन पर 0 से 9, A से F तक के अक्षर दिखते हैं
  • R, G, B लेबल साथ में दिखते हैं, ताकि हर रंग चैनल को अलग पहचाना जा सके

संचालन का तरीका

  • निर्देश वाक्य है: “Move the sliders above to guess the background RGB colour.”
  • उपयोगकर्ता ऊपर के slider से R, G, B वैल्यू समायोजित करता है
  • New Game बटन से नया गेम शुरू होता है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-04-01
Hacker News की राय

  • अगर रंग देखे बिना submit करने के बाद सिर्फ score ही दिखे, तो सबसे बेहतर strategy क्या होगी, यह जानने की उत्सुकता है
    साधारण hill climbing भी काफ़ी असरदार है: हर slider को 0 से शुरू करके score गिरने तक दाईं ओर ले जाएँ, फिर एक step बाएँ लौट आएँ
    औसतन हर slider पर 9 बार, यानी एक रंग पर लगभग 27 कोशिशें लगेंगी
    0 से 1 पर ले जाने पर score में जो फ़र्क आता है, उससे दाईं ओर कितना जाना है इसका मोटा अंदाज़ लगाया जा सकता है, लेकिन rounding की वजह से सही दूरी नहीं मिलती
    अगर strategy optimal हो, तो औसतन हर slider पर 4 बार, यानी एक रंग पर लगभग 12 कोशिशें काफ़ी होंगी

    • गरीबों वाला automation बनाना हो तो RGB input को 0 पर reset करके, हर color channel को एक-एक step बढ़ाते हुए submit करें, और जब score बढ़ना बंद हो जाए तो एक step वापस कर दें
      result percentage की rounding की वजह से पास-पास के रंगों का score एक जैसा हो सकता है, इसलिए कम-से-कम दो बार दोहराना पड़ेगा
    • अगर score को 100 - Euclidean distance माना जाए, तो तीन random guesses के बाद triangulation से सही जवाब काफ़ी सीमित किया जा सकता है
      triangulation के नतीजे में सही जवाब के दो candidate निकलते हैं, इसलिए उनमें से एक को random चुनें तो औसतन 4.5 कोशिशों में काम हो सकता है
    • अगर score के numeric value की जानकारी को नज़रअंदाज़ करके सिर्फ यह देखें कि किस तरफ़ score ज़्यादा है, तो binary search नहीं बल्कि ternary search या golden-section search से optimize किया जा सकता है
      https://en.wikipedia.org/wiki/Golden-section_search
      0-F range में 6 और 9 को measure करके, जो ज़्यादा हो उसके हिसाब से 0-9 या 6-F तक दायरा घटाएँ
      उसके बाद पहले से measure किए गए values को reuse करते हुए range घटाएँ, तो worst case में हर slider पर 6 बार, औसतन लगभग 5 बार लगते हैं
      शायद इसे और optimize किया जा सकता है, लेकिन मैंने यहीं तक देखा
    • पूरे औसत में लगभग 3.27 कोशिशों में हल निकालना संभव है
      तरीका यह है कि ऐसे guesses चुने जाएँ जो possible colors को 100 score buckets में जितना हो सके बराबर बाँट दें, यानी variance को minimize किया जाए
      सभी रंगों में से आधे से ज़्यादा को सिर्फ 2 guesses में पहचाना जा सकता है
      अगर code को सबसे बड़े bucket size को minimize करने के लिए बदला जाए, तो average थोड़ा खराब होता है, लेकिन किसी भी case में 4 से ज़्यादा कोशिशें नहीं लगतीं
      यह ऐसा solution है जिसे साइट के browser console में paste करके चलाया जा सकता है
    • असल गणना 3D space में distance की है, और उसे संभव सबसे लंबी दूरी के हिसाब से scale किया गया है
      scaling और rounding को थोड़ी देर के लिए नज़रअंदाज़ करें, तो target color से एक ही सीध में न आने वाले किसी भी तीन points तक की दूरी, axis precision चाहे जो हो, candidate को ज़्यादा-से-ज़्यादा दो तक सीमित कर देती है
      इसलिए तीसरी guess में सही होने की संभावना 50% और चौथी में भी 50% होती है
      scaling आ जाने पर भी इसे spheres के intersection की problem की तरह देखा जा सकता है, लेकिन distance function symmetric नहीं रहती, इसलिए spheres का आकार अजीब हो जाता है
      उदाहरण के लिए अगर पहली guess cube का कोई vertex हो, तो आपने सबसे दूर वाला point चुना है, इसलिए space का 1/8 हिस्सा वही 0% score साझा करता है
      rounding से होने वाली precision loss तक को देखें तो इसे discrete problem मानकर ऐसे points के tuples ढूँढना बेहतर है जो सभी colors को अलग कर सकें, और कुछ कोशिशों के बाद [11,7,4], [4,4,8], [11,8,11], [4,11,7] ये चार points काम करते मिले
      इससे छोटा set भी हो सकता है, लेकिन यह पूरी तरह जाँचने के लिए कि क्या तीन points से सब अलग किए जा सकते हैं, लगभग 2^48 operations चाहिए होंगे, और अगर पहले result के हिसाब से दूसरा point चुना जाए तो शायद और बेहतर हो सके

  • यही मेरा party trick है
    अगर आप कोई रंग describe करें, तो मैं उसका hex color code बता सकता हूँ
    जैसा आप सोच सकते हैं, पार्टियों में इसकी बहुत धूम रहती है

    • इस विषय पर एक board game भी है
      पहला clue एक शब्द होता है, दूसरा clue दो शब्दों का, और हर कोई अपनी रंग-guess की जगह पर token रखता है
      दूरी के हिसाब से score मिलता है, इसलिए खेलना आसान है
      https://boardgamegeek.com/boardgame/302520/hues-and-cues
    • अब बस शब्दों का जवाब Netscape algorithm से निकले रंगों में देना बाकी है
      मैंने पहले एक लेख पढ़ा था कि Netscape कैसे ऐसे शब्दों को रंग में बदलता था जो official color names list में नहीं होते थे; वह non-hex characters को हटा देता था, फिर बचे हुए characters को pad और chunk करके RGB numbers बना देता था
      इसलिए “dumptruck” कभी DC0 बनकर पीले जैसा रंग दे सकता है
      यह देखते ही मैंने /usr/share/dict/words के सारे शब्द parse करके, उनके Lab color representation के साथ sqlite DB में डालने वाला एक छोटा app बना लिया
      वह किसी मनचाहे RGB के सबसे नज़दीक आने वाले 100 नकली color words को असली रंग में दिखाता था और नज़दीकी के क्रम में sort करके दिखाता था; यूँ अचानक बने एक शाम के project के लिए यह काफ़ी मज़ेदार था
    • 1980 के दशक के आख़िर की सोवियत कैमरा से खींची फोटो, nostalgia और teddy bear, दीवार पर टँगा carpet, और युवावस्था की हल्केपन के विपरीत dark wood जैसा एहसास
    • 1910 की बच्चों की किताब में सांझ की याद दिलाने वाला, colorized उदास बैंगनी
    • ठीक है, करते हैं
      मध्य अमेरिका और अमेरिका के दक्षिणी हिस्से में मिलने वाले खट्टे-मीठे फल की याद दिलाने वाला मटमैला पीला
      यह paint description से लिया गया वाक्य है

  • submit करने के बाद match result दिखाने वाले box का background color मेरे guessed color में बदल जाता है
    जिस रंग को guess करना हो उसके हिसाब से यह शायद obvious लगे, लेकिन मेरे case में रंग काफ़ी gray था, इसलिए कई guesses के बाद जाकर मुझे यह अहम visual hint समझ आया

  • यह अनजाने में perceptual color spaces का शानदार विज्ञापन बन गया
    कुछ हद तक पास पहुँचने पर रंग को नज़रअंदाज़ करके सिर्फ percentage change देखना ज़्यादा आसान लगा
    सोचता हूँ, अगर यह Guess My OKLCH जैसा game हो तो क्या फ़र्क पड़ेगा

    • जब रंग सच में बहुत पास आ जाता है, तो percentage पूरी तरह perception से मेल नहीं खाता लगता
      95% पर जैसे कोई ceiling आ जाती हो

  • पेज पर link नहीं है, लेकिन जिन लोगों की रुचि हो उनके लिए GitHub repository यहाँ है
    https://github.com/susam/myrgb

  • संयोग से मैंने अभी-अभी अलग-अलग color formats सिखाने वाली क्लास सामग्री पूरी की है, और यह मज़ेदार है
    उसमें मैंने समझाया था कि RGB values के आधार पर रंग चुनना कितना कठिन है, क्योंकि इंसान रंगों के बारे में इस तरह नहीं सोचते
    यह गेम उसका एक अच्छा उदाहरण है
    HSL कहीं ज़्यादा intuitive है, और अगर color wheel की थोड़ी समझ हो तो saturation और lightness के स्तरों से रंग को परिभाषित करना बहुत आसान हो जाता है

    • मैं पूरी तरह सहमत हूँ कि HSL सोचने के लिए बेहतर color space है
      मैं छात्रों से अभ्यास के तौर पर यह करवाता हूँ कि वे अपने पहने हुए कपड़ों के रंगों के अंतर को HSL में परिभाषित करें
      अगर आपको RGB को conceptualize करना कठिन लगता है, तो Lab भी एक बार आज़मा सकते हैं

  • मैंने पहला रंग एक ही बार में सही पकड़ लिया, और अब डर लग रहा है कि यहाँ से प्रदर्शन बस नीचे ही जाएगा

  • समस्या क्या है? बस developer tools में background color देखो और उसे 16-step में normalize कर दो, हाहा
    सच में, यह अच्छी तरह बनाया गया, मज़ेदार और चुनौतीपूर्ण गेम है

  • मैं Guess my HSL स्पिनऑफ़ भी खेलना चाहूँगा

    • और Guess OKlab भी होना चाहिए
      https://bottosson.github.io/posts/oklab/
    • यह ठीक-ठीक “Guess my OKLCH” गेम तो नहीं है, बल्कि “gradient में numbers का सही क्रम लगाओ” के ज़्यादा करीब है, लेकिन OKLCH इस्तेमाल करने का एक उदाहरण है
      https://codepen.io/kaliedarik/full/YzvYadX

  • आइडिया सच में बहुत बढ़िया है
    पहली दो बार मैं जल्दी से 94% तक पहुँच गया, लेकिन उसके बाद पूरी तरह अटक गया
    94% किसी local optimum जैसा लग रहा था, और ऐसा महसूस हो रहा था कि किसी भी slider को एक step ऊपर या नीचे करने से बात नहीं बन रही
    क्या कोई इसका कारण समझा सकता है? और अगर हार माननी हो तो उत्तर देखने का कोई तरीका भी होना चाहिए

    • मेरे साथ भी यह समस्या हुई थी
      फ़ोन पर मेरी उँगलियाँ मोटी होने की वजह से मुझे पता ही नहीं चला कि मैं slider को ठीक एक step नहीं, बल्कि दो step खिसका रहा था
    • स्कोर इस तरह परिभाषित किया गया है
      पहले target color से संभव अधिकतम error निकाली जाती है, फिर आपके actual guess की Euclidean distance को उस अधिकतम दूरी से भाग देकर Math.floor(100 * (1 - dist / maxDist)) लौटाया जाता है
      यह हर round में percentages को लगभग समान महसूस कराने का तरीका है, इसलिए यह ठीक लगता है
      नहीं तो middle gray किसी भी guess पर अपेक्षाकृत ऊँचा score पा लेता
      आपके सवाल का जवाब दूँ तो, जो local optimum वाली स्थिति आपने बताई, वह संभव नहीं लगती
      मैं mathematician नहीं हूँ, लेकिन इस function को देखकर लगता है कि जब तक उत्तर सही न हो, हमेशा किसी न किसी slider को हिलाकर बेहतर score पाने की दिशा होनी चाहिए
      ज़्यादा संभावना यही है कि आपने वह एक-step move मिस कर दिया, और उत्तर के करीब पहुँचने पर ऐसा होना और आसान हो जाता है
    • 94% का मतलब है कि ऊपर या नीचे सिर्फ एक step जाना है, इसलिए कुल 6 संभावनाएँ हैं
      अगर आपने एक को हिलाया और बात नहीं बनी, तो दूसरे को आज़माने से पहले पहले slider को उसकी मूल स्थिति पर वापस ले जाना होगा
    • वह संभव नहीं लगता
      मैंने जब इसे आज़माया, तो सिर्फ एक number बदलने पर भी match percentage या तो बढ़ी या घटी