फ़ोटो को Atkinson dithering में बदलें

 (gazs.github.io)
1 पॉइंट द्वारा GN⁺ 2025-06-08 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • फ़ोटो को क्लासिक Macintosh के 1-bit फ़िल्टर स्टाइल में बदलकर, सिर्फ़ काले-सफेद पिक्सेल के साथ Atkinson dithering effect लागू किया जाता है
  • हर पिक्सेल 50% gray के आधार पर काला या सफेद बनता है, और conversion error आसपास के पिक्सेलों में फैलती है
  • error को मौजूदा पिक्सेल के आसपास की 6 जगहों पर प्रत्येक में 1/8 बाँटा जाता है, जिससे एक विशिष्ट textured black-and-white image बनती है
  • बनी हुई image को right-click save किया जा सकता है, लेकिन browser limitations के कारण उसे desktop पर drag करके save नहीं किया जा सकता
  • implementation में Canvas, Drag and Drop events, WebWorkers, FileReader API का उपयोग होता है और इसके लिए modern browser चाहिए

Atkinson dithering की प्रोसेसिंग विधि

  • यह implementation Hyperdither और HyperScan में इस्तेमाल किए गए क्लासिक Macintosh 1-bit फ़िल्टर को पुनःनिर्मित करता है
  • प्रोसेसिंग में हर पिक्सेल को 50% gray से तुलना करके काला या सफेद बनाया जाता है
  • conversion के दौरान बना input value और output value का अंतर आसपास के पिक्सेलों में वितरित किया जाता है
    • मौजूदा पिक्सेल X के दाईं ओर की 2 जगहों पर प्रत्येक 1/8
    • अगली पंक्ति में बाएँ से शुरू होने वाली 3 जगहों पर प्रत्येक 1/8
    • उसके बाद वाली पंक्ति में बाईं ओर 1 जगह पर 1/8

डेमो उपयोग और browser आवश्यकताएँ

  • rendered image को right-click करके save किया जा सकता है
  • browser limitations की वजह से image को desktop पर drag करके save नहीं किया जा सकता
  • code में Canvas, Drag and Drop events, WebWorkers, FileReader API का उपयोग किया गया है
  • इसे चलाने के लिए modern browser चाहिए

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-06-08
Hacker News की राय

  • यह अब भी मेरा पसंदीदा ब्लैक-एंड-व्हाइट dithering algorithm है
    विश्वविद्यालय में Mac से जुड़ा एक ब्लैक-एंड-व्हाइट flatbed scanner था, और शायद HyperCard stack के जरिए images scan करके उन्हें ब्लैक-एंड-व्हाइट image बनाया जा सकता था
    1988 के आसपास जब मैंने Mac shareware game बनाना शुरू किया, तो विश्वविद्यालय की bookstore से खरीदी clipart book को जल्दी-जल्दी scan करके “logo” के तौर पर इस्तेमाल किया
    उस समय मुझे नहीं पता था कि Atkinson algorithm कितना अच्छा है, लेकिन बाद में दूसरे algorithms से dithering करके देखा तो समझ आया कि Bill के code में diffusion कितनी अच्छी तरह होता है
    हाल में eInk calendar project बनाते समय मैं चांद की अलग-अलग phases वाली तस्वीरों को “Atkinson-style” image series बनाना चाहता था, इसलिए linked site जैसी एक site ढूंढी और चांद की तस्वीरों पर Atkinson dithering लागू की [1]
    [1] screenshot में चांद देखें: https://github.com/EngineersNeedArt/SystemSix/blob/10f2332b5...

    • सचमुच खूबसूरत! अगर कहीं Bill का code देखने को मिले, तो मैं उसे खुद आजमाकर सीखना चाहूंगा

  • info dialog में “as follows” पर क्लिक न करना बेहतर है
    लगता है काफी समय से update नहीं हुआ, और इस बीच link NSFW हो गया है

    • इस बात की कोई guarantee नहीं कि site बनाने वाला व्यक्ति यह thread देखेगा या उसे पता चलेगा, इसलिए हो सके तो उसे बता देना बेहतर है
      अभी issue बनाकर बता दिया है: https://github.com/gazs/canvas-atkinson-dither/issues/2

  • implementation शानदार है, और anchor के download attribute में value देकर download file को default name और .png extension दे दिया जाए तो यह थोड़ा और बेहतर हो सकता है
    संदर्भ: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorE...

    • बचाव में कहूं तो, link के अनुसार वह attribute browsers में मार्च 2017 से supported है[1], और इस dithering tool repository का latest commit देखने में मार्च 2016 का है
      https://github.com/gazs/canvas-atkinson-dither
      फिर भी, वह दूसरी repositories में GitHub activity जारी रखे हुए है, इसलिए शायद pull request accept कर ले :)
      [1]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorE...

  • Sierra dithering क्यों नहीं?
    https://tannerhelland.com/2012/12/28/dithering-eleven-algori...

    • मूल रूप से यह शुरुआती Mac की nostalgia वाली बात थी, और Bill Atkinson के अभी-अभी निधन से लगता है यह फिर से चर्चा में आ गया

  • मैं खाली समय में कुछ ऐसा बना रहा हूं जो कई images को MacPaint में convert करके 400k MFS format disk image में डालने लायक बना दे
    https://github.com/minorbug/mfsjs
    यह project कई महीनों से home directory में हल्की-सी धूल जमा रहा है
    library बनाने में Gemini Deep Research से मदद ली, और जो लोग इसे किसी दूसरी language में reproduce या improve करना चाहें, उनके लिए LLM-generated Markdown भी शामिल कर दिया है

    • इसमें लिखा है कि “MacPaint images 576 x 720 pixels resolution का fixed format हैं”, लेकिन क्या यह सच में fixed format था?
      Wikipedia में भी ऐसा लिखा है, लेकिन source नहीं है

  • यह implementation शानदार है और interface भी nostalgia जगाता है
    आज सोच रहा था कि मेरे Atkinson dithering web component[0] पर views क्यों बढ़ गए, फिर पता चला कि वजह दुखद खबर थी
    मुझे हमेशा लगता था कि original Mac जैसे बहुत sharp monitors पर Atkinson dithering सबसे अच्छी दिखने वाली images बनाता है
    इसमें कुछ cool और 80s vibe है, इसलिए पिछले साल के game में भी इस्तेमाल किया था
    [0] https://sheep.horse/2023/1/improved_web_component_for_pixel-...

    • Retina screen पर pixel-by-pixel dithering करना काफी अलग अनुभव है
      कुछ photos पर यह style काफी अच्छी तरह fit बैठता है, और कुछ पर नहीं
      अजीब तरह से यह modern old-school एहसास देता है, और असली पुरानी तस्वीरों की तरह अलग-अलग dots खटकते नहीं हैं

  • अगर Python में आजमाना चाहें तो hyperdither है
    https://github.com/tgray/hyperdither

    • scroll करते समय README की images भूरे रंग की हो जाती हैं

  • यह eInk/ePaper devices के लिए बहुत अच्छी तरह fit होगा

  • क्या यह वही Atkinson हैं जिनका आज निधन हुआ, और क्या यह tribute है?

    • कुछ हद तक हां, लेकिन repository का पहला commit 15 साल पहले का है, इसलिए यह news के हिसाब से जल्दबाजी में बनाया गया नहीं है
    • हां, उन्होंने ही यह algorithm invent किया था
      शायद यह tribute ही है
      “discover” नहीं, “invent” के रूप में correction. नीचे देखें

  • उस algorithm को थोड़ा और सीखना चाहता था, इसलिए https://atkinson.franzai.com/ बनाया
    कुछ AI से फिर से verify किया है, उम्मीद है facts सही होंगे