HTML5で描かれた「破れる布」

2013 04 06 22 02 HTML5で描かれた「破れる布」

Tear-able Cloth – lonely pixel

HTML5のCanvasとJavascriptだけで描かれた破ることができる布がすごいです。
HTML5とJavascriptだけででこんな表現までできてしまうのかと驚いてしまいます。

2013 04 06 21 46 HTML5で描かれた「破れる布」

なんの変哲もない方眼紙のように見えますが、この方眼紙の上でドラッグすると、、、

2013 04 06 21 471 HTML5で描かれた「破れる布」

2013 04 06 21 47 HTML5で描かれた「破れる布」

カーテンのように動きます。更に、激しくドラッグすると、、、

2013 04 06 21 48 2 HTML5で描かれた「破れる布」

破れた!!

2013 04 06 21 48 HTML5で描かれた「破れる布」

ボロボロのカーテンのようになってしまいました。こんなことがHTML5とJavascriptだけでできてしまうなんて。。

試してみたい方はこちらからどうぞ。

Tear-able Cloth – lonely pixel

ソースはこちらで公開されていました。

Tear-able Cloth – CodePen

pixel HTML5で描かれた「破れる布」