ASCII Silhouettify - แปลงภาพเป็นซิลูเอต ASCII

 (meatfighter.com)
3 คะแนน โดย GN⁺ 2024-06-08 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • ASCII Silhouettify เป็นแอปบนเบราว์เซอร์และบรรทัดคำสั่งที่แปลง กราฟิกแบบแบนและคอนทราสต์สูง เช่น โลโก้ แบนเนอร์ และพิกเซลอาร์ต ให้เป็น ASCII art แบบซิลูเอตที่เติมด้วยอักขระ ASCII ที่พิมพ์ได้เพียง 95 ตัว
  • รองรับอินพุต png, svg, jpg, webp, gif, tif, heif, avif, pdf แต่ไม่เหมาะกับ การแปลงภาพถ่าย เพราะไม่เรนเดอร์เฉดแสง ไฮไลต์ เงา หรือไล่ระดับสี
  • เอาต์พุตรองรับข้อความสี ANSI, ข้อความธรรมดา, HTML และรูปแบบ ASCII art แบบกำหนดเองของ Neofetch โดยรูปแบบ Neofetch ถูกจำกัดไว้ที่ 6 สี จากพาเลต ANSI แบบขยาย 256 สี
  • อัลกอริทึมการแปลงจะแบ่งภาพออกเป็นระนาบสี จากนั้นเลือก อักขระที่ใหญ่ที่สุด ในบรรดาอักขระ ASCII ที่ไม่ล้ำเข้าไปนอกขอบซิลูเอตในแต่ละพื้นที่ 9×19 พิกเซล
  • เพื่อประสิทธิภาพ ใช้ตัวสะสม 95 บิต, bitmask 171 ชุด, การคำนวณ leading zeros, การประมวลผลแบบขนานบน logical processor และใช้สูตรความต่างสีเชิงการรับรู้ CIEDE2000 ซึ่งมีต้นทุนคำนวณสูงสำหรับการจับคู่พาเลต

แอปแปลงซิลูเอต ASCII

  • ASCII Silhouettify เป็นแอปที่แปลงภาพเป็น ซิลูเอต ASCII
    • ซิลูเอต ASCII คือสไตล์ ASCII art ที่เน้นรูปทรงเรขาคณิตซึ่งถูกเติมอย่างสม่ำเสมอ มากกว่าเส้นหรือพื้นผิว
    • เหมาะกับ กราฟิกแบบแบน ที่มินิมอล คอนทราสต์สูง และไม่มีความลึกเชิงสามมิติ เช่น โลโก้ แบนเนอร์ และพิกเซลอาร์ต
    • ไม่เหมาะกับภาพถ่าย เพราะไม่เรนเดอร์เฉดแสง ไฮไลต์ เงา หรือไล่ระดับสี
  • ชุดอักขระถูกจำกัดไว้ที่ อักขระ ASCII ที่พิมพ์ได้ 95 ตัว ซึ่งเป็นสื่อดั้งเดิมของศิลปิน ASCII
    • ไม่ใช้อักขระเส้นหรือบล็อกที่พบได้บ่อยใน ANSI art หรืออักขระ Unicode จำนวนมากใน kaomoji
  • รูปแบบเอาต์พุตขึ้นอยู่กับการตั้งค่า
    • ข้อความธรรมดาสีเดียว
    • ข้อความที่มีสีด้วย ANSI escape sequence
    • HTML แบบมีสีหรือไม่มีสี
    • รูปแบบ ASCII art ของ Neofetch
  • เป็น แอปเดสก์ท็อป ที่ใช้ได้ทั้งในเบราว์เซอร์และบรรทัดคำสั่ง

ตัวอย่างโลโก้ Ubuntu และ Neofetch

  • ตัวอย่างแสดงขั้นตอนการนำผลลัพธ์จาก ASCII Silhouettify ไปใส่ในเอาต์พุต Neofetch บนอินสแตนซ์ Ubuntu
  • เพื่อให้ได้ ASCII art ที่ดีที่สุด จะดึงภาพโลโก้ Ubuntu ความละเอียดสูงจากเว็บ แล้วสเกลล่วงหน้าให้มีขนาดที่จะมองเห็นในคอนโซล
  • เมื่อแปลงภาพด้วยเวอร์ชันบรรทัดคำสั่ง โดยค่าเริ่มต้นจะสร้าง ข้อความสีด้วย ANSI escape sequence
  • สามารถใช้แฟล็ก -o เพื่อส่งเอาต์พุตไปยังไฟล์ที่ Neofetch จะแสดง
  • เนื่องจาก Neofetch ใส่ช่องว่างกว้างระหว่าง ANSI art กับตัวชี้วัดของ OS ตัวอย่างจึงใช้ รูปแบบไฟล์ ASCII art แบบกำหนดเองของ Neofetch
    • บรรทัดแรกของไฟล์เอาต์พุตคือรายการดัชนีสี
    • บรรทัดถัดไปเป็นภาพที่เข้ารหัสแล้ว
    • คัดลอกบรรทัดแรกไปยังคลิปบอร์ดในตัวแก้ไขข้อความ แล้วลบบรรทัดนั้นออก
    • เมื่อรัน Neofetch ให้วางค่าที่เก็บไว้ในคลิปบอร์ดเพื่อใช้งาน
    • หากต้องการให้มีผลถาวร ให้แทนที่บางส่วนของสคริปต์ bash ของ Neofetch ด้วยค่าเดียวกัน
  • เมื่อซ้อนโลโก้ต้นฉบับทับบนผลลัพธ์เพื่อเปรียบเทียบ จะเห็นวิธีที่อัลกอริทึมเลือก อักขระที่ใหญ่ที่สุด ซึ่งอยู่ภายในขอบของแต่ละพื้นที่สี

การติดตั้งและการถอนการติดตั้ง

  • เวอร์ชันบรรทัดคำสั่งเป็น แอปพลิเคชัน Node.js
  • หากยังไม่มี Node.js ต้องทำตามขั้นตอนการติดตั้ง Node.js ก่อน
  • บน macOS และ Linux ต้องตั้งค่า npm เพื่อให้ติดตั้งแบบ global ได้โดยไม่ต้องใช้ผู้ใช้ root
  • คำสั่งติดตั้ง:
    • npm install -g ascii-silhouettify
  • คำสั่งถอนการติดตั้ง:
    • npm uninstall -g ascii-silhouettify

ตัวเลือกอินพุตและเอาต์พุต

  • เวอร์ชันเบราว์เซอร์และเวอร์ชันบรรทัดคำสั่งรองรับชุดตัวเลือกเดียวกัน
    • แฟล็ก -h ของเวอร์ชันบรรทัดคำสั่งจะแสดงข้อความสรุปตัวเลือก
  • สามารถแปลงภาพหลายภาพพร้อมกันได้
    • รูปแบบที่รองรับคือ png, svg, jpg, webp, gif, tif, heif, avif, pdf
    • แฟล็ก -i ของเวอร์ชันบรรทัดคำสั่งรับกฎการจับคู่แพตเทิร์นชื่อไฟล์ได้หลายรายการ
    • ภาพอินพุตควรมีพื้นหลังสีดำหรือโปร่งใส
  • เอาต์พุตแบ่งเป็นสี่กลุ่ม
    • ข้อความธรรมดาหรือข้อความสี ANSI
    • ข้อความฟอนต์ monospace ในรูปแบบ HTML
    • รูปแบบ ASCII art แบบกำหนดเองของ Neofetch
    • รูปแบบ Neofetch ถูกจำกัดไว้ที่ 6 สี จากพาเลต ANSI แบบขยาย 256 สี
  • ค่าเริ่มต้นของพาเลตคือ 240 สี จากพาเลต ANSI แบบขยาย 256 สี โดยยกเว้นพาเลต ANSI มาตรฐาน 16 สี
    • พาเลต ANSI มาตรฐาน 16 สีมักถูกนิยามใหม่ใน terminal emulator สมัยใหม่ จึงถูกยกเว้นจากค่าเริ่มต้น
    • ผู้ใช้สามารถเลือก 8 สีแรกของพาเลต ANSI มาตรฐาน, ANSI มาตรฐานครบ 16 สี, ANSI แบบขยายครบ 256 สี หรือพาเลตเริ่มต้น 240 สีได้
  • สามารถกำหนดจำนวนสีสูงสุดที่จะปรากฏในเอาต์พุตได้
    • สีที่ถือว่าเป็นพื้นหลังสีดำจะไม่นับรวม
    • ค่าเริ่มต้นคือ 255
    • โหมดสีเดียวโดยพฤตินัยจะตั้งค่านี้เป็น 1
    • ค่าเริ่มต้นของรูปแบบ ASCII art แบบกำหนดเองของ Neofetch คือ 6 ซึ่งเป็นค่าสูงสุดของรูปแบบนั้น

การปรับขนาดแสดงผลและคุณภาพการแปลง

  • อัตราส่วนภาพของ ASCII art ที่สร้างขึ้นใน terminal emulator จะขึ้นอยู่กับฟอนต์ ขนาดฟอนต์ ความสูงบรรทัด และกฎการปัดเศษขนาดอักขระ
  • เพื่อการปรับแต่งให้เหมาะที่สุด ให้จับภาพข้อความของเทอร์มินัล แล้ววัดขนาดพิกเซลของอักขระ monospace แต่ละตัว รวมถึงพื้นที่ระหว่างบรรทัด
  • ตัวอย่างการวัดบนเดสก์ท็อป Windows ของผู้พัฒนามีดังนี้
    • IntelliJ Terminal: อักขระ 8×22, ขนาดฟอนต์ 10, ความสูงบรรทัด 1.65
    • Putty: อักขระ 8×16, ขนาดฟอนต์ 10, ความสูงบรรทัด 1.2
    • Notepad: อักขระ 10×18, ขนาดฟอนต์ 13, ความสูงบรรทัด 1.04
    • Notepad++: อักขระ 9×19, ขนาดฟอนต์ 12, ความสูงบรรทัด 1.2
    • Windows Command Prompt: อักขระ 8×16, ขนาดฟอนต์ 10, ความสูงบรรทัด 1.2
    • Windows Console Host: อักขระ 9×20, ขนาดฟอนต์ 12, ความสูงบรรทัด 1.25
    • Windows Terminal: อักขระ 9×19, ขนาดฟอนต์ 12, ความสูงบรรทัด 1.2
  • ทางที่เหมาะที่สุดคือสเกลภาพอินพุตล่วงหน้าในโปรแกรมวาดภาพให้มีขนาดตามที่ต้องการแสดงในเทอร์มินัล
    • สำหรับการปรับเล็กน้อย ASCII Silhouettify รับค่าสัมประสิทธิ์การสเกลภาพได้
    • ค่าเริ่มต้นคือ 1
  • อัลกอริทึมการแปลงจะเปลี่ยนพื้นที่ที่มีความสว่างต่ำกว่า 5% เป็นอักขระเว้นวรรค เพื่อให้พื้นหลังสีดำปรากฏเต็มที่
    • ผู้ใช้สามารถปรับ ค่า threshold ความมืด นี้ได้
  • โดยค่าเริ่มต้น งานจะถูกกระจายไปยัง logical processor ทั้งหมดที่ใช้งานได้
    • ผู้ใช้สามารถลดจำนวนโปรเซสเซอร์ที่จัดสรรลงได้จนถึง 1 ตัว
    • การลดจำนวนโปรเซสเซอร์จะทำให้เวลาประมวลผลนานขึ้น

อัลกอริทึมการแปลง

  • บนเดสก์ท็อป Windows ที่ผู้พัฒนาใช้สร้าง ASCII Silhouettify เมื่อ Terminal ใช้การตั้งค่า Cascadia Mono เริ่มต้น 12 พอยต์ 1.2em อักขระ monospace แต่ละตัวจะถูกเรนเดอร์ภายในสี่เหลี่ยม 9×19 พิกเซล
  • อัลกอริทึมจะจับภาพอักขระ ASCII ที่พิมพ์ได้ 95 ตัว และทำ threshold ที่ระดับความเข้ม 50% เพื่อสร้างภาพอักขระที่มีเฉพาะพิกเซลขาวดำ
  • ภาพต้นทางถูกแยกเป็นระนาบสีที่ไม่ซ้ำกัน
    • แต่ละระนาบเป็นซิลูเอตสีขาวบนพื้นหลังสีดำ
  • แต่ละระนาบสีถูกแบ่งเป็นเมทริกซ์ของพื้นที่สี่เหลี่ยม 9×19 พิกเซล
    • แต่ละพื้นที่จะถูกแทนที่ด้วยอักขระ ASCII หนึ่งตัว
  • อักขระที่เหมาะที่สุดถูกเลือกโดยเปรียบเทียบพื้นที่กับภาพอักขระ ASCII ทั้งหมดในระดับพิกเซล
    • หากพิกเซลสีขาวของภาพอักขระทับกับพิกเซลสีดำของพื้นที่ อักขระนั้นจะถูกตัดออกเพื่อไม่ให้บิดเบือนขอบซิลูเอต
    • เลือกอักขระที่เหลือซึ่งมีจำนวนพิกเซลสีขาวที่ตรงกันมากที่สุด
  • เมื่อแทนที่พื้นที่ด้วยอักขระ จะบันทึกจำนวนพิกเซลสีขาวที่ตรงกันไว้
    • หลังจากแปลงทุกระนาบแล้ว จะรวมระนาบโดยเลือกอักขระที่มีจำนวนพิกเซลสีขาวตรงกันสูงสุด
    • อักขระสุดท้ายจะถูกระบายด้วยสีของระนาบที่อักขระนั้นมาจาก

การเร่งความเร็วด้วย bitmask

  • ก่อนการแปลง ภาพอักขระ ASCII จะถูกเรียงตามจำนวนพิกเซลสีขาว
    • อักขระเว้นวรรคมีพิกเซลสีขาว 0 พิกเซล จึงน้อยที่สุด
    • อักขระ @ มีพิกเซลสีขาวมากที่สุด
  • อัลกอริทึมเปรียบเทียบแต่ละพื้นที่กับภาพอักขระโดยไล่จาก @ ลงไป
    • ทันทีที่พบอักขระที่อยู่ภายในซิลูเอตทั้งหมด จะใช้แทนพื้นที่นั้น
    • ด้วยการเรียงลำดับ อักขระนั้นจึงเป็นตัวเลือกที่มีพิกเซลสีขาวมากที่สุด
  • เพื่อเพิ่มความเร็วอย่างมาก จะเตรียม bitmask 171 ชุด สำหรับแต่ละพิกเซลในพื้นที่ 9×19
    • bitmask แต่ละชุดแทนเซตของภาพอักขระ ASCII ที่มีพิกเซลสีดำ ณ พิกัดนั้น
    • bitmask แต่ละชุดมี 95 บิต
    • bit-0 ตรงกับอักขระเว้นวรรค และ bit-94 ตรงกับอักขระ @
  • ระหว่างการแปลงพื้นที่ จะใช้ตัวสะสม 95 บิตเพื่อค่อย ๆ จำกัดชุดตัวเลือกอักขระ ASCII ที่ใช้ได้
    • ตอนเริ่มต้น ตัวสะสมถูกกำหนดให้ทุกบิตเป็น 1
    • สำหรับพิกเซลสีดำแต่ละพิกเซลในพื้นที่ จะทำ bitwise AND ระหว่างตัวสะสมปัจจุบันกับ bitmask ของพิกเซลนั้น
    • การดำเนินการนี้ตัดภาพอักขระที่มีพิกเซลสีขาวอยู่ในตำแหน่งพิกเซลสีดำของพื้นที่ออก
  • หลังจากประมวลผลทั้งพื้นที่แล้ว set bit ในตัวสะสมคืออักขระตัวเลือกที่ใช้แทนได้
    • เนื่องจากมีการเรียงอักขระไว้แล้ว จำนวน leading zeros ของตัวสะสมจึงกลายเป็นดัชนีของภาพอักขระ ASCII ที่มีพิกเซลสีขาวมากที่สุดซึ่งอยู่ภายในซิลูเอตทั้งหมด
    • ด้วยความช่วยเหลือของไลบรารี จะเรียกคำสั่ง คำนวณ leading zeros ของไมโครโปรเซสเซอร์เพื่อให้ได้ค่าที่ต้องการอย่างรวดเร็ว

การปรับจุดกำเนิดให้เหมาะสมและการจับคู่สี

  • เมื่อตัดแบ่งภาพต้นทางเป็นเมทริกซ์ของพื้นที่สี่เหลี่ยม จุดกำเนิดของเมทริกซ์ส่งผลต่อผลลัพธ์
  • เพื่อปรับผลลัพธ์ให้เหมาะที่สุด อัลกอริทึมจะทำการแปลงภาพทั้งภาพซ้ำสำหรับจุดกำเนิดพิกัดจำนวนเต็มทั้งหมดภายใน พื้นที่ 9×19 พิกเซล รอบจุดกำเนิดของภาพ
  • เพื่อรองรับปริมาณงานจำนวนมาก งานจะถูกกระจายไปยัง logical processor ที่ใช้งานได้
  • พาเลตสีอาจถูกจำกัดตั้งแต่ 8 สีแรกของพาเลต ANSI มาตรฐานไปจนถึง ANSI แบบขยายครบ 256 สี ตามการตั้งค่าของผู้ใช้
  • เมื่อแยกภาพต้นทางเป็นระนาบสีที่ไม่ซ้ำกัน จะใช้สูตรความต่างสีเชิงการรับรู้ CIEDE2000 ซึ่งมีต้นทุนคำนวณสูง เพื่อหาสีที่ใกล้ที่สุดในพาเลต

ซอร์สโค้ด

  • Command-line version: repository เวอร์ชันบรรทัดคำสั่งของ ASCII Silhouettify
  • Browser version: repository เวอร์ชันเบราว์เซอร์ของ ASCII Silhouettify

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-06-08
ความคิดเห็นจาก Hacker News

  • คิดว่าหน้าที่ยอดเยี่ยมที่สุดในไซต์นี้คือ แกลเลอรีสี: https://meatfighter.com/ascii-silhouettify/color-gallery.htm...

    • โลโก้ Wendy's ดู น่าขนลุก นิด ๆ
    • ไม่มี โลโก้ Mastodon ดังนั้นหน้านี้ใช้ไม่ได้
    • โลโก้ Z ฉลาดมากจริง ๆ
      ทำให้รู้สึกเหมือนได้มองงานออกแบบกราฟิกไอคอนจากอีกมุมหนึ่ง

  • เคยทำเครื่องมือคล้าย ๆ กันเพื่อสร้าง เกมสไปรต์ ที่เอาไปใส่ในโค้ดได้ทันที: https://memalign.github.io/m/pceimage/index.html
    ทำงานบนเว็บ และแก้ไขเอาต์พุต ASCII แบบมีสีได้ด้วย
    แต่ถ้าจะให้ผลลัพธ์ออกมาดี ต้องปิด Wobble เองและปรับขนาดการสุ่มตัวอย่างพิกเซล เลยค่อนข้างจุกจิกนิดหน่อย

    • สนุกมากและชอบจริง ๆ
      ถ้าจะเสนอแนะ อยากให้มีโหมดที่ตัดการสั่นออก แต่ยังคง ความน่ารัก จากการทำให้หนาขึ้นและมุมโค้งมนไว้

  • ถ้าชอบงานศิลป์เกี่ยวกับ ASCII น่าจะชอบ เครื่องมือ ASCII แบบแอนิเมชัน ที่แปลง GIF เป็น ASCII ด้วย: https://www.gifcii.fun
    อนึ่ง ผมทำเอง

    • ในฐานะคนที่ชอบ GIF นี่สนุกจริง ๆ
      ถ้าบันทึก somehow ได้ก็คงดี เช่น ส่งออกกลับเป็น GIF หรือวิดีโอได้น่าจะเจ๋ง

  • เวอร์ชันเว็บไม่จบบน เบราว์เซอร์ที่ใช้ Chromium เป็นฐาน แต่เวอร์ชัน CLI ใช้งานได้: https://meatfighter.com/ascii-silhouettify/spa/index.html#/
    แถมยังลองทำ ASCII art ขนาดใหญ่ที่ดูเหมือนโลโก้ HN ด้วย

  • งานเจ๋งมาก และทำให้นึกถึง Telnet Matrix แบบมีสี :)
    ภายหลังก็เจอ https://ascii.theater/ ด้วย
    เมื่อหลายปีก่อนเคยทำอะไรคล้าย ๆ กันสำหรับตัวแปลงภาพของคอมพิวเตอร์เรโทร โดยใช้ฟอนต์ความกว้างคงที่ของคอมพิวเตอร์เครื่องนั้น และใช้ dithering ก่อนแปลงเป็นตัวอักษรด้วย
    เพราะมันให้ไล่ระดับในภาพถ่ายที่นุ่มนวลกว่า: https://github.com/KodeMunkie/imagetozxspec/blob/master/src/...

  • “สิ่งที่เคยมีอยู่แล้วก็จะมีอีก และสิ่งที่เคยทำแล้วก็จะถูกทำอีก ไม่มีสิ่งใหม่ใดใต้ดวงอาทิตย์”
    ทำได้ดีมาก
    เมื่อก่อน เราใช้ ความหนาแน่นในการพิมพ์ ของตัวอักษรใน EBCDIC และ ASCII เพื่อพิมพ์แบนเนอร์วันเกิดและรูปภาพในลักษณะคล้ายกันมากบนเครื่องพิมพ์แบบ band printer ที่ใช้กระดาษต่อเนื่อง และต่อมาบนเครื่องพิมพ์ดอตเมทริกซ์

  • วันนี้น่าจะมีคนจำนวนไม่น้อยไปแก้ /etc/motd หรือ /etc/issue

  • เคยลองทำอะไรคล้าย ๆ กันด้วย ฟังก์ชันสั่นไหว ที่เคลื่อนไหวแบบเรียลไทม์: https://piter-genuary2024.netlify.app/genuary9/

    • สงสัยว่าจะทำอะไรแปลกประหลาดได้ไหม โดยเริ่มจากเอาต์พุต tail ของล็อกมาตรฐาน แล้วค่อย ๆ ผสมแพตเทิร์นที่มองเห็นได้ชัดขึ้นเรื่อย ๆ จนสุดท้ายมี ใบหน้าน่ากลัว ปรากฏขึ้นท่ามกลางข้อความ

  • npm อีกแล้วเหรอ
    โปรเจกต์ยอดเยี่ยม แต่ไม่เข้าใจว่าทำไมต้องทำแบบนี้ด้วย
    วิธีติดตั้งแบบธรรมดาหายไปไหนแล้วนะ

    • อยากรู้ว่าคุณเสนอทางเลือกอะไร
      NPM ทำงานแบบเดียวกันได้ทุกที่ และไม่มีตัวจัดการแพ็กเกจไหนที่ถูกใช้แพร่หลายข้ามหลายแพลตฟอร์มเท่า NPM
    • ถ้าบอกได้ว่า “การติดตั้งแบบธรรมดา” ที่ว่าคือแบบไหน ผมจะบอกปัญหาของวิธีนั้นให้ฟังได้
    • ไม่จำเป็นต้องติดตั้งด้วยซ้ำ
      แค่รันด้วย npx ก็พอ
    • นั่นสิ ไม่รู้เหมือนกันว่าวิธีติดตั้งแบบธรรมดามันเกิดอะไรขึ้น หรือจริง ๆ แล้วมันเคยมีอยู่ตั้งแต่แรกหรือเปล่า
      ถ้าจะตั้งค่าด้วยวิธีอื่นต้องใช้เวลาหลายชั่วโมงและกลายเป็นเรื่องยุ่งเหยิง ผมเลยเชื่อม CLI repo ของตัวเองไว้ด้วย npm/yarn link กระจัดกระจายไปทั่ว
      แม้แต่สคริปต์ Python ก็ยังพัฒนาด้วย nodemon main.py จนบางทีรู้สึกว่ามีแค่คนฝั่ง Node เท่านั้นที่รู้ว่าอะไรจำเป็น

  • ถึงอย่างนั้น ก็คงยังใช้ https://asciiflow.com/# ต่อไปมากกว่า Figma