Dithering – Bagian 1
(visualrambling.space)- Menjelaskan prinsip mereproduksi beberapa tingkat gradasi terang-gelap secara visual dengan susunan piksel hitam-putih
- Dithering adalah teknik untuk menampilkan lebih banyak warna atau tingkat gradasi daripada yang sebenarnya melalui ilusi optik
- Dalam metode ordered dithering, threshold map digunakan untuk menentukan hitam atau putih berdasarkan kecerahan tiap piksel
- Dalam proses ini, perubahan kepadatan piksel menciptakan kesan grayscale sambil mempertahankan bentuk gambar asli
- Artikel ini adalah bagian pertama dari trilogi yang membahas konsep dasar dithering, dan selanjutnya akan membahas algoritme pembuatan threshold map serta error diffusion
Konsep dan prinsip dithering
- Dithering adalah teknik visual untuk mengekspresikan lebih banyak gradasi dengan warna yang terbatas
- Menyusun piksel hitam-putih dalam pola tertentu untuk menghasilkan ilusi beberapa tingkat grayscale
- Menghadirkan keragaman visual tanpa benar-benar menambah jumlah warna
- Artikel ini menggunakan gambar grayscale sebagai contoh
- Pada layar yang hanya bisa menampilkan hitam-putih, tiap piksel diubah ke warna terdekat (hitam atau putih)
- Jika dikonversi secara sederhana, batas terang-gelap menjadi kasar dan detail bayangan hilang
- Dithering mewujudkan transisi terang-gelap yang lebih halus dengan sengaja mengubah sebagian piksel ke warna kebalikannya
- Di area gelap, kepadatan piksel hitam ditingkatkan; di area terang, kepadatan piksel putih ditingkatkan
- Hasilnya, perbedaan kepadatan piksel membentuk ilusi grayscale
Ordered dithering dan threshold map
- Ordered dithering adalah metode dithering sederhana yang menggunakan threshold map
- Threshold map terdiri dari grid nilai kecerahan dari 0 (paling gelap) hingga 1 (paling terang)
- Kecerahan tiap piksel input dibandingkan dengan threshold pada posisi yang соответствующем
- Jika kecerahannya lebih besar dari threshold, ditetapkan sebagai putih; jika lebih kecil, sebagai hitam
- Proses ini diulangi untuk semua piksel sehingga menghasilkan gambar berpola hitam-putih
- Threshold map dirancang agar menghasilkan pola kepadatan hitam-putih yang sesuai dengan distribusi kecerahan gambar input
- Area terang memiliki proporsi putih yang lebih tinggi, sementara area gelap memiliki proporsi hitam yang lebih tinggi
- Perbedaan kepadatan ini menciptakan efek yang terlihat seperti grayscale dari kejauhan
Pemrosesan gambar besar dan efek visual
- Saat melakukan dithering pada gambar besar, threshold map diperluas agar sesuai dengan ukuran keseluruhan gambar
- Prinsip yang sama diterapkan: membandingkan kecerahan tiap piksel dengan threshold untuk mengubahnya menjadi hitam atau putih
- Hasilnya, gambar hanya menggunakan dua warna, tetapi tetap mempertahankan struktur terang-gelap aslinya
- Jumlah warna berkurang, namun detail visual tetap terjaga melalui perubahan kepadatan piksel
Makna dithering dan susunan seri
- Dithering adalah teknik yang menciptakan keragaman visual bukan dengan menambah warna, melainkan dengan menguranginya
- Penulis menggambarkannya sebagai “proses memaksimalkan apa yang dimiliki”
- Artikel ini adalah bagian pertama dari trilogi dan berfokus pada prinsip dasar serta pemahaman visual
- Artikel berikutnya akan membahas algoritme pembuatan threshold map, dan artikel terakhir akan membahas error diffusion
- Seri ini berencana mengeksplorasi berbagai pendekatan algoritmik dalam dithering dan perbedaan hasil visualnya
Pengenalan penulis dan proyek
- visualrambling.space adalah proyek pribadi yang dijalankan oleh Damar
- Membuat konten interaktif yang mengeksplorasi dan menjelaskan berbagai topik secara visual
- Topik yang dibahas mencakup Three.js, WebGL, dithering, visualisasi, dan pembelajaran interaktif
- Damar akan terus membagikan artikel visual baru melalui akun X/Twitter miliknya (@damarberlari)
2 komentar
Komentar Hacker News
Ini adalah teknik halftone. Artinya, ini adalah cara membuatnya tampak seolah memiliki lebih banyak warna daripada palet aslinya, tetapi menurut saya ini bukan dithering
Saya menganggap dithering sebagai teknik untuk menghilangkan banding yang muncul karena palet tidak cukup besar
Halftone yang ditunjukkan di sini memperluas palet 2 warna menjadi sekitar 20 warna, tetapi bandingnya masih terlihat jelas
Banding seperti ini bisa dihilangkan dengan memakai jauh lebih banyak warna (misalnya grayscale 256 tingkat, atau 256³ untuk RGB) atau dengan dithering
Mungkin teknik error diffusion yang diisyaratkan di bagian akhir adalah yang saya maksud
Inti dari dithering adalah noise, tetapi demo ini sama sekali tidak memiliki noise. Semuanya deterministik
Meski begitu, presentasinya sendiri benar-benar keren
Secara umum, noise muncul dalam proses quantization, dan dithering adalah teknik untuk membentuk noise tersebut
Bayer-matrix ordered dithering yang digunakan di sini memusatkan noise ke frekuensi tinggi agar kurang terlihat oleh mata, tetapi banding masih tersisa di frekuensi rendah
Seperti yang dikatakan Dave Long, algoritme garis Bresenham juga bisa dianggap sebagai sejenis dithering. Bedanya, sinyalnya bukan tingkat kecerahan melainkan posisi pena
Ada diskusi terkait beberapa hari lalu — lihat thread ini
Artikel Wikipedia
Dulu mesin warna NeXT punya layar 12-bit (4-bit per kanal), tetapi dengan dithering yang bagus tampilannya bisa terlihat seperti true color 24-bit
Saya merekomendasikan dua video dari Daniel Shiffman di Coding Train
Turning Images into Dots: The Magic of Dithering
Coding Challenge 181: Weighted Voronoi Stippling
Topiknya menarik. Animasinya juga bagus dan terasa ada banyak usaha di baliknya
Tapi presentasi interaktif seperti ini lebih sulit dibaca daripada tulisan blog tradisional
Struktur tulisannya tidak langsung terlihat, dan karena harus dibaca kalimat demi kalimat, jadi sulit untuk dipindai cepat
Rasanya seperti video interaktif di mana pengguna bisa mengatur kecepatannya
Saya sendiri biasanya lebih suka teks, tetapi menurut saya format seperti ini adalah variasi yang menarik
Saya pernah memakai ordered dan error diffusion dithering sebagai bahasa visual dalam beberapa proyek desain
Terutama dalam pekerjaan terkait teknologi/komputer/blockchain, baik dalam bentuk statis maupun animasi
Ada semacam kehangatan dan nostalgia yang unik pada teknik lama seperti ini, jadi cocok dipadukan dengan ide-ide baru
Contoh pekerjaan saya ada di Instagram:
D.Y.O.R. / Printed / Titles / Eksperimen dithering
Lihat situs saya di olsz.me
Saya pernah membuat transisi antara dua jenis dithering
Proyek GitHub
Saya benar-benar ingin menyukai ini, tetapi membaca teks di atas pola yang bergerak terlalu sulit
Cara visualisasinya keren, tetapi saya tidak paham bagian threshold map
Penjelasannya kurang tentang bagaimana map itu dibuat dan bagaimana nilai threshold ditentukan
Saya tidak tahu apakah itu dihilangkan karena terlalu jelas bagi penulisnya
Kuncinya adalah mengingat konsep ‘threshold’. Piksel abu-abu berubah menjadi hitam atau putih berdasarkan threshold
Misalnya
dithered_color = (raw_color > threshold_color) ? white : blackThreshold juga bisa dibuat acak. Jika nilai rata-ratanya 0,5, itu akan cukup baik mendekati abu-abu asli
Yang penting adalah memastikan saat jumlah piksel putih bertambah, piksel-piksel itu tidak saling menempel.
Abu-abu 50% bisa dirancang sebagai pola checkerboard, 25% sebagai hanya satu piksel putih dalam 2x2, dan seterusnya
Eksperimen seperti ini seru kalau dicoba langsung di ShaderToy
Awalnya saya kira input-nya adalah ‘gambar biner’, tetapi belakangan ternyata yang dipakai adalah area abu-abu
Dithering bisa membuat monitor yang tidak mendukung warna 10-bit tetap terlihat cukup seperti 10-bit
Banding hilang, dan noise menyamarkan kurangnya kedalaman warna
Jadi, ini masih teknik yang berguna di era modern. Bukan cuma untuk seni retro
Orang masih cenderung hanya membayangkan palette dithering
8-bit per kanal itu tidak cukup. Karena koreksi gamma, secara efektif hanya sekitar 220 tingkat
Saya merawat crate Rust dithereens untuk mengatasi masalah seperti ini
Kalau melihat gradien di bagian atas README, langsung terlihat kenapa ini penting
Saat gambar bit tinggi diturunkan ke 10-bit atau 8-bit, random dithering sudah cukup efektif
Photoshop secara default menerapkan dithering saat mengonversi 16-bit ke 8-bit
Software lain tidak begitu, jadi saat mencetak poster besar dan muncul banding, Anda langsung sadar
Panel TN 6-bit dibuat terlihat seperti 8-bit, dan sekarang ini juga dipakai untuk HDR-10
Metode ini adalah algoritme sederhana yang mencampur warna dengan membuat piksel berkedip cepat
Artikel wiki tentang Frame rate control
Format presentasinya luar biasa dan saya menantikan bagian berikutnya
Dulu saya pernah memakai ordered dithering di ZX Spectrum Raytracer, implementasinya sederhana dan hasilnya bagus
Tautan proyek
Sepertinya teknik ini tidak terlalu sering dipakai di era 80-an karena masalah performa. Saya ingat melihatnya di latar Windows 3.1 atau Monkey Island VGA pada era 90-an
Demonya keren, tetapi menyebut dithering sebagai “ilusi lebih banyak tingkat warna” rasanya kurang tepat
Jika gambar yang sudah didither diproses dengan low-pass filter, tingkat warna menengah itu benar-benar ada
Mirip seperti amplifier kelas D yang mengeluarkan sinyal pulsa, tetapi setelah difilter hasilnya menjadi suara analog yang nyata
Pada akhirnya, penglihatan kita dan jarak pandang kita sendiri yang berperan sebagai filter itu
Kalau diperhatikan saksama, kita tahu warna itu sebenarnya tidak ada
Kita memang mengenali abu-abu dari piksel hitam-putih saja, tetapi pada saat yang sama kita juga sadar itu adalah ilusi optik
Jadi menurut saya istilah ‘illusion’ tetap tepat
Dengan mengesampingkan teks dan menyampaikan materi hanya lewat video di auditorium sebagai pendekatan menuju video interaktif, ini adalah item yang sangat keren sampai rasanya bisa merobek podium. Adegan yang menampilkan grayscale gambar sebagai lapisan 3D menurut saya merupakan penjelasan yang sangat ramah.