Canvas Animation - Arrays

blur-array.js

Blur.prototype.burn_ = function () {
    var time = (new Date()).getTime();
    var width = this.image.width;
    var height = this.image.height;
    if (!this.lastTime) this.lastTime = time;

    if (this.dragging) {
        var points = this.getAndProcessAffected();
        //var edgePoints = [];

        //Start the fire
        for (var i = 0, l = points.length; i < l; i++) {
            var c = points[i];
            if (!this.burned.getPoint(c.x, c.y) && !this.burning.getPoint(c.x, c.y)) {
                var point = this.burning.addPoint(points[i].x, points[i].y);
                point.flame = 1;
                point.start = time;
                point.pixel = this.pixels[c.x][c.y];
            }
        }
    }

    //Burn
    var burn = function () {
        for (i = 0, l = this.burning.points.length; i < l; i++) {
            point = this.burning.points[i];
            if (!point) continue;

            if (point.flame > 0) {
                this.burnPoint_(point, time, width);
                if (!point.inactive && point.flame < 0.8 && point.flame > 0.4) {
                    this.spreadPoint_(point, time, width, height);
                }
            }
            if (point.flame <= 0) {
                this.burned.addPoint(point.x, point.y);
                this.burning.removePointByIndex(i);
                i--;
            }
        }
    }.bind(this);

    burn();

    this.lastTime = time;

    this.ctx.putImageData(this.blurPixels, 0, 0);
    requestAnimationFrame(this.burn_.bind(this), this.element_);
};