Mây ASCII

• Dự án web tương tác trực quan hóa hình dạng mây bằng ký tự ASCII
• Có thể thay đổi hiệu ứng thị giác bằng cách điều chỉnh nhiều tham số như Noise, Wave, Color, Glyph Thresholds
• Hỗ trợ thể hiện mây với nhiều sắc thái khác nhau thông qua các chế độ preset như Retro CRT, Cosmic, Fog, Red
• Cung cấp các tính năng lưu ảnh dưới dạng PNG, sao chép liên kết và nhập thiết lập (Import)
• Một thử nghiệm đồ họa trên web cho thấy khả năng kết hợp giữa văn bản và hiệu ứng thị giác

---

Tổng quan dự án

• ASCII Clouds là một công cụ trực quan tương tác trên web tạo hình dạng mây dựa trên các ký tự ASCII
  • Kết xuất các mẫu mây theo thời gian thực ngay trong trình duyệt
  • Người dùng có thể trực tiếp điều chỉnh nhiều tham số thị giác khác nhau
• Giao diện bao gồm các nút chức năng như Fullscreen, lưu PNG, Copy Link, Import

Tính năng điều chỉnh hiệu ứng thị giác

• Điều khiển chuyển động và kết cấu của mây bằng cách điều chỉnh các giá trị như Noise, Wave Amplitude, Wave Speed, Noise Intensity, Time Speed
  • Ví dụ: đưa ra các giá trị mặc định như Wave Amplitude 0.150, Wave Speed 0.60, Noise Intensity 0.035, Time Speed 0.70
• Có thể thiết lập Intensity(0.80) và Radius(0.60) cho hiệu ứng Vignette
• Mục điều chỉnh màu sắc cung cấp các giá trị Hue(35), Saturation(0.85), Brightness(-0.05), Contrast(1.50)

Cấu trúc kết xuất dựa trên ký tự

• Glyph Thresholds được áp dụng theo mật độ của mây để hiển thị các ký tự khác nhau
  • . (dot) 0.15, - (dash) 0.30, + (plus) 0.50, O (ring) 0.70, X (cross) 1.00
• Các cấp độ ký tự này được dùng để biểu đạt độ đậm hoặc chiều sâu của mây

Preset và chủ đề

• Cung cấp nhiều preset như Default, Terminal, Retro CRT, Cosmic, Fog, Red
  • Mỗi preset tạo ra hiệu ứng thị giác riêng biệt thông qua tổ hợp màu sắc, độ tương phản, nhiễu và các yếu tố khác
• Người dùng có thể chọn preset để tạo ngay các kiểu mây ASCII khác nhau

Tính năng xuất và chia sẻ

• Có thể lưu ảnh đã tạo dưới dạng tệp PNG hoặc chia sẻ bằng sao chép liên kết
• Thông qua tính năng Import, có thể tải lại các giá trị thiết lập trước đó để tái tạo cùng một mẫu mây
• Các tính năng này giúp dễ dàng lưu lại và tái sử dụng các kết quả trực quan hóa mang tính thử nghiệm

[roxie]

Các ký tự được dùng thật dễ thương.

[GN⁺]

Ý kiến trên Hacker News

• Thật sự rất đẹp. Thuật toán cốt lõi của hiệu ứng này là Perlin noise đã có hơn 40 năm tuổi
  Hình ảnh được tạo ra có thể dùng cho nhiều hiệu ứng thị giác khác nhau như hiệu ứng dịch chuyển kiểu kính hoặc băng, hiệu ứng gợn sóng, tạo địa hình, v.v. Điểm quan trọng là cảm giác tự nhiên và hữu cơ
  Hồi thời Flash AS3, thứ này được dùng khá thường xuyên khi làm các hiệu ứng như vậy hoặc làm game, và có lẽ đến giờ vẫn còn được dùng nhiều

  • Thực ra về mặt kỹ thuật thì có khả năng cao đây là Simplex noise, nhưng cái này cũng do Perlin phát triển
  • Dùng P5JS thì có thể thử nghiệm loại noise này rất dễ
    tham khảo p5.noise()

• Thực ra hiệu ứng kiểu này có thể triển khai khá đơn giản bằng cách tạo shader hậu xử lý văn bản rồi áp dụng vào cảnh 3D hoặc video
  Một số tài liệu đáng tham khảo:
  hướng dẫn pmndrs/ascii,
  ví dụ trên diễn đàn BabylonJS,
  ví dụ ASCII của Three.js,
  demo fwdapps.net,
  ví dụ CodeSandbox,
  video YouTube

  • Hoặc cũng có thể bắt đầu ngay từ ASCII. Trong lúc nói chuyện với một người bạn về cách shader hoạt động, tôi đã làm thử một “shadertoy” nhỏ chạy bên trong Emacs
    mã ví dụ shademacs

• Trông rất ngầu, nhưng nếu mỗi ký hiệu lại có màu sắc hay độ sáng khác nhau thì cảm giác ý nghĩa nguyên bản của ASCII bị giảm đi

  • Dù vậy, vì là ‘ascii art’ nên tôi nghĩ cũng có thể xem là tự do nghệ thuật
  • Nếu có nhiều màu như vậy thì thực ra chỉ cần một ký tự thôi cũng đủ rồi

• Vì cái tên nên tôi đã kỳ vọng sẽ có nhiều tùy chọn chọn ký tự ASCII hơn hoặc chức năng chọn văn bản. Dù vậy, về mặt thị giác thì vẫn khá cuốn và vui để nghịch

  • Tôi cũng đang thử nghiệm thứ gì đó tương tự. Khi hiện đại hóa một trình đọc QWK, nhiệm vụ cốt lõi là render các thông điệp ANSI sang HTML
    Tôi đã làm thử nghiệm ban đầu với Claude Code và kết quả khá ổn
    dự án bbs-ansi-to-html

• Trên thực tế thì nó gần như chẳng liên quan gì đến ASCII, nhưng vẫn là một hiệu ứng thị giác rất ngầu

• Trước đây tôi từng làm một hiệu ứng tương tự bằng C (khoảng năm 2007)
  video YouTube, kho mã nguồn
  Tôi đã cập nhật để nó có thể biên dịch trên các hệ thống hiện đại, và cũng giữ lại bản gốc
  tệp gol.c gốc

• Trông thì ngầu đấy, nhưng nếu là ASCII thật sự thì chẳng phải phải có khả năng sao chép/dán bầu trời mây vào trình soạn thảo văn bản sao? ;-P

  • Trong môi trường của tôi thì chỉ hiện màn hình trắng do lỗi WebGL. Vì vậy khó mà xem đây là ASCII được. Nếu đầu ra thực sự dựa trên văn bản thì có lẽ sẽ thú vị hơn

• Cái này có vẻ phù hợp để render mây từ góc nhìn vệ tinh. Nhưng để mô hình hóa mây từ góc nhìn mặt đất thì có vẻ không hợp lắm
  Tôi đang tìm một thuật toán vừa nhanh vừa tốt, nên nếu có tài liệu liên quan thì rất mong được chia sẻ

• Có một demo liên quan về mặt chủ đề
  demo chromaspiral

  • Một ví dụ liên quan khác (từ năm 2011): nkwiatek.com/experiments/ascii

• Tôi đã tốn nhiều thời gian hơn dự kiến để tái tạo hiệu ứng nền của Balatro