HN18128
たった1つのHTMLファイルで動く！ASCIIアートで構築されたサイバーパンクな街を歩こう
A walkable ASCII cyberpunk city in one HTML file [video]
keithcarolus・約10時間前
議論
9件驚くことに、すべてHTMLファイル1つで完結するASCIIアートのサイバーパンク都市が公開されています。開発の進捗が動画でまとめられています。
ASCII City: 交通システムとディテールの更新情報
https://www.youtube.com/watch?v=DSRooHo_HSI
ASCII City: 内装、高低差、そして超高層ビルの追加アップデート
https://www.youtube.com/watch?v=UCKEDWowc0o
動画の説明文から引用：
「ASCII文字だけで構成された、生きた都市を作りたかったんだ。
これはJavaScriptとCanvasを使って構築した小さなカスタムエンジンで、UnityやUnreal、3Dモデル、テクスチャ、シェーダーは一切使っていない。世界はグリッドベースの都市で、道路、建物、木々、車、歩行者が配置されている。
フレームごとに、エンジンがカメラからレイキャスト（光線投射）を行って、パース、奥行き、衝突判定、そして何が見えるべきかを計算し、それらすべてを文字、数字、記号を使って描画している。
言い換えれば、ASCII文字のスクリーン越しに見る、ブロックで作られた小さな3D都市だ。
まだ開発中だけど、これからも雰囲気、ディテール、インタラクションを突き詰めていく予定だよ。」
メインの描画ユニットとしてブロック（ASCIIコード219番）を使って、ディザリングを実装するために他のハーフブロックやハッシュ文字（ASCII 220, 223, 176-178）を使ったほうが良くないか？
おっ、これは面白いね。良いスタートだし、今後このプロジェクトがどう発展していくのか楽しみ。
公開されている動画だとすごく良く見えるんだけど、自分で試してみたら同じようには見えなくて、何がどうなっているのか把握するのが難しかった。何が問題なのかはよくわからないな。
等幅文字のアートに挑戦したいなら、オールドスクールにターミナルでやるより、OP（投稿者）みたいにブラウザでやるのを強くおすすめするよ。自分も少しだけascii[0]やunicode[1]のグラフィックを触ったことがあるけど、ブラウザの方が圧倒的にツールとして優れている。フォントや比率を設定して、ユーザー側にどうレンダリングされるかを正確に把握できるからね。マウス入力やパフォーマンスプロファイリング、その他もろもろの要素もブラウザの方が格段に良い。僕のプロジェクトも両方ともターミナルで動作するけど、最初はブラウザ向けに作ったんだ。
ブラウザという強力なプラットフォームがある中で、今TUI（ターミナルユーザーインターフェース）が開発ツールのちょっとしたルネサンスを迎えているのが少し不思議でならないよ。
[0] https://aleyan.com/projects/ascii-side-of-the-moon/
[1] https://ytirnity.com/play/hexwalker
GitHubのプロジェクトは動画と同じものかな？どうも違うみたいだけど。
すごく懐かしい気分になるな。ソニック・ザ・ヘッジホッグの「Starlight Zone」が歴代で一番好きなゲームステージなんだけど、この街の美的感覚はまさにStarlight Zoneの背景に足を踏み入れたような感じだよ。