Webアプリ第2弾! 〜スキャンアニメーション

渋谷パルコで「Galop」という動く絵本を見つけた

こういうのをScanimationスキャニメーションというらしい

面白いと思ったのでShoesでできないか試してみたらうまくいった

複数の連続画像からそれらを合成した1枚の画像を作るscan_animaker.rbと

それを見るscan_animator.rbを書いた

手順：

1. 画像には同じ名前で0からの連続番号を付け(ex.horse0.png, horse1.png..)
   
2. flip_maker.rbに画像枚数をセットして先頭画像を読み込めば合成画像とそのマスクができる
   
3. flipper.rbに画像枚数をセットして合成画像を読み込めば見られる
   

さらに調子に乗ってこれをWebアプリ化してをHerokuにアップしてみた(version1)

ScanAnimation

http://scananimation.heroku.com/

これもうまくいっている

手順：

1. scan_animaker.rbで作った合成画像とマスク画像をキャプチャ
2. キャプチャしたマスク画像の白抜き部分を透過する(Gimpの色->色を透明度にを選択)
   
3. index.erbを作成：maskをdraggableにするためjQueryUiをよむ
4. Sinatra&Herokuに必要なことをする

jQuery UI - Home

http://jqueryui.com/home