やじうまの杜

たった256文字のJavaScriptコードで描かれた街の風景アニメがスゴ過ぎて訳がわからない

解説ページを見てもわからないorz

2022年6月1日 06:45

　「やじうまの杜」では、ニュース・レビューにこだわらない幅広い話題をお伝えします。

「A City in a Bottle」という一見ただのムービーの正体は？

　「A City in a Bottle」（ボトルに閉じ込められた街）と題されたこの動画。パッと見は動画ファイルを再生したのかなって感じなのですが、実はこれ、すべてJavaScriptで書かれているのだそう。しかもたった256文字です！！

　実際に以下のコードをHTMLファイルとして保存し、「Microsoft Edge」で開いてみましたが、ちゃんと街が再現されました。 

<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)>

　再生する際は「Edge」の閲覧画面をクリックしてくださいね。わざわざファイルを作るのが面倒な方は、「JSFiddle」で試してみてもよいでしょう。

実際に「Microsoft Edge」で動作させた様子
「JSFiddle」で手軽に試すことも

　なぜこのコードが美しい街を映し出せるのか、JavaScriptに疎い筆者にはさっぱりわかりませんが、コードを解析してわかりやすくしてくれた方がいます。

　この解説ページでは各種パラメーターを変更しながら、「A City in a Bottle」のレンダリングがどのように変わるのかを試すことができます。なかなか本格的な光線追跡（レイトレーシング）も行っているようで、素人にはこれでもさっぱり、チンプンカンプンですが、興味ある人はのぞいてみてください。

パラメータをいじりながら、「A City in a Bottle」の仕組みを学べる解説ページ

　なお、今回の「A City in a Bottle」を制作したFrank Force氏（@KilledByAPixel）は、他にもこのような「超短いのにスゴいコード」を「Dwitter」というJavaScript共有サイトで1,000個以上も公開しているのだそうです。そちらもぜひどうぞ