PAVONE

2011.9.03 Gunma.web #6

PAVONE

@ivoryworks

今日の話は

HTML5 Canvas

シンメトリー写真

しんめ・・・？なに？

今どき漢字で“倶楽部”とか・・・

何…なの…？

ところで この人しってる？

このロシア人

スタパ齋藤

●国民的アイドル物欲番長●もの凄いハイテンションな文体で各方面に色々書いているライターの人●よく釣りしたり自転車のったりしてます●外見はロシア人

2001年 シンメトリー倶楽部活動開始

http://cacazan.com/symmc/symm.html

シンメトリー倶楽部とは

シンメトリー倶楽部とは線対称な構成を持つ写真を愛でるクラブであります。ウルトラ会長に寺田克也。スペシャル会長にスタパ齋藤。部員は世界中に６万４千２名（推定）入部資格は問わない。入部随時自由。

http://cacazan.com/symmc/symm020531.html

『ジョン・シンメトリー』(2004年)

天才は2人いた

（一部で）空前の大ブーム

でも最近全然作ってない

いかん

線対称を愛でたい

スタパに聞いてみた

これだ

ニャー写真をドロップしたらあとはマウス操作だけでシンメトリー状態を変化させつつ表

示できるアプリ

仕様書

作ったよPavone

Pavone = クジャク

ついカッとなって命名したイタリア語なら何でもよかった

今では反省している

d e m ohttp://www.ivoryworks.com/pavone/demo/

これ

CC http://www.flickr.com/photos/33917831@N00/161607933

から

これを作るるのに

Canvas4枚使用してます

シンメトリー・・・

Image objectCanvas4(HTML)

Canvas1(resize)

Image object

Canvas1(resize)

Canvas4(HTML)

リサイズしないとカクカクしちゃう

Canvas2(flip)

Image object

Canvas1(resize) Canvas2(flip)

Canvas4(HTML)Canvasの反転

Canvas3(merge)

Image object

Canvas1(resize) Canvas2(flip)

Canvas3(merge)

Canvas4(HTML)

またリサイズ

合成！

Canvas4(HTML)

Image object

Canvas1(resize) Canvas2(flip)

Canvas3(merge)

Canvas4(HTML)

忙しくくりかえす

まとめというか課題というか問題

●クロスブラウザ対策●ドラッグ＆ドロップ●作業Canvasをリサイズできるように●ダウンロードサイズの指定●回転( 90°, 180° )●カラーフィルター( グレースケール, etc... )●ルーペ●共有( fricker, facebook, twitter, etc... )

Pythonに夢中PythonかわいいよPython

最大の課題

Fork me!