BezierDemo

A simple Tower Defense game in Javascript and the HTML5 canvas element

by Adrianus Kleemans

HTML

<h1> BezierDemo </h1>
<canvas id="canvas" width="410" height="210">
    Please update your browser.
</canvas>
<p>
    <button onclick="start()">Play</button>
    <button onclick="stop()">Stop</button>
    <button onclick="reset()">Reset</button>
</p>
<p id="log">  </p>

JavaScript

var canvas;
var ctx;
var log;

var p0 = [200, 200];
var p1 = [0, 0];
var p2 = [400, 0];
var p = [0, 0];
var m = [0, 0];

var t = 0.0;
var timer;
var timer2;
var p_path = [];
var m_path = [];

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 plot() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "#000000";
    ctx.fillRect(p0[0], p0[1], 5, 5);
    ctx.fillRect(p1[0], p1[1], 5, 5);
    ctx.fillRect(p2[0], p2[1], 5, 5);
    ctx.fillRect(p[0], p[1], 5, 5);
    ctx.fillRect(m[0], m[1], 5, 5);

    ctx.fillStyle = "#424242";
    for (var i = 0; i < p_path.length; i++) {
        ctx.fillRect(p_path[i][0], p_path[i][1], 1, 1);
    }

    ctx.fillStyle = "#990000";
    for (var i = 0; i < m_path.length; i++) {
        ctx.fillRect(m_path[i][0], m_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);

    plot();
    log.innerHTML = "t = " + Math.round(t * 100) / 100 + ", p = " + Math.round(p[0] * 100) / 100 + "/" + Math.round(p[1] * 100) / 100 + " <br>";
    if (t > 1) {
        stop();
    }
}

function reset() {
    running = false;
    p_path = [];
    m_path = [];
    t = 0.0;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function start() {
    if (running) {
        return;
    }
    timer = setInterval(function() {
        t += 0.01;
    }, 100);
    timer2 =...