เมฆ ASCII

 (caidan.dev)
5 คะแนน โดย GN⁺ 2026-01-16 | 2 ความคิดเห็น | แชร์ทาง WhatsApp
  • โปรเจกต์เว็บอินเทอร์แอ็กทีฟที่ใช้ อักขระ ASCII เพื่อแสดงภาพเมฆ
  • สามารถปรับพารามิเตอร์ได้หลากหลาย เช่น Noise, Wave, Color, Glyph Thresholds เพื่อเปลี่ยนเอฟเฟกต์ภาพ
  • รองรับการแสดงเมฆในบรรยากาศต่างกันผ่าน โหมดพรีเซ็ต เช่น Retro CRT, Cosmic, Fog, Red
  • มีฟังก์ชัน บันทึกภาพเป็น PNG, คัดลอกลิงก์ และ นำเข้าค่าการตั้งค่า (Import)
  • เป็น การทดลองกราฟิกบนเว็บ ที่แสดงให้เห็นความเป็นไปได้ของการผสานข้อความกับเอฟเฟกต์ภาพ

ภาพรวมโปรเจกต์

  • ASCII Clouds คือ เครื่องมือแสดงภาพแบบอินเทอร์แอ็กทีฟบนเว็บ ที่สร้างรูปทรงเมฆจากอักขระ ASCII
    • เรนเดอร์แพตเทิร์นเมฆแบบเรียลไทม์ในเบราว์เซอร์
    • ผู้ใช้สามารถปรับพารามิเตอร์ด้านภาพต่าง ๆ ได้โดยตรง
  • ในอินเทอร์เฟซมีปุ่มฟังก์ชันอย่าง Fullscreen, บันทึก PNG, Copy Link, Import รวมอยู่ด้วย

ฟังก์ชันปรับเอฟเฟกต์ภาพ

  • ปรับค่าต่าง ๆ เช่น Noise, Wave Amplitude, Wave Speed, Noise Intensity, Time Speed เพื่อควบคุมการเคลื่อนไหวและพื้นผิวของเมฆ
    • ตัวอย่าง: มีค่าเริ่มต้นอย่าง Wave Amplitude 0.150, Wave Speed 0.60, Noise Intensity 0.035, Time Speed 0.70
  • สามารถตั้งค่า Intensity(0.80) และ Radius(0.60) สำหรับเอฟเฟกต์ Vignette
  • มีรายการ ปรับสี พร้อมค่า Hue(35), Saturation(0.85), Brightness(-0.05), Contrast(1.50)

โครงสร้างการเรนเดอร์ด้วยอักขระ

  • มีการใช้ Glyph Thresholds ตามความหนาแน่นของเมฆเพื่อแสดงอักขระที่แตกต่างกัน
    • . (dot) 0.15, - (dash) 0.30, + (plus) 0.50, O (ring) 0.70, X (cross) 1.00
  • ลำดับของอักขระเหล่านี้ใช้เพื่อถ่ายทอดความหนาแน่นหรือความลึกของเมฆ

พรีเซ็ตและธีม

  • มีพรีเซ็ตหลากหลาย เช่น Default, Terminal, Retro CRT, Cosmic, Fog, Red
    • แต่ละพรีเซ็ตสร้างเอฟเฟกต์ภาพที่มีเอกลักษณ์ผ่านการผสมผสานของสี คอนทราสต์ และนอยส์
  • ผู้ใช้สามารถเลือกพรีเซ็ตเพื่อสร้างเมฆ ASCII ในสไตล์ที่ต่างออกไปได้ทันที

ฟังก์ชันการส่งออกและการแชร์

  • สามารถ บันทึกภาพที่สร้างขึ้นเป็นไฟล์ PNG หรือแชร์ผ่าน การคัดลอกลิงก์
  • ผ่าน ฟังก์ชัน Import สามารถโหลดค่าการตั้งค่าก่อนหน้าเพื่อสร้างแพตเทิร์นเมฆเดิมซ้ำได้
  • ฟังก์ชันเหล่านี้ช่วยให้บันทึกและนำผลลัพธ์จากการแสดงภาพเชิงทดลองกลับมาใช้ซ้ำได้อย่างสะดวก

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

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

 
roxie 2026-01-23

ตัวอักษรที่ใช้ก็น่ารักดีนะ
 
GN⁺ 2026-01-16
ความคิดเห็นจาก Hacker News

  • สวยมาก แกนอัลกอริทึมของเอฟเฟกต์นี้คือ Perlin noise ที่มีมานานกว่า 40 ปี
    ภาพที่สร้างขึ้นสามารถนำไปใช้กับเอฟเฟกต์ภาพได้หลากหลาย เช่น displacement effect แบบกระจกหรือน้ำแข็ง, เอฟเฟกต์ระลอกคลื่น, การสร้างภูมิประเทศ เป็นต้น
    จุดสำคัญคือให้ความรู้สึกที่เป็นธรรมชาติและเป็นออร์แกนิก
    สมัย Flash AS3 ก่อนหน้านี้มักใช้บ่อยเวลาทำเอฟเฟกต์หรือเกมแบบนี้ และคิดว่าจนถึงตอนนี้ก็น่าจะยังถูกใช้อยู่มาก

    • จริง ๆ แล้วในเชิงเทคนิคน่าจะเป็น Simplex noise มากกว่า แต่สิ่งนี้ก็ Perlin เป็นผู้พัฒนาด้วย
    • ถ้าใช้ P5JS ก็สามารถทดลอง noise แบบนี้ได้ง่ายมาก
      อ้างอิง p5.noise()

  • จริง ๆ แล้วเอฟเฟกต์แบบนี้ทำได้ง่ายด้วยการสร้าง text post-processing shader แล้วนำไปใช้กับฉาก 3D หรือวิดีโอ เป็นต้น
    แหล่งอ้างอิงที่น่าสนใจ:
    คู่มือ pmndrs/ascii,
    ตัวอย่างในฟอรัม BabylonJS,
    ตัวอย่าง ASCII ของ Three.js,
    เดโมจาก fwdapps.net,
    ตัวอย่าง CodeSandbox,
    วิดีโอ YouTube

    • หรือจะเริ่มจาก ASCII เองเลย ก็ได้ ตอนคุยกับเพื่อนเรื่องหลักการทำงานของ shader ก็เลยลองทำ “shadertoy” เล็ก ๆ ที่รันใน Emacs ขึ้นมา
      โค้ดตัวอย่าง shademacs

  • มันเจ๋งดี แต่ถ้าแต่ละสัญลักษณ์มีสีหรือความสว่างต่างกัน ก็รู้สึกว่า ความเป็น ASCII ในตัวมันเอง จะอ่อนลง

    • แต่ก็เป็น ‘ascii art’ อยู่ดี เลยมองว่าเป็นเสรีภาพทางศิลปะ
    • ถ้ามีสีเยอะขนาดนี้ จริง ๆ แค่ตัวอักษรเดียวก็น่าจะพอแล้ว

  • เพราะชื่อ เลยคาดหวังว่าจะมี ตัวเลือกการเลือกอักขระ ASCII เพิ่มขึ้น หรือมีฟีเจอร์เลือกข้อความได้มากกว่านี้ ถึงอย่างนั้นในแง่ภาพก็ค่อนข้างน่าสนใจและเล่นสนุกดี

    • ผมเองก็กำลังลองอะไรคล้าย ๆ กันอยู่ แกนหลักของการทำ QWK reader เวอร์ชันสมัยใหม่คือการเรนเดอร์ข้อความ ANSI เป็น HTML
      ผมลองต้นแบบช่วงแรกด้วย Claude Code แล้วได้ผลลัพธ์ที่ค่อนข้างดี
      โปรเจกต์ bbs-ansi-to-html

  • เอาเข้าจริงมันแทบไม่เกี่ยวกับ ASCII เลย แต่ก็เป็น เอฟเฟกต์ภาพที่เท่มาก

  • เมื่อก่อนผมเคยทำเอฟเฟกต์คล้าย ๆ กันด้วย C (น่าจะราวปี 2007)
    วิดีโอ YouTube, คลังโค้ด
    ผมอัปเดตให้คอมไพล์ได้บนระบบสมัยใหม่แล้ว และยังเก็บเวอร์ชันต้นฉบับไว้ด้วย
    ไฟล์ gol.c ต้นฉบับ

  • มันเจ๋งนะ แต่ถ้าเป็น ASCII จริง ก็น่าจะต้อง คัดลอก/วางท้องฟ้าที่เป็นก้อนเมฆ ลงใน text editor ได้สิ ;-P

    • ในสภาพแวดล้อมของผมมันขึ้นแต่หน้าจอขาวเพราะ WebGL error ดังนั้นเลยรู้สึกว่านี่นับเป็น ASCII ได้ยาก ถ้าเป็นเอาต์พุตแบบข้อความจริง ๆ น่าจะสนุกกว่านี้

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

  • มีเดโมที่เกี่ยวข้องกันในเชิงธีมอยู่
    เดโม chromaspiral

  • ผมเผลอใช้เวลานานเกินคาดไปมากกับการพยายามทำ เอฟเฟกต์พื้นหลังของ Balatro ขึ้นมาใหม่