Ruby+Shoesでスキャニメーションを作ろう！

本屋にいったら「ギャロップ!! (しかけえほん)」という絵本がありました表紙に窓があって中に馬の絵が描かれていますページを開いていくとその馬が突然走り出しましたよく見るとページの開閉に連動してスリット入りのマスクが絵に対して動いて動画を形成していることがわかりました暫し見入ってページを開いたり閉じたりしました

家に帰ってネットを調べてみるとこれがスキャニメーションという技術であることがわかりました少し検索を掛けると動いて見える仕組みは直ぐにわかりました紙に図形の位置をずらした4枚の絵とマスクを作って自分でもやってみました単純な絵でしたがなんとなく動いてるように見えました

RubyのGUIフレームワークであるShoesに描画をマスクする機能があるのを思い出しましたこれで図とマスクを作るスクリプトとそれを再生するスクリプトを書いてみたら果たしてうまくいきました

欲が出てこの結果をネットに公開したいと思いましたネットで馬の連続写真を探して Gimpでその輪郭を取って Shoesのスクリプトで図とマスクを作りこれをキャプチャしてWebページを作ったら果たしてうまくいきました

これを公開しましたので遊んでみてくださいブラウザのウィンドウをリサイズするかグリッドを移動すれば馬が走り出します

ScanAnimation