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
This commit is contained in:
Amadeus Demarzi 2014-07-25 03:09:17 -07:00
parent afc8e3dbdf
commit 222cf2012b
12 changed files with 2465 additions and 11 deletions

View File

@ -10,7 +10,8 @@ Engine.Particle = function(width, height){
this.pos = new Vector(0, 0); this.pos = new Vector(0, 0);
this.maxRadius = Engine.getRandomFloat(0.1, 2.5); 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 // Pick a random target
side = Engine.getRandomInt(0, 3); side = Engine.getRandomInt(0, 3);

View File

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

View File

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

View File

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

View File

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

View File

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

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

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

View File

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

View File

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