Bézier curves

by Darby Rathbone

JavaScript

var lerp = function (d, p1, p2) {
    return ( (p1 - p2) * d ) + p2;
}
var Vertex = (function (x, y) {
    this.x = x;
    this.y = y;
    this.array = [x, y];
    return this;
});
Vertex.prototype = {
    lerpTo: function (d, other) {
        return new Vertex(lerp(d, other.x, this.x), lerp(d, other.y, this.y));
    },
    dist: function(other){
        return Math.sqrt((this.x-other.x)*(this.x-other.x)+(this.y-other.y)*(this.y-other.y));
    },
    midpoint: function(other){
        return new Vertex((this.x+other.x)/2.0,(this.y+other.y)/2.0);
    }
};
var Spline = (function(segments, dist){
    this.segments = segments;
    this.distance = dist;
    this.startpoint = this.segments[0];
    
    var points = [];
       // for (var k = 0;k<this.segments.length;k+=3.0)
   // {
    var k = 0;
    for (var j = 0;j<1.0;j+=dist){
    var point = new Vertex(this.segments[k].x,this.segments[k].y);
    point = this.breakdown(this.segments,j)[0];
    points.push(new Vertex(point.x,point.y));
    
    }
   // }
    this.points = points;
    return this;
});
Spline.prototype = {
    breakdown: function(points,d){
        var p = [];
        for (var i = 0;i<points.length-1;i++){
            p.push(points[i].lerpTo(d,points[i+1]));
                    }
            if (p.length > 1){
            p = this.breakdown(p,d);
            }
        return p;

    },
    draw: function(context){
        context.beginPath();
        context.moveTo(this.points[0].x,this.points[0].y);
        for (var i = 1;i<this.points.length;i++){
            context.lineTo(this.points[i].x,this.points[i].y);
        }
        context.stroke();
        context.closePath();
    }
};
var aVert = [new Vertex(0, 0), new Vertex(300, 400), new Vertex(253,130)];
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
canvas.style.border = "solid 3px black";
var ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
var count = 0;
    ctx.clearRect(0, 0,...