Gunma.web #8 で喋って来ました『Ribbon Spread』

2012/03/03(耳の日)にGunma.web #8でLTしてきました。

当日のレポートはこちら

今回は、HTML5 canvasを用いたプログラミングアートです。

Gunma.web#8 ribbon spread

『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は、きれにまとまったと自負していたのですが、後で「落としてない」と指摘を頂戴しました。本当にありがとうございます。

次回もお楽しみに。それでは。