Mengubah Foto menjadi Dithering Atkinson

• Mengubah foto ke gaya filter 1-bit Macintosh klasik, menerapkan efek Atkinson dithering hanya dengan piksel hitam-putih
• Setiap piksel menjadi hitam atau putih berdasarkan acuan abu-abu 50%, dan galat konversi disebarkan ke piksel di sekitarnya
• Galat didistribusikan ke 6 posisi di sekitar piksel saat ini, masing-masing 1/8, sehingga menghasilkan gambar hitam-putih bertekstur khas
• Gambar hasil dapat disimpan dengan klik kanan, tetapi karena batasan browser, tidak dapat disimpan dengan menyeretnya ke desktop
• Implementasinya menggunakan Canvas, Drag and Drop events, WebWorkers, dan FileReader API, serta membutuhkan browser modern

---

Cara kerja pemrosesan Atkinson dithering

• Implementasi ini mereproduksi filter 1-bit Macintosh klasik yang digunakan di Hyperdither dan HyperScan
• Prosesnya membandingkan setiap piksel dengan abu-abu 50% lalu mengubahnya menjadi hitam atau putih
• Selisih antara nilai input dan output yang muncul saat konversi disebarkan ke piksel di sekitarnya
  • Masing-masing 1/8 ke 2 posisi di sebelah kanan piksel X saat ini
  • Masing-masing 1/8 ke 3 posisi pada baris berikutnya, dimulai dari kiri
  • 1/8 ke 1 posisi di sebelah kiri pada baris setelahnya

Penggunaan demo dan persyaratan browser

• Gambar yang dirender dapat disimpan dengan klik kanan
• Karena batasan browser, gambar tidak dapat disimpan dengan cara diseret ke desktop
• Kode menggunakan API Canvas, Drag and Drop events, WebWorkers, dan FileReader
• Untuk menjalankannya diperlukan browser modern

[GN⁺]

Komentar Hacker News

• Ini masih algoritma dithering hitam-putih favorit saya
  Di kampus dulu ada pemindai flatbed hitam-putih yang terhubung ke Mac, dan kalau tidak salah kami bisa memindai gambar lewat HyperCard stack lalu menjadikannya gambar hitam-putih
  Sekitar tahun 1988, ketika saya mulai membuat game shareware untuk Mac, saya dengan cepat memindai buku clipart yang dibeli di toko buku kampus dan memakainya sebagai “logo”
  Saat itu saya belum tahu seberapa bagus algoritma Atkinson, tetapi setelah mencoba dithering dengan algoritma lain belakangan, saya menyadari betapa baiknya difusi dalam kode Bill
  Baru-baru ini, saat membuat proyek kalender eInk, saya ingin membuat serangkaian gambar fase bulan dengan gaya “Atkinson”, jadi saya mencari situs yang mirip dengan tautan ini dan menerapkan dithering Atkinson pada foto bulan [1]
  [1] Lihat bulan pada tangkapan layar: https://github.com/EngineersNeedArt/SystemSix/blob/10f2332b5...

  • Benar-benar indah! Kalau ada tempat untuk melihat kode Bill, saya ingin mengutak-atiknya langsung dan belajar darinya

• Sebaiknya jangan klik “as follows” di dialog informasi
  Sepertinya sudah lama tidak diperbarui, dan sementara itu tautannya berubah menjadi NSFW

  • Tidak ada jaminan pembuat situs akan melihat atau mengetahui thread ini, jadi kalau bisa sebaiknya diberi tahu
    Saya baru saja melaporkannya sebagai issue: https://github.com/gazs/canvas-atkinson-dither/issues/2

• Implementasinya bagus, dan akan sedikit lebih baik jika memberi nilai pada atribut download milik anchor agar file unduhan punya nama default dan ekstensi .png
  Referensi: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorE...

  • Sebagai pembelaan, menurut tautan itu atribut tersebut didukung browser sejak Maret 2017[1], sedangkan commit terbaru di repositori alat dithering ini tampaknya dari Maret 2016
    https://github.com/gazs/canvas-atkinson-dither
    Meski begitu, ia masih aktif di GitHub pada repositori lain, jadi mungkin saja pull request akan diterima :)
    [1]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorE...

• Kenapa bukan dithering Sierra?
  https://tannerhelland.com/2012/12/28/dithering-eleven-algori...

  • Awalnya ini soal nostalgia terhadap Mac awal, dan tampaknya kembali muncul karena Bill Atkinson baru saja meninggal dunia

• Saya sedang mengerjakan, di sela-sela waktu, sesuatu yang memungkinkan banyak gambar dikonversi ke MacPaint lalu dimasukkan ke disk image berformat MFS 400k
  https://github.com/minorbug/mfsjs
  Proyek ini sudah beberapa bulan agak berdebu di direktori home saya
  Saya dibantu Gemini Deep Research dalam membuat library-nya, dan saya juga menyertakan Markdown yang dihasilkan LLM untuk siapa pun yang ingin mereproduksi atau memperbaikinya dalam bahasa lain

  • Tertulis “gambar MacPaint adalah format tetap dengan resolusi 576 x 720 piksel”, tetapi apakah benar-benar format tetap?
    Wikipedia juga menulis begitu, tetapi tanpa sumber

• Implementasi ini hebat dan antarmukanya juga membangkitkan nostalgia
  Saya sempat bertanya-tanya kenapa web component dithering Atkinson[0] saya hari ini mendapat peningkatan kunjungan, ternyata karena kabar duka
  Saya selalu berpikir dithering Atkinson menghasilkan gambar yang paling enak dilihat pada monitor yang sangat tajam seperti Mac asli
  Ada sesuatu yang keren dan terasa 80-an, jadi saya juga memakainya di game tahun lalu
  [0] https://sheep.horse/2023/1/improved_web_component_for_pixel-...

  • Dithering per piksel pada layar Retina terasa cukup unik
    Untuk beberapa foto gayanya cukup cocok, untuk foto lain tidak
    Anehnya terasa jadul yang modern, dan titik-titik individualnya tidak mengganggu seperti pada foto lama sungguhan

• Kalau ingin mencobanya dengan Python, ada hyperdither
  https://github.com/tgray/hyperdither

  • Saat menggulir, gambar-gambar di README berubah menjadi cokelat

• Sepertinya sangat cocok untuk perangkat eInk/ePaper

• Apakah ini orang yang sama dengan Atkinson yang meninggal hari ini, dan apakah ini semacam penghormatan?

  • Sampai taraf tertentu ya, tetapi commit pertama repositorinya 15 tahun lalu, jadi ini bukan sesuatu yang buru-buru dibuat mengikuti berita
  • Benar, dialah yang menemukan algoritma ini
    Kemungkinan memang penghormatan
    Saya koreksi dari “menemukan” menjadi “menciptakan”. Lihat di bawah

• Saya membuat https://atkinson.franzai.com/ karena ingin mempelajari algoritma itu sedikit lebih jauh
  Saya sudah mengeceknya ulang dengan beberapa AI, semoga faktanya benar