Paper.js でベクトルグラフィックをやってみた雑感

ちょっと前からPaper.jsをポチポチしてる。
http://paperjs.org/

Webでベクターでグニョグニョするのは、Flashの専売特許だったけど、
Canvasで似たような事が出来るのは、とてもよいね。

Paper.jsとよく比較されるのが、Raphael.js

PaperとRaphaelの違い列挙

SVG描画とCanvas描画の違いー＞それによるブラウザ対応の違い
Paperのが、サイトのセンスが良い Raphaelはダサい
Raphal軽量
Paper書き方が独特（Paperscriptというらしい配列丸ごと計算してくれる）
Raphael触ってないから甲乙つけがたい
Paper サンプルがかっちょよい。これだけでモチベアゲアゲ。
canvasのプラグインロクなのないけど、両方共よい。

こんなとこですかね。

ベクターは動きが気持ちいいですね。
ピクセルだとこうも気持ちよく動かないので、期待感MAX
インタラクティブなグラフとかお絵かきアプリに強いイメージ

僕は、これ使って気持ちいいUIとか作ってみたいなと妄想したり。

スマホでも随分さくさく動作してくれます。

フラットデザインだとか何だとか、わりと騒がれすぎて鎮火してきたイメージですが、
本番の勝負はこれからですね。

事の本質は、スキュアモーフィング的な立体光沢Web2.0デザインの飽和という所でしょうか。
デッサンやってきた美大生が、文字組しだすようなものですかね・・・

Appleさんは、「おめーらフラットとかフラットとか言ってるけど、おれらそんな範疇に収まってね～から。おれらなりのやり方でWeb2.0脱却すっから。」とでも言ってるかのように、iOS7発表してコケてるんですけどね。

まぁ、彼らは次世代のアフォーダンスを作る役目になってる感があるので、少しぐらい挑戦してもらわないと困るのですが。
立体使わずに、「この■押せるよ〜」感をだすためには、リンクに下線引いたり、ホバーで色変えたりマウスポインタ変えたり
いろいろやり方はあるんでしょうけど、タッチ世代の方々にはなかなか難儀なようで。

そこで、Paper.jsに無理やりつなげるんですが、「この□押せるよ〜」感を出すために
ウニョウニョと四角がうごめいていたら、押したくなるんじゃないですかね？
ブヨブヨしてるものは触りたくなる論とでも。

脱立体して、押せる感のある四角を演出する一つの方法として心のなかにメモしときましょう。

という事で作ってみました。
http://yohawing.com/exp/paper/exp2.html

paper.install(window);
onload = function(){
    
    var canvas = document.getElementById('canvas');
    paper.setup('canvas');

    var path = new Path.Rectangle( [100,100,120,80]);
   path.fillColor = "blue";
	path.smooth();
	num = [];
	for(i=0;i<path.segments.length*2;i++) num[i] = Math.random()*3+3;
	
	path2 = path.clone();
	path2.position.x += 200;
	
	var text = new PointText({
        point: path.position ,
        fillColor:'white',
        content: 'リンク',
        justification: 'center',
        fontSize: 30
    });
    text.position.y += 10;
    var text2 = text.clone();
    text2.position.x += 200;
    text2.content = 'ボタン';
    
    view.onResize = function(event){
        path.position = view.center;
    };
    var c = project.activeLayer.children;
    view.onFrame = function(event) {
        var b = path.segments.length;
        for(i=0;i<b;i++){
          path.segments[i].point.y +=  Math.cos(event.count / num[i]) ;   
        }
    }
    tool.onMouseMove = function(event){
         project.activeLayer.children[0].fillColor = "blue";
         project.activeLayer.children[1].fillColor = "blue";

	if (event.item)
		 if(event.item.type == 'path') event.item.fillColor = "red";
    }
    tool.onMouseUp = function(event)  {  
        if(event.item.index%2 == 0) location.href = "http://google.com";
        else location.href = "http://yohawing.com";
    }       
}

幾分かは押したくなる気がする・・・

ヨハウィングの忘備録

レッドブル・インターネットの

Paper.js でベクトルグラフィックをやってみた雑感