Added two small particle systems for background phones. Added animated Spark.

apps/eol/templates/eol/desktop/home.html

@@ -56,7 +56,7 @@
                 <span class="number">162</span>
                 <span class="title">{{ _('<em>Countries</em> Sparked') }}</span>
             </div>
-            <canvas id="particles" height="380" width="350"></canvas>
+            <canvas id="particles"></canvas>
             <div id="light-ray"></div>
             <canvas id="spark"></canvas>
             <div id="phone">

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);
 });

media/js/desktop/particles.js

@@ -1,31 +1,24 @@
 var ParticleSystem = Class.extend({
-    init: function(canvasId, spritePath, spriteSize, width, height, nbParticles) {
+    init: function(context, sprite, spriteSize, x, y, width, height, nbParticles) {
-        var self = this;
         
-        this.canvas = document.getElementById(canvasId),
+        this.ctx = context;
-        this.ctx = this.canvas.getContext('2d'),
+        this.sprite = sprite;
-        this.w = width,
+        this.x = x;
-        this.h = height,
+        this.y = y;
-        this.particleSprite = new Image(),
+        this.w = width;
-        this.particleSprite.src = spritePath;
+        this.h = height;
-        this.particles = [],
+        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)),
+        this.particles.push({ xPos: Math.round(rand(0, this.w)),
-                              yPos: rand(300, 320),
+                              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.ctx.clearRect(0, 0, self.w, self.h);
-            self.draw();
+            self.forEachSystem(function(system) {
-            console.log('play');
+                system.update();
+                system.draw();
+            });
         }, 1000 / 60);
     },
     
@@ -74,3 +99,4 @@ var ParticleSystem = Class.extend({
         clearInterval(this.animation);
     }
 });
+

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);
+    }
+});

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': (