Gunma.web #8 で喋って来ました『Ribbon Spread』
2012/03/03(耳の日)にGunma.web #8でLTしてきました。
当日のレポートはこちら。
今回は、HTML5 canvasを用いたプログラミングアートです。
『Ribbon Spread』とは、スライド内にも出てきますがトランプをテーブルの上に少しずつずらしながら広げるカードテクニックの呼称です。今回のプログラムが『少しずつずらす』動作となるので、こういった名前にしました。格好つけました。
今回のプログラムは、HTML5 videoタグ、canvasタグ（もちろんJavaScriptもね）を用いて、Rolling shutter現象を擬似表現します。
Rolling shutter
http://en.wikipedia.org/wiki/Rolling_shutter
この現象が近年話題になったのは、おそらくiPhoneで撮影した写真や動画でしょう。iphone rolling shutterなどのキーワードで画像検索すると沢山出てきます。LTでは、有名なプロペラの写真を紹介しましたが、ギター弦の動画も素晴らしいです。ぜひ探してみてね。
さて、プログラム原理は非常に単純で、一定のインターバル(紹介したデモでは10ms)をおいて、videoタグオプジェクトから一部分を切り取り、canvasタグに貼り付ける、座標を少しずらして切り取り、貼り付ける。くりかえす。これだけです。videoタグのオブジェクトは、imgタグオブジェクトと同様に扱えるので、つまり、画像を扱うのと同じようにプログラミングすることができます。簡単ですね。
このプログラムは「素材が命」。videoタグで表示する動画のフレームレートや解像度が作品の仕上がりに大きく影響します。インターバルを細かく切っても、フレームレートが低いとギザギザした感じになってしまうのです。
そういった理由から、ハイスピードカメラで撮影した動画が適しています。動画内で動く物体がフレーム間で大きく移動してしまうとギザギザが目立ってしまうので、スーパースローな動画の方が良いです。
今回はYoutubeからいくつもサンプルを採取したのですが、どれもライセンスがクリアでなく、作品を公開したくてもできない状況。ライセンスをクリアして、かつRibbon Spreadにとって適した動画が見つかったら公開したいな。
プログラミングコードは、デバッグ用のコードや廃止した機能の実装が残った状態なので、それらを整理してから追って公開したいと思います。
今回のLTは、きれにまとまったと自負していたのですが、後で「落としてない」と指摘を頂戴しました。本当にありがとうございます。
次回もお楽しみに。それでは。