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:
parent
afc8e3dbdf
commit
222cf2012b
|
@ -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);
|
||||
|
|
|
@ -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
|
||||
);
|
|
@ -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);
|
|
@ -84,8 +84,10 @@ Engine.Polygon.prototype = {
|
|||
this.c.pos.y * scale >> 0
|
||||
);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = this.fillStyle;
|
||||
ctx.fill();
|
||||
if (!this.noFill) {
|
||||
ctx.fillStyle = this.fillStyle;
|
||||
ctx.fill();
|
||||
}
|
||||
if (!this.simple) {
|
||||
ctx.lineWidth = 0.25 * scale;
|
||||
ctx.strokeStyle = this.strokeStyle;
|
||||
|
|
|
@ -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
|
||||
);
|
|
@ -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(200);
|
||||
// this.generateParticles(50, true);
|
||||
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
|
||||
);
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
#jumbotron-mask{
|
||||
overflow: hidden;
|
||||
position:relative;
|
||||
height: @jumbotron-total-height;
|
||||
margin-top: @negative-hero-margin;
|
||||
background-color: black;
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
@jumbotron-color: #fff;
|
||||
@btn-border-radius: 4px;
|
||||
@el-border-radius: 6px;
|
||||
@negative-hero-margin: -90px;
|
||||
@negative-hero-margin: -70px;
|
||||
// colors
|
||||
// -------------------------
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue