diff --git a/website/source/javascripts/app/Engine.Particle.js b/website/source/javascripts/app/Engine.Particle.js index 180021dda..6666ac8c9 100644 --- a/website/source/javascripts/app/Engine.Particle.js +++ b/website/source/javascripts/app/Engine.Particle.js @@ -28,13 +28,8 @@ Engine.Particle = function(width, height){ this.maxDistance = this.distanceTo(this.target); - // this.fillA = 'rgba(136,67,237,' + Engine.getRandomFloat(0.7, 0.8) + ')'; - // this.fillB = 'rgba(136,67,237,1)'; - // this.fillA = '#651bb3'; - // this.fillB = '#9027ff'; this.fillA = '#8750c2'; this.fillB = '#b976ff'; - // b976ff this.frameMax = Engine.getRandomInt(1, 5); }; @@ -101,6 +96,12 @@ Engine.Particle.prototype = { this.showA = !this.showA; } + if (this.showA) { + engine.particlesA[engine.particlesA.length] = this; + } else { + engine.particlesB[engine.particlesB.length] = this; + } + return this; }, diff --git a/website/source/javascripts/app/Engine.Point.Puller.js b/website/source/javascripts/app/Engine.Point.Puller.js index 5dd2d45ba..83da7fd44 100644 --- a/website/source/javascripts/app/Engine.Point.Puller.js +++ b/website/source/javascripts/app/Engine.Point.Puller.js @@ -95,6 +95,8 @@ Engine.Point.Puller.prototype = { this.pos = Vector.sub(this.home, toHome); } + target = null; + toHome = null; return this; }, @@ -123,6 +125,10 @@ Engine.Point.Puller.prototype = { steer = Vector.sub(desired, this.vel); steer.limit(maxForce); this.accel.add(steer); + + target = null; + desired = null; + steer = null; }, draw: function(ctx, scale){ diff --git a/website/source/javascripts/app/Engine.Point.js b/website/source/javascripts/app/Engine.Point.js index f8093869e..244f0b981 100644 --- a/website/source/javascripts/app/Engine.Point.js +++ b/website/source/javascripts/app/Engine.Point.js @@ -1,7 +1,7 @@ (function( Engine, Vector -){ +){ 'use strict'; Engine.Point = function(id, x, y, width, height){ this.id = id; @@ -12,14 +12,6 @@ Engine.Point = function(id, x, y, width, height){ this.accel = Vector.coerce(this.accel); this.vel = Vector.coerce(this.vel); - // this.pos.add({ - // x: (Engine.getRandomFloat(0, 6) - 3), - // y: (Engine.getRandomFloat(0, 6) - 3) - // }); - - // Physics randomness - // this.stiffness = Engine.getRandomFloat(2, 5); - // this.stiffness = Engine.getRandomFloat(0.4, 0.8); this.stiffness = Engine.getRandomFloat(3, 6); this.friction = Engine.getRandomFloat(0.15, 0.3); }; @@ -68,14 +60,16 @@ Engine.Point.prototype = { Vector.mult(this.vel, engine.tick) ); + newAccel = null; + return this; }, draw: function(ctx, scale){ ctx.beginPath(); ctx.arc( - this.pos.x * scale, - this.pos.y * scale, + this.pos.x * scale, + this.pos.y * scale, this.radius * scale, 0, Math.PI * 2, diff --git a/website/source/javascripts/app/Engine.Shape.Puller.js b/website/source/javascripts/app/Engine.Shape.Puller.js index 2e4def3e1..361a9ae72 100644 --- a/website/source/javascripts/app/Engine.Shape.Puller.js +++ b/website/source/javascripts/app/Engine.Shape.Puller.js @@ -112,7 +112,7 @@ Engine.Shape.Puller.prototype = { } ctx.closePath(); ctx.lineWidth = 1 * scale; - ctx.strokeStyle = 'rgba(108,0,243,0.2)'; + ctx.strokeStyle = 'rgba(108,0,243,0.3)'; ctx.stroke(); if (this.alpha < 1) { diff --git a/website/source/javascripts/app/Engine.Shape.js b/website/source/javascripts/app/Engine.Shape.js index c4c7a903c..a814931d7 100644 --- a/website/source/javascripts/app/Engine.Shape.js +++ b/website/source/javascripts/app/Engine.Shape.js @@ -41,28 +41,15 @@ Engine.Shape = function(x, y, width, height, points, polygons, simple){ Engine.Shape.prototype = { - selfDestruct: function(time){ - this.destruct = time; - this.elapsed = 0; - return this; - }, - update: function(engine){ var p; - if (this.destruct) { - this.elapsed += engine.tick; - if (this.elapsed > this.destruct) { - engine._deferredShapes.push(this); - } - } - for (p = 0; p < this.points.length; p++) { this.points[p].update(engine); } for (p = 0; p < this.polygons.length; p++) { - this.polygons[p].update(engine, this.noHueShift); + this.polygons[p].update(engine); } return this; diff --git a/website/source/javascripts/app/Engine.js b/website/source/javascripts/app/Engine.js index 76b78670e..eebac2eed 100644 --- a/website/source/javascripts/app/Engine.js +++ b/website/source/javascripts/app/Engine.js @@ -30,11 +30,14 @@ Engine = Base.extend({ scale: window.devicePixelRatio || 1, // scale:1, - shapes : [], - particles : [], + shapes : [], + particles : [], + particlesA : [], + particlesB : [], _deferredParticles: [], - _deferredShapes: [], + + ticks: [], starGeneratorRate: 600, @@ -140,18 +143,44 @@ Engine = Base.extend({ this.grid = new Engine.Shape.Puller(this.width, this.height, Grid); }, + + getAverageTickTime: function(){ + var sum = 0, s; + + for (s = 0; s < this.ticks.length; s++) { + sum += this.ticks[s]; + } + + console.log('Average Tick Time:', sum / this.ticks.length); + }, + + getLongestTick: function(){ + var max = 0, index, s; + + for (s = 0; s < this.ticks.length; s++) { + if (this.ticks[s] > max) { + max = this.ticks[s]; + index = s; + } + } + + console.log('Max tick was:', max, 'at index:', index); + }, + render: function(){ - var scale = this.scale; + var scale = this.scale, tickStart; if (window.scrollY > 700) { window.requestAnimationFrame(this.render); return; } + tickStart = window.performance.now(); + this.context.clearRect( -(this.width / 2) * scale, -(this.height / 2) * scale, - this.width * scale, + this.width * scale, this.height * scale ); @@ -168,11 +197,16 @@ Engine = Base.extend({ } if (this.showShapes) { - this.renderTessellation(this.now); + // this.renderTessellation(this.now); + this.logo + .update(this) + .draw(this.context, scale, this); } this.last = this.now; + this.ticks.push(window.performance.now() - tickStart); + window.requestAnimationFrame(this.render); }, @@ -269,15 +303,48 @@ Engine = Base.extend({ }, renderStarfield: function(){ - var scale = this.scale, p, index; + var scale = this.scale, p, index, particle; // Update all particles... may need to be optimized for (p = 0; p < this.particles.length; p++) { - this.particles[p] - .update(this) - .draw(this.context, scale, this); + this.particles[p].update(this); } + // Batch render particles based on color + // to prevent unneeded context state change + this.context.fillStyle = '#8750c2'; + for (p = 0; p < this.particlesA.length; p++) { + particle = this.particlesA[p]; + + if (particle.radius < 0.25) { + continue; + } + this.context.fillRect( + particle.pos.x * scale >> 0, + particle.pos.y * scale >> 0, + particle.radius * scale, + particle.radius * scale + ); + } + + this.context.fillStyle = '#b976ff'; + for (p = 0; p < this.particlesB.length; p++) { + particle = this.particlesB[p]; + + if (particle.radius < 0.25) { + continue; + } + this.context.fillRect( + particle.pos.x * scale >> 0, + particle.pos.y * scale >> 0, + particle.radius * scale, + particle.radius * scale + ); + } + + this.particlesA.length = 0; + this.particlesB.length = 0; + // Remove destroyed particles for (p = 0; p < this._deferredParticles.length; p++) { index = this.particles.indexOf(this._deferredParticles.pop()); diff --git a/website/source/javascripts/lib/Vector.js b/website/source/javascripts/lib/Vector.js index 71002984d..0334c7ac7 100644 --- a/website/source/javascripts/lib/Vector.js +++ b/website/source/javascripts/lib/Vector.js @@ -96,7 +96,7 @@ Vector.div = function(vec, div){ return vec.clone().div(div); }; - // Ripped from processing +// Ripped from processing Vector.random2D = function(){ var angle = Math.random(0, 1) * Math.PI * 2; return new Vector(Math.cos(angle), Math.sin(angle));