2013年4月30日火曜日

hat.ioで開催されてた「10キー電卓 or 時計のスマホアプリデザイン・大募集!」に応募した。

hat.ioというリクルートさんがやってるサイトでコンテストがあったので応募してみた。

10キー電卓 or 時計のスマホアプリデザイン・大募集!
https://calclock.hat.io/

応募したのは以下の5作品
多少はJSで実装してどうなんかな?とか検証はしてみたけど、基本1枚絵を作るだけのものです。
脳内の妄想のみが主な作業なので、アイディア考えて絵に起こすという作業を無限ループしてたばっかりに、コンテストを荒らすのか?並に応募してしまいました・・。
※ @yukio_andoh さんも怒涛の追い上げで投稿しまくってた。逃げ切り応募すればよかった・・。

さて、僕の Golden Hat Prize の賞品 MacBook Air はいつ届くのかな?待ち遠しいです。
※ !注意! 発表はまだです。(4月30日時点)

「え?レッドブル狙いだろ?
色物扱いのものばっかりじゃねぇか!」


そんな声もちらほら聞こえますが、そんな気はまったく無いです。
見るからに力のこもった MacBookAir狙いのものしかないじゃないですか!!

2013年4月6日土曜日

マカンコウサッポウもしくは波動拳写真を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アニメを出力する
というものです。
ぜひマカンコウサッポウとかをもっと効果的にしたいという時にお使いください。