แปลงภาพเป็น Atkinson Dithering

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

ความสำคัญและจุดเด่นของโปรเจกต์โอเพนซอร์ส

  • Atkinson Dithering เป็น เอฟเฟกต์กราฟิก Macintosh แบบคลาสสิก ที่ใช้ใน Hyperdither และ HyperScan
  • ช่วยแปลงข้อมูลสีของภาพที่ซับซ้อนให้เรียบง่ายในระดับพิกเซล จึงมีประโยชน์ต่อการสร้าง ภาพขาวดำขนาดเบา
  • ด้วยการเป็น เว็บแอป จึงใช้งานได้ผ่านเบราว์เซอร์สมัยใหม่โดยไม่ต้องติดตั้งซอฟต์แวร์เพิ่มเติม
  • ผ่าน WebWorkers จึงสามารถ รันแบบอะซิงโครนัสและปรับประสิทธิภาพ เมื่อต้องประมวลผลภาพขนาดใหญ่
  • ด้วยโค้ดโอเพนซอร์ส จึง ขยายความสามารถและปรับแต่ง ได้ง่าย

ภาพรวมของอัลกอริทึม Atkinson Dithering

  • แปลงแต่ละพิกเซลเป็นขาวดำโดย เปรียบเทียบกับค่าสีเทา 50%
  • ค่าความต่างที่เกิดจากการแปลงจะถูก กระจายไปยังพิกเซลรอบข้าง 6 จุด ดังนี้
    (X: พิกเซลปัจจุบัน, กระจายจุดละ 1/8)
    • X 1/8 1/8
    • 1/8 1/8 1/8
    • 1/8
  • วิธีนี้ทำให้เกิดเอฟเฟกต์ dithering กับทั้งภาพ

วิธีการทำงานและการใช้งาน

  • นำเข้าภาพโดย ลากแล้ววาง ไฟล์ลงในเบราว์เซอร์ หรือเลือกไฟล์ผ่านฟังก์ชันเลือกไฟล์
  • ใช้ Canvas API เพื่อแปลงและเรนเดอร์ภาพแบบเรียลไทม์
  • ใช้ FileReader เพื่ออ่านข้อมูลภาพ
  • ใช้ WebWorkers เพื่อประมวลผล dithering แบบ เบื้องหลัง
  • ภาพที่แปลงแล้วสามารถบันทึกได้ด้วยการ คลิกขวา
    (ด้วยข้อจำกัดของเบราว์เซอร์ จึงไม่สามารถลากภาพไปวางบนเดสก์ท็อปเพื่อบันทึกได้โดยตรง)

เทคโนโลยีที่ใช้และสภาพแวดล้อมที่รองรับ

  • ใช้งาน API สมัยใหม่ของ HTML5 และ JavaScript อย่างเต็มที่
  • ต้องใช้ เบราว์เซอร์สมัยใหม่ และบางฟีเจอร์อาจถูกจำกัดในเบราว์เซอร์รุ่นเก่า

สรุป

  • มอบ เวอร์ชันเว็บของฟิลเตอร์ Atkinson Dithering ที่เรียบง่ายและใช้งานตรงไปตรงมา
  • มีศักยภาพในการนำไปใช้ได้หลากหลายด้าน เช่น นักพัฒนากราฟิก งานอาร์ตเวิร์ก และการทำภาพให้มีขนาดเบา

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

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

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

  • นี่ยังเป็นอัลกอริทึม dithering ขาวดำที่ผมชอบที่สุดอยู่ดี
    ตอนมหาวิทยาลัยผมเคยต่อสแกนเนอร์แบบฟลัตเบดขาวดำเข้ากับ Mac แล้วสแกนภาพด้วยโปรแกรมแนว HyperCard stack เพื่อทำภาพขาวดำ
    ผมสแกนภาพจากหนังสือคลิปอาร์ตที่ซื้อจากร้านหนังสือของมหาวิทยาลัยแบบง่าย ๆ แล้วเอาไปใช้เป็น "โลโก้" ของเกมแชร์แวร์บน Mac ที่เริ่มเขียนราวปี 1988
    ตอนนั้นยังไม่รู้ว่าอัลกอริทึมของ Atkinson เจ๋งแค่ไหน แต่พอภายหลังได้ลองใช้อัลกอริทึม dithering อื่น ๆ ก็ถึงได้ตระหนักว่าวิธีกระจายค่าของโค้ดของ Bill นั้นยอดเยี่ยมจริง ๆ
    ช่วงหลังมานี้ ผมอยากแปลงภาพหลายเฟสของดวงจันทร์ให้เป็นสไตล์ Atkinson สำหรับโปรเจ็กต์ปฏิทิน eInk เลยไปหาเว็บไซต์ที่เกี่ยวข้องแล้วแปลงภาพดวงจันทร์

  • ไม่ควรกดลิงก์ "as follows" ใน info dialog
    เพราะไม่ได้อัปเดตมานาน ตอนนี้มันกลายเป็นลิงก์ NSFW (ไม่เหมาะเปิดดูในที่ทำงานหรือที่สาธารณะ) ไปแล้ว

  • งานทำชิ้นนี้ยอดเยี่ยมมาก
    ตอนดาวน์โหลด ถ้าใส่ค่าให้กับแอตทริบิวต์ "download" ของ anchor ก็จะตั้งชื่อไฟล์เริ่มต้นพร้อมนามสกุล .png ได้ ทำให้ประสบการณ์ดาวน์โหลดดีขึ้นอีกนิด
    อ้างอิง: เอกสาร HTMLAnchorElement.download

    • ถ้าจะช่วยแก้ต่างให้หน่อย แอตทริบิวต์ download นั้นเพิ่งเริ่มมีเบราว์เซอร์รองรับตามที่คุณลิงก์ไว้ตั้งแต่เดือนมีนาคม 2017
      ขณะที่คอมมิตล่าสุดของคลังเก็บเครื่องมือ dithering นี้ดูเหมือนจะเป็นเดือนมีนาคม 2016
      ผู้เขียนยังคงทำงานบน GitHub ในคลังเก็บอื่น ๆ อยู่ ดังนั้นก็น่าหวังว่าเขาน่าจะรับ pull request ได้
      ลิงก์: คลังเก็บ GitHub ของ canvas-atkinson-dither

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

  • ถ้าอยากลองทำ Atkinson dithering ด้วย Python
    ขอแนะนำโปรเจ็กต์ hyperdither

  • ทั้งตัว implementation ก็ดี และอินเทอร์เฟซก็ชวนให้นึกถึงวันเก่า ๆ
    ช่วงนี้เว็บคอมโพเนนต์ Atkinson dithering[0] ของผมมีคนเข้าเพิ่มขึ้นจนผมสงสัยว่าเกิดอะไรขึ้น ที่แท้ก็มีข่าวเศร้าแบบนี้นี่เอง
    ส่วนตัวผมรู้สึกว่า Atkinson dithering ให้ภาพที่สวยที่สุดบนจอที่คมมาก ๆ แบบ Mac ดั้งเดิม
    มันมีความเท่และกลิ่นอายยุค 80s บางอย่าง เลยเอาไปใช้ในเกมที่ผมทำเมื่อปีที่แล้วด้วย
    [0]: เว็บคอมโพเนนต์ Atkinson dithering แบบแม่นยำระดับพิกเซล

    • ว้าว เป็นเว็บคอมโพเนนต์ที่เจ๋งมาก

  • นี่คือเครื่องมือคล้าย ๆ กันที่ผมทำไว้เมื่อหลายปีก่อน
    เครื่องมือ dithering ของ Beyond Loom

  • น่าสนใจที่ตัวเลือกขนาดอันหนึ่งเป็น 512x384 ทั้งที่ความละเอียดของ Mac ดั้งเดิมคือ 512x342

    • Mac ยุคแรก ๆ ใช้ความละเอียดหน้าจอ 512x342 จริง
      ข้อมูลที่เกี่ยวข้อง: ความละเอียดของ Macintosh ดั้งเดิม
      แก้ไข: พอกลับไปอ่านอีกที จริง ๆ แล้วคุณพูดถูก

    • รู้สึกว่าไม่น่าใช่เรื่องบังเอิญ

  • UI น่ารักดี และลิงก์ GitHub ของเดโมก็น่าดูด้วย
    คลังเก็บ GitHub ของ canvas-atkinson-dither

  • นี่คือ Atkinson คนเดียวกับที่เสียชีวิตวันนี้หรือเปล่า? แล้วนี่เป็นโปรเจ็กต์เพื่อรำลึกถึงเขาไหม?

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

    • ใช่ อัลกอริทึมนี้ Atkinson เป็นคน "ประดิษฐ์" เอง
      คุณใช้คำว่า "ค้นพบ" แต่คำว่า "ประดิษฐ์" น่าจะตรงกว่า