var ctx;

var log;

​

var p0 = [200, 300];

var p1 = [50, 30];

var p2 = [300, 5];

​

var t = 0.0;

var timer;

var timer2;

var p_path = [];

var m_path = [];

var q_path = [];

var r_path = [];

​

var red_checkbox;

var green_checkbox; 

var blue_checkbox;

var trace_checkbox;

​

var running;

​

// helpers

function scalarMult(v, s) {

    return v.map(function(x) {return x * s;});

}

​

function vectorAdd(a, b) {

    var c = [0, 0];

    for (var i = 0; i < a.length; i++) {

        c[i] = a[i] + b[i];

    }

    return c;

}

​

// main

​

function bezier1(t) {

    return vectorAdd(scalarMult(p1, (1 - t)), scalarMult(p2, t));

}

​

function bezier2(t) {

    return vectorAdd(vectorAdd(scalarMult(p0, Math.pow((1 - t), 2)), scalarMult(p1, 2 * t * (1 - t))), scalarMult(p2, Math.pow(t, 2)));

}

​

function bezier_mod(t) {

    return vectorAdd(vectorAdd(scalarMult(p0, Math.pow((1 - t), 1.5)), scalarMult(p1, 2 * t *(1 - t))), scalarMult(p2, Math.pow(t, 1.5)));

}

​

function bezier_mod2(t) {

    return vectorAdd(vectorAdd(scalarMult(p0, Math.pow((1 - t), 2)), scalarMult(p1, 2 * t *(1 - t))), scalarMult(p2, Math.pow(t, 1.5)));

}

​

function plot() {

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = "#000000";

    ctx.fillRect(p0[0]-2, p0[1]-2, 5, 5);

    ctx.fillRect(p1[0]-2, p1[1]-2, 5, 5);

    ctx.fillRect(p2[0]-2, p2[1]-2, 5, 5);

    ctx.fillStyle = "#424242";

    ctx.beginPath();

    ctx.arc(m[0], m[1], 3, 0, 2*Math.PI);

    ctx.fill();

    for (var i = 0; i < m_path.length; i++) {

        ctx.fillRect(m_path[i][0], m_path[i][1], 1, 1);

    }

    if (red_checkbox.checked) {

        ctx.fillStyle = "#AA0000";

        ctx.beginPath();

        ctx.arc(p[0], p[1], 3, 0, 2*Math.PI);

        ctx.fill();

        if (trace_checkbox.checked) {

            for (var i = 0; i < p_path.length; i++) {

                ctx.fillRect(p_path[i][0], p_path[i][1], 1, 1);

            }

        }

    }

    if (green_checkbox.checked) {

        ctx.fillStyle = "#00AA00";

        ctx.beginPath();

        ctx.arc(q[0], q[1], 3, 0, 2*Math.PI);

        ctx.fill();

        if (trace_checkbox.checked) {

            for (var i = 0; i < q_path.length; i++) {

                ctx.fillRect(q_path[i][0], q_path[i][1], 1, 1);

            }

        }

    }

    if (blue_checkbox.checked) {

        ctx.fillStyle = "#0000AA";

        ctx.beginPath();

        ctx.arc(r[0], r[1], 3, 0, 2*Math.PI);

        ctx.fill();

        if (trace_checkbox.checked) {

            for (var i = 0; i < r_path.length; i++) {

                ctx.fillRect(r_path[i][0], r_path[i][1], 1, 1);

            }

        }

    }

}

​

function stop() {

    running = false;

    clearInterval(timer);

    clearInterval(timer2);

}

​

function loop() {

    // path & points

    p = bezier2(t);

    p_path.push(p);

    m = bezier1(t);

    m_path.push(m);

    q = bezier_mod(t);

    q_path.push(q);

    r = bezier_mod2(t);

    r_path.push(r);

    plot();

    log.innerHTML = "t = " + Math.round(t*100)/100; // + ", p = " + Math.round(p[0]*100)/100 + "x / " + Math.round(p[1]*100)/100 + "y <br>";

    if (t > 1.0) {

        stop();

    }

}

​

function reset() {

    running = false;

    p_path = [];

    m_path = [];

    q_path = [];

    r_path = [];

    t = 0.0;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

}

​

function start() {

    if (running) {

        return;

    }

    var speed = document.getElementById('speed').value;

    timer = setInterval(function(){t += 0.01;}, 100/speed);

    timer2 = setInterval(function(){loop();}, 100/speed);

    running = true;

}

​

function setup() {

    log = document.getElementById("log");

    red_checkbox = document.getElementById("red");

    green_checkbox = document.getElementById("green");

    blue_checkbox = document.getElementById("blue");

    trace_checkbox =  document.getElementById("trace");

    // canvas

    canvas = document.getElementById('canvas');

    ctx = canvas.getContext('2d');

    start();

}

​

setup();