Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
...
Checking mergeability… Don't worry, you can still create the pull request.
  • 2 commits
  • 1 file changed
  • 0 commit comments
  • 1 contributor
Showing with 48 additions and 23 deletions.
  1. +48 −23 js/canvas.js
View
71 js/canvas.js
@@ -21,6 +21,7 @@
var defaults = {
bgFillColor : "#000000",
+ bgImage : false,
debug : false,
debugSelector : "#debug",
baseHref : "",
@@ -60,6 +61,7 @@
"#050F1E"
],
fov : 500,
+ pxScale: 1,
particleDensityMax : 2.00,
particleDensityMin : 0.25,
startCallback : null,
@@ -127,7 +129,6 @@
function Fireworks(options) {
$.extend(this, defaults, options, vars); // Allow opts to override the defaults
- this.bgFillStyle = "rgba("+hexToRgb(this.bgFillColor)+",0.25)";
this.spotlightStyles = this.spotlightColors.map(function(c){return "rgba("+hexToRgb(c)+",0.2)"});
this.loadSprites(); // blocks animation while loading sprites
};
@@ -135,12 +136,35 @@
Fireworks.prototype.initCanvas = function(canvas) {
// This is the canvas that the user sees.
this.displayCanvas = canvas;
- this.displayCanvas.width = this.displayCanvas.clientWidth;
- this.displayCanvas.height = this.displayCanvas.clientHeight;
- this.w2 = this.displayCanvas.width / 2;
- this.h2 = this.displayCanvas.height / 2;
+ this.displayCanvas.width = this.displayCanvas.clientWidth * this.pxScale;
+ this.displayCanvas.height = this.displayCanvas.clientHeight * this.pxScale;
+ this.w2 = this.displayCanvas.clientWidth / 2;
+ this.h2 = this.displayCanvas.clientHeight / 2;
this.displayContext = this.displayCanvas.getContext("2d");
+ // This canvas holds the background.
+ this.bgCanvas = document.createElement("canvas");
+ this.bgCanvas.width = this.displayCanvas.width;
+ this.bgCanvas.height = this.displayCanvas.height;
+ this.bgContext = this.bgCanvas.getContext("2d");
+ if ( this.bgFillColor ) {
+ this.bgContext.fillStyle = "rgba("+hexToRgb(this.bgFillColor)+",1)";
+ this.bgContext.fillRect(0, 0, this.bgCanvas.width, this.bgCanvas.height);
+ }
+ if ( this.bgImage ) {
+ // Todo: stretch to fit
+ var bg = new Image();
+ ++this.loading;
+ var self = this;
+ bg.onload = function() {
+ --self.loading;
+ self.bgContext.drawImage(bg, 0, 0, self.bgCanvas.width, self.bgCanvas.height);
+ self.fadeFrame();
+ };
+ bg.src = this.applyBaseHref(this.bgImage);
+ } else {
+ this.fadeFrame();
+ }
/*
var self = this;
$(canvas).bind('mousedown.fireworks', function() {self.isMouseDown = true;});
@@ -563,23 +587,23 @@
Fireworks.prototype.drawSpotlights = function() {
this.context.beginPath();
this.context.moveTo(Math.floor(this.canvas.width / 3), this.canvas.height);
- this.context.lineTo(Math.floor(this.canvas.width / 2 + 200 * Math.sin(this.tick / 19)), 0);
- this.context.lineTo(Math.floor(this.canvas.width / 2 + 200 * Math.sin(this.tick / 19) + 100), 0);
- this.context.lineTo(Math.floor(this.canvas.width / 3 + 15), this.canvas.height);
+ this.context.lineTo(Math.floor(this.canvas.width / 2 + this.pxScale * 200 * Math.sin(this.tick / 19)), 0);
+ this.context.lineTo(Math.floor(this.canvas.width / 2 + this.pxScale * (200 * Math.sin(this.tick / 19) + 100)), 0);
+ this.context.lineTo(Math.floor(this.canvas.width / 3 + this.pxScale * 15), this.canvas.height);
this.context.fillStyle = this.spotlightStyles[0];
this.context.fill();
this.context.beginPath();
this.context.moveTo(Math.floor(2 * this.canvas.width / 3), this.canvas.height);
- this.context.lineTo(Math.floor(this.canvas.width / 2 + 180 * Math.sin(this.tick / 23)) - 100, 0);
- this.context.lineTo(Math.floor(this.canvas.width / 2 + 180 * Math.sin(this.tick / 23)), 0);
- this.context.lineTo(Math.floor(2 * this.canvas.width / 3 + 15), this.canvas.height);
+ this.context.lineTo(Math.floor(this.canvas.width / 2 + this.pxScale * (180 * Math.sin(this.tick / 23) - 100)), 0);
+ this.context.lineTo(Math.floor(this.canvas.width / 2 + this.pxScale * 180 * Math.sin(this.tick / 23)), 0);
+ this.context.lineTo(Math.floor(2 * this.canvas.width / 3 + this.pxScale * 15), this.canvas.height);
this.context.fillStyle = this.spotlightStyles[1];
this.context.fill();
this.context.beginPath();
- this.context.moveTo(Math.floor(2 * this.canvas.width / 3) + 40, this.canvas.height);
- this.context.lineTo(Math.floor(this.canvas.width / 2 + 180 * Math.sin(this.tick / 29)) - 100, 0);
- this.context.lineTo(Math.floor(this.canvas.width / 2 + 180 * Math.sin(this.tick / 29)), 0);
- this.context.lineTo(Math.floor(2 * this.canvas.width / 3) + 55, this.canvas.height);
+ this.context.moveTo(Math.floor(2 * this.canvas.width / 3) + this.pxScale * 40, this.canvas.height);
+ this.context.lineTo(Math.floor(this.canvas.width / 2 + this.pxScale * (180 * Math.sin(this.tick / 29) - 100)), 0);
+ this.context.lineTo(Math.floor(this.canvas.width / 2 + this.pxScale * 180 * Math.sin(this.tick / 29)), 0);
+ this.context.lineTo(Math.floor(2 * this.canvas.width / 3) + this.pxScale * 55, this.canvas.height);
this.context.fillStyle = this.spotlightStyles[2];
this.context.fill();
};
@@ -588,16 +612,16 @@
if ( particle.scale > 0 ) {
var mult = 6; // magic number
var scale = this.fov / ( this.fov + particle.pos.z );
- var x2d = ( particle.pos.x * scale) + this.w2;
- var y2d = ( particle.pos.y * scale) + this.h2;
+ var x2d = this.pxScale * (( particle.pos.x * scale) + this.w2);
+ var y2d = this.pxScale * (( particle.pos.y * scale) + this.h2);
if ( particle.x2d === false ) {
// If particle was just spawned, estimate the previous postion for blur
var scaleOld = this.fov / ( this.fov + particle.pos.z - particle.vel.z );
- particle.x2d = ( particle.pos.x - particle.vel.x ) * scaleOld + this.w2;
- particle.y2d = ( particle.pos.y - particle.vel.y ) * scaleOld + this.h2;
+ particle.x2d = this.pxScale * (( particle.pos.x - particle.vel.x ) * scaleOld + this.w2);
+ particle.y2d = this.pxScale * (( particle.pos.y - particle.vel.y ) * scaleOld + this.h2);
}
// Think of transforms as LIFO: the first one called is the last one applied.
- this.context.translate( x2d, y2d ); // 5: move the particle into position
+ this.context.translate(x2d, y2d); // 5: move the particle into position
this.context.scale(scale, scale); // 4: scale for distance (pos.z)
// Motion blur
if ( particle.streak && !this.isMouseDown ) {
@@ -613,7 +637,7 @@
}
this.context.globalAlpha = particle.alpha;
// draw image centered at origin
- var scaleMult = particle.scale * mult;
+ var scaleMult = particle.scale * mult * this.pxScale;
this.context.drawImage(particle.img, - scaleMult, - scaleMult, 2 * scaleMult, 2 * scaleMult);
// reset to identity matrix
this.context.setTransform(1, 0, 0, 1, 0, 0);
@@ -733,8 +757,8 @@
Fireworks.prototype.fadeFrame = function() {
// Fade the previous frame
this.displayContext.globalCompositeOperation = "source-over";
- this.displayContext.fillStyle = this.bgFillStyle;
- this.displayContext.fillRect(0, 0, this.canvas.width, this.canvas.height);
+ this.displayContext.globalAlpha = 0.4;
+ this.displayContext.drawImage(this.bgCanvas, 0, 0, this.displayCanvas.width, this.displayCanvas.height);
};
Fireworks.prototype.nextFrame = function() {
@@ -753,6 +777,7 @@
this.fadeFrame();
// Add the next frame
this.displayContext.globalCompositeOperation = "lighter";
+ this.displayContext.globalAlpha = 1;
this.displayContext.drawImage( this.frameCache.shift(), 0, 0 );
this.doStepCallback();
this.frameDueTime = time + this.frameInterval - Math.min(late, 10);

No commit comments for this range

Something went wrong with that request. Please try again.