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
This commit is contained in:
Amadeus Demarzi 2014-07-25 20:28:47 -07:00
parent aeef7b5de3
commit 8483bc384c
5 changed files with 1892 additions and 1569 deletions

View File

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

View File

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

View File

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

View File

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

File diff suppressed because it is too large Load Diff