ASCIIクラウド

 (caidan.dev)
5 ポイント 投稿者 GN⁺ 2026-01-16 | 2件のコメント | WhatsAppで共有
  • ASCII文字を使って雲の形を視覚化するインタラクティブなWebプロジェクト
  • Noise, Wave, Color, Glyph Thresholds などのさまざまなパラメータを調整して視覚効果を変更可能
  • Retro CRT、Cosmic、Fog、Red などのプリセットモードにより、異なる雰囲気の雲表現をサポート
  • 結果画像をPNGで保存したり、リンクをコピーしたり、**設定値の読み込み（Import）**機能を提供
  • Webベースのグラフィック実験として、テキストと視覚効果の組み合わせの可能性を示す事例

プロジェクト概要

  • ASCII Clouds はASCII文字をベースに雲の形を生成するWebインタラクティブ可視化ツール
    • ブラウザ上でリアルタイムに雲のパターンをレンダリング
    • ユーザーはさまざまな視覚パラメータを直接調整可能
  • インターフェースには 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 などの初期値を提示
  • Vignette 効果のための Intensity(0.80)、Radius(0.60) を設定可能
  • Color調整項目として 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の意見

  • 本当に美しい。この効果の中核アルゴリズムは40年以上前からある Perlin noise だ
    生成された画像は、ガラスや氷のような 変位効果、波紋効果、地形生成など、さまざまな視覚効果に活用できる。自然で有機的な感じが肝だ
    昔の Flash AS3 時代には、こういう効果やゲームを作るときによく使われていたし、今でもまだかなり使われていると思う

    • 実際には技術的には Simplex noise である可能性が高いが、これも Perlin が開発したものだ
    • P5JS を使えば、こうしたノイズをとても簡単に試せる
      p5.noise() リファレンス

  • 実際にはこういう効果は テキストのポストプロセスシェーダー を作って、3D シーンや動画などに適用すれば簡単に実装できる
    参考になりそうな資料:
    pmndrs/ascii ガイド,
    BabylonJS フォーラムの例,
    Three.js ASCII の例,
    fwdapps.net デモ,
    CodeSandbox の例,
    YouTube 動画

    • あるいは ASCII 自体から始める こともできる。友人とシェーダーの動作原理について話していて、Emacs の中で動く小さな “shadertoy” を作ってみた
      shademacs サンプルコード

  • かっこいいことはかっこいいが、各記号ごとに色や明るさが違うと ASCII 本来の意味 が薄れる感じがする

    • それでも「ascii art」なのだから、芸術的自由だと思う
    • 色がここまで多いなら、実際には文字1つだけでも十分そうだ

  • 名前のせいで、もっと多くの ASCII 文字の選択オプション やテキスト選択機能を期待していた。それでも見た目としてはかなり魅力的で、遊んでいて楽しい

    • 私も似たようなものを試している。QWK リーダー を現代的に実装する中で、ANSI メッセージを HTML にレンダリングするのが中核課題だった
      Claude Code で初期実験をしたが、かなり良い結果が出た
      bbs-ansi-to-html プロジェクト

  • 実際には ASCII とはほとんど関係ないが、それでも クールな視覚効果 だ

  • 昔、C で似たような効果を作ったことがある（2007年ごろ）
    YouTube 動画, コードリポジトリ
    最新のシステムでもコンパイルできるよう更新してあり、元のバージョンも残してある
    元の gol.c ファイル

  • かっこいいのは確かだが、本当に ASCII ならテキストエディタに 雲の空をコピー＆ペースト できるべきではないか、という気もする ;-P

    • 私の環境では WebGL エラーで白い画面しか出ない。だからこれは ASCII と見なすのは難しい。純粋なテキストベース出力だったらもっと面白かったと思う

  • これは 衛星視点の雲レンダリング にはうまく合いそうだ。ただ、地上視点の雲をモデリングするには向いていないように見える
    高速で良いアルゴリズムを探しているので、関連資料があれば共有してほしい

  • テーマ的に関連したデモがある
    chromaspiral デモ

  • Balatro の背景効果 を再現しようとして、思った以上に長い時間を使ってしまった