event.middlePointとevent.deltaを線や円に応用してみる

用語解説

Paper.jsでマウスのドラッグスピードに合わせて、線の太さが変わるように頑張ってみた - not good but great
上記エントリで用語解説はしたのですが、リファレンスの別ページに詳しく載っていたので、改めて書きます。

middlePointとは?

event.middlePoint describes the point in the middle between event.lastPoint and event.point. This is a useful position to use when creating artwork based on the moving direction of the mouse, as returned by event.delta.

前回のポイントと現在のポイントとの中点を示しています。

event.deltaとは?

event.delta describes the vector between the current position and the last position of the mouse when the event was fired. In case of the mouse-up event, the vector to the mouse-down position is returned.

前回のポイントから現在のポイントへのベクトルを示します。デルタなのでベクトルの大きさかと思っていましたが、ベクトルそのもののようです。

event.delta.length

これでベクトルの大きさを表すことが出来ます。

middlePoint,deltaを活用する

線に応用する

剃り落としたヒゲっぽいもの
demo

Paper.js Sketch

code

tool.minDistance = 10;

function onMouseDrag(event){
    var path = new Path();
    path.strokeColor = "black";
    var vector = event.delta;
    
    vector.angle += Math.random() * 90;
    
    vector.length = Math.random() * 50;
    
    path.add(event.middlePoint + vector);
    path.add(event.middlePoint - vector);
}

円に応用する

demo
カラフルな円を描画してみました。

・デモを実行するページ
Paper.js Sketch

code

tool.minDistance = 10;
tool.maxDistance = 50;
var i = 0

function onMouseDrag(event){
    var radius = event.delta.length / 2;
    var circle = new Path.Circle(event.middlePoint,radius);
    
    //rainbow
    switch(i++ % 7){
        case 0:
            circle.fillColor = "red";
            break;
        case 1:
            circle.fillColor = "orange";
            break;
        case 2:
            circle.fillColor = "yellow";
            break;
        case 3:
            circle.fillColor = "green";
            break;
        case 4:
            circle.fillColor = "blue";
            break;
        case 5:
            circle.fillColor = "navy";
            break;
        case 6:
            circle.fillColor = "purple";
            break;
    }
}

半径や中心座標にdeltaやmiddlePointの変数を使っています。