ASCII Silhouettify - Görselleri ASCII silüetlere dönüştürme

 (meatfighter.com)
3 puan yazan GN⁺ 2024-06-08 | 1 yorum | WhatsApp'ta paylaş
  • ASCII Silhouettify; logo, banner ve piksel sanatı gibi düz ve yüksek kontrastlı grafikleri, yalnızca yazdırılabilir 95 ASCII karakteriyle doldurulmuş silüet ASCII sanatına dönüştüren bir tarayıcı ve komut satırı uygulamasıdır
  • Girdi olarak png, svg, jpg, webp, gif, tif, heif, avif, pdf kabul eder; ancak gölgelendirme, parlak alanlar, gölgeler ve gradyanları render etmediği için fotoğraf dönüştürmeye uygun değildir
  • Çıktı; ANSI renkli metin, düz metin, HTML ve Neofetch özel ASCII sanatı biçimlerini destekler; Neofetch biçimi, 256 renkli genişletilmiş ANSI paletindeki 6 renkle sınırlıdır
  • Dönüştürme algoritması, görseli renk düzlemlerine ayırır ve ardından her 9×19 piksellik alanda, silüet konturunu ihlal etmeyen ASCII karakterleri arasından en büyük karakteri seçer
  • Performans için 95 bitlik akümülatör, 171 bit maskesi, leading zeros hesaplaması ve mantıksal işlemci paralelleştirmesi kullanır; palet eşleştirmesinde ise hesaplama maliyeti yüksek CIEDE2000 algısal renk farkı formülünü uygular

ASCII silüet dönüştürme uygulaması

  • ASCII Silhouettify, görselleri ASCII silüetlere dönüştüren bir uygulamadır
    • ASCII silüet, çizgilerden veya dokudan çok, eşit şekilde doldurulmuş geometrik formların öne çıktığı bir ASCII sanatı stilidir
    • Logo, banner ve piksel sanatı gibi minimalist, yüksek kontrastlı ve üç boyutlu derinliği olmayan düz grafikler için uygundur
    • Gölgelendirme, parlak alanlar, gölgeler ve gradyanları render etmediği için fotoğraflar için uygun değildir
  • Karakter kümesi, geleneksel ASCII sanatçılarının ortamı olan 95 yazdırılabilir ASCII karakteri ile sınırlıdır
    • ANSI sanatında yaygın olan çizgi/blok karakterleri veya kaomoji’deki birçok Unicode karakter kullanılmaz
  • Çıktı biçimi ayarlara göre değişir
    • Tek renkli düz metin
    • ANSI escape sequence’larıyla renklendirilmiş metin
    • Renkli veya renksiz HTML
    • Neofetch ASCII sanatı biçimi
  • Tarayıcıda ve komut satırında kullanılabilen bir masaüstü uygulamasıdır

Ubuntu logosu ve Neofetch örneği

  • Örnek, bir Ubuntu instance’ında Neofetch çıktısına ASCII Silhouettify sonucunu yerleştirme akışını gösterir
  • En iyi ASCII sanatını elde etmek için web’den yüksek çözünürlüklü bir Ubuntu logosu görseli alınır ve önce konsolda görünecek boyuta ölçeklenir
  • Görsel komut satırı sürümüyle dönüştürüldüğünde varsayılan olarak ANSI escape sequence renkli metin üretilir
  • -o bayrağıyla çıktı, Neofetch’in göstereceği dosyaya yönlendirilebilir
  • Neofetch, ANSI sanatı ile OS metrikleri arasına geniş bir boşluk koyduğu için örnek, Neofetch özel ASCII sanatı dosya biçimini kullanır
    • Çıktı dosyasının ilk satırı renk indeksleri listesidir
    • Sonraki satırlar kodlanmış görseldir
    • Metin düzenleyicide ilk satır panoya kopyalanır ve ardından kaldırılır
    • Neofetch çalıştırılırken panoya kaydedilen değer yapıştırılarak kullanılır
    • Kalıcı uygulamak için Neofetch bash betiğinin bir kısmı aynı değerle değiştirilir
  • Orijinal logo, oluşturulan sonucun üzerine bindirilerek karşılaştırıldığında, algoritmanın her renk alanının konturu içine sığan en büyük karakteri seçme biçimi ortaya çıkar

Kurulum ve kaldırma

  • Komut satırı sürümü bir Node.js uygulamasıdır
  • Node.js yoksa önce Node.js kurulum adımları izlenmelidir
  • macOS ve Linux’ta root kullanıcısı olmadan global kurulum yapabilmek için npm ayarı gerekir
  • Kurulum komutu:
    • npm install -g ascii-silhouettify
  • Kaldırma komutu:
    • npm uninstall -g ascii-silhouettify

Girdi ve çıktı seçenekleri

  • Tarayıcı sürümü ile komut satırı sürümü aynı seçenek kümesini destekler
    • Komut satırı sürümündeki -h bayrağı seçenek özet mesajını yazdırır
  • Birden fazla görsel tek seferde dönüştürülebilir
    • Desteklenen biçimler png, svg, jpg, webp, gif, tif, heif, avif, pdf şeklindedir
    • Komut satırı sürümündeki -i bayrağı birden çok dosya adı desen eşleştirme kuralı alır
    • Girdi görsellerinin siyah veya saydam arka plana sahip olması gerekir
  • Çıktı dört gruba ayrılır
    • Düz metin veya ANSI renkli metin
    • HTML biçiminde sabit genişlikli metin
    • Neofetch özel ASCII sanatı biçimi
    • Neofetch biçimi, 256 renkli genişletilmiş ANSI paletindeki 6 renkle sınırlıdır
  • Varsayılan palet, 256 renkli genişletilmiş ANSI paletinden standart 16 renkli ANSI paleti çıkarıldıktan sonra kalan 240 renktir
    • Standart ANSI paletindeki 16 renk, modern terminal emülatörlerinde sıkça yeniden tanımlandığı için varsayılanlardan çıkarılmıştır
    • Kullanıcılar standart ANSI paletinin ilk 8 rengini, standart ANSI 16 renginin tamamını, genişletilmiş ANSI 256 renginin tamamını veya varsayılan 240 renkli paleti seçebilir
  • Çıktıda görünecek maksimum renk sayısı belirtilebilir
    • Siyah arka plan olarak kabul edilen renkler sayılmaz
    • Varsayılan değer 255’tir
    • Tek renkli mod fiilen bu değeri 1’e ayarlar
    • Neofetch özel ASCII sanatı biçiminin varsayılanı, bu biçimin maksimum değeri olan 6’dır

Görüntü boyutu ve dönüştürme kalitesi ayarı

  • Terminal emülatöründe oluşturulan ASCII sanatının en-boy oranı; yazı tipine, yazı tipi boyutuna, satır yüksekliğine ve karakter boyutu yuvarlama kurallarına göre değişir
  • Optimizasyon için terminaldeki metin görüntüsü yakalanır ve satırlar arası boşluk dahil her sabit genişlikli karakterin piksel boyutu ölçülür
  • Geliştiricinin Windows masaüstüne göre ölçüm örnekleri şöyledir
    • IntelliJ Terminal: karakter 8×22, yazı tipi boyutu 10, satır yüksekliği 1.65
    • Putty: karakter 8×16, yazı tipi boyutu 10, satır yüksekliği 1.2
    • Notepad: karakter 10×18, yazı tipi boyutu 13, satır yüksekliği 1.04
    • Notepad++: karakter 9×19, yazı tipi boyutu 12, satır yüksekliği 1.2
    • Windows Command Prompt: karakter 8×16, yazı tipi boyutu 10, satır yüksekliği 1.2
    • Windows Console Host: karakter 9×20, yazı tipi boyutu 12, satır yüksekliği 1.25
    • Windows Terminal: karakter 9×19, yazı tipi boyutu 12, satır yüksekliği 1.2
  • Girdi görselini, terminalde gösterilmesi istenen boyuta bir çizim programında önceden ölçeklemek idealdir
    • Küçük ayarlamalar için ASCII Silhouettify görsel ölçekleme katsayısı alır
    • Varsayılan değer 1’dir
  • Dönüştürme algoritması, parlaklığı %5’in altındaki alanları boşluk karakterine dönüştürerek siyah arka planın tamamen görünmesini sağlar
    • Kullanıcı bu karanlık eşiğini ayarlayabilir
  • Varsayılan olarak iş, kullanılabilir tüm mantıksal işlemcilere dağıtılır
    • Kullanıcı ayrılan işlemci sayısını 1’e kadar düşürebilir
    • İşlemci sayısını azaltmak işlem süresini uzatır

Dönüştürme algoritması

  • Geliştiricinin ASCII Silhouettify’ı yaptığı Windows masaüstünde Terminal, varsayılan 12 punto ve 1.2em Cascadia Mono ayarlarıyla her sabit genişlikli karakteri 9×19 piksel dikdörtgen içine render eder
  • Algoritma, 95 yazdırılabilir ASCII karakterinin görsellerini yakalar ve %50 yoğunluk eşiğiyle eşikleyerek yalnızca siyah-beyaz piksellerden oluşan karakter görselleri üretir
  • Kaynak görsel benzersiz renk düzlemlerine ayrılır
    • Her düzlem, siyah arka plan üzerindeki beyaz bir silüettir
  • Her renk düzlemi, 9×19 piksellik dikdörtgen alanlardan oluşan bir matrise bölünür
    • Her alan tek bir ASCII karakteriyle değiştirilir
  • En iyi karakter, alan ile tüm ASCII karakter görsellerinin piksel piksel karşılaştırılmasıyla seçilir
    • Karakter görselindeki beyaz pikseller alanın siyah pikselleriyle çakışırsa, silüet konturunu bozmamak için o karakter elenir
    • Kalan karakterler arasından beyaz piksel eşleşme sayısı en yüksek olan seçilir
  • Alan bir karakterle değiştirilirken eşleşen beyaz piksel sayısı kaydedilir
    • Tüm düzlemler dönüştürüldükten sonra, en yüksek eşleşen beyaz piksel sayısına sahip karakter seçilerek düzlemler birleştirilir
    • Nihai karakter, o karakterin geldiği düzlemin rengiyle boyanır

Bit maskesi tabanlı hızlandırma

  • Dönüştürmeden önce ASCII karakter görselleri beyaz piksel sayısına göre sıralanır
    • Boşluk karakteri, 0 beyaz pikselle en azına sahiptir
    • @ karakteri en fazla beyaz piksele sahiptir
  • Algoritma @ karakterinden başlayıp aşağı doğru inerek her alanı karakter görselleriyle karşılaştırır
    • Silüetin içine tamamen sığan bir karakter bulunduğu anda o alan bu karakterle değiştirilir
    • Sıralama sayesinde bu karakter, beyaz piksel sayısı en fazla olan adaydır
  • Hızı büyük ölçüde artırmak için 9×19 alanın her pikseli için 171 bit maskesi hazırlanır
    • Her bit maskesi, ilgili koordinatta siyah piksele sahip ASCII karakter görselleri kümesini temsil eder
    • Her bit maskesi 95 bit içerir
    • bit-0 boşluk karakterine, bit-94 ise @ karakterine karşılık gelir
  • Alan dönüştürülürken kullanılabilir ASCII karakter adayları kümesi, 95 bitlik bir akümülatörle giderek daraltılır
    • Başlangıçta akümülatörün tüm bitleri 1 olarak ilklendirilir
    • Alandaki her siyah piksel için mevcut akümülatör ile ilgili piksel bit maskesi arasında bitwise AND yapılır
    • Bu işlem, alanın siyah piksel konumlarında beyaz pikseli bulunan karakter görsellerini eler
  • Tüm alan işlendiğinde akümülatördeki set bit’ler, yerine kullanılabilecek karakter adaylarıdır
    • Karakterler sıralı olduğundan, akümülatördeki leading zeros sayısı, silüetin içine tamamen sığan ve en fazla beyaz piksele sahip ASCII karakter görselinin indeksi olur
    • Kütüphane yardımıyla mikroişlemcinin leading zeros hesaplama komutu çağrılarak gerekli değer hızlıca elde edilir

Orijin optimizasyonu ve renk eşleştirme

  • Kaynak görsel dikdörtgen alanlar matrisine bölünürken matrisin orijini sonucu etkiler
  • Sonucu optimize etmek için algoritma, görsel orijini çevresindeki 9×19 piksellik alan içindeki tüm tamsayı koordinat orijinleri için tüm görsel dönüşümünü tekrarlar
  • Yüksek işlem hacmini karşılamak için iş kullanılabilir mantıksal işlemcilere dağıtılır
  • Renk paleti, kullanıcı ayarlarına bağlı olarak standart ANSI paletinin ilk 8 renginden genişletilmiş ANSI 256 renginin tamamına kadar sınırlandırılabilir
  • Kaynak görsel benzersiz renk düzlemlerine ayrılırken, palet içindeki en yakın rengi bulmak için hesaplama maliyeti yüksek CIEDE2000 algısal renk farkı formülü kullanılır

Kaynak kodu

İlgili okumalar

1 yorum

 
GN⁺ 2024-06-08
Hacker News yorumları

  • Bence bu sitedeki en havalı sayfa renk galerisi: https://meatfighter.com/ascii-silhouettify/color-gallery.htm...

    • Wendy's logosu biraz ürkütücü
    • Mastodon logosu yoksa bu sayfa geçersiz
    • Z logosu gerçekten zekice
      İkon grafik tasarımına farklı bir açıdan bakmanızı sağlıyor gibi

  • Doğrudan koda koyabileceğim oyun sprite'ları yapmak için benzer bir araç yapmıştım: https://memalign.github.io/m/pceimage/index.html
    Web'de çalışıyor ve renkli ASCII çıktısı da düzenlenebiliyor
    Ancak sonucu iyi yapmak için Wobble'ı elle kapatıp piksel örnekleme boyutunu ayarlamak gerekiyor; bu yüzden biraz zahmetli

    • Gerçekten eğlenceli ve hoşuma gitti
      Bir öneri olarak, titreşimi kaldırıp kalınlaştıran ama köşeleri yuvarlatmanın verdiği sevimli hissi koruyan bir mod olsa güzel olurdu

  • ASCII ile ilgili sanatı seviyorsanız, GIF'leri ASCII'ye çeviren animasyonlu ASCII aracı da hoşunuza gidebilir: https://www.gifcii.fun
    Bu arada, kendim yaptım

    • GIF seven biri olarak gerçekten eğlenceli
      Bir şekilde kaydedilebilse güzel olurdu; örneğin tekrar GIF ya da video olarak dışa aktarmak harika olurdu

  • Web sürümü Chromium tabanlı tarayıcılarda bitmiyor, ama CLI sürümü çalışıyor: https://meatfighter.com/ascii-silhouettify/spa/index.html#/
    Ek olarak HN logosuna benzeyen büyük bir ASCII art da yaptım

  • Harika bir çalışma; renkli Telnet Matrix'i hatırlattı :)
    Sonradan https://ascii.theater/ adresini de keşfettim
    Birkaç yıl önce retro bilgisayar görsel dönüştürücüsü için benzer bir şey yapmıştım; o bilgisayarın sabit genişlikli yazı tipini kullanıyor ve karakter dönüştürmeden önce dithering de uyguluyordum
    Çünkü fotoğraflarda daha yumuşak gradyanlar ortaya çıkıyordu: https://github.com/KodeMunkie/imagetozxspec/blob/master/src/...

  • “Var olmuş olan yine var olacak; yapılmış olan yine yapılacak. Güneşin altında yeni bir şey yok.”
    İyi yapılmış
    Eskiden EBCDIC ve ASCII ile karakterlerin baskı yoğunluğunu kullanarak doğum günü pankartlarını ve resimleri sürekli form band yazıcılarda, daha sonra da nokta vuruşlu yazıcılarda buna çok benzer şekilde basardık

  • Bugün /etc/motd ya da /etc/issue dosyasını düzenleyen epey kişi olacak gibi

  • Gerçek zamanlı hareket eden sallanan bir fonksiyonla benzer bir şey denemiştim: https://piter-genuary2024.netlify.app/genuary9/

    • Standart log tail çıktısıyla başlayıp giderek daha görünür desenler karıştırarak, sonunda metnin arasından korkunç bir yüzün belirdiği türden tekinsiz bir şey yapılabilir mi merak ediyorum

  • Yine mi npm
    Proje harika, ama neden illa böyle olması gerektiğini bilmiyorum
    Normal kurulum yöntemi nereye gitti, diye düşünüyorum

    • Hangi alternatifi önerdiğini merak ediyorum
      NPM her yerde aynı şekilde çalışıyor ve NPM kadar çok platformda yaygın kullanılan bir paket yöneticisi yok
    • Burada kastettiğin “normal kurulum”un hangi yöntem olduğunu söylersen, o yöntemin sorunlarını anlatabilirim
    • Kurmaya bile gerek yok
      Sadece npx ile çalıştırabilirsin
    • Aynen, normal kurulum yöntemine ne oldu, yoksa baştan beri hiç var olmadı mı, bilmiyorum
      Başka bir şekilde ayarlamak saatler sürüp karmakarışık hale geldiği için CLI depolarımı oradan buradan npm/yarn link ile bağlıyorum
      Hatta Python betiklerini bile nodemon main.py ile geliştiriyorum; neye ihtiyaç olduğunu bilenler sanki yalnızca Node tarafındakiler gibi

  • Yine de Figma yerine https://asciiflow.com/# kullanmaya devam edecek gibiyim