240個のブラウザタブで動くPong

240個のブラウザタブでPongを動かす

• 未使用タブの活用: 240個のブラウザタブを8x30のグリッドに並べてPongゲームを動かす。ボールとパドルは、フォアグラウンドのウィンドウ内のキャンバスとすべてのタブの間をシームレスに移動できる。

着想

• Flappy Favi: 友人のTruがファビコン上で動くFlappy Bird版を作ったことから着想を得た。ファビコンは小さくて見づらいため、それを改善するために複数のタブに画像を描くアイデアを思いついた。

プロトタイピング

• タブグリッドの作成: AppleScriptを使って8つのChromeウィンドウにそれぞれ30個のタブを開き、ウィンドウを適切に配置して大きなグリッドを作る。スクリプトは、閉じたタブを再び開くChromeの特性に対応するため、起動時にそれらを整理する。

高速なファビコン更新

• ファビコンの更新: HTMLのhead要素でファビコンの位置を指定し、ブラウザがアイコンを変更するようにする。Chromeは1秒あたり約4回アイコンを更新できる。バックグラウンドタブでは、setIntervalループは1秒に1回しか実行されない。

• Web Workerの使用: Web Workerを使ってタイマーがメインドキュメントにメッセージを送るようにし、バックグラウンドタブでも滑らかに動作するようにした。

タブ間通信

• タブ位置の認識: AppleScriptのコードで現在のウィンドウとタブのインデックスをクエリパラメータとして渡し、各タブが自分の位置を把握できるようにする。

• Broadcast Channelの使用: WebSocketの代わりにBroadcast Channelを使い、同じドメインのほかのタブに情報を配信する。メインタブがすべてのバックグラウンドタブからの登録イベントを受信した後で、アニメーションを実行する。

キャンバスからタブバーへ

• キャンバスとタブバーの接続: フォアグラウンドウィンドウで描いた図形がタブバーへ移動するように実装した。正確な計測によってキャンバスとファビコンを整列させ、図形の位置に応じてファビコンとメインキャンバスに描画する。

高速化

• リソース使用の最適化: 毎フレームでファビコンを更新する代わりに、変更があるときだけ更新するようにして性能を改善した。

何を作るか？

• ゲームのアイデア: 最初はSnakeゲームを実装しようとしたが、Pongのほうがキャンバスとタブバーの間を移動する効果がより良いと判断し、Pongを選んだ。

Pongの実装

• Pongゲームの実装: コンピュータプレイヤーはパドルの中心をボールの中心に合わせるようにした。ボールがパドルで跳ね返るときは、簡単な三角法を使って角度を計算する。ボールとパドルがファビコンへ滑らかに移動する効果を強調するため、ボールにトレイルを追加した。

まとめ

• プロジェクトの経験: Recurse Centerでこのプロジェクトを進める中で、多くの刺激を受けた。Recurse Centerはプログラミングのための作家のリトリートのような場所であり、そこでの経験がこのプロジェクトのモチベーションになった。

[GN⁺]

Hacker Newsのコメント

• こんにちは！ これを作ったのは私です。これがHNコミュニティに刺さるのか気になっていました

  • アニメーションを使ったらどう見えるのか本当に興味深いです（Firefoxはアニメーションfaviconをサポートしています）— たとえば、将来のボール位置を予測してアニメーションSVGを作れば、ずっと良いフレームレートが得られるかもしれません
  • 友人が、オフスクリーンでのCanvasラスタライズは（一般的には）GPU上で行われると指摘していて、そのせいで私のアニメーションがカクつくという性能面の直感は間違っていた可能性があります
  • Chromeはfaviconの更新を毎秒4回に制限しているとかなり確信しています。faviconを更新する方法はいろいろあるので、私が見落としているものがあるかもしれません

• Nolenの最近のRecurseでの講演に参加しましたが、こういう完全に狂っているのに根本的には楽しくてクールなゲームは本当に魅力的です

  • 昔のインターネットを思い出します。人々がただ楽しむために何かを作っていた時代です
  • 昨夜Nolenが投稿したものに刺激を受けて、ページのソースコードを出力する、とても愉快な一種のクワインを作りました。BEAMのデコンパイルやほかのトリックを使っています
  • こういうものを作る時間があればいいのにと思うし、こんなやり方で何かを生み出している人たちがいると知ると笑顔になります
  • 笑いたいなら、そのクワインを手に入れる作品はこちらです: リンク

• Nolenが作るものは何でも大好きです。私には、彼が昔のインターネットを思い出させる単機能のアプリ/サイトを作る、絶妙なスイートスポットを見つけたように思えます

• Matthew Rayfieldが、タブのfaviconの代わりにURLバーを使った似たような試み: リンク

• 次のものを思い出しました:

  • "Show HN: この素晴らしい実験を見て簡単なバージョンを作った" (2023.11.25) リンク
  • "Three.jsとlocalStorageを使って複数ウィンドウ間で3Dシーンを同期" (2023.11.27) リンク

• 次はDoomだと言っておきます

• 気持ちよくバカバカしくて、努力点A+です

• バンド「Ok Go」がGoogle Chromeとコラボしたミュージックビデオがあって、ブラウザウィンドウとダンサーたちの驚くべき同期や万華鏡のような効果がありました……これを見てそれを思い出しました

• Doomの移植版が数日以内に出てきそうです

• 本当にクールです。Chromeがどれだけいじれるのかが好きです。これはWebSocketを使っているようですが、タブ間通信のための拡張機能を使うこともできます