Various performance optimizations

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

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){

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,

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) {

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;

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

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