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

not good but great

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

Drawing zigzag lines and shapes by using vector on Paper.js.

Orbit of Mouse Drag

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

event.middlePoint describes the point in the middle between event.lastPoint and event.point.

Drawing points on both sides of orbit

f:id:naoyashiga:20140308103819j:plain

Paper.js Editor

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();
}

Rotate vector

event.delta describes the vector between the current position and the last position of the mouse when the event was fired. A value of "step" is a half of the vector. You rotate the vector 90 degrees.

Drawing points on direction of vector

"top" is a point from middlePoint. "bottom" is the opposite vector.

Drawing various lines and shapes

Zigzag lines

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

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();
}

not insert, but add
Connecting top point and bottom point. Remove onMouseUp function.

Closed zigzag path

f:id:naoyashiga:20140308105747j:plain
Paper.js Editor

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

Using fillColor , not strokeColor.

Mess shapes

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

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

Angle is random. Shape will be mess.

Mess lines

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

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();
}

You can chage stroke width by using insert.