From 2db2b65c68ede0967fd182fe5397c88d15adc8b8 Mon Sep 17 00:00:00 2001 From: sork Date: Mon, 23 May 2011 15:09:50 +0200 Subject: [PATCH] Added two small particle systems for background phones. Added animated Spark. --- apps/eol/templates/eol/desktop/home.html | 2 +- media/js/desktop/main.js | 11 ++-- media/js/desktop/particles.js | 72 ++++++++++++++------- media/js/desktop/spark.js | 81 ++++++++++++++++++++++++ settings.py | 1 + 5 files changed, 139 insertions(+), 28 deletions(-) create mode 100644 media/js/desktop/spark.js 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': (