Skip to content

Instantly share code, notes, and snippets.

@dzenkovich
Created June 11, 2013 10:41
Show Gist options
  • Save dzenkovich/5755969 to your computer and use it in GitHub Desktop.
Save dzenkovich/5755969 to your computer and use it in GitHub Desktop.
Canvas Animation - Ranges
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_);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment