Tons of Grid fixes

Realized I didn't export the poly properly

It now scales... although I should maintain the aspect ratio so it
doesn't look terrible on narrower devices

Fixed mouse targeting

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

@@ -3,15 +3,23 @@
 	Vector
 ){
 
-Engine.Point.Puller = function(id, x, y){
+Engine.Point.Puller = function(id, x, y, shapeSize){
 	this.id = id;
-	this.pos.x = x;
-	this.pos.y = y;
 
-	this.pos = Vector.coerce(this.pos);
-	this.home = this.pos.clone();
+	this.shapeSize = shapeSize;
+
+	this.ref = {
+		x: x,
+		y: y
+	};
+
+	this.pos.x = x * shapeSize.x;
+	this.pos.y = y * shapeSize.y;
+
+	this.pos   = Vector.coerce(this.pos);
+	this.home  = this.pos.clone();
 	this.accel = Vector.coerce(this.accel);
-	this.vel = Vector.coerce(this.vel);
+	this.vel   = Vector.coerce(this.vel);
 };
 
 Engine.Point.Puller.prototype = {
@@ -44,11 +52,21 @@ Engine.Point.Puller.prototype = {
 
 	safety: 0.25,
 
+	resize: function(){
+		this.home.x = this.pos.x = this.ref.x * this.shapeSize.x;
+		this.home.y = this.pos.y = this.ref.y * this.shapeSize.y;
+
+		return this;
+	},
+
 	update: function(engine){
 		var target = Vector.coerce(engine.mouse),
-			distanceToMouse = this.distanceTo(target),
-			toHome, mag, safety;
-			// distanceToHome = this.distanceTo(this.home);
+			distanceToMouse, toHome, mag, safety;
+
+		target.x += (this.shapeSize.x - engine.width)  / 2;
+		target.y += (this.shapeSize.y - engine.height) / 2;
+
+		distanceToMouse = this.distanceTo(target);
 
 		this.accel.mult(0);
 
@@ -76,6 +94,8 @@ Engine.Point.Puller.prototype = {
 			toHome.mult(this.aRad - safety);
 			this.pos = Vector.sub(this.home, toHome);
 		}
+
+		return this;
 	},
 
 	toChase: function(target, maxForce){
@@ -113,6 +133,8 @@ Engine.Point.Puller.prototype = {
 			this.radius * scale,
 			this.radius * scale
 		);
+
+		return this;
 	},
 
 	distanceTo: function(target) {

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

@@ -67,6 +67,8 @@ Engine.Point.prototype = {
 		this.pos.add(
 			Vector.mult(this.vel, engine.tick)
 		);
+
+		return this;
 	},
 
 	draw: function(ctx, scale){
@@ -81,6 +83,7 @@ Engine.Point.prototype = {
 		);
 		ctx.fillStyle = '#ffffff';
 		ctx.fill();
+		return this;
 	}
 
 };

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

@@ -11,6 +11,8 @@ Engine.Shape.Puller = function(x, y, width, height, points, polygons){
 	this.pos  = new Vector(x, y);
 	this.size = new Vector(width, height);
 
+	this.resize(width, height, true);
+
 	ref = {};
 	this.points = [];
 	this.polygons = [];
@@ -18,8 +20,9 @@ Engine.Shape.Puller = function(x, y, width, height, points, 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
+			points[i].x,
+			points[i].y,
+			this.size
 		);
 		ref[point.id] = point;
 		this.points.push(point);
@@ -43,6 +46,27 @@ Engine.Shape.Puller.prototype = {
 
 	alpha: 0,
 
+	sizeOffset: 100,
+
+	resize: function(width, height, sizeOnly){
+		var halfOffset = this.sizeOffset / 2,
+			len, p;
+
+		this.size.x = width  + this.sizeOffset;
+		this.size.y = height + this.sizeOffset;
+
+		this.pos.x = -(width  / 2 + halfOffset);
+		this.pos.y = -(height / 2 + halfOffset);
+
+		if (sizeOnly) {
+			return this;
+		}
+
+		for (p = 0, len = this.points.length; p < len; p++) {
+			this.points[p].resize();
+		}
+	},
+
 	update: function(engine){
 		var p;
 
@@ -51,7 +75,7 @@ Engine.Shape.Puller.prototype = {
 		}
 
 		for (p = 0; p < this.polygons.length; p++) {
-			this.polygons[p].update(engine);
+			this.polygons[p].update(engine, this);
 		}
 
 		if (this.alpha < 0.2) {

website/source/javascripts/app/Engine.js

@@ -87,11 +87,11 @@ Engine = Base.extend({
 		image.style.opacity = 1;
 
 		new Chainable()
-			.wait(2000)
+			.wait(1000)
 			.then(function(){
 				this.starGeneratorRate = 200;
 			}, this)
-			.wait(2000)
+			.wait(1000)
 			.then(function(){
 				this.showGrid = true;
 			}, this)
@@ -123,7 +123,7 @@ Engine = Base.extend({
 	setupStarfield: function(){
 		this.particles = [];
 		// this.generateParticles(50, true);
-		this.generateParticles(1000);
+		this.generateParticles(400);
 	},
 
 	setupTessellation: function(canvas){
@@ -141,7 +141,7 @@ Engine = Base.extend({
 			-(this.width  / 2),
 			-(this.height / 2),
 			this.width,
-			this.height * 1.5,
+			this.height,
 			Grid.points,
 			Grid.polygons
 		);
@@ -169,8 +169,9 @@ Engine = Base.extend({
 		this.renderStarfield(this.now);
 
 		if (this.showGrid) {
-			this.grid.update(this);
-			this.grid.draw(this.context, scale);
+			this.grid
+				.update(this)
+				.draw(this.context, scale);
 		}
 
 		if (this.showShapes) {
@@ -186,12 +187,14 @@ Engine = Base.extend({
 		var scale = this.scale, p, index;
 
 		for (p = 0; p < this.shapes.length; p++)  {
-			this.shapes[p].update(this);
-			this.shapes[p].draw(this.context, scale);
+			this.shapes[p]
+				.update(this)
+				.draw(this.context, scale);
 		}
 
-		this.logo.update(this);
-		this.logo.draw(this.context, scale);
+		this.logo
+			.update(this)
+			.draw(this.context, scale);
 
 		// Remove destroyed shapes
 		for (p = 0; p < this._deferredShapes.length; p++) {
@@ -266,6 +269,10 @@ Engine = Base.extend({
 			this.width  / 2 * scale >> 0,
 			this.height / 2 * scale >> 0
 		);
+
+		if (this.grid) {
+			this.grid.resize(this.width, this.height);
+		}
 	},
 
 	renderStarfield: function(){