แปลงภาพถ่ายเป็น Atkinson dithering

 (gazs.github.io)
1 คะแนน โดย GN⁺ 2025-06-08 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เปลี่ยนภาพถ่ายให้เป็นสไตล์ ฟิลเตอร์ 1 บิต ของ Macintosh ยุคคลาสสิก พร้อมใช้เอฟเฟ็กต์ Atkinson dithering ด้วยพิกเซลขาวดำเท่านั้น
  • แต่ละพิกเซลจะถูกกำหนดให้เป็นสีดำหรือสีขาวโดยอิงจากค่า สีเทา 50% และค่าความคลาดเคลื่อนจากการแปลงจะถูกกระจายไปยังพิกเซลรอบข้าง
  • ค่าความคลาดเคลื่อนจะถูกแจกจ่ายไปยัง 6 ตำแหน่งรอบพิกเซลปัจจุบัน ตำแหน่งละ 1/8 เพื่อสร้างภาพขาวดำที่มีพื้นผิวเฉพาะตัว
  • ภาพผลลัพธ์สามารถ คลิกขวาเพื่อบันทึก ได้ แต่ไม่สามารถลากไปบันทึกบนเดสก์ท็อปได้เนื่องจากข้อจำกัดของเบราว์เซอร์
  • การพัฒนาใช้ Canvas, Drag and Drop events, WebWorkers, FileReader API และต้องใช้เบราว์เซอร์รุ่นใหม่

วิธีประมวลผล Atkinson dithering

  • การพัฒนานี้จำลอง ฟิลเตอร์ 1 บิตของ Macintosh แบบคลาสสิก ที่ใช้ใน Hyperdither และ HyperScan
  • ขั้นตอนการประมวลผลคือเปรียบเทียบแต่ละพิกเซลกับ สีเทา 50% แล้วแปลงเป็นสีดำหรือสีขาว
  • ค่าความต่างระหว่างค่าอินพุตและเอาต์พุตที่เกิดขึ้นระหว่างการแปลงจะถูกกระจายไปยังพิกเซลรอบข้าง
    • ตำแหน่ง 2 จุดทางขวาของพิกเซลปัจจุบัน X จุดละ 1/8
    • ตำแหน่ง 3 จุดจากซ้ายในบรรทัดถัดไป จุดละ 1/8
    • ตำแหน่ง 1 จุดทางซ้ายในบรรทัดถัดจากนั้น 1/8

การใช้งานเดโมและข้อกำหนดของเบราว์เซอร์

  • ภาพที่เรนเดอร์แล้วสามารถ คลิกขวาเพื่อบันทึก ได้
  • เนื่องจากข้อจำกัดของเบราว์เซอร์ จึงไม่สามารถ ลากภาพไปบันทึก ลงเดสก์ท็อปได้
  • โค้ดใช้ Canvas, Drag and Drop events, WebWorkers, FileReader API
  • ต้องใช้เบราว์เซอร์รุ่นใหม่เพื่อรัน

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

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

 
GN⁺ 2025-06-08
ความคิดเห็นจาก Hacker News

  • นี่ยังเป็น อัลกอริทึม dithering ขาวดำ ที่ผมชอบที่สุดอยู่ดี
    ตอนเรียนมหาวิทยาลัยมีสแกนเนอร์แบบแท่นขาวดำที่ต่อกับ Mac และน่าจะสแกนภาพแล้วทำเป็นภาพขาวดำได้ผ่าน HyperCard stack
    ตอนเริ่มทำเกมแชร์แวร์บน Mac ราวปี 1988 ผมก็สแกนคลิปอาร์ตจากหนังสือที่ซื้อจากร้านหนังสือมหาวิทยาลัยแบบเร็ว ๆ แล้วเอามาใช้เป็น “โลโก้”
    ตอนนั้นยังไม่รู้ว่า อัลกอริทึม Atkinson ดีแค่ไหน แต่พอภายหลังลอง dither ด้วยอัลกอริทึมอื่น ก็เลยรู้ว่าการกระจายของโค้ดของ Bill ทำได้ดีมากแค่ไหน
    ไม่นานมานี้ตอนทำโปรเจ็กต์ปฏิทิน eInk ผมอยากทำชุดภาพดวงจันทร์หลายข้างให้เป็นภาพสไตล์ “Atkinson” ก็เลยหาเว็บคล้าย ๆ ที่ลิงก์ไว้แล้วใช้ Atkinson dithering กับภาพดวงจันทร์ [1]
    [1] ดูดวงจันทร์ในภาพหน้าจอ: https://github.com/EngineersNeedArt/SystemSix/blob/10f2332b5...

    • สวยจริง ๆ! ถ้ามีที่ให้ดู โค้ดของ Bill ได้ ผมอยากลองเล่นเองแล้วเรียนรู้จากมัน

  • ในกล่องข้อมูลตรง “as follows” ไม่ควรกดจะดีกว่า
    ดูเหมือนจะไม่ได้อัปเดตมาสักพักแล้ว และระหว่างนั้นลิงก์ก็กลายเป็น NSFW ไปแล้ว

    • ไม่มีอะไรรับประกันว่าคนทำเว็บจะเห็นหรือรู้เรื่องเธรดนี้ ดังนั้นถ้าทำได้ก็ควรแจ้งเขาไว้
      เมื่อกี้ผมแจ้งเป็น issue ไว้แล้ว: https://github.com/gazs/canvas-atkinson-dither/issues/2

  • งานทำออกมาเยี่ยมมาก และน่าจะดีขึ้นอีกนิดถ้าส่งค่าให้ download property ของ anchor เพื่อกำหนดชื่อไฟล์เริ่มต้นพร้อมนามสกุล .png ให้ไฟล์ที่ดาวน์โหลด
    อ้างอิง: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorE...

    • ถ้าจะพูดแก้ต่างให้ ตามลิงก์นั้น property นี้เพิ่งมีเบราว์เซอร์รองรับตั้งแต่เดือนมีนาคม 2017[1] และ commit ล่าสุดในคลังของเครื่องมือ dithering นี้ดูแล้วเป็นเดือนมีนาคม 2016
      https://github.com/gazs/canvas-atkinson-dither
      ถึงอย่างนั้นในคลังอื่นเขาก็ยัง active บน GitHub อยู่เรื่อย ๆ เลยอาจจะรับ pull request ก็ได้ :)
      [1]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorE...

  • ทำไมไม่เป็น Sierra dithering ล่ะ?
    https://tannerhelland.com/2012/12/28/dithering-eleven-algori...

    • เดิมทีคงเป็นความคิดถึง Mac รุ่นแรก ๆ และเพราะ Bill Atkinson เพิ่งเสียชีวิตไป ก็เลยน่าจะถูกพูดถึงขึ้นมาอีกครั้ง

  • ผมกำลังค่อย ๆ ทำสิ่งที่จะช่วยแปลงภาพหลายภาพเป็น MacPaint แล้วใส่ลงใน disk image ฟอร์แมต MFS ขนาด 400k ได้
    https://github.com/minorbug/mfsjs
    โปรเจ็กต์นี้นอนเก็บฝุ่นอยู่ในโฮมไดเรกทอรีมาหลายเดือนแล้ว
    ผมใช้ Gemini Deep Research ช่วยทำไลบรารี และใส่ Markdown ที่ LLM สร้างไว้ด้วย เผื่อใครอยากนำไปทำซ้ำหรือปรับปรุงในภาษาอื่น

    • มีเขียนไว้ว่า “ภาพ MacPaint เป็นรูปแบบคงที่ที่ความละเอียด 576 x 720 พิกเซล” แต่มันเป็น รูปแบบคงที่ จริงหรือ?
      ใน Wikipedia ก็เขียนแบบนั้นเหมือนกัน แต่ไม่มีแหล่งอ้างอิง

  • งานทำชิ้นนี้ดีมาก และหน้าตาก็ชวนให้นึกถึงวันเก่า ๆ
    วันนี้ผมยังสงสัยอยู่เลยว่าทำไม web component สำหรับ Atkinson dithering[0] ของผมถึงมียอดเข้าชมเพิ่มขึ้น ที่แท้ก็เพราะข่าวเศร้านี่เอง
    ผมคิดมาตลอดว่าบนจอที่คมมากแบบ Mac ดั้งเดิม Atkinson dithering ให้ภาพที่ดูดีที่สุด
    มันมีอะไรบางอย่างที่เท่และให้บรรยากาศยุค 80 มาก ๆ ผมเลยเอาไปใช้ในเกมเมื่อปีที่แล้วด้วย
    [0] https://sheep.horse/2023/1/improved_web_component_for_pixel-...

    • การทำ dithering ระดับพิกเซลบนหน้าจอ Retina ค่อนข้างมีเอกลักษณ์ทีเดียว
      กับภาพบางภาพสไตล์นี้เข้ากันได้ดีมาก แต่บางภาพก็ไม่ค่อย
      มันให้ความรู้สึกย้อนยุคแบบสมัยใหม่อย่างแปลก ๆ และจุดแต่ละจุดก็ไม่ได้รบกวนสายตาแบบภาพถ่ายเก่าจริง ๆ

  • ถ้าอยากลองทำใน Python ก็มี hyperdither
    https://github.com/tgray/hyperdither

    • ตอนเลื่อนหน้า README ภาพต่าง ๆ จะกลายเป็นสีน้ำตาล

  • น่าจะเหมาะมากกับอุปกรณ์ eInk/ePaper

  • Atkinson คนนี้คือคนเดียวกับ Atkinson ที่เสียชีวิตวันนี้ใช่ไหม แล้วนี่เป็นการไว้อาลัยหรือเปล่า?

    • ก็ประมาณนั้น แต่ commit แรกของคลังนี้มีมาตั้งแต่ 15 ปีก่อนแล้ว ดังนั้นไม่ได้ทำขึ้นมาอย่างรีบ ๆ ให้ทันข่าว
    • ใช่ เขาเป็นคนคิดค้นอัลกอริทึมนี้
      ก็น่าจะเป็นการไว้อาลัยจริง
      แก้จาก “ค้นพบ” เป็น “คิดค้น” ดูอ้างอิงด้านล่าง

  • ผมอยากเรียนรู้อัลกอริทึมนี้ให้มากขึ้นอีกหน่อย เลยทำ https://atkinson.franzai.com/ ขึ้นมา
    ผมเช็กซ้ำกับ AI หลายตัวแล้ว ก็หวังว่าข้อเท็จจริงจะถูกต้อง