git @ Cat's Eye Technologies HTML5-Gewgaws / master eine-kleine-glitchfraktal / eine-kleine-glitchfraktal.js
master

Tree @master (Download .tar.gz)

eine-kleine-glitchfraktal.js @masterraw · history · blame

function launch(prefix, containerId, config) {
    var config = config || {};
    var deps = [
        "element-factory.js",
        "animation.js",
        "splash-screen.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) return;
            var container = document.getElementById(containerId);

            var t = new FractalRectangles();

            var presetSelect = yoob.makeSelect(container, "MODE", [
                [1, "STATIC"],
                [2, "SYNC GLITCH"],
                [3, "SUPERSYNC GLITCH"],
                [4, "ASYNC GLITCH"]
            ], function(n) {
                t.style = n;
            }, 'STATIC');
            yoob.makeLineBreak(container);

            var canvas = yoob.makeCanvas(container, 500, 500);
            canvas.id = 'canvas'; // FIXME

            yoob.showSplashScreen({
                elementId: 'canvas',
                innerHTML: "<p>Warning: this application displays rapidly changing colours " +
                  "and/or shapes and may be unsuitable for those sensitive to light or " +
                  "prone to epileptic seizures.</p>",
                buttonText: "I understand -- Proceed",
                onproceed: function() {
                    t.init({
                        'canvas': canvas
                    });
                },
                background: '#a0a0d0'
            });

        };
        document.body.appendChild(elem);
    }
}


FractalRectangles = function() {
    var ctx = undefined;
    var canvas = undefined;
    var info;
    var padding = 8;
    var cdelta = 40;

    var t = 0;

    this.init = function(cfg) {
        canvas = cfg.canvas;
        ctx = canvas.getContext("2d");
        this.style = 1;
        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);
        this.globalWidthFactor = (1.5 + Math.random());
        this.globalHeightFactor = (1.5 + Math.random());
        this.drawRectangle(canvas.width / 2, canvas.height / 2,
                           canvas.width / 2, canvas.height / 2, 0, 0, 0, 0);
    };

    this.drawRectangle = function(x, y, width, height, r, g, b, level) {
        // x and y are coords of the centre;
        // width and height are the distance from the centre to the edge
        if (level > 3) return;

        ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
        ctx.fillRect(x - width, y - height, width * 2, height * 2);

        var newwidth, newheight;
        if (this.style === 1) {
            var neww = width / 2.0 - padding;
            var newh = height / 2.0 - padding;
            newwidth = function() { return neww; };
            newheight = function() { return newh; };
        } else if (this.style === 2) {
            var neww, newh;
            neww = width / (1.5 + Math.random()) - padding;
            newh = height / (1.5 + Math.random()) - padding;
            newwidth = function() { return neww; };
            newheight = function() { return newh; };
        } else if (this.style === 3) {
            var $this = this;
            newwidth = function() { return width / $this.globalWidthFactor - padding; };
            newheight = function() { return height / $this.globalHeightFactor - padding; };
        } else if (this.style === 4) {
            newwidth = function() { return width / (1.5 + Math.random()) - padding; };
            newheight = function() { return height / (1.5 + Math.random()) - padding; };
        }

        this.drawRectangle(x - width / 2 , y - height / 2, newwidth(), newheight(),
                           r + cdelta, g, b, level + 1);
        this.drawRectangle(x + width / 2, y - height / 2, newwidth(), newheight(),
                           r, g + cdelta, b, level + 1);
        this.drawRectangle(x - width / 2, y + height / 2, newwidth(), newheight(),
                           r, g, b + cdelta, level + 1);
        this.drawRectangle(x + width / 2, y + height / 2, newwidth(), newheight(),
                           r + cdelta, g + cdelta, b + cdelta, level + 1);
    };
};