- Proyek ini mengimplementasikan Atkinson Dithering, filter Macintosh 1-bit klasik, di web
- Membandingkan gambar masukan dengan abu-abu 50% lalu mengubahnya menjadi hitam-putih, kemudian mendistribusikan selisihnya ke piksel tetangga
- Memanfaatkan teknologi browser modern seperti Canvas, Drag & Drop, WebWorkers, FileReader
- Gambar hasil konversi dapat disimpan dengan klik kanan
- Menyimpan gambar dengan drag tidak didukung karena batasan browser
Pentingnya proyek open source ini dan keunggulannya
- Atkinson Dithering adalah efek grafis Macintosh klasik yang digunakan di Hyperdither dan HyperScan
- Dengan menyederhanakan informasi warna gambar yang kompleks pada tingkat piksel, teknik ini berguna untuk membuat gambar hitam-putih yang ringan
- Karena merupakan implementasi berbasis web, ini dapat digunakan hanya dengan browser modern tanpa perangkat lunak tambahan
- Melalui WebWorkers, eksekusi asinkron dan optimasi performa dimungkinkan saat memproses gambar berukuran besar
- Sebagai kode open source, proyek ini mudah untuk diperluas fungsinya dan dikustomisasi
Ringkasan algoritme Atkinson Dithering
- Setiap piksel dibandingkan dengan nilai abu-abu 50% lalu diubah menjadi hitam-putih
- Nilai selisih yang dihasilkan dari konversi kemudian didistribusikan ke 6 piksel di sekitarnya sebagai berikut
(X: piksel saat ini, dibagikan masing-masing 1/8)
- X 1/8 1/8
- 1/8 1/8 1/8
- 1/8
- Dengan cara ini, efek dithering diterapkan ke seluruh gambar
Implementasi dan cara penggunaan
- File gambar dimasukkan dengan drag and drop ke browser atau melalui fitur pemilihan file
- Menggunakan API Canvas untuk mengonversi dan merender gambar secara real-time
- Menggunakan FileReader untuk membaca data gambar,
- dan WebWorkers untuk menjalankan proses dithering di latar belakang
- Gambar yang telah dikonversi dapat disimpan melalui klik kanan
(karena keterbatasan browser, gambar tidak dapat langsung diseret ke desktop untuk disimpan)
Tumpukan teknologi dan lingkungan yang didukung
- Secara aktif memanfaatkan API terbaru dari HTML5 dan JavaScript
- Memerlukan lingkungan browser modern, dan beberapa fitur mungkin terbatas di browser lama
Kesimpulan
- Menyediakan implementasi web filter Atkinson Dithering yang sederhana dan intuitif
- Memiliki potensi pemanfaatan yang tinggi di berbagai bidang seperti pengembang grafis, artwork, dan peringanan gambar
1 komentar
Komentar Hacker News
Ini masih algoritma dither hitam-putih favorit saya.
Saat kuliah, saya pernah menghubungkan pemindai flatbed B&W ke Mac dan memindai gambar dengan program mirip HyperCard stack untuk membuat gambar hitam-putih.
Saya memindai sederhana gambar dari buku clipart yang dibeli di toko buku kampus dan memakainya sebagai "logo" untuk game shareware Mac yang mulai saya tulis sekitar tahun 1988.
Waktu itu saya belum tahu betapa kerennya algoritma Atkinson, tetapi belakangan setelah mencoba algoritma dithering lain, saya sadar cara difusi pada kode Bill benar-benar luar biasa.
Belakangan ini, untuk proyek kalender eInk, saya mencari situs terkait karena ingin mengubah berbagai gambar fase Bulan ke gaya Atkinson, lalu mengonversi gambar Bulan.
Sebaiknya jangan klik tautan "as follows" di info dialog.
Karena sudah lama tidak diperbarui, sekarang tautan itu berubah menjadi tautan NSFW (tidak pantas dibuka di kantor atau tempat umum).
Implementasi ini benar-benar hebat.
Saat mengunduh, pengalaman unduh bisa sedikit ditingkatkan dengan memberi nilai pada atribut
downloadmilik anchor agar file punya nama bawaan dan ekstensi .png.Referensi: dokumentasi HTMLAnchorElement.download
downloaditu, seperti di tautan yang kamu bagikan, baru mulai didukung browser sejak Maret 2017.Sebaliknya, commit terakhir di repositori alat dithering itu tampaknya pada Maret 2016.
Penulisnya masih aktif di GitHub lewat repositori lain, jadi semoga saja mereka mau menerima pull request.
Tautan: repositori GitHub canvas-atkinson-dither
Saya juga punya proyek yang sedang dikembangkan, yang memungkinkan beberapa gambar diubah ke MacPaint lalu dijadikan image disk format 400k MFS.
Tautan: proyek mfsjs
Selama beberapa bulan sempat agak terbengkalai di home directory saya, tetapi baru-baru ini saya melengkapi library-nya dengan Gemini Deep Research.
Saya juga menyertakan markdown yang dihasilkan LLM bagi siapa pun yang ingin mereproduksi atau menyempurnakannya dalam bahasa lain.
Kalau ingin mencoba Atkinson dithering dengan Python,
saya rekomendasikan proyek hyperdither.
Implementasinya keren, dan antarmukanya juga terasa nostalgik.
Belakangan trafik ke web component Atkinson dithering saya[0] meningkat, jadi saya sempat bertanya-tanya kenapa, lalu ternyata ada kabar sedih ini.
Secara pribadi, saya merasa Atkinson dithering memang menghasilkan gambar paling indah di monitor yang benar-benar tajam seperti Mac asli.
Ada nuansa keren dan sangat 80-an, jadi saya juga memakainya untuk game yang saya buat tahun lalu.
[0]: web component Atkinson dithering presisi per piksel
Alat serupa yang saya buat beberapa tahun lalu.
alat dithering Beyond Loom
Menarik bahwa salah satu opsi ukuran adalah 512x384, padahal resolusi Mac asli adalah 512x342.
Memang benar Mac awal punya resolusi layar 512x342.
Info terkait: resolusi Macintosh original
Ralat: setelah membaca lagi, ternyata sebenarnya kamu benar.
Rasanya itu bukan kebetulan.
UI-nya lucu, dan tautan GitHub untuk demonya juga layak dilihat.
repositori GitHub canvas-atkinson-dither
Apakah ini orang yang sama dengan Atkinson yang meninggal hari ini? Dan apakah ini proyek untuk mengenangnya?
Bisa dibilang sebagian benar.
Tetapi commit pertama repositori ini sudah 15 tahun lalu, jadi ini bukan sesuatu yang buru-buru dibuat setelah mendengar kabar terbaru.
Ya, algoritma ini memang "diciptakan" oleh Atkinson sendiri.
Tadi saya menulis "ditemukan", tetapi "diciptakan" lebih tepat.