方向ベクトルを使ってアイテムを動かす
demo
code
var text = new PointText({ point:view.center, justification:"center", fontSize:30, fillColor:"black" }); var destination = Point.random() * view.size; function onFrame(event){ var vector = destination - text.position; text.position += vector / 30; text.content = Math.round(vector.length); if(vector.length < 5){ destination = Point.random() * view.size; } }
ドキュメントを見ると上のコードが載っていました。方向ベクトルをうまく使ってアイテムを動かしています。
自分は今までアイテムを動かすときはベクトルではなく、単純にpositionだけを操作していました。ベクトルを使ったほうがすっきりわかりやすく書けると思います。
・ドキュメント
http://paperjs.org/tutorials/animation/creating-animations/
多数の物体を動かす
demo
code
var count = 150; var path = new Path.Circle({ center:[0,0], radius:10, fillColor:"black" }); var symbol = new Symbol(path); for(var i = 0;i < count;i++){ var center = Point.random() * view.size; var placedSymbol = symbol.place(center); placedSymbol.scale(i / count); } function onFrame(event){ for(var i = 0;i < count;i++){ var item = project.activeLayer.children[i]; item.position.x += item.bounds.width / 20; if(item.bounds.left > view.size.width){ item.position.x = -item.bounds.width; } } }
前回エントリでも多数のアイテムを動かしました。当初はSymbolを使おうと思ったのですが、円の半径を設定する方法がわかりませんでした。上のコードを見てみると、bounds.leftで左端が画面外に出ているのかチェックしています。こうやればいいのかと思って改めて勉強になりました。
・前回エントリ
raster.getAverageColorでPathの平均色を取得する - not good but great
パスセグメントを動かす
demo
Paper.js Sketch
うねうねとパスが動きます。気持ち悪い動きをしています笑。
var amount = 5; var height = 60; var path = new Path({ //80% black strokeColor:[0.8], strokeWidth:30, strokeCap:"square" }); for(var i = 0;i <= amount;i++){ path.add(new Point(i / amount,1) * view.size); } path.selected = true; function onFrame(event){ for(var i = 0;i <= amount;i++){ var segment = path.segments[i]; var sinus = Math.sin(event.time * 3 + i); segment.point.y = sinus * height + 100; } path.smooth(); }
onFrameを使うときにこれまではcounterを定義していましたが、event.timeで時間が取得できるのを知って、その必要はないなあと思いました。