- श्वेत-श्याम पिक्सेल ऐरे के जरिए कई स्तरों की चमक को दृश्य रूप में पुनर्निर्मित करने के सिद्धांत की व्याख्या
- डिथरिंग (dithering) वास्तव में मौजूद रंगों या टोन से अधिक को दृष्टि-भ्रम के जरिए व्यक्त करने की तकनीक है
- Ordered dithering विधि में हर पिक्सेल की चमक के आधार पर काला या सफेद तय करने के लिए threshold map का उपयोग किया जाता है
- इस प्रक्रिया में पिक्सेल घनत्व में बदलाव ग्रेस्केल जैसा एहसास पैदा करता है और मूल इमेज का रूप बनाए रखता है
- यह लेख डिथरिंग की बुनियादी अवधारणाओं पर आधारित 3-भागीय श्रृंखला का पहला भाग है; आगे threshold map generation algorithm और error diffusion पर चर्चा की जाएगी
डिथरिंग की अवधारणा और सिद्धांत
- डिथरिंग सीमित रंगों के साथ अधिक टोन व्यक्त करने की एक दृश्य तकनीक है
- काले और सफेद पिक्सेल को खास पैटर्न में सजाकर ग्रेस्केल के कई स्तरों का दृष्टि-भ्रम बनाया जाता है
- वास्तविक रंगों की संख्या बढ़ाए बिना दृश्य विविधता हासिल की जाती है
- लेख में उदाहरण के तौर पर ग्रेस्केल इमेज का उपयोग किया गया है
- केवल काला और सफेद दिखा सकने वाली स्क्रीन पर हर पिक्सेल को सबसे नज़दीकी रंग (काला या सफेद) में बदला जाता है
- साधारण रूपांतरण में चमक की सीमाएँ खुरदरी हो जाती हैं और बारीक shadow detail खो जाती है
- डिथरिंग कुछ पिक्सेल को जानबूझकर विपरीत रंग में बदलकर मुलायम टोन ट्रांज़िशन बनाता है
- गहरे हिस्सों में काले पिक्सेल का घनत्व बढ़ाया जाता है, और उजले हिस्सों में सफेद पिक्सेल का घनत्व बढ़ाया जाता है
- नतीजतन पिक्सेल घनत्व का अंतर ग्रेस्केल का दृष्टि-भ्रम बनाता है
Ordered Dithering और threshold map
- Ordered dithering, threshold map का उपयोग करने वाली एक सरल डिथरिंग विधि है
- threshold map, 0 (सबसे गहरा) से 1 (सबसे उजला) तक के brightness value grid से बना होता है
- हर input pixel की brightness को उसी स्थान के threshold value से तुलना की जाती है
- brightness threshold से अधिक हो तो सफेद, कम हो तो काला सेट किया जाता है
- इस प्रक्रिया को सभी पिक्सेल पर दोहराकर काला-सफेद पैटर्न वाली इमेज बनाई जाती है
- threshold map को इस तरह डिज़ाइन किया जाता है कि वह input image की brightness distribution के अनुसार उपयुक्त काला-सफेद density pattern आउटपुट करे
- उजले क्षेत्रों में सफेद का अनुपात अधिक होता है और गहरे क्षेत्रों में काले का अनुपात अधिक होता है
- यह घनत्व अंतर दूर से देखने पर ग्रेस्केल जैसा दिखने वाला प्रभाव पैदा करता है
बड़ी इमेज प्रोसेसिंग और दृश्य प्रभाव
- बड़ी इमेज पर डिथरिंग करते समय threshold map को फैलाकर पूरी इमेज के आकार के अनुरूप बनाया जाता है
- हर पिक्सेल की brightness को threshold से तुलना कर काला या सफेद बनाने का वही सिद्धांत लागू होता है
- नतीजतन इमेज सिर्फ दो रंगों का उपयोग करती है, लेकिन मूल इमेज की टोनल संरचना बनाए रखती है
- रंगों की संख्या कम हो जाती है, फिर भी पिक्सेल घनत्व में बदलाव से दृश्य विवरण बना रहता है
डिथरिंग का महत्व और श्रृंखला की संरचना
- डिथरिंग रंग जोड़ने की नहीं, बल्कि रंग हटाते हुए दृश्य विविधता बनाने की तकनीक है
- लेखक इसे “जो उपलब्ध है, उसी से अधिकतम निकालने की प्रक्रिया” के रूप में व्यक्त करते हैं
- यह लेख 3-भागीय श्रृंखला का पहला भाग है और बुनियादी सिद्धांतों तथा दृश्य समझ पर केंद्रित है
- अगले लेख में threshold map generation algorithm, और अंतिम लेख में error diffusion पर चर्चा होगी
- यह श्रृंखला डिथरिंग के विभिन्न algorithmic approaches और visual results के अंतर का अन्वेषण करेगी
लेखक और प्रोजेक्ट का परिचय
- visualrambling.space Damar द्वारा संचालित एक व्यक्तिगत प्रोजेक्ट है
- यह विभिन्न विषयों को दृश्य रूप से खोजने और समझाने वाली interactive content बनाता है
- इसके विषयों में Three.js, WebGL, डिथरिंग, visualization, interactive learning आदि शामिल हैं
- Damar अपने X/Twitter अकाउंट(@damarberlari) के जरिए नए visual articles लगातार साझा करने वाले हैं
2 टिप्पणियां
Hacker News राय
यह halftone तकनीक है। यानी ऐसा तरीका जिसमें लगता है कि असली palette से ज़्यादा रंग हैं, लेकिन मेरी नज़र में यह dithering नहीं है
मेरे हिसाब से dithering वह तकनीक है जो palette के पर्याप्त बड़ा न होने से बनने वाली banding को हटाती है
यहाँ दिखाया गया halftone 2-रंग palette को लगभग 20 रंगों तक बढ़ा देता है, लेकिन banding फिर भी साफ़ दिखती है
ऐसी banding को या तो बहुत ज़्यादा रंगों से हटाया जा सकता है (जैसे 256-step grayscale, या RGB में 256³) या फिर dithering से
शायद अंत में जिस error diffusion तकनीक का संकेत दिया गया है, वही वह चीज़ है जिसकी मैं बात कर रहा हूँ
dithering का मूल तत्व noise है, लेकिन इस demo में बिल्कुल noise नहीं है। सब कुछ deterministic है
फिर भी presentation अपने-आप में वाकई शानदार थी
आम तौर पर noise quantization प्रक्रिया में पैदा होता है, और dithering उस noise को shape करने की तकनीक है
यहाँ इस्तेमाल किया गया Bayer-matrix ordered dithering noise को high-frequency क्षेत्र में धकेलता है ताकि वह कम दिखे, लेकिन low-frequency क्षेत्र में banding फिर भी बनी रहती है
जैसा Dave Long ने कहा, Bresenham line algorithm को भी एक तरह का dithering माना जा सकता है। बस इसमें signal brightness नहीं बल्कि pen की position होती है
इस पर कुछ दिन पहले भी चर्चा हुई थी — यह thread देखें
Wikipedia लेख
पहले NeXT color machines में 12-bit display (प्रति channel 4-bit) होता था, लेकिन अच्छी dithering से वह 24-bit true color जैसा दिखता था
Daniel Shiffman के Coding Train के दो वीडियो सुझाऊँगा
Turning Images into Dots: The Magic of Dithering
Coding Challenge 181: Weighted Voronoi Stippling
विषय दिलचस्प था। animation भी अच्छा था और मेहनत साफ़ दिख रही थी
लेकिन ऐसे interactive presentations पारंपरिक blog post की तुलना में पढ़ने में ज़्यादा मुश्किल होते हैं
लेख की संरचना एक नज़र में समझ नहीं आती, और वाक्य-दर-वाक्य पढ़ना पड़ता है, इसलिए जल्दी skim करना कठिन था
यह ऐसा interactive video लगता है जिसमें user गति नियंत्रित कर सकता है
मैं भी आम तौर पर text पसंद करता हूँ, लेकिन इस तरह का format एक अच्छा बदलाव है
मैंने कई design projects में ordered और error diffusion dithering को visual language के रूप में इस्तेमाल किया है
खासकर tech/computer/blockchain से जुड़े कामों में, static और animated दोनों रूपों में
इन पुरानी तकनीकों में एक अजीब-सी warmth और nostalgia है, इसलिए इन्हें नए ideas के साथ जोड़ना अच्छा लगता है
मेरे काम के उदाहरण Instagram पर हैं:
D.Y.O.R. / Printed / Titles / Dithering प्रयोग
मेरी site olsz.me देखें
मैंने पहले दो तरह के dithering के बीच switch बनाकर देखा था
GitHub project
मैं इसे सच में पसंद करना चाहता था, लेकिन चलते हुए patterns के ऊपर text पढ़ना बहुत मुश्किल था
visualization शानदार था, लेकिन threshold map वाला हिस्सा समझ नहीं आया
map कैसे बनाया जाता है और threshold कैसे तय होता है, इसकी व्याख्या कम थी
पता नहीं लेखक को यह इतना obvious लगा कि छोड़ दिया गया
मुख्य बात ‘threshold’ की अवधारणा याद रखना है। gray pixel threshold के आधार पर black या white में बदलता है
उदाहरण के लिए
dithered_color = (raw_color > threshold_color) ? white : blackthreshold को random भी रखा जा सकता है। अगर उसका average 0.5 हो, तो वह मूल gray का अच्छा approximation देता है
महत्वपूर्ण बात यह है कि जैसे-जैसे white pixels बढ़ें, वे आपस में चिपकें नहीं
50% gray को checkerboard pattern की तरह, 25% को 2x2 में सिर्फ़ एक white pixel की तरह डिज़ाइन किया जा सकता है
ऐसे प्रयोग ShaderToy में खुद करके देखना मज़ेदार होता है
पहले लगा कि input के रूप में ‘binary image’ इस्तेमाल हो रही है, लेकिन बाद में gray area input के रूप में दिखाया गया
dithering ऐसा बना सकता है कि 10-bit color सपोर्ट न करने वाला monitor भी काफ़ी हद तक 10-bit जैसा लगे
banding गायब हो जाती है और noise color depth की कमी छिपा देता है
यानी यह आज भी उपयोगी तकनीक है। सिर्फ़ retro art के लिए नहीं
लोग अब भी सिर्फ़ palette dithering के बारे में सोचते हैं
8-bit/channel काफ़ी नहीं है। gamma correction की वजह से व्यवहार में यह लगभग 220 levels जैसा होता है
मैं इसी तरह की समस्याएँ हल करने के लिए Rust crate dithereens maintain करता हूँ
README के ऊपर वाला gradient देखते ही समझ आ जाएगा कि यह क्यों महत्वपूर्ण है
high-bit image को 10-bit या 8-bit में घटाते समय random dithering काफ़ी असरदार होती है
Photoshop 16-bit→8-bit conversion में default रूप से dithering लागू करता है
दूसरे software ऐसा नहीं करते, इसलिए बड़े poster print करते समय banding दिखे तो तुरंत पता चल जाता है
6-bit TN panels को 8-bit जैसा दिखाया जाता था, और अब यह HDR-10 में भी इस्तेमाल होता है
यह तरीका pixels को तेज़ी से flicker कराकर रंगों को मिलाने वाला सरल algorithm है
Frame rate control Wikipedia लेख
presentation format शानदार था और अगले part का इंतज़ार है
मैंने पहले ZX Spectrum Raytracer में ordered dithering आज़माया था, implementation आसान थी और नतीजे अच्छे थे
project link
लगता है 80 के दशक में performance कारणों से इसका ज़्यादा इस्तेमाल नहीं होता था। 90 के दशक के Windows 3.1 या Monkey Island VGA backgrounds में यह देखा था
demo बढ़िया था, लेकिन dithering को “ज़्यादा shades का illusion” कहना मुझे पूरी तरह सही नहीं लगता
अगर dithered image पर low-pass filter लगाया जाए, तो वे बीच के shades वास्तव में मौजूद होते हैं
जैसे Class D amplifier pulse signal निकालता है, लेकिन filter के बाद असली analog sound मिलती है
अंततः हमारी vision और दूरी ही उस filter की भूमिका निभाती है
ध्यान से देखने पर समझ आता है कि वह रंग वास्तव में मौजूद नहीं है
हम सिर्फ़ black-and-white pixels से gray को पहचान लेते हैं, लेकिन साथ ही यह भी समझते हैं कि यह एक optical illusion है
इसलिए मुझे ‘illusion’ शब्द सही लगता है
टेक्स्ट को छोड़कर, सिर्फ़ वीडियो के ज़रिए ऑडिटोरियम में लेक्चर देने वाले interactive video की ओर यह एक ऐसा एप्रोच है कि मंच ही फाड़ दे, इतना जबरदस्त स्टाइलिश आइटम है। इमेज grayscale को 3D में layer बनाकर दिखाने वाला दृश्य मुझे बेहद आसान और दोस्ताना समझाइश लगता है।