Various performance optimizations
This commit is contained in:
parent
5f10724025
commit
96863d5f4b
|
@ -28,13 +28,8 @@ Engine.Particle = function(width, height){
|
||||||
|
|
||||||
this.maxDistance = this.distanceTo(this.target);
|
this.maxDistance = this.distanceTo(this.target);
|
||||||
|
|
||||||
// this.fillA = 'rgba(136,67,237,' + Engine.getRandomFloat(0.7, 0.8) + ')';
|
|
||||||
// this.fillB = 'rgba(136,67,237,1)';
|
|
||||||
// this.fillA = '#651bb3';
|
|
||||||
// this.fillB = '#9027ff';
|
|
||||||
this.fillA = '#8750c2';
|
this.fillA = '#8750c2';
|
||||||
this.fillB = '#b976ff';
|
this.fillB = '#b976ff';
|
||||||
// b976ff
|
|
||||||
this.frameMax = Engine.getRandomInt(1, 5);
|
this.frameMax = Engine.getRandomInt(1, 5);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -101,6 +96,12 @@ Engine.Particle.prototype = {
|
||||||
this.showA = !this.showA;
|
this.showA = !this.showA;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.showA) {
|
||||||
|
engine.particlesA[engine.particlesA.length] = this;
|
||||||
|
} else {
|
||||||
|
engine.particlesB[engine.particlesB.length] = this;
|
||||||
|
}
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -95,6 +95,8 @@ Engine.Point.Puller.prototype = {
|
||||||
this.pos = Vector.sub(this.home, toHome);
|
this.pos = Vector.sub(this.home, toHome);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
target = null;
|
||||||
|
toHome = null;
|
||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -123,6 +125,10 @@ Engine.Point.Puller.prototype = {
|
||||||
steer = Vector.sub(desired, this.vel);
|
steer = Vector.sub(desired, this.vel);
|
||||||
steer.limit(maxForce);
|
steer.limit(maxForce);
|
||||||
this.accel.add(steer);
|
this.accel.add(steer);
|
||||||
|
|
||||||
|
target = null;
|
||||||
|
desired = null;
|
||||||
|
steer = null;
|
||||||
},
|
},
|
||||||
|
|
||||||
draw: function(ctx, scale){
|
draw: function(ctx, scale){
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
(function(
|
(function(
|
||||||
Engine,
|
Engine,
|
||||||
Vector
|
Vector
|
||||||
){
|
){ 'use strict';
|
||||||
|
|
||||||
Engine.Point = function(id, x, y, width, height){
|
Engine.Point = function(id, x, y, width, height){
|
||||||
this.id = id;
|
this.id = id;
|
||||||
|
@ -12,14 +12,6 @@ Engine.Point = function(id, x, y, width, height){
|
||||||
this.accel = Vector.coerce(this.accel);
|
this.accel = Vector.coerce(this.accel);
|
||||||
this.vel = Vector.coerce(this.vel);
|
this.vel = Vector.coerce(this.vel);
|
||||||
|
|
||||||
// this.pos.add({
|
|
||||||
// x: (Engine.getRandomFloat(0, 6) - 3),
|
|
||||||
// y: (Engine.getRandomFloat(0, 6) - 3)
|
|
||||||
// });
|
|
||||||
|
|
||||||
// Physics randomness
|
|
||||||
// this.stiffness = Engine.getRandomFloat(2, 5);
|
|
||||||
// this.stiffness = Engine.getRandomFloat(0.4, 0.8);
|
|
||||||
this.stiffness = Engine.getRandomFloat(3, 6);
|
this.stiffness = Engine.getRandomFloat(3, 6);
|
||||||
this.friction = Engine.getRandomFloat(0.15, 0.3);
|
this.friction = Engine.getRandomFloat(0.15, 0.3);
|
||||||
};
|
};
|
||||||
|
@ -68,14 +60,16 @@ Engine.Point.prototype = {
|
||||||
Vector.mult(this.vel, engine.tick)
|
Vector.mult(this.vel, engine.tick)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
newAccel = null;
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
|
|
||||||
draw: function(ctx, scale){
|
draw: function(ctx, scale){
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.arc(
|
ctx.arc(
|
||||||
this.pos.x * scale,
|
this.pos.x * scale,
|
||||||
this.pos.y * scale,
|
this.pos.y * scale,
|
||||||
this.radius * scale,
|
this.radius * scale,
|
||||||
0,
|
0,
|
||||||
Math.PI * 2,
|
Math.PI * 2,
|
||||||
|
|
|
@ -112,7 +112,7 @@ Engine.Shape.Puller.prototype = {
|
||||||
}
|
}
|
||||||
ctx.closePath();
|
ctx.closePath();
|
||||||
ctx.lineWidth = 1 * scale;
|
ctx.lineWidth = 1 * scale;
|
||||||
ctx.strokeStyle = 'rgba(108,0,243,0.2)';
|
ctx.strokeStyle = 'rgba(108,0,243,0.3)';
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
|
|
||||||
if (this.alpha < 1) {
|
if (this.alpha < 1) {
|
||||||
|
|
|
@ -41,28 +41,15 @@ Engine.Shape = function(x, y, width, height, points, polygons, simple){
|
||||||
|
|
||||||
Engine.Shape.prototype = {
|
Engine.Shape.prototype = {
|
||||||
|
|
||||||
selfDestruct: function(time){
|
|
||||||
this.destruct = time;
|
|
||||||
this.elapsed = 0;
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
|
|
||||||
update: function(engine){
|
update: function(engine){
|
||||||
var p;
|
var p;
|
||||||
|
|
||||||
if (this.destruct) {
|
|
||||||
this.elapsed += engine.tick;
|
|
||||||
if (this.elapsed > this.destruct) {
|
|
||||||
engine._deferredShapes.push(this);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
for (p = 0; p < this.points.length; p++) {
|
for (p = 0; p < this.points.length; p++) {
|
||||||
this.points[p].update(engine);
|
this.points[p].update(engine);
|
||||||
}
|
}
|
||||||
|
|
||||||
for (p = 0; p < this.polygons.length; p++) {
|
for (p = 0; p < this.polygons.length; p++) {
|
||||||
this.polygons[p].update(engine, this.noHueShift);
|
this.polygons[p].update(engine);
|
||||||
}
|
}
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
|
|
|
@ -30,11 +30,14 @@ Engine = Base.extend({
|
||||||
scale: window.devicePixelRatio || 1,
|
scale: window.devicePixelRatio || 1,
|
||||||
// scale:1,
|
// scale:1,
|
||||||
|
|
||||||
shapes : [],
|
shapes : [],
|
||||||
particles : [],
|
particles : [],
|
||||||
|
particlesA : [],
|
||||||
|
particlesB : [],
|
||||||
|
|
||||||
_deferredParticles: [],
|
_deferredParticles: [],
|
||||||
_deferredShapes: [],
|
|
||||||
|
ticks: [],
|
||||||
|
|
||||||
starGeneratorRate: 600,
|
starGeneratorRate: 600,
|
||||||
|
|
||||||
|
@ -140,18 +143,44 @@ Engine = Base.extend({
|
||||||
this.grid = new Engine.Shape.Puller(this.width, this.height, Grid);
|
this.grid = new Engine.Shape.Puller(this.width, this.height, Grid);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
getAverageTickTime: function(){
|
||||||
|
var sum = 0, s;
|
||||||
|
|
||||||
|
for (s = 0; s < this.ticks.length; s++) {
|
||||||
|
sum += this.ticks[s];
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('Average Tick Time:', sum / this.ticks.length);
|
||||||
|
},
|
||||||
|
|
||||||
|
getLongestTick: function(){
|
||||||
|
var max = 0, index, s;
|
||||||
|
|
||||||
|
for (s = 0; s < this.ticks.length; s++) {
|
||||||
|
if (this.ticks[s] > max) {
|
||||||
|
max = this.ticks[s];
|
||||||
|
index = s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('Max tick was:', max, 'at index:', index);
|
||||||
|
},
|
||||||
|
|
||||||
render: function(){
|
render: function(){
|
||||||
var scale = this.scale;
|
var scale = this.scale, tickStart;
|
||||||
|
|
||||||
if (window.scrollY > 700) {
|
if (window.scrollY > 700) {
|
||||||
window.requestAnimationFrame(this.render);
|
window.requestAnimationFrame(this.render);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
tickStart = window.performance.now();
|
||||||
|
|
||||||
this.context.clearRect(
|
this.context.clearRect(
|
||||||
-(this.width / 2) * scale,
|
-(this.width / 2) * scale,
|
||||||
-(this.height / 2) * scale,
|
-(this.height / 2) * scale,
|
||||||
this.width * scale,
|
this.width * scale,
|
||||||
this.height * scale
|
this.height * scale
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -168,11 +197,16 @@ Engine = Base.extend({
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.showShapes) {
|
if (this.showShapes) {
|
||||||
this.renderTessellation(this.now);
|
// this.renderTessellation(this.now);
|
||||||
|
this.logo
|
||||||
|
.update(this)
|
||||||
|
.draw(this.context, scale, this);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.last = this.now;
|
this.last = this.now;
|
||||||
|
|
||||||
|
this.ticks.push(window.performance.now() - tickStart);
|
||||||
|
|
||||||
window.requestAnimationFrame(this.render);
|
window.requestAnimationFrame(this.render);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -269,15 +303,48 @@ Engine = Base.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
renderStarfield: function(){
|
renderStarfield: function(){
|
||||||
var scale = this.scale, p, index;
|
var scale = this.scale, p, index, particle;
|
||||||
|
|
||||||
// Update all particles... may need to be optimized
|
// Update all particles... may need to be optimized
|
||||||
for (p = 0; p < this.particles.length; p++) {
|
for (p = 0; p < this.particles.length; p++) {
|
||||||
this.particles[p]
|
this.particles[p].update(this);
|
||||||
.update(this)
|
|
||||||
.draw(this.context, scale, this);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Batch render particles based on color
|
||||||
|
// to prevent unneeded context state change
|
||||||
|
this.context.fillStyle = '#8750c2';
|
||||||
|
for (p = 0; p < this.particlesA.length; p++) {
|
||||||
|
particle = this.particlesA[p];
|
||||||
|
|
||||||
|
if (particle.radius < 0.25) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
this.context.fillRect(
|
||||||
|
particle.pos.x * scale >> 0,
|
||||||
|
particle.pos.y * scale >> 0,
|
||||||
|
particle.radius * scale,
|
||||||
|
particle.radius * scale
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.context.fillStyle = '#b976ff';
|
||||||
|
for (p = 0; p < this.particlesB.length; p++) {
|
||||||
|
particle = this.particlesB[p];
|
||||||
|
|
||||||
|
if (particle.radius < 0.25) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
this.context.fillRect(
|
||||||
|
particle.pos.x * scale >> 0,
|
||||||
|
particle.pos.y * scale >> 0,
|
||||||
|
particle.radius * scale,
|
||||||
|
particle.radius * scale
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.particlesA.length = 0;
|
||||||
|
this.particlesB.length = 0;
|
||||||
|
|
||||||
// Remove destroyed particles
|
// Remove destroyed particles
|
||||||
for (p = 0; p < this._deferredParticles.length; p++) {
|
for (p = 0; p < this._deferredParticles.length; p++) {
|
||||||
index = this.particles.indexOf(this._deferredParticles.pop());
|
index = this.particles.indexOf(this._deferredParticles.pop());
|
||||||
|
|
|
@ -96,7 +96,7 @@ Vector.div = function(vec, div){
|
||||||
return vec.clone().div(div);
|
return vec.clone().div(div);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Ripped from processing
|
// Ripped from processing
|
||||||
Vector.random2D = function(){
|
Vector.random2D = function(){
|
||||||
var angle = Math.random(0, 1) * Math.PI * 2;
|
var angle = Math.random(0, 1) * Math.PI * 2;
|
||||||
return new Vector(Math.cos(angle), Math.sin(angle));
|
return new Vector(Math.cos(angle), Math.sin(angle));
|
||||||
|
|
Loading…
Reference in New Issue