HTMl5 CanvasでColor Cycling
また、魅力的なHTML5デモが公開された。
その昔、Color Cyclingという技術があった。PCのビデオカードが256色しか同時に利用出来ないときに、その256色を動的に素早く切り替えることで多くの色を使えるようにする技術で90年代初頭まで多く使われていた。
参照: Wikipedia/Color Cycling（英語）
現在では32ビットのTrue Colorのビデオカードや3D環境が一般的になったためほとんど使われることは無い。しかし、モバイルやWebなどのように利用出来る色が制限された2D環境で、この技術が復活するかもしれないと考えて開発された魅力的なデモが公開された。これが本当にクールだ。
Color Cycle: True 8-bit Color Cycling with HTML5
デモでは上にある"
デモは8ビットカラーのColor Cyclingエンジンを用い、HTML5のCanvasでリアルタイムにレンダリングされている。Mark J. Ferrariというアーティストによって描かれた35の640x480の元画像を使い、そこにサウンドトラックを組み合わせている。デモのソースはLGPL v3.0で公開されている。
サポートされているブラウザはSafari 5以降、Google Chrome 5以降、Firefox 3.5以降、Opera 10.6以降、iOS 4以降のiPhoneとiOS 3.2以降のiPadとなっている。Internet ExplorerについてはGoogle Chrome Frameの利用で動作可能とされている*1。
このデモを実現するために、単純なColor Cyclingではなく、"Fading"カラーを加える"BlendShift"というものを用いていたり、JavaScriptでフレームごとに307,200ものピクセルを描画するために最適化を行ったりしている。また、元の画像がAmiga IFF / ILBMだったため、そこからピクセルデータを取り出すC++のコンバーターを開発している*2。実際のデータはJSONで保存されており、1シーンごとに100Kずつ送られている。
これらデモの詳しい内容は作者のブログ記事を参照して欲しい。
EffectGames.com | Joe's Blog : Old School Color Cycling with HTML5
