ASCII Silhouettify - Mengubah gambar menjadi siluet ASCII

 (meatfighter.com)
3 poin oleh GN⁺ 2024-06-08 | 1 komentar | Bagikan ke WhatsApp
  • ASCII Silhouettify adalah aplikasi browser dan command-line yang mengubah grafik datar dan kontras tinggi seperti logo, banner, dan pixel art menjadi seni ASCII siluet yang diisi hanya dengan 95 karakter ASCII yang dapat dicetak
  • Menerima png, svg, jpg, webp, gif, tif, heif, avif, pdf sebagai input, tetapi tidak merender shading, highlight, bayangan, atau gradien, sehingga tidak cocok untuk konversi foto
  • Output mendukung teks berwarna ANSI, teks biasa, HTML, dan format custom ASCII art Neofetch; format Neofetch dibatasi pada 6 warna dari palet ANSI 256 warna yang diperluas
  • Algoritme konversi membagi gambar menjadi bidang warna, lalu pada setiap area 9×19 piksel memilih karakter terbesar di antara karakter ASCII yang tidak melanggar kontur siluet
  • Untuk performa, menggunakan akumulator 95-bit, 171 bitmask, perhitungan leading zeros, dan paralelisasi logical processor; untuk pencocokan palet menerapkan rumus perbedaan warna perseptual CIEDE2000 yang mahal secara komputasi

Aplikasi konversi siluet ASCII

  • ASCII Silhouettify adalah aplikasi yang mengubah gambar menjadi siluet ASCII
    • Siluet ASCII adalah gaya seni ASCII yang menonjolkan bentuk geometris yang terisi merata, bukan garis atau tekstur
    • Cocok untuk grafik datar yang minimalis, kontras tinggi, dan tanpa kedalaman tiga dimensi, seperti logo, banner, dan pixel art
    • Tidak cocok untuk foto karena tidak merender shading, highlight, bayangan, atau gradien
  • Set karakter dibatasi pada 95 karakter ASCII yang dapat dicetak, media tradisional para seniman ASCII
    • Tidak menggunakan karakter garis/blok yang umum pada ANSI art atau banyak karakter Unicode dalam kaomoji
  • Format output berbeda tergantung pengaturan
    • Teks biasa monokrom
    • Teks berwarna dengan ANSI escape sequence
    • HTML dengan atau tanpa warna
    • Format ASCII art Neofetch
  • Ini adalah aplikasi desktop yang dapat digunakan di browser dan command-line

Contoh logo Ubuntu dan Neofetch

  • Contoh ini menunjukkan alur memasukkan hasil ASCII Silhouettify ke output Neofetch pada instance Ubuntu
  • Untuk mendapatkan ASCII art yang optimal, gambar logo Ubuntu beresolusi tinggi diambil dari web, lalu terlebih dahulu diskalakan ke ukuran yang akan terlihat di konsol
  • Jika gambar dikonversi dengan versi command-line, secara default akan dihasilkan teks berwarna ANSI escape sequence
  • Dengan flag -o, output dapat dikirim ke file yang akan ditampilkan Neofetch
  • Karena Neofetch memberi jarak kosong yang lebar antara ANSI art dan metrik OS, contoh ini menggunakan format file custom ASCII art Neofetch
    • Baris pertama file output adalah daftar indeks warna
    • Baris-baris berikutnya adalah gambar yang dienkode
    • Di editor teks, salin baris pertama ke clipboard lalu hapus baris tersebut
    • Saat menjalankan Neofetch, tempelkan nilai yang disimpan di clipboard untuk digunakan
    • Untuk menerapkannya secara permanen, ganti sebagian skrip bash Neofetch dengan nilai yang sama
  • Jika logo asli ditumpuk di atas hasil yang dibuat untuk dibandingkan, terlihat bahwa algoritme memilih karakter terbesar yang masuk ke dalam kontur tiap area warna

Instalasi dan penghapusan

  • Versi command-line adalah aplikasi Node.js
  • Jika belum memiliki Node.js, ikuti terlebih dahulu prosedur instalasi Node.js
  • Di macOS dan Linux, konfigurasi npm diperlukan agar bisa melakukan instalasi global tanpa pengguna root
  • Perintah instalasi:
    • npm install -g ascii-silhouettify
  • Perintah penghapusan:
    • npm uninstall -g ascii-silhouettify

Opsi input dan output

  • Versi browser dan versi command-line mendukung set opsi yang sama
    • Flag -h pada versi command-line menampilkan pesan ringkasan opsi
  • Beberapa gambar dapat dikonversi sekaligus
    • Format yang didukung adalah png, svg, jpg, webp, gif, tif, heif, avif, pdf
    • Flag -i pada versi command-line menerima beberapa aturan pencocokan pola nama file
    • Gambar input harus memiliki latar belakang hitam atau transparan
  • Output terbagi menjadi empat kelompok
    • Teks biasa atau teks berwarna ANSI
    • Teks monospace dalam format HTML
    • Format custom ASCII art Neofetch
    • Format Neofetch dibatasi pada 6 warna dari palet ANSI 256 warna yang diperluas
  • Nilai default palet adalah 240 warna dari palet ANSI 256 warna yang diperluas, tidak termasuk palet ANSI standar 16 warna
    • Palet ANSI standar 16 warna dikecualikan dari default karena sering didefinisikan ulang di emulator terminal modern
    • Pengguna dapat memilih 8 warna pertama dari palet ANSI standar, seluruh 16 warna ANSI standar, seluruh 256 warna ANSI yang diperluas, atau palet default 240 warna
  • Jumlah maksimum warna yang muncul di output dapat ditentukan
    • Warna yang dianggap sebagai latar belakang hitam tidak dihitung
    • Nilai default adalah 255
    • Mode monokrom pada praktiknya menetapkan nilai ini menjadi 1
    • Nilai default untuk format custom ASCII art Neofetch adalah 6, yaitu nilai maksimum format tersebut

Penyesuaian ukuran tampilan dan kualitas konversi

  • Rasio aspek ASCII art yang dihasilkan pada emulator terminal bergantung pada font, ukuran font, tinggi baris, dan aturan pembulatan ukuran karakter
  • Untuk optimasi, tangkap gambar teks terminal dan ukur ukuran piksel tiap karakter monospace, termasuk ruang antarbaris
  • Contoh pengukuran pada desktop Windows pengembang adalah sebagai berikut
    • IntelliJ Terminal: karakter 8×22, ukuran font 10, tinggi baris 1,65
    • Putty: karakter 8×16, ukuran font 10, tinggi baris 1,2
    • Notepad: karakter 10×18, ukuran font 13, tinggi baris 1,04
    • Notepad++: karakter 9×19, ukuran font 12, tinggi baris 1,2
    • Windows Command Prompt: karakter 8×16, ukuran font 10, tinggi baris 1,2
    • Windows Console Host: karakter 9×20, ukuran font 12, tinggi baris 1,25
    • Windows Terminal: karakter 9×19, ukuran font 12, tinggi baris 1,2
  • Idealnya, gambar input terlebih dahulu diskalakan di program gambar ke ukuran yang diinginkan saat ditampilkan di terminal
    • Untuk penyesuaian kecil, ASCII Silhouettify menerima faktor penskalaan gambar
    • Nilai default adalah 1
  • Algoritme konversi mengganti area dengan kecerahan di bawah 5% menjadi karakter spasi agar latar belakang hitam terlihat sepenuhnya
    • Pengguna dapat menyesuaikan ambang kegelapan ini
  • Secara default, pekerjaan didistribusikan ke semua logical processor yang tersedia
    • Pengguna dapat mengurangi jumlah prosesor yang dialokasikan hingga 1
    • Mengurangi jumlah prosesor akan memperpanjang waktu pemrosesan

Algoritme konversi

  • Pada desktop Windows tempat pengembang membuat ASCII Silhouettify, Terminal merender tiap karakter monospace dalam persegi panjang 9×19 piksel saat menggunakan pengaturan default Cascadia Mono 12 poin, 1,2em
  • Algoritme menangkap gambar dari 95 karakter ASCII yang dapat dicetak, lalu menerapkan threshold pada intensitas 50% untuk membuat gambar karakter yang hanya memiliki piksel hitam-putih
  • Gambar sumber dipisahkan menjadi bidang warna unik
    • Tiap bidang adalah siluet putih di atas latar belakang hitam
  • Tiap bidang warna dibagi menjadi matriks area persegi panjang 9×19 piksel
    • Tiap area digantikan oleh satu karakter ASCII
  • Karakter optimal dipilih dengan membandingkan area dan semua gambar karakter ASCII piksel demi piksel
    • Jika piksel putih pada gambar karakter tumpang tindih dengan piksel hitam pada area, karakter tersebut dikecualikan agar tidak mendistorsi kontur siluet
    • Dari karakter yang tersisa, dipilih karakter dengan jumlah kecocokan piksel putih terbanyak
  • Saat mengganti area dengan karakter, jumlah piksel putih yang cocok dicatat
    • Setelah semua bidang dikonversi, karakter dengan jumlah kecocokan piksel putih tertinggi dipilih untuk menggabungkan bidang-bidang tersebut
    • Karakter akhir diwarnai dengan warna bidang asal karakter tersebut

Akselerasi berbasis bitmask

  • Sebelum konversi, gambar karakter ASCII diurutkan berdasarkan jumlah piksel putih
    • Karakter spasi memiliki 0 piksel putih, jumlah paling sedikit
    • Karakter @ memiliki piksel putih paling banyak
  • Algoritme membandingkan tiap area dengan gambar karakter mulai dari @ lalu turun ke bawah
    • Begitu menemukan karakter yang sepenuhnya masuk ke dalam siluet, area tersebut langsung diganti dengan karakter itu
    • Berkat pengurutan, karakter tersebut adalah kandidat dengan jumlah piksel putih terbanyak
  • Untuk meningkatkan kecepatan secara signifikan, disiapkan 171 bitmask untuk tiap piksel pada area 9×19
    • Tiap bitmask merepresentasikan kumpulan gambar karakter ASCII yang memiliki piksel hitam pada koordinat tersebut
    • Tiap bitmask berisi 95 bit
    • bit-0 sesuai dengan karakter spasi, bit-94 sesuai dengan karakter @
  • Selama konversi area, akumulator 95-bit digunakan untuk makin mempersempit kumpulan kandidat karakter ASCII yang tersedia
    • Pada awalnya, semua bit akumulator diinisialisasi menjadi 1
    • Untuk tiap piksel hitam pada area, dilakukan bitwise AND antara akumulator saat ini dan bitmask piksel tersebut
    • Operasi ini mengecualikan gambar karakter yang memiliki piksel putih pada posisi piksel hitam area
  • Setelah seluruh area diproses, set bit pada akumulator adalah kandidat karakter pengganti
    • Karena karakter telah diurutkan, jumlah leading zeros pada akumulator menjadi indeks gambar karakter ASCII dengan piksel putih terbanyak yang sepenuhnya termuat dalam siluet
    • Dengan bantuan library, instruksi perhitungan leading zeros pada mikroprosesor dipanggil untuk mendapatkan nilai yang diperlukan dengan cepat

Optimasi titik asal dan pencocokan warna

  • Saat gambar sumber dibagi menjadi matriks area persegi panjang, titik asal matriks memengaruhi hasil
  • Untuk mengoptimalkan hasil, algoritme mengulang konversi seluruh gambar untuk setiap titik asal berkoordinat bilangan bulat di dalam area 9×19 piksel di sekitar titik asal gambar
  • Untuk menangani beban pemrosesan yang besar, pekerjaan didistribusikan ke logical processor yang tersedia
  • Palet warna dapat dibatasi sesuai pengaturan pengguna, mulai dari 8 warna pertama palet ANSI standar hingga seluruh 256 warna ANSI yang diperluas
  • Saat memisahkan gambar sumber menjadi bidang warna unik, digunakan rumus perbedaan warna perseptual CIEDE2000 yang mahal secara komputasi untuk menemukan warna terdekat dalam palet

Kode sumber

Bacaan terkait

1 komentar

 
GN⁺ 2024-06-08
Komentar Hacker News

  • Menurutku halaman paling keren di situs ini adalah galeri warna: https://meatfighter.com/ascii-silhouettify/color-gallery.htm...

    • Logo Wendy's agak menyeramkan
    • Karena tidak ada logo Mastodon, halaman ini tidak sah
    • Logo Z benar-benar cerdik
      Rasanya membuat kita melihat desain grafis ikon dari sudut pandang lain

  • Aku pernah membuat alat serupa untuk membuat sprite game yang bisa langsung dimasukkan ke kode: https://memalign.github.io/m/pceimage/index.html
    Berjalan di web, dan keluaran ASCII berwarna juga bisa diedit
    Namun agar hasilnya bagus, agak merepotkan karena Wobble harus dimatikan secara manual dan ukuran sampling piksel harus disesuaikan

    • Ini benar-benar seru dan aku suka
      Kalau boleh menyarankan, akan bagus kalau ada mode yang menghilangkan goyangan, tetapi tetap mempertahankan kesan imut yang muncul dari bentuk yang dibuat tebal dan sudut-sudut yang dibulatkan

  • Jika suka seni terkait ASCII, sepertinya kamu juga akan suka alat ASCII animasi yang mengubah GIF menjadi ASCII: https://www.gifcii.fun
    Sebagai catatan, aku membuatnya sendiri

    • Sebagai orang yang suka GIF, ini benar-benar seru
      Akan bagus kalau somehow bisa disimpan, misalnya diekspor lagi sebagai GIF atau video

  • Versi webnya tidak selesai di browser berbasis Chromium, tetapi versi CLI berfungsi: https://meatfighter.com/ascii-silhouettify/spa/index.html#/
    Sebagai bonus, aku juga mencoba membuat ASCII art besar yang terlihat seperti logo HN

  • Karya yang keren, dan mengingatkanku pada Telnet Matrix berwarna :)
    Belakangan aku juga menemukan https://ascii.theater/
    Beberapa tahun lalu aku membuat sesuatu yang mirip untuk konverter gambar komputer retro; alat itu menggunakan font monospace komputer tersebut dan juga menerapkan dithering sebelum konversi karakter
    Karena dari foto menghasilkan gradasi yang lebih halus: https://github.com/KodeMunkie/imagetozxspec/blob/master/src/...

  • “Apa yang pernah ada akan ada lagi, dan apa yang pernah dilakukan akan dilakukan lagi; tidak ada sesuatu yang baru di bawah matahari.”
    Dibuat dengan baik
    Dulu, dengan EBCDIC dan ASCII, kami biasa mencetak banner ulang tahun dan gambar dengan cara yang sangat mirip, memanfaatkan kepadatan cetak karakter, di printer band kertas kontinu dan kemudian printer dot matrix

  • Sepertinya hari ini akan ada cukup banyak orang yang mengubah /etc/motd atau /etc/issue

  • Aku pernah mencoba sesuatu yang mirip dengan fungsi bergoyang yang bergerak secara real-time: https://piter-genuary2024.netlify.app/genuary9/

    • Aku penasaran apakah bisa membuat sesuatu yang aneh: mulai dari keluaran tail log standar, lalu perlahan mencampurkan pola yang makin terlihat, sampai akhirnya sebuah wajah menakutkan muncul di antara teks

  • Npm lagi
    Proyeknya bagus, tapi aku tidak mengerti kenapa harus selalu begini
    Rasanya, ke mana perginya cara instalasi biasa?

    • Aku penasaran alternatif apa yang kamu sarankan
      NPM bekerja dengan cara yang sama di mana-mana, dan tidak ada package manager yang digunakan seluas NPM di berbagai platform
    • Kalau kamu memberi tahu apa yang dimaksud dengan “instalasi biasa” di sini, aku bisa menjelaskan masalah dari cara itu
    • Tidak perlu diinstal juga
      Jalankan saja dengan npx
    • Benar juga, entah apa yang terjadi dengan cara instalasi biasa, atau apakah itu memang pernah ada sejak awal
      Kalau mengatur dengan cara lain, bisa makan waktu berjam-jam dan jadi berantakan, jadi repositori CLI-ku aku hubungkan di sana-sini dengan npm/yarn link
      Bahkan skrip Python pun kukembangkan dengan nodemon main.py, dan rasanya hanya orang-orang Node yang tahu apa yang dibutuhkan

  • Meski begitu, sepertinya aku akan tetap memakai https://asciiflow.com/# daripada Figma