Various performance optimizations
* Reducing hot function calls * Optimized surrounding HTML and CSS * Removed a forced redraw test in render
This commit is contained in:
parent
96863d5f4b
commit
31cfad5c44
|
@ -2,14 +2,12 @@
|
||||||
<div id="jumbotron-mask">
|
<div id="jumbotron-mask">
|
||||||
<div id="jumbotron">
|
<div id="jumbotron">
|
||||||
<div class="galaxy-image" id="image"></div>
|
<div class="galaxy-image" id="image"></div>
|
||||||
<div class="container">
|
<div class="logo-container">
|
||||||
<div class="logo-container">
|
<div class="animated-logo">
|
||||||
<div class="animated-logo">
|
<div class="white-block block-one"></div>
|
||||||
<div class="white-block block-one"></div>
|
<div class="white-block block-two"></div>
|
||||||
<div class="white-block block-two"></div>
|
<div class="white-block block-three"></div>
|
||||||
<div class="white-block block-three"></div>
|
<div class="white-block block-four"></div>
|
||||||
<div class="white-block block-four"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -22,28 +22,6 @@ Engine.Polygon.Puller.prototype = {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
return false;
|
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
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -67,32 +67,6 @@ Engine.Polygon.prototype = {
|
||||||
this.strokeStyle = this.hslaTemplate.substitute(this.strokeColor);
|
this.strokeStyle = this.hslaTemplate.substitute(this.strokeColor);
|
||||||
this.fillStyle = this.hslaTemplate.substitute(this.color);
|
this.fillStyle = this.hslaTemplate.substitute(this.color);
|
||||||
}
|
}
|
||||||
},
|
|
||||||
|
|
||||||
draw: function(ctx, scale){
|
|
||||||
ctx.beginPath();
|
|
||||||
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.closePath();
|
|
||||||
if (!this.noFill) {
|
|
||||||
ctx.fillStyle = this.fillStyle;
|
|
||||||
ctx.fill();
|
|
||||||
}
|
|
||||||
if (!this.simple) {
|
|
||||||
ctx.lineWidth = 0.25 * scale;
|
|
||||||
ctx.strokeStyle = this.strokeStyle;
|
|
||||||
ctx.stroke();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -83,10 +83,6 @@ Engine.Shape.Puller.prototype = {
|
||||||
this.points[p].update(engine);
|
this.points[p].update(engine);
|
||||||
}
|
}
|
||||||
|
|
||||||
for (p = 0; p < this.polygons.length; p++) {
|
|
||||||
this.polygons[p].update(engine, this);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.alpha < 1) {
|
if (this.alpha < 1) {
|
||||||
this.alpha = Math.min(this.alpha + 2 * engine.tick, 1);
|
this.alpha = Math.min(this.alpha + 2 * engine.tick, 1);
|
||||||
}
|
}
|
||||||
|
@ -95,7 +91,7 @@ Engine.Shape.Puller.prototype = {
|
||||||
},
|
},
|
||||||
|
|
||||||
draw: function(ctx, scale, engine){
|
draw: function(ctx, scale, engine){
|
||||||
var p;
|
var p, poly;
|
||||||
|
|
||||||
ctx.translate(
|
ctx.translate(
|
||||||
this.pos.x * scale >> 0,
|
this.pos.x * scale >> 0,
|
||||||
|
@ -108,10 +104,26 @@ Engine.Shape.Puller.prototype = {
|
||||||
|
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
for (p = 0; p < this.polygons.length; p++) {
|
for (p = 0; p < this.polygons.length; p++) {
|
||||||
this.polygons[p].draw(ctx, scale);
|
poly = this.polygons[p];
|
||||||
|
ctx.moveTo(
|
||||||
|
poly.a.pos.x * scale >> 0,
|
||||||
|
poly.a.pos.y * scale >> 0
|
||||||
|
);
|
||||||
|
ctx.lineTo(
|
||||||
|
poly.b.pos.x * scale >> 0,
|
||||||
|
poly.b.pos.y * scale >> 0
|
||||||
|
);
|
||||||
|
ctx.lineTo(
|
||||||
|
poly.c.pos.x * scale >> 0,
|
||||||
|
poly.c.pos.y * scale >> 0
|
||||||
|
);
|
||||||
|
ctx.lineTo(
|
||||||
|
poly.a.pos.x * scale >> 0,
|
||||||
|
poly.a.pos.y * scale >> 0
|
||||||
|
);
|
||||||
}
|
}
|
||||||
ctx.closePath();
|
ctx.closePath();
|
||||||
ctx.lineWidth = 1 * scale;
|
ctx.lineWidth = 0.4 * scale;
|
||||||
ctx.strokeStyle = 'rgba(108,0,243,0.3)';
|
ctx.strokeStyle = 'rgba(108,0,243,0.3)';
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
|
|
||||||
|
@ -126,7 +138,23 @@ Engine.Shape.Puller.prototype = {
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
for (p = 0; p < this.polygons.length; p++) {
|
for (p = 0; p < this.polygons.length; p++) {
|
||||||
if (this.polygons[p].checkChasing()) {
|
if (this.polygons[p].checkChasing()) {
|
||||||
this.polygons[p].draw(ctx, scale);
|
poly = this.polygons[p];
|
||||||
|
ctx.moveTo(
|
||||||
|
poly.a.pos.x * scale >> 0,
|
||||||
|
poly.a.pos.y * scale >> 0
|
||||||
|
);
|
||||||
|
ctx.lineTo(
|
||||||
|
poly.b.pos.x * scale >> 0,
|
||||||
|
poly.b.pos.y * scale >> 0
|
||||||
|
);
|
||||||
|
ctx.lineTo(
|
||||||
|
poly.c.pos.x * scale >> 0,
|
||||||
|
poly.c.pos.y * scale >> 0
|
||||||
|
);
|
||||||
|
ctx.lineTo(
|
||||||
|
poly.a.pos.x * scale >> 0,
|
||||||
|
poly.a.pos.y * scale >> 0
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
ctx.closePath();
|
ctx.closePath();
|
||||||
|
|
|
@ -56,14 +56,33 @@ Engine.Shape.prototype = {
|
||||||
},
|
},
|
||||||
|
|
||||||
draw: function(ctx, scale, engine){
|
draw: function(ctx, scale, engine){
|
||||||
var p;
|
var p, poly;
|
||||||
|
|
||||||
ctx.translate(
|
ctx.translate(
|
||||||
this.pos.x * scale >> 0,
|
this.pos.x * scale >> 0,
|
||||||
this.pos.y * scale >> 0
|
this.pos.y * scale >> 0
|
||||||
);
|
);
|
||||||
for (p = 0; p < this.polygons.length; p++) {
|
for (p = 0; p < this.polygons.length; p++) {
|
||||||
this.polygons[p].draw(ctx, scale, this.noStroke);
|
poly = this.polygons[p];
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(
|
||||||
|
poly.a.pos.x * scale >> 0,
|
||||||
|
poly.a.pos.y * scale >> 0
|
||||||
|
);
|
||||||
|
ctx.lineTo(
|
||||||
|
poly.b.pos.x * scale >> 0,
|
||||||
|
poly.b.pos.y * scale >> 0
|
||||||
|
);
|
||||||
|
ctx.lineTo(
|
||||||
|
poly.c.pos.x * scale >> 0,
|
||||||
|
poly.c.pos.y * scale >> 0
|
||||||
|
);
|
||||||
|
ctx.closePath();
|
||||||
|
ctx.fillStyle = poly.fillStyle;
|
||||||
|
ctx.fill();
|
||||||
|
ctx.lineWidth = 0.25 * scale;
|
||||||
|
ctx.strokeStyle = poly.strokeStyle;
|
||||||
|
ctx.stroke();
|
||||||
}
|
}
|
||||||
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
||||||
ctx.translate(
|
ctx.translate(
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
/* jshint unused:false */
|
|
||||||
/* global console */
|
|
||||||
(function(
|
(function(
|
||||||
Base,
|
Base,
|
||||||
Vector,
|
Vector,
|
||||||
|
@ -63,6 +61,10 @@ Engine = Base.extend({
|
||||||
this.resize();
|
this.resize();
|
||||||
window.addEventListener('resize', this.resize, false);
|
window.addEventListener('resize', this.resize, false);
|
||||||
|
|
||||||
|
this._handleScroll = this._handleScroll.bind(this);
|
||||||
|
this._handleScroll();
|
||||||
|
window.addEventListener('scroll', this._handleScroll, false);
|
||||||
|
|
||||||
this.setupStarfield();
|
this.setupStarfield();
|
||||||
this.setupTessellation();
|
this.setupTessellation();
|
||||||
|
|
||||||
|
@ -151,7 +153,7 @@ Engine = Base.extend({
|
||||||
sum += this.ticks[s];
|
sum += this.ticks[s];
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log('Average Tick Time:', sum / this.ticks.length);
|
window.console.log('Average Tick Time:', sum / this.ticks.length);
|
||||||
},
|
},
|
||||||
|
|
||||||
getLongestTick: function(){
|
getLongestTick: function(){
|
||||||
|
@ -164,19 +166,17 @@ Engine = Base.extend({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log('Max tick was:', max, 'at index:', index);
|
window.console.log('Max tick was:', max, 'at index:', index);
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function(){
|
render: function(){
|
||||||
var scale = this.scale, tickStart;
|
var scale = this.scale;
|
||||||
|
|
||||||
if (window.scrollY > 700) {
|
if (this.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,
|
||||||
|
@ -205,8 +205,6 @@ Engine = Base.extend({
|
||||||
|
|
||||||
this.last = this.now;
|
this.last = this.now;
|
||||||
|
|
||||||
this.ticks.push(window.performance.now() - tickStart);
|
|
||||||
|
|
||||||
window.requestAnimationFrame(this.render);
|
window.requestAnimationFrame(this.render);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -238,7 +236,7 @@ Engine = Base.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
generateRandomShape: function(){
|
generateRandomShape: function(){
|
||||||
var p, index, rando, halfWidth, halfHeight, iter,
|
var halfWidth, halfHeight, iter,
|
||||||
shape, shapeTemplate, columns, rows, modWidth, row, column,
|
shape, shapeTemplate, columns, rows, modWidth, row, column,
|
||||||
xOffset, yOffset;
|
xOffset, yOffset;
|
||||||
|
|
||||||
|
@ -359,6 +357,10 @@ Engine = Base.extend({
|
||||||
_handleMouseCoords: function(event){
|
_handleMouseCoords: function(event){
|
||||||
this.mouse.x = event.pageX;
|
this.mouse.x = event.pageX;
|
||||||
this.mouse.y = event.pageY;
|
this.mouse.y = event.pageY;
|
||||||
|
},
|
||||||
|
|
||||||
|
_handleScroll: function(){
|
||||||
|
this.scrollY = window.scrollY;
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
@ -16,11 +16,6 @@
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
color: @jumbotron-color;
|
color: @jumbotron-color;
|
||||||
|
|
||||||
.container {
|
|
||||||
position:relative;
|
|
||||||
height:700px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.terraform-canvas {
|
.terraform-canvas {
|
||||||
position:absolute;
|
position:absolute;
|
||||||
top:0;
|
top:0;
|
||||||
|
|
|
@ -592,10 +592,6 @@ body.page-home #footer {
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
#jumbotron .container {
|
|
||||||
position: relative;
|
|
||||||
height: 700px;
|
|
||||||
}
|
|
||||||
#jumbotron .terraform-canvas {
|
#jumbotron .terraform-canvas {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
Loading…
Reference in New Issue