マカンコウサッポウもしくは波動拳写真をHTML5技術で強化するCanvasアプリ

どうも以下のような写真が流行ってるらしい。
女子高生を中心に「かめはめ波」「マカンコウサッポウ」が流行中！吹っ飛び画像まとめ

だが、どうも破壊力があまり感じられない。
何が足りないんだ・・・と考えた結果が GIFアニメ だ！と結論に達しました。
で、Canvas使ってGIFアニメ作るJS作りました。

HADOOOO
http://wakasa.org/project/hadoooo/
※iPhoneで動かそうと思ったけど、最終的に重過ぎて作り込み断念。PCのChromeかFirefoxで使ってください。

何ができるかというと

というかわいらしい写真をあっという間に

という、悪っぽいGIFアニメができます。

使い方は

1. 画像をドラックして読み込ませる
2. パワーをためたい箇所でマウスダウン
3. 十分たまったらそのままマウスを発射したい方向に動かす

で、出来上がりです。

技術的に何をしてるかというと

1. Canvasに画像を表示
2. マウスダウンで最初のパワーをためる箇所を取得
3. マウスが描画してる円から外に飛び出るかを監視
4. 円から出たらマウスアップを監視してビームを作る
5. jsgif を利用して画面プルプルさせたGIFアニメを出力する

というものです。

ぜひマカンコウサッポウとかをもっと効果的にしたいという時にお使いください。