Lots more things.

Got Puller integrated.
Need to make Puller shape responsive.
NEED MOAR PERFORMANCE. Somehow...

Overall module is pretty neat I think... just needs lots of refinement

website/source/javascripts/app/Engine.Particle.js

@@ -10,7 +10,8 @@ Engine.Particle = function(width, height){
 	this.pos   = new Vector(0, 0);
 
 	this.maxRadius = Engine.getRandomFloat(0.1, 2.5);
-	this.maxSpeed = Engine.getRandomFloat(0.01, 1000);
+	// this.maxSpeed = Engine.getRandomFloat(0.01, 1000);
+	this.maxSpeed = Engine.getRandomFloat(20, 1000);
 
 	// Pick a random target
 	side = Engine.getRandomInt(0, 3);

website/source/javascripts/app/Engine.Point.Puller.js

@@ -0,0 +1,128 @@
+(function(
+	Engine,
+	Vector
+){
+
+Engine.Point.Puller = function(id, x, y){
+	this.id = id;
+	this.pos.x = x;
+	this.pos.y = y;
+
+	this.pos = Vector.coerce(this.pos);
+	this.home = this.pos.clone();
+	this.accel = Vector.coerce(this.accel);
+	this.vel = Vector.coerce(this.vel);
+};
+
+Engine.Point.Puller.prototype = {
+
+	fillStyle: null,
+	defaultFillstyle: '#b976ff',
+	chasingFillstyle: '#ff6b6b',
+
+	radius: 1,
+
+	maxSpeed: 160,
+	maxForce: 50,
+
+	pos: {
+		x: 0,
+		y: 0
+	},
+
+	accel: {
+		x: 0,
+		y: 0
+	},
+
+	vel: {
+		x: 0,
+		y: 0
+	},
+
+	aRad: 200,
+
+	safety: 0.25,
+
+	update: function(engine){
+		var target = Vector.coerce(engine.mouse),
+			distanceToMouse = this.distanceTo(target),
+			toHome, mag, safety;
+			// distanceToHome = this.distanceTo(this.home);
+
+		this.accel.mult(0);
+
+		if (distanceToMouse < this.aRad) {
+			this._chasing = true;
+			this.toChase(target);
+			this.fillStyle = this.chasingFillstyle;
+		} else {
+			this._chasing = false;
+			this.fillStyle = this.defaultFillstyle;
+		}
+
+		this.toChase(this.home, this.maxForce / 2);
+
+		this.vel.add(this.accel);
+		this.pos.add(
+			Vector.mult(this.vel, engine.tick)
+		);
+
+		toHome = Vector.sub(this.home, this.pos);
+		mag = toHome.mag();
+		safety = this.aRad * (this.safety * 3);
+		if (mag > this.aRad - safety) {
+			toHome.normalize();
+			toHome.mult(this.aRad - safety);
+			this.pos = Vector.sub(this.home, toHome);
+		}
+	},
+
+	toChase: function(target, maxForce){
+		var desired, steer, distance, mult, safety;
+
+		maxForce = maxForce || this.maxForce;
+
+		target = Vector.coerce(target);
+		desired = Vector.sub(target, this.pos);
+		distance = desired.mag();
+		desired.normalize();
+
+		safety = this.aRad * this.safety;
+
+		if (distance < safety) {
+			mult = Engine.map(distance, 0, safety, 0, this.maxSpeed);
+		} else if (distance > this.aRad - safety){
+			mult = Engine.map(this.aRad - distance, 0, safety, 0, this.maxSpeed);
+		} else {
+			mult = this.maxSpeed;
+		}
+
+		desired.mult(mult);
+
+		steer = Vector.sub(desired, this.vel);
+		steer.limit(maxForce);
+		this.accel.add(steer);
+	},
+
+	draw: function(ctx, scale){
+		ctx.fillStyle = this.fillStyle;
+		ctx.fillRect(
+			(this.pos.x - this.radius / 2) * scale >> 0,
+			(this.pos.y - this.radius / 2) * scale >> 0,
+			this.radius * scale,
+			this.radius * scale
+		);
+	},
+
+	distanceTo: function(target) {
+		var xd = this.home.x - target.x;
+		var yd = this.home.y - target.y;
+		return Math.sqrt(xd * xd + yd * yd );
+	}
+};
+
+})(
+	window.Engine,
+	window.Vector
+);

website/source/javascripts/app/Engine.Polygon.Puller.js

@@ -0,0 +1,51 @@
+(function(
+	Engine,
+	Vector
+){
+
+Engine.Polygon.Puller = function(a, b, c, color, simple){
+	this.a = a;
+	this.b = b;
+	this.c = c;
+
+	this.strokeStyle = '#ffffff';
+};
+
+Engine.Polygon.Puller.prototype = {
+
+	checkChasing: function(){
+		if (
+			this.a._chasing === true &&
+			this.b._chasing === true &&
+			this.c._chasing === true
+		) {
+			return true;
+		}
+		return false;
+	},
+
+	// Determine color fill?
+	update: function(engine){},
+
+	draw: function(ctx, scale){
+		ctx.moveTo(
+			this.a.pos.x * scale >> 0,
+			this.a.pos.y * scale >> 0
+		);
+		ctx.lineTo(
+			this.b.pos.x * scale >> 0,
+			this.b.pos.y * scale >> 0
+		);
+		ctx.lineTo(
+			this.c.pos.x * scale >> 0,
+			this.c.pos.y * scale >> 0
+		);
+		ctx.lineTo(
+			this.a.pos.x * scale >> 0,
+			this.a.pos.y * scale >> 0
+		);
+	}
+
+};
+
+})(window.Engine, window.Vector);

website/source/javascripts/app/Engine.Polygon.js

@@ -84,8 +84,10 @@ Engine.Polygon.prototype = {
 			this.c.pos.y * scale >> 0
 		);
 		ctx.closePath();
+		if (!this.noFill) {
 			ctx.fillStyle   = this.fillStyle;
 			ctx.fill();
+		}
 		if (!this.simple) {
 			ctx.lineWidth = 0.25 * scale;
 			ctx.strokeStyle = this.strokeStyle;

website/source/javascripts/app/Engine.Shape.Puller.js

@@ -0,0 +1,106 @@
+(function(
+	Engine,
+	Point,
+	Polygon,
+	Vector
+){
+
+Engine.Shape.Puller = function(x, y, width, height, points, polygons){
+	var i, ref, point, poly;
+
+	this.pos  = new Vector(x, y);
+	this.size = new Vector(width, height);
+
+	ref = {};
+	this.points = [];
+	this.polygons = [];
+
+	for (i = 0; i < points.length; i++) {
+		point = new Point(
+			points[i].id,
+			points[i].x * this.size.x,
+			points[i].y * this.size.y
+		);
+		ref[point.id] = point;
+		this.points.push(point);
+	}
+
+	for (i = 0; i < polygons.length; i++) {
+		poly = polygons[i];
+		this.polygons.push(new Polygon(
+			ref[poly.points[0]],
+			ref[poly.points[1]],
+			ref[poly.points[2]],
+			poly.color
+		));
+		this.polygons[this.polygons.length - 1].noFill = true;
+	}
+
+	this.ref = undefined;
+};
+
+Engine.Shape.Puller.prototype = {
+
+	alpha: 0,
+
+	update: function(engine){
+		var p;
+
+		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);
+		}
+
+		if (this.alpha < 0.2) {
+			this.alpha += 1 * engine.tick;
+		}
+
+		return this;
+	},
+
+	draw: function(ctx, scale){
+		var p;
+
+		ctx.save();
+		ctx.translate(
+			this.pos.x * scale >> 0,
+			this.pos.y * scale >> 0
+		);
+		ctx.beginPath();
+		for (p = 0; p < this.polygons.length; p++) {
+			this.polygons[p].draw(ctx, scale);
+		}
+		ctx.closePath();
+		ctx.lineWidth = 1 * scale;
+		ctx.strokeStyle = 'rgba(108,0,243,' + this.alpha + ')';
+		ctx.stroke();
+
+		for (p = 0; p < this.points.length; p++) {
+			this.points[p].draw(ctx, scale);
+		}
+
+		ctx.beginPath();
+		for (p = 0; p < this.polygons.length; p++) {
+			if (this.polygons[p].checkChasing()) {
+				this.polygons[p].draw(ctx, scale);
+			}
+		}
+		ctx.closePath();
+		ctx.fillStyle = 'rgba(108,0,243,0.1)';
+		ctx.fill();
+
+		ctx.restore();
+		return this;
+	}
+
+};
+
+})(
+	window.Engine,
+	window.Engine.Point.Puller,
+	window.Engine.Polygon.Puller,
+	window.Vector
+);

website/source/javascripts/app/Engine.js

@@ -5,6 +5,7 @@
 	Vector,
 	Logo,
 	Shapes,
+	Grid,
 	Chainable
 ){
 
@@ -35,6 +36,13 @@ Engine = Base.extend({
 	_deferredParticles: [],
 	_deferredShapes: [],
 
+	starGeneratorRate: 600,
+
+	mouse: {
+		x: -9999,
+		y: -9999
+	},
+
 	constructor: function(canvas, image){
 		if (typeof canvas === 'string') {
 			this.canvas = document.getElementById(canvas);
@@ -59,6 +67,9 @@ Engine = Base.extend({
 
 		this.start = this.last;
 
+		this._handleMouseCoords = this._handleMouseCoords.bind(this);
+		window.addEventListener('mousemove', this._handleMouseCoords, false);
+
 		this.render = this.render.bind(this);
 		this.render();
 
@@ -76,7 +87,15 @@ Engine = Base.extend({
 		image.style.opacity = 1;
 
 		new Chainable()
-			.wait(3000)
+			.wait(2000)
+			.then(function(){
+				this.starGeneratorRate = 100;
+			}, this)
+			.wait(2000)
+			.then(function(){
+				this.showGrid = true;
+			}, this)
+			.wait(2000)
 			.then(function(){
 				parent.className += ' state-one';
 			})
@@ -95,13 +114,16 @@ Engine = Base.extend({
 			.wait(100)
 			.then(function(){
 				this.showShapes = true;
+			}, this)
+			.wait(1000)
+			.then(function(){
 			}, this);
 	},
 
 	setupStarfield: function(){
 		this.particles = [];
-		this.generateParticles(50, true);
+		// this.generateParticles(50, true);
-		this.generateParticles(200);
+		this.generateParticles(1000);
 	},
 
 	setupTessellation: function(canvas){
@@ -114,6 +136,15 @@ Engine = Base.extend({
 			Logo.Points,
 			Logo.Polygons
 		);
+
+		this.grid = new Engine.Shape.Puller(
+			-(this.width  / 2),
+			-(this.height / 2),
+			this.width,
+			this.height * 1.5,
+			Grid.points,
+			Grid.polygons
+		);
 	},
 
 	render: function(){
@@ -137,6 +168,11 @@ Engine = Base.extend({
 
 		this.renderStarfield(this.now);
 
+		if (this.showGrid) {
+			this.grid.update(this);
+			this.grid.draw(this.context, scale);
+		}
+
 		if (this.showShapes) {
 			this.renderTessellation(this.now);
 		}
@@ -250,7 +286,12 @@ Engine = Base.extend({
 			}
 		}
 
-		this.generateParticles(200 * this.tick >> 0);
+		this.generateParticles(this.starGeneratorRate * this.tick >> 0);
+	},
+
+	_handleMouseCoords: function(event){
+		this.mouse.x = event.pageX;
+		this.mouse.y = event.pageY;
 	}
 
 });
@@ -282,5 +323,6 @@ window.Engine = Engine;
 	window.Vector,
 	window.Logo,
 	window.Shapes,
+	window.Grid,
 	window.Chainable
 );

website/source/layouts/_footer.erb

@@ -28,12 +28,16 @@
 <script type="text/javascript" src="/javascripts/lib/Chainable.js"></script>
 <script type="text/javascript" src="/javascripts/app/Logo.js"></script>
 <script type="text/javascript" src="/javascripts/app/Shapes.js"></script>
+<script type="text/javascript" src="/javascripts/app/Grid.js"></script>
 <script type="text/javascript" src="/javascripts/app/Engine.js"></script>
 <script type="text/javascript" src="/javascripts/app/Engine.Particle.js"></script>
 <script type="text/javascript" src="/javascripts/app/Engine.Particle.Fixed.js"></script>
 <script type="text/javascript" src="/javascripts/app/Engine.Point.js"></script>
+<script type="text/javascript" src="/javascripts/app/Engine.Point.Puller.js"></script>
 <script type="text/javascript" src="/javascripts/app/Engine.Polygon.js"></script>
+<script type="text/javascript" src="/javascripts/app/Engine.Polygon.Puller.js"></script>
 <script type="text/javascript" src="/javascripts/app/Engine.Shape.js"></script>
+<script type="text/javascript" src="/javascripts/app/Engine.Shape.Puller.js"></script>
 <script type="text/javascript" src="/javascripts/app/Init.js"></script>
 
 </body>

website/source/stylesheets/_header.less

@@ -56,6 +56,8 @@ body.page-sub{
     margin-bottom: 0;
 
     &.navbar-static-top{
+        height:70px;
+
         -webkit-transform:translate3d(0,0,0);
            -moz-transform:translate3d(0,0,0);
             -ms-transform:translate3d(0,0,0);

website/source/stylesheets/_jumbotron.less

@@ -3,7 +3,7 @@
 // --------------------------------------------------
 
 #jumbotron-mask{
-  overflow: hidden;
+  position:relative;
   height: @jumbotron-total-height;
   margin-top: @negative-hero-margin;
   background-color: black;

website/source/stylesheets/_variables.less

@@ -12,7 +12,7 @@
 @jumbotron-color:  			    #fff;
 @btn-border-radius:   		  4px;
 @el-border-radius:   		    6px;
-@negative-hero-margin: 		  -90px;
+@negative-hero-margin: 		  -70px;
 // colors
 // -------------------------
 

website/source/stylesheets/main.css

@@ -126,6 +126,7 @@ body.page-sub #header .main-links.nav > li > a:focus {
   margin-bottom: 0;
 }
 #header.navbar-static-top {
+  height: 70px;
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
@@ -579,9 +580,9 @@ body.page-home #footer {
   }
 }
 #jumbotron-mask {
-  overflow: hidden;
+  position: relative;
   height: 700px;
-  margin-top: -90px;
+  margin-top: -70px;
   background-color: black;
 }
 #jumbotron {