読者です 読者をやめる 読者になる 読者になる

not good but great

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

Paper.jsでアイテムをたくさん複製したい時はSymbolを使おう

Symbolのメリット

Symbolはアイテムをたくさん複製したいときに、メモリを節約することができます。

Symbolを作成

demo
Paper.js Editor

itemは消える

var path = new Path.Circle(new Point(20,20),30);
path.fillColor = "red";

var symbol = new Symbol(path);

Symbolを作成すると、もともと描画していた円は消えます。

配置する

symbol.place(new Point(80,50));
symbol.place(new Point(150,50));

placeで位置を指定して配置することができます。

変形

var placed = symbol.place(new Point(80,50));

placed.scale(3,2);

placed.rotate(45);

placeしたらscaleやrotateで変形できます。

definitionで一括定義

f:id:naoyashiga:20140311095636p:plain
demo
50個の円が回転します。
Paper.js Editor

var path = new Path.Circle(new Point(20,20),30);
path.fillColor = "red";

var symbol = new Symbol(path);

for(var i = 0;i < 50;i++){
    var position = view.size * Point.random();
    var placed = symbol.place(position);
}

function onFrame(event){
    //回転
    symbol.definition.rotate(0.1,view.center);
}

definitionに位置や変形を加えると、作成されたシンボルすべてに適用されます。