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

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

Related Posts

1 Comments.

Trackbacks and Pingbacks: