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.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);
|
||||||
|
|
|
@ -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
|
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;
|
||||||
|
|
|
@ -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,
|
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
|
@ -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>
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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
|
||||||
// -------------------------
|
// -------------------------
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue