PointAlongCurve

by fabriziopaino86

HTML

<canvas id="canvas" width="800" height="700"></canvas>

JavaScript

var position = 0;
var reverse = false;
var speed = 0.06;

function Vec2D(x, y) {
    this.x = x;
    this.y = y;
}

function CurveLine() {
    var me = this;
    var canvas;
    var ctx;
    var controlPoints;
    var startPoint;

    var init = function () {
        controlPoints = new Array();
        startPoint = new Vec2D();
    }

    var interpolateLinear = function (pointA, pointB, time) {
        return {
            x: pointA.x + (pointB.x - pointA.x) * time,
            y: pointA.y + (pointB.y - pointA.y) * time,
        }
    }

    this.lineColor = "#000";
    this.lineHoverColor = "#999";
    var activeColor = me.lineColor;

    this.AddControlPoint = function (x, y) {
        controlPoints.push(new Vec2D(x, y));
    };

    this.SetStartPoint = function (x, y) {
        startPoint.x = x;
        startPoint.y = y;
    };

    this.SetCanvas = function (cnv) {
        canvas = cnv;
        ctx = canvas.getContext('2d');
    };

    this.calc = function (p1, p2, p3, p4, time) {
        var ab = interpolateLinear(p1, p2, time),
            bc = interpolateLinear(p2, p3, time),
            cd = interpolateLinear(p3, p4, time),
            abbc = interpolateLinear(ab, bc, time),
            bccd = interpolateLinear(bc, cd, time);

        return interpolateLinear(abbc, bccd, time);
    };

    this.Draw = function () {
        if (canvas.getContext) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();
            ctx.moveTo(startPoint.x, startPoint.y);

            for (var i = 0; i < controlPoints.length; i += 3) {
                ctx.bezierCurveTo(controlPoints[i].x, controlPoints[i].y,
                controlPoints[i + 1].x, controlPoints[i + 1].y,
                controlPoints[i + 2].x, controlPoints[i + 2].y);
            }
            ctx.strokeStyle = activeColor;
            ctx.lineWidth = 1;
            ctx.stroke();

            var coord = me.calc(new Vec2D(30, 30),
            new Vec2D(56, 80),
       ...