方向ベクトルを使ってアニメーションさせながら動かす

方向ベクトルを使ってアイテムを動かす

demo

Paper.js Sketch

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

Paper.js Sketch

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で時間が取得できるのを知って、その必要はないなあと思いました。