diff --git a/apps/eol/templates/eol/desktop/home.html b/apps/eol/templates/eol/desktop/home.html
index ad13caf..3dbcf5d 100644
--- a/apps/eol/templates/eol/desktop/home.html
+++ b/apps/eol/templates/eol/desktop/home.html
@@ -56,7 +56,7 @@
162
{{ _('Countries Sparked') }}
-
+
diff --git a/media/js/desktop/main.js b/media/js/desktop/main.js
index 70b8d63..1d66165 100644
--- a/media/js/desktop/main.js
+++ b/media/js/desktop/main.js
@@ -4,17 +4,19 @@ $(document).ready(function() {
spark = new Section('spark', '#spark-content', 'spark-1'),
firefox = new Section('firefox', '#firefox-content', 'layer-1'),
currentSection,
- lightParticles;
+ lights, spark;
TWEEN.start();
home.onHide(function() {
- lightParticles.pause();
+ lights.pause();
+ spark.pause();
});
home.onShow(function() {
setTimeout(function() {
- lightParticles.play();
+ lights.play();
+ spark.play();
}, 400);
});
@@ -175,5 +177,6 @@ $(document).ready(function() {
initNewsletterForm();
- lightParticles = new ParticleSystem('light', '/media/img/particle.png', 40, 250, 366, 20);
+ lights = new Lights('particles', '/media/img/particle.png', 13, 380, 350);
+ spark = new Spark('spark', 200, 300);
});
\ No newline at end of file
diff --git a/media/js/desktop/particles.js b/media/js/desktop/particles.js
index 2a329be..6c817ce 100644
--- a/media/js/desktop/particles.js
+++ b/media/js/desktop/particles.js
@@ -1,31 +1,24 @@
var ParticleSystem = Class.extend({
- init: function(canvasId, spritePath, spriteSize, width, height, nbParticles) {
- var self = this;
+ init: function(context, sprite, spriteSize, x, y, width, height, nbParticles) {
- this.canvas = document.getElementById(canvasId),
- this.ctx = this.canvas.getContext('2d'),
- this.w = width,
- this.h = height,
- this.particleSprite = new Image(),
- this.particleSprite.src = spritePath;
- this.particles = [],
+ this.ctx = context;
+ this.sprite = sprite;
+ this.x = x;
+ this.y = y;
+ this.w = width;
+ this.h = height;
+ this.spriteSize = spriteSize;
+ this.particles = [];
this.NB_PARTICLES = nbParticles;
- this.canvas.height = this.h;
- this.canvas.width = this.w;
-
for(var i = 0; i < this.NB_PARTICLES; i += 1) {
this.spawnParticle();
};
-
- this.particleSprite.onload = function() {
- self.play();
- };
},
spawnParticle: function() {
- this.particles.push({ xPos: Math.round(rand(0, 220)),
- yPos: rand(300, 320),
+ this.particles.push({ xPos: Math.round(rand(0, this.w)),
+ yPos: rand(this.h - 20, this.h),
yStep: rand(0.5, 5),
alpha: rand(0, 1) });
},
@@ -50,23 +43,55 @@ var ParticleSystem = Class.extend({
draw: function() {
var p, ctx = this.ctx;
- ctx.clearRect(0, 0, this.w, this.h);
for(var i = 0, nb = this.particles.length; i < nb; i += 1) {
p = this.particles[i];
ctx.save();
ctx.globalAlpha = p.alpha;
- ctx.drawImage(this.particleSprite, p.xPos, p.yPos);
+ ctx.drawImage(this.sprite, this.x + p.xPos, this.y + p.yPos, this.spriteSize, this.spriteSize);
ctx.restore();
}
+ }
+});
+
+var Lights = Class.extend({
+ init: function(canvasId, spritePath, spriteSize, width, height) {
+ var self = this;
+
+ this.canvas = document.getElementById(canvasId);
+ this.ctx = this.canvas.getContext('2d');
+ this.w = width;
+ this.h = height;
+ this.particleSprite = new Image();
+ this.particleSprite.src = spritePath;
+
+ this.canvas.width = this.w;
+ this.canvas.height = this.h;
+
+ this.systems = [];
+
+ this.particleSprite.onload = function() {
+ self.systems.push(new ParticleSystem(self.ctx, self.particleSprite, 13, 0, 0, 205, 320, 20));
+ self.systems.push(new ParticleSystem(self.ctx, self.particleSprite, 7, 220, -100, 80, 260, 15));
+ self.systems.push(new ParticleSystem(self.ctx, self.particleSprite, 5, 60, -100, 50, 260, 15));
+ self.play();
+ };
+ },
+
+ forEachSystem: function(callback) {
+ for(var i = 0; i < 3; i++) {
+ callback(this.systems[i]);
+ }
},
play: function() {
var self = this;
this.animation = setInterval(function() {
- self.update();
- self.draw();
- console.log('play');
+ self.ctx.clearRect(0, 0, self.w, self.h);
+ self.forEachSystem(function(system) {
+ system.update();
+ system.draw();
+ });
}, 1000 / 60);
},
@@ -74,3 +99,4 @@ var ParticleSystem = Class.extend({
clearInterval(this.animation);
}
});
+
diff --git a/media/js/desktop/spark.js b/media/js/desktop/spark.js
new file mode 100644
index 0000000..f8fb1c1
--- /dev/null
+++ b/media/js/desktop/spark.js
@@ -0,0 +1,81 @@
+var Spark = Class.extend({
+ init: function(canvasId, h, w) {
+ var canvas = document.getElementById(canvasId),
+ red = '232, 57, 57',
+ orange = '252, 174, 70',
+ yellow = '247, 227, 94';
+
+ this.h = h;
+ this.w = w;
+ canvas.height = this.h;
+ canvas.width = this.w;
+ this.ctx = canvas.getContext('2d');
+ this.shapes = [{ arcAngle: 88, angle: -55, angleStep: -0.6, minAngle: 30, maxAngle: 160, rgb: red, scale: 1.2, scaleStep: 0.005, minScale: 1.1, maxScale: 1.25 },
+ { arcAngle: 85, angle: -85, angleStep: -0.6, minAngle: 60, maxAngle: 170, rgb: red, scale: 0.95, scaleStep: 0.005, minScale: 0.9, maxScale: 1.1 },
+ { arcAngle: 60, angle: -10, angleStep: -0.6, minAngle: 5, maxAngle: 90, rgb: red, scale: 0.92, scaleStep: 0.005, minScale: 0.85, maxScale: 1.0 },
+ { arcAngle: 90, angle: -90, angleStep: -0.6, minAngle: 80, maxAngle: 180, rgb: orange, scale: 0.55, scaleStep: 0.005, minScale: 0.45, maxScale: 0.6 },
+ { arcAngle: 95, angle: 0, angleStep: -0.6, minAngle: -10, maxAngle: 100, rgb: orange, scale: 0.4, scaleStep: 0.005, minScale: 0.35, maxScale: 0.5 },
+ { arcAngle: 50, angle: -110, angleStep: -0.6, minAngle: 90, maxAngle: 170, rgb: orange, scale: 0.7, scaleStep: 0.005, minScale: 0.6, maxScale: 0.75 },
+ { arcAngle: 90, angle: -12, angleStep: -0.6, minAngle: 5, maxAngle: 130, rgb: orange, scale: 0.75, scaleStep: 0.005, minScale: 0.7, maxScale: 0.8 },
+ { arcAngle: 80, angle: -50, angleStep: -0.75, minAngle: 25, maxAngle: 145, rgb: yellow, scale: 0.32, scaleStep: 0.005, minScale: 0.3, maxScale: 0.4 },
+ { arcAngle: 90, angle: -90, angleStep: -0.015, minAngle: 80, maxAngle: 200, rgb: yellow, scale: 0.2, scaleStep: 0.005, minScale: 0.2, maxScale: 0.3 },
+ { arcAngle: 30, angle: -22, angleStep: 1, minAngle: 10, maxAngle: 160, rgb: yellow, scale: 0.28, scaleStep: 0.005, minScale: 0.2, maxScale: 0.3 }];
+
+ this.play();
+ },
+
+ update: function() {
+ var dice, s;
+
+ for(var i = 0, nb = this.shapes.length; i < nb; i += 1) {
+ s = this.shapes[i];
+ dice = rand(1, 20);
+
+ s.moveFactor = 1-(i / 6);
+
+ if(Math.abs(s.angle) > (s.maxAngle - s.arcAngle) || Math.abs(s.angle) < s.minAngle || dice === 6) {
+ s.angleStep *= -1;
+ }
+ s.angle += s.angleStep * rand(1, 2);
+
+ if(s.scale > s.maxScale || s.scale < s.minScale || dice === 1) {
+ s.scaleStep *= -1;
+ }
+ s.scale += s.scaleStep * rand(1, 2);
+ }
+ },
+
+ draw: function() {
+ var shape, ctx = this.ctx;
+
+ for(i = 0, nb = this.shapes.length; i < nb; i += 1) {
+ shape = this.shapes[i];
+
+ ctx.save();
+ ctx.shadowBlur = 30;
+ ctx.shadowColor = "rgba(0, 0, 0, 0.1)";
+ ctx.fillStyle = "rgba("+shape.rgb+", 0.8)";
+ ctx.translate(this.w / 2, this.h);
+ ctx.rotate(deg2rad(shape.angle));
+ ctx.beginPath();
+ ctx.moveTo(0, 0);
+ ctx.arc(0, 0, 100 * shape.scale, 0, -deg2rad(shape.arcAngle), true);
+ ctx.fill();
+ ctx.restore();
+ }
+ },
+
+ play: function() {
+ var self = this;
+
+ this.animation = setInterval(function() {
+ self.ctx.clearRect(0, 0, self.w, self.h);
+ self.update();
+ self.draw();
+ }, 1000 / 60);
+ },
+
+ pause: function() {
+ clearInterval(this.animation);
+ }
+});
diff --git a/settings.py b/settings.py
index cc9ac68..da1df8e 100644
--- a/settings.py
+++ b/settings.py
@@ -185,6 +185,7 @@ MINIFY_BUNDLES = {
'js/desktop/popups.js',
'js/desktop/newsletter.js',
'js/desktop/particles.js',
+ 'js/desktop/spark.js',
'js/desktop/main.js',
),
'mobile': (