ASCII Silhouettify - इमेज को ASCII सिल्हूट में बदलें

 (meatfighter.com)
3 पॉइंट द्वारा GN⁺ 2024-06-08 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • ASCII Silhouettify एक browser और command-line app है जो लोगो, बैनर और pixel art जैसे समतल और high-contrast graphics को 95 printable ASCII characters से भरे silhouette ASCII art में बदलता है
  • यह png, svg, jpg, webp, gif, tif, heif, avif, pdf इनपुट के रूप में लेता है, लेकिन shading, highlight, shadow और gradient render नहीं करता, इसलिए फोटो conversion के लिए उपयुक्त नहीं है
  • आउटपुट में ANSI color text, plain text, HTML और Neofetch custom ASCII art format का समर्थन है, जबकि Neofetch format 256-color extended ANSI palette में से 6 रंगों तक सीमित है
  • conversion algorithm इमेज को color planes में बांटने के बाद हर 9×19 pixel क्षेत्र में silhouette outline को प्रभावित किए बिना फिट होने वाले ASCII characters में से सबसे बड़ा character चुनता है
  • performance के लिए यह 95-bit accumulator, 171 bitmasks, leading zeros calculation और logical processor parallelism का उपयोग करता है, और palette matching के लिए computationally expensive CIEDE2000 perceptual color difference formula लागू करता है

ASCII सिल्हूट conversion app

  • ASCII Silhouettify एक app है जो इमेज को ASCII silhouette में बदलता है
    • ASCII silhouette, ASCII art की ऐसी शैली है जिसमें line या texture की तुलना में समान रूप से भरे हुए geometric shapes अधिक उभरकर दिखते हैं
    • यह लोगो, बैनर और pixel art जैसे minimalist, high-contrast और बिना 3D depth वाले flat graphics के लिए उपयुक्त है
    • क्योंकि यह shading, highlight, shadow और gradient render नहीं करता, इसलिए यह फोटो के लिए उपयुक्त नहीं है
  • character set को पारंपरिक ASCII artists के माध्यम 95 printable ASCII characters तक सीमित रखा गया है
    • ANSI art में आम line/block characters या kaomoji में इस्तेमाल होने वाले कई Unicode characters का उपयोग नहीं किया जाता
  • output formats सेटिंग के अनुसार बदलते हैं
    • monochrome plain text
    • ANSI escape sequences के साथ रंगीन text
    • color के साथ या बिना HTML
    • Neofetch ASCII art format
  • यह browser और command line दोनों में उपलब्ध desktop app है

Ubuntu logo और Neofetch उदाहरण

  • उदाहरण दिखाता है कि Ubuntu instance पर Neofetch output में ASCII Silhouettify का result कैसे जोड़ा जाता है
  • बेहतर ASCII art पाने के लिए वेब से high-resolution Ubuntu logo इमेज ली जाती है और पहले उसे console में दिखने वाले आकार के अनुसार scale किया जाता है
  • command-line version से इमेज convert करने पर डिफ़ॉल्ट रूप से ANSI escape sequence color text बनता है
  • -o flag से output को उस file में भेजा जा सकता है जिसे Neofetch दिखाएगा
  • क्योंकि Neofetch ANSI art और OS metrics के बीच काफी चौड़ा gap छोड़ता है, उदाहरण Neofetch custom ASCII art file format का उपयोग करता है
    • output file की पहली line color index list होती है
    • उसके बाद की lines encoded image होती हैं
    • text editor में पहली line को clipboard पर copy करके फिर हटा दिया जाता है
    • Neofetch चलाते समय clipboard में रखा गया मान paste करके उपयोग किया जाता है
    • इसे स्थायी रूप से लागू करने के लिए Neofetch bash script के एक हिस्से को उसी मान से बदल दिया जाता है
  • जब मूल logo को generated result के ऊपर overlap करके तुलना की जाती है, तो यह साफ़ दिखता है कि algorithm हर color region की outline के भीतर आने वाला सबसे बड़ा character चुनता है

installation और removal

  • command-line version एक Node.js application है
  • अगर Node.js नहीं है, तो पहले Node.js installation प्रक्रिया पूरी करनी होगी
  • macOS और Linux पर root user के बिना global installation के लिए npm configuration की ज़रूरत होती है
  • installation command:
    • npm install -g ascii-silhouettify
  • removal command:
    • npm uninstall -g ascii-silhouettify

input/output options

  • browser version और command-line version एक ही options set को support करते हैं
    • command-line version का -h flag options summary message दिखाता है
  • कई इमेज को एक साथ convert किया जा सकता है
    • supported formats हैं png, svg, jpg, webp, gif, tif, heif, avif, pdf
    • command-line version का -i flag कई filename pattern matching rules लेता है
    • input इमेज का background काला या transparent होना चाहिए
  • output चार श्रेणियों में बंटा है
    • plain text या ANSI color text
    • HTML format में fixed-width text
    • Neofetch custom ASCII art format
    • Neofetch format 256-color extended ANSI palette में 6 रंगों तक सीमित है
  • palette का default, 256-color extended ANSI palette में standard 16-color ANSI palette को छोड़कर 240 colors है
    • standard 16-color ANSI palette को आधुनिक terminal emulators में अक्सर redefine किया जाता है, इसलिए इसे default से बाहर रखा गया है
    • उपयोगकर्ता standard ANSI palette के पहले 8 रंग, पूरी standard ANSI 16 colors, पूरी extended ANSI 256 colors, या default 240-color palette चुन सकता है
  • output में दिखने वाले अधिकतम colors की संख्या तय की जा सकती है
    • जो colors काले background के रूप में माने जाते हैं, उन्हें count नहीं किया जाता
    • default मान 255 है
    • monochrome mode में यह मान प्रभावी रूप से 1 हो जाता है
    • Neofetch custom ASCII art format में default उस format की अधिकतम सीमा 6 है

display size और conversion quality समायोजन

  • terminal emulator में बने ASCII art का aspect ratio font, font size, line height और character size rounding rules पर निर्भर करता है
  • optimization के लिए terminal के text image को capture करके line spacing सहित हर fixed-width character का pixel size मापा जाता है
  • developer के Windows desktop पर माप के उदाहरण इस प्रकार हैं
    • IntelliJ Terminal: character 8×22, font size 10, line height 1.65
    • Putty: character 8×16, font size 10, line height 1.2
    • Notepad: character 10×18, font size 13, line height 1.04
    • Notepad++: character 9×19, font size 12, line height 1.2
    • Windows Command Prompt: character 8×16, font size 10, line height 1.2
    • Windows Console Host: character 9×20, font size 12, line height 1.25
    • Windows Terminal: character 9×19, font size 12, line height 1.2
  • आदर्श रूप से input इमेज को paint program में पहले से उसी आकार तक scale कर लेना चाहिए जिस आकार में उसे terminal में दिखाना है
    • छोटे समायोजन के लिए ASCII Silhouettify image scaling factor स्वीकार करता है
    • default मान 1 है
  • conversion algorithm brightness 5% से कम वाले क्षेत्रों को space character में बदल देता है ताकि काला background पूरी तरह दिखाई दे
    • उपयोगकर्ता इस darkness threshold को समायोजित कर सकता है
  • default रूप से काम को सभी उपलब्ध logical processors में बाँट दिया जाता है
    • उपयोगकर्ता allocated processors की संख्या 1 तक घटा सकता है
    • processors कम करने पर processing time बढ़ जाता है

conversion algorithm

  • जिस Windows desktop पर developer ने ASCII Silhouettify बनाया, वहाँ Terminal default 12-point, 1.2em Cascadia Mono सेटिंग पर हर fixed-width character को 9×19 pixel rectangle में render करता है
  • algorithm 95 printable ASCII characters की images capture करता है और 50% intensity threshold के आधार पर उन्हें threshold करके केवल black-and-white pixels वाली character images बनाता है
  • source image को unique color planes में विभाजित किया जाता है
    • हर plane काले background पर सफेद silhouette होता है
  • हर color plane को 9×19 pixel rectangular regions की matrix में बाँटा जाता है
    • हर region को एक ASCII character से replace किया जाता है
  • optimal character region और सभी ASCII character images की pixel-by-pixel तुलना करके चुना जाता है
    • अगर character image के white pixels, region के black pixels से overlap करते हैं, तो silhouette outline को बिगाड़ने से बचाने के लिए उस character को हटा दिया जाता है
    • बाकी बचे characters में से सबसे अधिक matching white pixels वाला character चुना जाता है
  • region को character से replace करते समय matching white pixels की संख्या रिकॉर्ड की जाती है
    • सभी planes convert होने के बाद सबसे अधिक matching white pixel count वाले character को चुनकर planes को merge किया जाता है
    • अंतिम character को उसी plane के color से रंगा जाता है जिससे वह character आया है

bitmask आधारित acceleration

  • conversion से पहले ASCII character images को white pixel count के आधार पर sort किया जाता है
    • space character में 0 white pixels होते हैं, इसलिए वह सबसे कम होता है
    • @ character में सबसे अधिक white pixels होते हैं
  • algorithm @ से नीचे की ओर जाते हुए हर region की character images से तुलना करता है
    • जैसे ही कोई character पूरी तरह silhouette के अंदर फिट मिलता है, उस region को उसी character से replace कर दिया जाता है
    • sorting की वजह से वही सबसे अधिक white pixels वाला candidate होता है
  • speed को बहुत बढ़ाने के लिए 9×19 region के हर pixel के लिए 171 bitmasks तैयार किए जाते हैं
    • हर bitmask उन ASCII character images के set को दर्शाता है जिनमें उस coordinate पर black pixel है
    • हर bitmask में 95 bits होते हैं
    • bit-0 space character से और bit-94 @ character से मेल खाता है
  • region conversion के दौरान 95-bit accumulator की मदद से उपलब्ध ASCII character candidates के set को धीरे-धीरे संकुचित किया जाता है
    • शुरुआत में accumulator के सभी bits 1 पर initialize होते हैं
    • region के हर black pixel के लिए मौजूदा accumulator और उस pixel bitmask का bitwise AND किया जाता है
    • यह operation उन character images को हटा देता है जिनके white pixels region के black pixel positions पर मौजूद होते हैं
  • पूरे region को process करने के बाद accumulator में set bits replace किए जा सकने वाले character candidates होते हैं
    • क्योंकि characters sorted हैं, इसलिए accumulator के leading zeros की संख्या silhouette के भीतर पूरी तरह फिट होने वाली सबसे अधिक white pixels वाली ASCII character image का index बन जाती है
    • library की मदद से microprocessor के leading zeros calculation instruction को call करके यह मान तेज़ी से प्राप्त किया जाता है

origin optimization और color matching

  • source image को rectangular region matrix में बाँटते समय matrix का origin result को प्रभावित करता है
  • result optimize करने के लिए algorithm image origin के आसपास के 9×19 pixel region के भीतर हर integer coordinate origin पर पूरी image conversion दोहराता है
  • भारी processing load को संभालने के लिए काम उपलब्ध logical processors में बाँटा जाता है
  • user settings के अनुसार color palette को standard ANSI palette के पहले 8 colors से लेकर पूरी extended ANSI 256 colors तक सीमित किया जा सकता है
  • source image को unique color planes में विभाजित करते समय palette के भीतर सबसे नज़दीकी color खोजने के लिए computationally expensive CIEDE2000 perceptual color difference formula का उपयोग किया जाता है

source code

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

1 टिप्पणियां

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

  • इस साइट का सबसे शानदार पेज शायद color gallery है: https://meatfighter.com/ascii-silhouettify/color-gallery.htm...

    • Wendy's लोगो थोड़ा डरावना है
    • Mastodon logo नहीं है, इसलिए यह पेज अमान्य है
    • Z logo वाकई काफी चतुर है
      ऐसा लगता है जैसे icon graphic design को एक अलग नज़रिए से दिखा रहा हो

  • मैंने code में सीधे डालने लायक game sprites बनाने के लिए एक मिलता-जुलता tool बनाया था: https://memalign.github.io/m/pceimage/index.html
    यह web पर चलता है, और रंगों वाला ASCII output भी edit किया जा सकता है
    हालांकि अच्छे results पाने के लिए Wobble को manually बंद करना और pixel sampling size adjust करना पड़ता है, इसलिए यह थोड़ा tricky है

    • सच में मज़ेदार है और मुझे पसंद आया
      सुझाव के तौर पर, अच्छा होगा अगर कोई ऐसा mode हो जो wobble हटा दे, लेकिन मोटाई और rounded corners से बनने वाला cute feel बनाए रखे

  • अगर आपको ASCII से जुड़ी art पसंद है, तो GIF को ASCII में बदलने वाला animated ASCII tool भी पसंद आ सकता है: https://www.gifcii.fun
    संदर्भ के लिए, इसे मैंने खुद बनाया है

    • GIFs पसंद करने वाले के तौर पर यह सच में मज़ेदार है
      somehow इसे save कर पाना अच्छा होगा, जैसे फिर से GIF या video में export किया जा सके तो बढ़िया रहेगा

  • web version Chromium-based browsers में finish नहीं होता, लेकिन CLI version काम करता है: https://meatfighter.com/ascii-silhouettify/spa/index.html#/
    bonus में HN logo जैसा दिखने वाला बड़ा ASCII art भी बनाया

  • शानदार काम है, और रंगों वाला Telnet Matrix याद आ गया :)
    बाद में https://ascii.theater/ भी मिला
    कुछ साल पहले retro computer image converter के लिए मैंने ऐसा ही कुछ बनाया था, जिसमें उस computer के fixed-width font का इस्तेमाल किया था और character conversion से पहले dithering भी apply किया था
    क्योंकि photos में ज़्यादा smooth gradients मिलते थे: https://github.com/KodeMunkie/imagetozxspec/blob/master/src/...

  • “जो हो चुका है, वही फिर होगा, और जो किया जा चुका है, वही फिर किया जाएगा। सूरज के नीचे कुछ भी नया नहीं है।”
    अच्छी तरह बनाया गया है
    पुराने समय में EBCDIC और ASCII में characters की print density का उपयोग करके birthday banners और images को continuous-form band printers, और बाद में dot matrix printers पर काफी इसी तरह print किया जाता था

  • आज /etc/motd या /etc/issue modify करने वालों की संख्या काफी बढ़ सकती है

  • मैंने real time में चलने वाले wobbling function से कुछ मिलता-जुलता try किया था: https://piter-genuary2024.netlify.app/genuary9/

    • सोच रहा हूं कि क्या standard log tail output से शुरू करके धीरे-धीरे ज़्यादा दिखाई देने वाले patterns मिलाते हुए, अंत में text के बीच से डरावना चेहरा उभरने जैसा कोई विचित्र effect बनाया जा सकता है

  • फिर npm
    project शानदार है, लेकिन समझ नहीं आता कि इसे ऐसे ही क्यों करना ज़रूरी है
    सामान्य installation method आखिर गया कहां

    • जानना चाहूंगा कि आप कौन-सा alternative suggest करते हैं
      NPM हर जगह एक ही तरीके से काम करता है, और NPM जितना कई platforms पर व्यापक रूप से इस्तेमाल होने वाला package manager कोई नहीं है
    • यहां “सामान्य installation” से आपका मतलब कौन-सा तरीका है, यह बता दें, तो उस तरीके की problems बता सकता हूं
    • install करने की जरूरत भी नहीं है
      बस npx से run कर दें
    • सही कहा, पता नहीं सामान्य installation method का क्या हुआ, या शायद कभी था ही नहीं
      किसी दूसरे तरीके से set up करने में कई घंटे लगते हैं और सब गड़बड़ हो जाता है, इसलिए मेरी CLI repositories यहां-वहां npm/yarn link से जुड़ी रहती हैं
      यहां तक कि Python scripts भी nodemon main.py से develop करता हूं, शायद जो चाहिए वह सिर्फ Node वाले ही जानते हैं

  • फिर भी Figma के बजाय https://asciiflow.com/# ही इस्तेमाल करता रहूंगा