not good but great

プログラミング、アート、映画・本の感想について書きます。

Paper.jsで使うPaperScriptの特徴と、直接Javascriptで実行するときの違い

Paper.jsとは?

canvasを用いて、ベクターグラフィックをjsを簡単に描画できるようにしたライブラリです。

サンプルはどれもかっこいいです。
Paper.js - Paper.js

PaperScriptを使う

PaperScriptとは?

Paper.jsではJavascriptを独自拡張したPaperScriptというものを使います。

メリット

Point,Sizeに算術演算子(+ - * / %)が使えます。自身のスコープ内で自動的に実行されるので、グローバルスコープを汚染することがないです。ドキュメントが英語で長いので、いまいちよくわかりませんでした笑。

Paper.js - Paper.js
paper.jsでインタラクティブなグラフを描こう | Preferred Research
paper.jsをいじった話 / NPCA Advent Calendar 12日目 | NPCA's blog

直接Javascriptで動かす


ちょっと記述量が増えました。

PaperScriptとの違い

ドキュメントを読んで自分なりの解釈を載せておきます。
Paper.jsが呼び出されるタイミング
DOMが生成されてからじゃないと実行できません。

Canvasオブジェクトの取得方法
canvasオブジェクトを取得するときに、IDを指定しないといけません。

paperオブジェクトを通じてアクセス
Paper.jsのクラス、オブジェクトにはpaperオブジェクトを通じてアクセスする必要があります。理由はグローバルで定義されていないからです。ちょっとこの辺はよくわからないです。



結局、サンプルがPaperScriptで記述されているので、素直にPaperScriptで書くほうが良いのかなと思いました。

・参考
Paper.js - Paper.js
院生活備忘録: paper.jsを触る。その1