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

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

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

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

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

ScanAnimation

image

雑になぞったので馬はあまりキレイではありません スクリプトおよび作り方は次回書きます

(参考) 絵本ナビでお買い物♪しかけえほん「ギャロップ!!」 | 五感ノート♪ 昔の子供用絵本 ギャロップ - 5522の眼 らばQ:このアイデアに脱帽、動き出す紙の本『Gallop!』

ギャロップ!! (しかけえほん)

ルーファス・バトラー セダー



blog comments powered by Disqus
ruby_pack8

100円〜で好評発売中!
M'ELBORNE BOOKS