git @ Cat's Eye Technologies HTML5-Gewgaws / master radialjective / radialjective.js
master

Tree @master (Download .tar.gz)

radialjective.js @masterraw · history · blame

function launch(prefix, containerId) {
    var deps = [
        "element-factory.js",
        "animation.js"
    ];
    var loaded = 0;
    for (var i = 0; i < deps.length; i++) {
        var elem = document.createElement('script');
        elem.src = prefix + deps[i];
        elem.onload = function() {
            if (++loaded == deps.length) {
                var container = document.getElementById(containerId);
                var canvas = yoob.makeCanvas(container, 500, 500);
                (new Radialjective()).init(canvas);
            }
        };
        document.body.appendChild(elem);
    }
}

var twopi = Math.PI * 2;
var degrees = twopi / 360;

Radialjective = function() {
    var ctx = undefined;
    var canvas = undefined;
    var info;

    var t = 0;

    this.init = function(c) {
        canvas = c;
        ctx = canvas.getContext("2d");

        this.animation = (new yoob.Animation).init({
            object: this
        });
        this.animation.start();
    };

    this.update = function() {
        t += 1;
    };

    this.draw = function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        var cx = canvas.width / 2;
        var cy = canvas.height / 2;

        var f = function(a, t) {
            return Math.sin(Math.sin(a / 20) + t / 20) * 20 * Math.sin(a / 10) * Math.cos(t / 100);
        };

        // LINE 1: theta is a function of r.
        ctx.beginPath();
        for (var r = 0; r <= cx; r++) {
            var theta = f(r, t) / 8;
            var x = cx + r * Math.cos(theta);
            var y = cy + r * Math.sin(theta);
            ctx.lineTo(x, y);
        }
        ctx.lineWidth = 2;
        ctx.strokeStyle = "black";
        ctx.stroke();

        // LINE 2: r is a function of theta.
        ctx.beginPath();
        for (var theta = 0; theta <= twopi; theta += (twopi / cx)) {
            var r = f(theta * (cx / twopi), t);
            var x = cx + r * Math.cos(theta);
            var y = cy + r * Math.sin(theta);
            ctx.lineTo(x, y);
        }
        ctx.lineWidth = 2;
        ctx.strokeStyle = "green";
        ctx.stroke();

        // LINE 2a: r is a function of theta.
        ctx.beginPath();
        for (var theta = 0; theta <= twopi; theta += (twopi / cx)) {
            var r = f(theta * (cx / twopi), t) * 10;
            var x = cx + r * Math.cos(theta);
            var y = cy + r * Math.sin(theta);
            ctx.lineTo(x, y);
        }
        ctx.lineWidth = 2;
        ctx.strokeStyle = "#00ff30";
        ctx.stroke();

        // LINE 3: y is a function of x.
        ctx.beginPath();
        for (var x = 0; x <= cx; x++) {
            var y = cy - f(x, t);
            ctx.lineTo(cx + x, y);
        }
        ctx.lineWidth = 2;
        ctx.strokeStyle = "blue";
        ctx.stroke();

        // LINE 4: theta is a function of r, but projected onto a cone.
        ctx.beginPath();
        for (var r = 0; r <= cx; r++) {
            var theta = f(r, t) / 8;
            var x = cx + r * Math.cos(theta);
            var y = cy + r;
            ctx.lineTo(x, y);
        }
        ctx.lineWidth = 2;
        ctx.strokeStyle = "red";
        ctx.stroke();

    };
};