ลองทาย RGB ของฉัน: Guess My RGB

 (susam.net)
2 คะแนน โดย GN⁺ 2024-04-01 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • Guess My RGB คือ เกมทายสี แบบง่ายที่ให้ผู้ใช้ทายค่า RGB ของสีพื้นหลังโดยตรง
  • ผู้ใช้เลื่อน สไลเดอร์ ด้านบนเพื่อปรับค่า R, G, B และหาชุดค่าที่ใกล้เคียงกับสีพื้นหลัง
  • บนหน้าจอมี อักขระฐานสิบหก ตั้งแต่ 0 ถึง 9 และ A ถึง F พร้อมป้ายกำกับ R, G, B แสดงอยู่
  • สามารถเริ่มเกมใหม่ได้ด้วยปุ่ม New Game
  • จากข้อมูลสรุปที่ให้มาเพียงอย่างเดียว ยังไม่สามารถยืนยันได้ว่ามีคะแนน วิธีเปิดเผยคำตอบ ระดับความยาก หรือวิธีการทำงานอย่างไร

หน้าจอและเป้าหมาย

  • ชื่อเกมคือ Guess My RGB
  • เป้าหมายคือปรับสไลเดอร์เพื่อทาย ค่าสี RGB ของพื้นหลัง
  • บนหน้าจอมีอักขระตั้งแต่ 0 ถึง 9 และ A ถึง F แสดงอยู่
  • มีป้ายกำกับ R, G, B เพื่อแยกแต่ละช่องสี

วิธีการเล่น

  • ข้อความแนะนำคือ “Move the sliders above to guess the background RGB colour.”
  • ผู้ใช้ปรับค่า R, G, B ด้วยสไลเดอร์ด้านบน
  • เริ่มเกมใหม่ด้วยปุ่ม New Game

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-04-01
ความคิดเห็นจาก Hacker News

  • ถ้ามองไม่เห็นสีและเห็นได้แค่คะแนนหลังส่งแล้ว อยากรู้ว่า กลยุทธ์ที่เหมาะที่สุด คืออะไร
    แค่การไต่เขาแบบง่าย ๆ (hill climbing) ก็ค่อนข้างมีประสิทธิภาพ: เริ่มสไลเดอร์แต่ละตัวที่ 0 แล้วเลื่อนไปทางขวาจนคะแนนลดลง จากนั้นถอยกลับไปทางซ้ายหนึ่งช่องก็พอ
    โดยเฉลี่ยน่าจะต้องลองประมาณ 9 ครั้งต่อสไลเดอร์ หรือราว 27 ครั้งต่อหนึ่งสี
    ถ้าดูความต่างของคะแนนตอนเลื่อนจาก 0 ไป 1 จะพอประมาณได้ว่าควรไปทางขวาไกลแค่ไหน แต่เพราะมีการปัดเศษจึงหาความยาวที่แม่นยำไม่ได้
    ถ้าเป็นกลยุทธ์ที่เหมาะที่สุด คิดว่าโดยเฉลี่ยน่าจะใช้ประมาณ 4 ครั้งต่อสไลเดอร์ หรือ ลอง 12 ครั้ง ต่อหนึ่งสี

    • ถ้าจะทำอัตโนมัติแบบคนงบน้อย ก็เขียนให้รีเซ็ตค่า RGB เป็น 0 แล้วเพิ่มช่องสีแต่ละช่องทีละหนึ่ง ส่งคำตอบ จากนั้นถ้าคะแนนไม่เพิ่มแล้วก็ถอยกลับหนึ่งช่องได้
      เพราะเปอร์เซ็นต์ผลลัพธ์ถูกปัดเศษ สีที่อยู่ติดกันอาจได้คะแนนเท่ากัน จึงต้องทำซ้ำอย่างน้อยสองครั้ง
    • ถ้าสมมติว่าคะแนนคือ 100 - ระยะทางแบบยุคลิด หลังจากสุ่มเดาสามครั้ง ก็น่าจะใช้การระบุตำแหน่งแบบสามเหลี่ยมเพื่อจำกัดคำตอบได้
      ผลจากการระบุตำแหน่งแบบสามเหลี่ยมจะได้ตัวเลือกคำตอบสองตัว ดังนั้นถ้าสุ่มเลือกหนึ่งในสองตัว น่าจะทายถูกได้โดยเฉลี่ยใน 4.5 ครั้ง
    • ถ้าไม่ใช้ข้อมูลของตัวเลขคะแนนเอง และเปรียบเทียบแค่ว่าฝั่งไหนได้คะแนนสูงกว่า ก็ปรับให้เหมาะได้ด้วย ternary search หรือ golden-section search ไม่ใช่ binary search
      https://en.wikipedia.org/wiki/Golden-section_search
      ในช่วง 0-F ให้วัดที่ 6 กับ 9 แล้วจำกัดช่วงเป็น 0-9 หรือ 6-F ตามฝั่งที่ได้คะแนนสูงกว่า
      จากนั้นลดช่วงลงโดยใช้ค่าที่วัดไปแล้วซ้ำได้ กรณีแย่สุดจะอยู่ที่ 6 ครั้งต่อสไลเดอร์ โดยเฉลี่ยประมาณ 5 ครั้ง
      น่าจะปรับให้ดีกว่านี้ได้ แต่ดูถึงแค่นี้ก่อน
    • มีวิธีแก้ที่ทายถูกได้ด้วยค่าเฉลี่ยรวม ประมาณ 3.27 ครั้ง
      เป็นวิธีเลือกคำทายที่กระจายสีที่เป็นไปได้ลงในบัคเก็ตคะแนน 100 ใบให้สม่ำเสมอที่สุด หรือก็คือทำให้ความแปรปรวนต่ำที่สุด
      สีทั้งหมดมากกว่าครึ่งสามารถระบุได้ด้วยการเดาเพียง 2 ครั้ง
      ถ้าแก้โค้ดให้ลดขนาดบัคเก็ตที่ใหญ่ที่สุดให้น้อยที่สุด ค่าเฉลี่ยจะแย่ลงเล็กน้อย แต่ไม่ว่าในกรณีใดก็ไม่เกิน 4 ครั้ง
      เป็นวิธีแก้ที่คัดลอกไปวางรันในคอนโซลเบราว์เซอร์ของไซต์ได้
    • การคำนวณจริงเป็นระยะทางในปริภูมิสามมิติ และถูกสเกลด้วยระยะทางยาวที่สุดที่เป็นไปได้
      ถ้าละการสเกลและการปัดเศษไว้ชั่วคราว ระยะจากสีเป้าหมายไปยังจุดใด ๆ สามจุดที่ไม่ได้อยู่บนเส้นตรงเดียวกัน จะจำกัดตัวเลือกให้เหลือได้ไม่เกินสองตัว โดยไม่ขึ้นกับความละเอียดของแต่ละแกน
      ดังนั้นในการเดาครั้งที่สามจะมีโอกาสถูก 50% และครั้งที่สี่อีก 50%
      เมื่อมีการสเกลเข้ามา ก็ยังมองได้เหมือนปัญหาจุดตัดของทรงกลม แต่ฟังก์ชันระยะทางไม่สมมาตร ทำให้ทรงกลมมีรูปร่างแปลก ๆ
      เช่น ถ้าคำทายแรกเป็นมุมของลูกบาศก์ ก็เท่ากับเลือกจุดที่ไกลที่สุด ทำให้ 1/8 ของพื้นที่มีคะแนน 0% เหมือนกัน
      เมื่อรวมการสูญเสียความละเอียดจากการปัดเศษแล้ว ควรมองเป็นปัญหาแบบไม่ต่อเนื่องและหาทูเพิลของจุดที่สามารถแยกสีทั้งหมดออกจากกันได้ดีกว่า หลังลองอยู่หลายครั้ง จุดสี่จุด [11,7,4], [4,4,8], [11,8,11], [4,11,7] ใช้งานได้
      อาจมีเซตที่เล็กกว่านี้ แต่ถ้าจะ brute force ว่าสามจุดแยกทุกสีได้หรือไม่ น่าจะต้องใช้ปริมาณงานประมาณ 2^48 และอาจทำได้ดีขึ้นถ้าเลือกจุดที่สองตามผลลัพธ์แรก

  • นี่คือกลของฉันในงานปาร์ตี้
    ถ้าบรรยายสีมา ฉันบอกรหัสสีแบบ เลขฐานสิบหก ให้ได้
    อย่างที่คงเดาได้ ฉันดังมากในงานปาร์ตี้

    • มีบอร์ดเกมเกี่ยวกับหัวข้อนี้ด้วย
      คำใบ้แรกเป็นคำเดียว คำใบ้ที่สองเป็นสองคำ แล้วทุกคนวางตัวหมากในตำแหน่งสีที่ตัวเองเดา
      เป็นระบบให้คะแนนตามระยะทาง เลยเล่นง่าย
      https://boardgamegeek.com/boardgame/302520/hues-and-cues
    • ตอนนี้ก็ลองตอบด้วยสีที่ตีความคำผ่านอัลกอริทึมของ Netscape ได้แล้ว
      เคยอ่านบทความเกี่ยวกับวิธีที่ Netscape ตีความคำที่ไม่ได้อยู่ในรายการชื่อสีทางการให้เป็นสี โดยทิ้งอักขระที่ไม่ใช่เลขฐานสิบหก แล้วแพดและแบ่งชังก์อักขระที่เหลือเพื่อสร้างตัวเลข RGB
      ดังนั้น “dumptruck” จึงอาจกลายเป็น DC0 และออกมาเหมือนสีเหลืองได้
      พอเห็นแบบนั้น ฉันก็ทำแอปเล็ก ๆ ทันที โดยตีความทุกคำใน /usr/share/dict/words แล้วใส่ลงในฐานข้อมูล sqlite พร้อมค่าการแทนสีแบบ Lab
      มันแสดงคำสีปลอม 100 คำที่ใกล้กับ RGB ที่ต้องการที่สุดเป็นสีจริง และเรียงตามความใกล้ เป็นโปรเจกต์ยามเย็นที่ทำแบบฉับพลันแต่สนุกทีเดียว
    • ภาพถ่ายด้วย กล้องโซเวียต ช่วงปลายทศวรรษ 1980, น้ำหอมกับตุ๊กตาหมี, พรมแขวนผนัง, ความรู้สึกของไม้สีเข้มที่ตัดกับความเบาบางของวัยเยาว์
    • สีม่วงหม่น แบบลงสี ที่ชวนให้นึกถึงยามโพล้เพล้ในหนังสือเด็กปี 1910
    • ได้เลย ลองกัน
      สีเหลืองหม่น ที่ชวนให้นึกถึงผลไม้รสเปรี้ยวหวานจากอเมริกากลางและตอนใต้ของสหรัฐฯ
      เป็นข้อความที่เอามาจากคำอธิบายสีทาบ้าน

  • หลังจากส่งแล้ว สีพื้นหลัง ของกล่องที่แสดงผลเปอร์เซ็นต์ความตรงกันจะเปลี่ยนเป็นสีที่ฉันทาย
    อาจดูเป็นเรื่องชัดเจนขึ้นอยู่กับสีที่ต้องทาย แต่ในกรณีของฉันสีค่อนข้างเทา เลยเดาไปหลายครั้งกว่าจะสังเกตเห็นเบาะแสทางภาพที่สำคัญนี้

  • กลายเป็นโฆษณาที่ดีของ ปริภูมิสีเชิงการรับรู้ โดยไม่ได้ตั้งใจ
    ตอนเริ่มเข้าใกล้ในระดับหนึ่ง การไม่สนใจสีและดูแค่การเปลี่ยนแปลงของเปอร์เซ็นต์กลับง่ายกว่า
    สงสัยว่าถ้าเป็นเกม Guess My OKLCH จะต่างออกไปไหม

    • เมื่อสีใกล้กันมาก ๆ เปอร์เซ็นต์ดูเหมือนจะไม่ตรงกับการรับรู้อย่างสมบูรณ์
      รู้สึกเหมือนชนเพดานที่ 95%

  • แม้หน้าเว็บจะไม่ได้ลิงก์ไว้ แต่ รีโพสitory GitHub สำหรับคนที่สนใจอยู่ที่นี่
    https://github.com/susam/myrgb

  • พอดีเพิ่งเขียนสื่อการสอนเกี่ยวกับรูปแบบสีหลายแบบเสร็จ สนุกดี
    ในนั้นอธิบายว่าการเลือกสีด้วยค่า RGB นั้นยากแค่ไหน เพราะมนุษย์ไม่ได้คิดเรื่องสีแบบนั้น
    เกมนี้เป็นตัวอย่างที่ดีเลย
    HSL นั้นเข้าใจง่ายกว่ามาก และถ้ามีความรู้สึกเรื่องวงล้อสีอยู่บ้าง ก็จะนิยามสีด้วยระดับความอิ่มสีและความสว่างได้ง่ายมาก

    • เห็นด้วยเต็มที่ว่า HSL เป็นปริภูมิสีที่เหมาะกับการคิด
      ผมให้นักเรียนฝึกนิยามความแตกต่างของสีเสื้อผ้าที่ตัวเองใส่อยู่ด้วย HSL
      ถ้ารู้สึกว่า RGB ทำความเข้าใจเป็นแนวคิดได้ยาก ลอง Lab ดูก็ได้

  • ทายสีแรกถูกในครั้งเดียว ตอนนี้เลยกลัวว่าหลังจากนี้คงมีแต่จะแย่ลง

  • มีปัญหาอะไรล่ะ? ก็เปิดเครื่องมือนักพัฒนาแล้วดู สีพื้นหลัง จากนั้น normalize เป็น 16 ระดับก็พอแล้วนี่ ฮ่าๆ
    เอาจริงๆ ทำออกมาดี สนุกและท้าทาย

  • อยากลองสปินออฟ Guess my HSL ด้วย

    • แล้วถ้ามี Guess OKlab ด้วยก็คงดี
      https://bottosson.github.io/posts/oklab/
    • ไม่ใช่เกม “Guess my OKLCH” ตรงๆ แต่ใกล้กับ “เรียงลำดับตัวเลขของเกรเดียนต์ให้ถูก” มากกว่า มีตัวอย่างที่ใช้ OKLCH อยู่
      https://codepen.io/kaliedarik/full/YzvYadX

  • ไอเดียเจ๋งมาก
    สองครั้งแรกขึ้นไปถึง 94% ได้เร็ว แต่หลังจากนั้นตันสนิท
    94% ดูเหมือนเป็น จุดเหมาะสมเฉพาะที่ และรู้สึกว่าเลื่อนสไลเดอร์ตัวไหนขึ้นหรือลงหนึ่งช่องก็ไม่แก้ปัญหา
    อธิบายเหตุผลได้ไหม? แล้วถ้ามีวิธียอมแพ้แล้วดูคำตอบได้ก็คงดี

    • ผมก็เจอปัญหานี้เหมือนกัน
      บนมือถือ นิ้วใหญ่จนไม่รู้ตัวว่าขยับสไลเดอร์ให้พอดีแค่ช่องเดียวไม่ได้ แต่ขยับทีละสองช่องอยู่
    • คะแนนนิยามไว้แบบนี้
      ก่อนอื่นคำนวณค่าความคลาดเคลื่อนสูงสุดที่เป็นไปได้จากสีเป้าหมาย แล้วนำระยะทางแบบยุคลิดจากค่าที่ทายจริงหารด้วยระยะสูงสุดนั้น จากนั้นคืนค่า Math.floor(100 * (1 - dist / maxDist))
      เป็นวิธีที่สมเหตุสมผลเพื่อให้เปอร์เซ็นต์ในแต่ละรอบรู้สึกใกล้เคียงกัน
      ไม่อย่างนั้นสีเทากลางจะได้คะแนนค่อนข้างสูงไม่ว่าจะทายอะไรก็ตาม
      ตอบคำถามคือ สถานการณ์จุดเหมาะสมเฉพาะที่ที่ว่าไม่น่าจะเป็นไปได้
      ผมไม่ใช่นักคณิตศาสตร์ แต่ดูจากฟังก์ชันนี้แล้ว ตราบใดที่ยังไม่ใช่คำตอบ ก็น่าจะมีทิศทางที่เลื่อนสไลเดอร์หนึ่งตัวแล้วได้คะแนนสูงขึ้นเสมอ
      เป็นไปได้มากว่าคุณพลาดการเลื่อนหนึ่งช่องนั้น และยิ่งเข้าใกล้คำตอบก็ยิ่งเกิดเรื่องแบบนี้ได้ง่าย
    • ถ้าได้ 94% แปลว่าต้องขยับขึ้นหรือลง แค่หนึ่งช่อง ดังนั้นมีความเป็นไปได้ 6 แบบ
      ถ้าขยับตัวหนึ่งแล้วไม่สำเร็จ ก่อนจะขยับตัวอื่นต้องเลื่อนสไลเดอร์ตัวแรกกลับตำแหน่งเดิมก่อน
    • ไม่น่าจะเป็นไปได้
      ตอนผมลอง แค่เปลี่ยนตัวเลขเดียว เปอร์เซ็นต์ความตรงกันก็ขึ้นหรือลงแล้ว