ボトルの中の都市 – 256バイトのレイキャスティングシステム

 (frankforce.com)
3 ポイント 投稿者 GN⁺ 2024-05-21 | 1件のコメント | WhatsAppで共有

City In A Bottle – 256バイトのレイキャスティングシステム

  • 紹介

    • 今日は、256バイトのHTMLファイルに収められた小さなレイキャスティングエンジンと都市生成器を紹介する。
    • このプログラムは、複数の概念を小さな空間に詰め込み、パズルを解くように理解できる。
    • 主な構成要素は、HTMLコード、フレーム更新ループ、レンダリングシステム、レイキャスティングエンジン、そして都市そのものである。

  • 全コード

    • このコードは単純なJavaScriptスニペットではなく、完全なHTMLプログラムである。
    • <canvas style=width:99% id=c onclick=setInterval('for(c.width=w=99,++t,i=6e3;i--;c.getContext`2d`.fillRect(i%w,i/w|0,1-d*Z/w+s,1))for(a=i%w/50-1,s=b=1-i/4e3,X=t,Y=Z=d=1;++Z<w&(Y<6-(32<Z&27<X%w&&X/9^Z/8)*8%46||d|(s=(X&Y&Z)%3/Z,a=b=1,d=Z/w));Y-=b)X+=a',t=9)>

HTMLコード

  • HTMLコード
    • HTML部分はシンプルなcanvas要素とonclickイベントで構成されている。
    • <canvas style=width:99% id=c onclick=setInterval('',t=9)>
    • canvas要素のidはcに設定されており、JavaScriptからアクセスできる。
    • onclickイベントはプログラムを開始し、setIntervalの呼び出しで更新ループを生成する。

JavaScriptコード

  • JavaScriptコード

    • canvasがクリックされたときに実行される199バイトのJavaScriptコード。
    • for(c.width=w=99,++t,i=6e3;i--;c.getContext`2d`.fillRect(i%w,i/w|0,1-d*Z/w+s,1))for(a=i%w/50-1,s=b=1-i/4e3,X=t,Y=Z=d=1;++Z<w&(Y<6-(32<Z&27<X%w&&X/9^Z/8)*8%46||d|(s=(X&Y&Z)%3/Z,a=b=1,d=Z/w));Y-=b)X+=a

  • コード分析

    • コードを読みやすく分解する。
    • c.width = w = 99
++t
for (i = 6e3; i--;){
  a = i%w/50 - 1
  s = b = 1 - i/4e3
  X = t
  Y = Z = d = 1
  for(; ++Z<w &  (Y < 6 - (32<Z & 27<X%w && X/9^Z/8)*8%46 ||  d | (s = (X&Y&Z)%3/Z, a = b = 1, d = Z/w));) {
    X += a
    Y -= b
  }
  c.getContext`2d`.fillRect(i%w, i/w|0, 1 - d*Z/w + s, 1)
}

  • コードの段階別説明

    • c.width = w = 99: canvasを初期化し、幅を99ピクセルに設定する。
    • ++t: 時間変数を増加させてアニメーションを作る。
    • for (i = 6e3; i--;){}: ループを通じて各ピクセルの明るさを決定する。
    • a = i % w / 50 - 1: カメラベクトルの水平成分を計算する。
    • b = s = 1 - i / 4e3: カメラベクトルの垂直成分を計算する。
    • X = t: 時間値を開始X位置として使う。
    • Y = Z = d = 1: Y、Z、dの値を初期化する。
    • for(; ++Z<w & ...;): レイキャスティングシステムが衝突を検出するまでループを回す。
    • c.getContext2d.fillRect(i%w, i/w|0, 1 - d*Z/w + s, 1): 各ピクセルを描画して最終画像を作る。

追加学習

  • 追加学習
    • このデモはRevision 2022のデモパーティーに出展され、Pouetで確認できる。
    • Shadertoyで256バイトシェーダーへ拡張されたバージョンを確認できる。
    • Daniel Darabosが作成したインタラクティブツールを通じて、プログラムのさまざまな側面をリアルタイムで操作できる。

GN⁺の意見

  • 興味深い点

    • このプログラムは、非常に小さなコードで複雑なグラフィックスを生成する方法を示している。
    • 初級ソフトウェアエンジニアにも理解しやすい基本的な数学だけを使用している。
    • コード最適化とミニマリズムの良い例であり、コードゴルフのような大会で役立つ可能性がある。

  • 批判的な視点

    • コードが非常に圧縮されているため、可読性が低い場合がある。
    • 実用的な応用よりも、芸術的・実験的な目的により適している。

  • 関連技術

    • 類似プロジェクトとして、Shadertoyでさまざまなシェーダーの例を確認できる。
    • Dwitterのようなプラットフォームで、ほかの小さなコード例を探せる。

  • 技術導入時の考慮事項

    • この技術を導入する際は、コードの可読性と保守性を考慮する必要がある。
    • 小さなコードで複雑な機能を実装することに伴う、性能最適化やデバッグの難しさを認識すべきである.

関連記事

1件のコメント

 
GN⁺ 2024-05-21
Hacker Newsの意見

Hacker Newsコメントまとめ要約

  • JavaScript製の1Kピンボールゲーム:

    • 「これほどのコード量でこれだけ多くの情報を詰め込めるのは驚きだ。」
    • 「本当にすごいが、記事を読んでいる間ずっとループが回り続けて、ノートPCが熱くなった。」
    • 「関連資料: [Atari 2600] Pitfallのワールド構築方法、手続き的生成、遅延評価など。」

  • 手続き的生成と遅延評価:

    • 「手続き的生成に関するさまざまな資料へのリンクを提供。」
    • 「遅延評価とレイトレーシングアルゴリズムの類似性についての指摘。」

  • その他の意見:

    • 「本当にすごい! よくやった。」
    • 「作品も記事もどちらも驚きだ。」
    • 「256バイトのMS-DOSデモに似た Remnants by Alcatraz - YouTubeリンクあり。」
    • 「JavaScriptで書かれている点がさらに印象的だ。」
    • 「本当に驚きだ。」
    • 「読んでいて楽しい。」
    • 「これが好きなら、Twitterの #tweetcart も気に入るはず。Pico-8仮想コンソール向けのツイートサイズのプログラム群だ。」