Lines

Messing around with lines

by soulwire

HTML

<canvas id="canvas" width="1000" height="1000"></canvas>

JavaScript

function Vector(x, y) {
    this.set(x, y);
}

Vector.prototype = {
    
    set: function(x, y) {
        this.x = x || 0.0;
        this.y = y || 0.0;
    },
    
    add: function( v ) {
        return new Vector( this.x + v.x, this.y + v.y );
    },
    
    sub: function( v ) {
        return new Vector( this.x - v.x, this.y - v.y );
    },
    
    scale: function( f ) {
        return new Vector( this.x * f, this.y * f );
    },
    
    angle: function() {
        return Math.atan2( this.y, this.x );
    },
    
    clone: function() {
        return new Vector(this.x, this.y);
    }
};

var CatmullRom = (function() {

    var p0, p1, p2, p3, i6 = 1.0 / 6.0;

    return {

        curveThroughPoints: function(points, ctx) {

            for (var i = 3, n = points.length; i < n; i++) {

                p0 = points[i - 3];
                p1 = points[i - 2];
                p2 = points[i - 1];
                p3 = points[i];

                ctx.bezierCurveTo(
                    p2.x * i6 + p1.x - p0.x * i6,
                    p2.y * i6 + p1.y - p0.y * i6,
                    p3.x * -i6 + p2.x + p1.x * i6,
                    p3.y * -i6 + p2.y + p1.y * i6,
                    p2.x,
                    p2.y
                );
            }
        }
    };
    
})();
    
function generateLine( start, angle, length, step, jitter ) {
    
    jitter = jitter || 0.1;
    
    var point = start.clone();
    var points = [ start ];
    var delta;
    
    for ( var i = 0; i < length - 1; i++ ) {
        
        angle += (Math.random() - 0.5) * jitter;
        
        delta = new Vector( Math.cos(angle) * step,  Math.sin(angle) * step );
        point = point.add( delta );
        points.push( point );
    }
    
    return points;
}

function drawPoints( points, colour, close ) {
    
    context.strokeStyle = colour;
    context.lineWidth = 0.5;
    
    var point;
    
    for ( var i = 0, n = points.length; i < n; i++ ) {
        
        point =...