ハクソク

世界を動かす技術を、日本語で。

ASCIIクラウド

132日前原文(caidan.dev)

概要

このテキストは、 Retro CRT スタイルの Terminal エミュレーターの プリセット設定 を説明。 各項目は、 画面効果 や ノイズ、 色調整、 グリフ閾値 などの詳細なパラメータを含む。 設定は、 視覚効果 や 操作性 をカスタマイズするためのもの。 パラメータ値の調整により、 独自のCRT体験 を作成可能。 主なコントロール項目を 箇条書き で整理。

Retro CRT Terminal プリセット設定

  • Fullscreen ：フルスクリーン表示切り替え
  • Presets ：デフォルト、Terminal、Retro CRT、Cosmic Fog、Red などのプリセット選択
  • 操作
    • Save ：設定の保存
    • Copy ：設定値のコピー
    • Paste ：設定値の貼り付け
  • ノイズ調整
    • Noise Intensity ：ノイズ強度（例：0.125）
  • セルサイズ
    • Cell Size ：セルの大きさ（例：18）
  • 波形効果
    • Wave Amplitude ：波形の振幅（例：0.50）
    • Wave Speed ：波形の速度（例：1.00）
  • タイムコントロール
    • Time Speed ：時間進行速度（例：1.5）
    • Seed ：ノイズ生成用シード値
  • ビネット効果
    • Vignette Intensity ：ビネット（周辺減光）強度（例：0.50）
    • Radius ：ビネット半径（例：0.50）
  • 色調整
    • Color Hue ：色相（例：180）
    • Saturation ：彩度（例：0.50）
    • Brightness ：明度（例：0.00）
    • Contrast ：コントラスト（例：1.25）
  • グリフ閾値設定
    • Glyph Thresholds ：各記号への変換閾値設定
      • dot （.）：0.25
      • dash （-）：0.30
      • plus （+）：0.40
      • O ring （O）：0.50
      • X cross （X）：0.65

設定活用のポイント

  • Retro CRT の雰囲気を強調するには、 Noise Intensity や Vignette Intensity の調整が効果的
  • 色調整 で独自の テーマカラー を作成可能
  • Glyph Thresholds で文字表現を細かくカスタマイズ
  • プリセット を活用し、用途や好みに応じた即時切り替えが可能
  • 設定値の保存・コピー・貼り付け で他環境への展開や共有も容易

Hackerたちの意見

もしかしたらもっと色々あるかもしれないけど、テキストポストプロセッシングシェーダーを作って、3Dシーンや動画に適用するのは割と簡単だよね。 https://post-processing.tresjs.org/guide/pmndrs/ascii https://forum.babylonjs.com/t/ascii-shader-using-glsl-postpr... https://threejs.org/examples/?q=ascii#webgl_effects_ascii https://fwdapps.net/l/asci/ https://codesandbox.io/p/sandbox/ascii-postprocessing-n628p8... https://www.youtube.com/watch?v=NxeRcnLr0ko

ずいぶん前に書いたCプログラムで似たような効果を出したことがあるよ（確か2007年かな？）。動画はこちら: https://www.youtube.com/watch?v=H4j-BkwMB20 で、コードはこれ: https://github.com/kristopolous/ascsee 最近、現代のシステムでコンパイルできるように更新したんだ。考古学者気分になりたいなら、元のバージョンも見つけたよ: https://9ol.es/tmp/gol.c

これいいね…でも、各シンボルに違う色や明るさがあると、結局シンボルが異なる強度にしか対応してないから、ASCIIの意味が薄れる気がする。

└

そうだね、こんなに色があったら、1文字だけで十分だよね。

単一の文字だけをレンダリングすることもできるよ。まず、HTMLの「Glyph Thresholds」の「max」属性を1.1に変更する必要がある。で、希望する文字とその上の文字には0.0を設定して、残りの文字には1.1を設定する。例えば、ダッシュだけが欲しいなら、ドットとダッシュを0.0にして、プラス、リング、クロスの文字には1.1を設定すればいい。

名前からして、もっと実際のASCII文字やオプション、選択可能なテキストがあると思ってたけど、見た目は魅力的で遊ぶのも楽しいね。

「衛星ビューの雲」をモデル化するには良い方法に見えるけど、「地上ビューの雲」をモデル化するにはあまりうまくいかないと思う。そういうのをやるための良い（速い）アルゴリズムを探してるんだけど、誰かアドバイスがあればありがたいな。

すごく好きなんだけど、一部のセルが揺れたり、2つのシンボルの間で急に切り替わったりするのが気になるな。もう少しスムーズにできる方法があればいいんだけど。

いいね。でも、もし本当にASCIIのことなら、テキストエディタに雲の空をコピー＆ペーストできるようにしてほしいな ;-P

いい感じ！これ、私が実装したやつに似てるね: https://www.npmjs.com/package/asciiground。私はもっとライブラリとして、ユーザーが既存のシステムを拡張して自分のパターンをプログラムできるようにしたかったんだけど。残念ながら、私のGitHubアカウントがフラグされちゃって、今はリポジトリやデモ用のGitHubページにアクセスできないんだ。

└

初めて見たけど、なんでGitHubアカウントがフラグされるの？

すごく美しいね。根底にあるアルゴリズムはパーリンノイズ（詳しくは https://ja.wikipedia.org/wiki/パーリンノイズ を見てね）で、もう40年以上前のものなんだ！生成された画像は、ガラスや氷の変形、安っぽい水のようなエフェクトに使える素晴らしいツールなんだよ。それに、地形を生成したり、ランダムなパターンを活かしたクールなビジュアルエフェクトを作ることもできる。私にとってのコアな特性は、すごくオーガニックで自然な感じがすること。昔のFlash AS3では、驚くようなエフェクトやゲームを作るために、これがすごく一般的なツールだったんだ。今はそんなビジュアル系のものを作ることはあまりないけど、今でもこの分野では普通に使われてるんじゃないかな？だって、そうする理由があるしね！