Canvas Animation - Ranges

blur-ranges.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;

    //Light up
    if (this.dragging) {
        var centerX = this.drag.coords.x - this.element_.offsetLeft;
        var centerY = this.drag.coords.y - this.element_.offsetTop;
        var r = this.config_.tapRadius;
        var range = new Range({
            ctx: this.ctx,
            time: time,
            x: centerX - r + 1,
            y: centerY - r + 1,
            width: r * 2,
            height: r * 2,
            flame: this.config_.flame
        });
        range.addPoints(this.getAndProcessAffected(centerX, centerY));
        this.ranges.push(range);
    }

    //Burn
    for (var i = 0, l = this.ranges.length; i < l; i++) {
        range = this.ranges[i];

        if (!range) break;

        var opts = range.options;
        var frame = Math.round(range.frames.length * (time - range.start) / opts.flame.life);
        var img = range.image(frame);
        //range animation is completed -> remove it
        if (img === false) {
            this.ranges.splice(i, 1);
            i--;
        }
        if (img) {
            this.ctx.drawImage(img, opts.x, opts.y);
        }

        //Spread fire
        if (range.spreads[frame]) {
            for (var j = 0, k = range.spreads[frame].length; j < k; j++) {
                var point = this.fire.generateDirection(range.spreads[frame][j]);
                if (point) {
                    this.fire.addPixel(point);
                }
            }
        }
    }

    //Keep fire
    this.fire.render(time);
    this.ctx.drawImage(this.fire.canvas, 0, 0);

    this.lastTime = time;
    requestAnimationFrame(this.burn_.bind(this), this.element_);
};