Paper.jsのVectorの性質を使っていろいろな図形を描く

ドラッグの軌跡を追う

function onMouseDrag(event){
    path.add(event.middlePoint);
}

onMouseDragだけ抜粋しました。一つ前の点と現在の点との中点を描画します。

軌跡の両側に点を打つ

f:id:naoyashiga:20140308103819j:plain

Paper.js Sketch

function onMouseDrag(event){
    var step = event.delta / 2;
    step.angle += 90;
    
    var top = event.middlePoint + step;
    var bottom = event.middlePoint - step;
    
    path.add(top);
    path.insert(0,bottom);
    path.smooth();
}

ベクトルを回転

event.deltaは一つ前の点と現在の点とを結ぶベクトルです。stepはそれを半分にしたベクトルになります。これを90度回転させます。

ベクトル方向に点を打つ

topではmiddlePointから回転させたベクトルを延ばしています。bottomでは-stepなので180度反対に延ばしています。

いろいろな線や図形を描画

ジグザクの線

f:id:naoyashiga:20140308105303j:plain
Paper.js Sketch

function onMouseDrag(event){
    var step = event.delta / 2;
    step.angle += 90;
    //step.angle += Math.random() * 360;
    
    var top = event.middlePoint + step;
    var bottom = event.middlePoint - step;
    
    path.add(top);
    path.add(bottom);
    //path.insert(0,bottom);
    path.smooth();
}

insertではなくadd
insertではなくaddさせることでtopとbottomを結んでいます。またonMouseUpの処理をなくすことで、線を閉じないようにさせています。

ジグザグに閉じた図形

f:id:naoyashiga:20140308105747j:plain
Paper.js Sketch
fillColorにするとジグザグに閉じた図形を描けます。

path.fillColor = new Color({
        hue:Math.random() * 360,
        saturation:1,
        brightness:1
});

ぐちゃぐちゃな輪郭

f:id:naoyashiga:20140308110120p:plain
Paper.js Sketch

step.angle += Math.random() * 360;

回転角をランダムにすると、輪郭が複雑になります。

ぐちゃぐちゃな線

f:id:naoyashiga:20140308103246j:plain
Paper.js Sketch

function onMouseDrag(event){
    var step = event.delta / 2;
    //step.angle += 90;
    step.angle += Math.random() * 360;
    
    var top = event.middlePoint + step;
    var bottom = event.middlePoint - step;
    
    path.add(top);
    //path.add(bottom);
    path.insert(0,bottom);
    path.smooth();
}