Awan ASCII

• Proyek web interaktif yang memvisualisasikan bentuk awan menggunakan karakter ASCII
• Dapat mengubah efek visual dengan menyesuaikan berbagai parameter seperti Noise, Wave, Color, Glyph Thresholds
• Mendukung ekspresi awan dengan nuansa berbeda melalui mode preset seperti Retro CRT, Cosmic, Fog, dan Red
• Menyediakan fitur untuk menyimpan hasil sebagai PNG, menyalin tautan, dan mengimpor pengaturan (Import)
• Sebagai eksperimen grafis berbasis web, ini menunjukkan kemungkinan penggabungan teks dan efek visual

---

Gambaran proyek

• ASCII Clouds adalah alat visualisasi interaktif web yang menghasilkan bentuk awan berbasis karakter ASCII
  • Merender pola awan secara real-time di browser
  • Pengguna dapat menyesuaikan sendiri berbagai parameter visual
• Antarmukanya mencakup tombol fitur seperti Fullscreen, simpan PNG, Copy Link, dan Import

Fitur penyesuaian efek visual

• Kendalikan gerakan dan tekstur awan dengan mengatur nilai seperti Noise, Wave Amplitude, Wave Speed, Noise Intensity, dan Time Speed
  • Contoh: ditampilkan nilai bawaan seperti Wave Amplitude 0.150, Wave Speed 0.60, Noise Intensity 0.035, dan Time Speed 0.70
• Tersedia pengaturan Intensity(0.80) dan Radius(0.60) untuk efek Vignette
• Opsi penyesuaian warna menyediakan nilai Hue(35), Saturation(0.85), Brightness(-0.05), dan Contrast(1.50)

Struktur rendering berbasis karakter

• Glyph Thresholds diterapkan sesuai kepadatan awan sehingga karakter yang berbeda akan ditampilkan
  • . (dot) 0.15, - (dash) 0.30, + (plus) 0.50, O (ring) 0.70, X (cross) 1.00
• Tahapan karakter ini digunakan untuk mengekspresikan konsentrasi atau kedalaman awan

Preset dan tema

• Menyediakan berbagai preset seperti Default, Terminal, Retro CRT, Cosmic, Fog, dan Red
  • Setiap preset mewujudkan efek visual unik melalui kombinasi warna, kontras, noise, dan lainnya
• Pengguna dapat memilih preset untuk langsung menghasilkan awan ASCII dengan gaya berbeda

Fitur output dan berbagi

• Gambar yang dihasilkan dapat disimpan sebagai file PNG atau dibagikan dengan menyalin tautan
• Melalui fitur Import, pengaturan sebelumnya dapat dimuat kembali untuk mereproduksi pola awan yang sama
• Fitur-fitur ini memudahkan hasil visualisasi eksperimental untuk disimpan dan digunakan kembali

[roxie]

Karakter yang digunakan lucu-lucu.

[GN⁺]

Komentar Hacker News

• Benar-benar indah. Algoritme inti dari efek ini adalah Perlin noise yang usianya sudah lebih dari 40 tahun
  Gambar yang dihasilkan bisa dimanfaatkan untuk berbagai efek visual seperti efek displacement yang mirip kaca atau es, efek gelombang, pembuatan terrain, dan lain-lain. Kuncinya adalah nuansa yang natural dan organik
  Dulu pada era Flash AS3, ini sering dipakai saat membuat efek seperti ini atau game, dan sepertinya sampai sekarang pun masih banyak digunakan

  • Secara teknis, kemungkinan besar ini sebenarnya Simplex noise, tetapi itu juga dikembangkan oleh Perlin
  • Dengan P5JS, noise seperti ini bisa diuji-coba dengan sangat mudah
    Referensi p5.noise()

• Sebenarnya efek seperti ini cukup mudah dibuat dengan membuat shader pascapemrosesan teks lalu menerapkannya ke scene 3D atau video dan semacamnya
  Beberapa referensi yang bisa dilihat:
  Panduan pmndrs/ascii,
  Contoh forum BabylonJS,
  Contoh ASCII Three.js,
  Demo fwdapps.net,
  Contoh CodeSandbox,
  Video YouTube

  • Atau bisa juga mulai langsung dari ASCII itu sendiri. Saat mengobrol dengan teman tentang cara kerja shader, saya sempat membuat “shadertoy” kecil yang berjalan di dalam Emacs
    Kode contoh shademacs

• Keren sih, tetapi kalau tiap simbol punya warna atau tingkat kecerahan yang berbeda, rasanya makna asli ASCII jadi agak melemah

  • Tapi karena ini ‘ascii art’, saya menganggapnya sebagai kebebasan artistik
  • Kalau warnanya sebanyak ini, sebenarnya satu karakter saja mungkin sudah cukup

• Karena namanya, saya sempat berharap ada lebih banyak opsi pemilihan karakter ASCII atau fitur pemilihan teks. Meski begitu, secara visual ini cukup menarik dan seru untuk dimainkan

  • Saya juga sedang bereksperimen dengan sesuatu yang mirip. Saat membuat QWK reader versi modern, tantangan utamanya adalah merender pesan ANSI ke HTML
    Saya melakukan eksperimen awal dengan Claude Code dan hasilnya lumayan bagus
    Proyek bbs-ansi-to-html

• Sebenarnya ini hampir tidak ada hubungannya dengan ASCII, tapi tetap merupakan efek visual yang keren

• Dulu saya pernah membuat efek serupa dalam C (sekitar tahun 2007)
  Video YouTube, Repositori kode
  Saya sudah memperbaruinya agar bisa dikompilasi di sistem modern, dan versi aslinya juga masih ada
  File gol.c asli

• Keren memang, tapi kalau ini benar-benar ASCII, bukankah seharusnya kita bisa salin/tempel langit berawan ke editor teks? ;-P

  • Di lingkungan saya, yang muncul hanya layar putih karena error WebGL. Jadi saya rasa ini sulit disebut ASCII. Kalau benar-benar output berbasis teks, mungkin akan lebih menarik

• Ini sepertinya cocok untuk rendering awan dari sudut pandang satelit. Tapi untuk memodelkan awan dari sudut pandang permukaan tanah, rasanya kurang pas
  Saya sedang mencari algoritme yang cepat dan bagus, jadi kalau ada referensi terkait akan sangat membantu

• Ada demo yang relevan secara tema
  Demo chromaspiral

  • Contoh terkait lainnya (karya tahun 2011): nkwiatek.com/experiments/ascii

• Saya menghabiskan waktu jauh lebih lama dari perkiraan untuk mencoba mereproduksi efek latar belakang Balatro