resilien
/
terraform
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Various performance optimizations 

* Reducing hot function calls
* Optimized surrounding HTML and CSS
* Removed a forced redraw test in render
This commit is contained in:
Amadeus Demarzi 2014-07-26 00:11:43 -07:00
parent 96863d5f4b
commit 31cfad5c44
8 changed files with 76 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
website/source/index.html.erb
View File

@ -2,14 +2,12 @@
<div id="jumbotron-mask">
<div id="jumbotron">
<div class="galaxy-image" id="image"></div>
<div class="container">
<div class="logo-container">
<div class="animated-logo">
<div class="white-block block-one"></div>
<div class="white-block block-two"></div>
<div class="white-block block-three"></div>
<div class="white-block block-four"></div>
</div>
<div class="logo-container">
<div class="animated-logo">
<div class="white-block block-one"></div>
<div class="white-block block-two"></div>
<div class="white-block block-three"></div>
<div class="white-block block-four"></div>
</div>
</div>
</div>

22
website/source/javascripts/app/Engine.Polygon.Puller.js
View File

@ -22,28 +22,6 @@ Engine.Polygon.Puller.prototype = {
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
);
}
};

26
website/source/javascripts/app/Engine.Polygon.js
View File

@ -67,32 +67,6 @@ Engine.Polygon.prototype = {
this.strokeStyle = this.hslaTemplate.substitute(this.strokeColor);
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();
}
}
};

44
website/source/javascripts/app/Engine.Shape.Puller.js
View File

@ -83,10 +83,6 @@ Engine.Shape.Puller.prototype = {
this.points[p].update(engine);
}
for (p = 0; p < this.polygons.length; p++) {
this.polygons[p].update(engine, this);
}
if (this.alpha < 1) {
this.alpha = Math.min(this.alpha + 2 * engine.tick, 1);
}
@ -95,7 +91,7 @@ Engine.Shape.Puller.prototype = {
},
draw: function(ctx, scale, engine){
var p;
var p, poly;
ctx.translate(
this.pos.x * scale >> 0,
@ -108,10 +104,26 @@ Engine.Shape.Puller.prototype = {
ctx.beginPath();
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.lineWidth = 1 * scale;
ctx.lineWidth = 0.4 * scale;
ctx.strokeStyle = 'rgba(108,0,243,0.3)';
ctx.stroke();
@ -126,7 +138,23 @@ Engine.Shape.Puller.prototype = {
ctx.beginPath();
for (p = 0; p < this.polygons.length; p++) {
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();

23
website/source/javascripts/app/Engine.Shape.js
View File

@ -56,14 +56,33 @@ Engine.Shape.prototype = {
},
draw: function(ctx, scale, engine){
var p;
var p, poly;
ctx.translate(
this.pos.x * scale >> 0,
this.pos.y * scale >> 0
);
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.translate(

24
website/source/javascripts/app/Engine.js
View File

@ -1,5 +1,3 @@
/* jshint unused:false */
/* global console */
(function(
Base,
Vector,
@ -63,6 +61,10 @@ Engine = Base.extend({
this.resize();
window.addEventListener('resize', this.resize, false);
this._handleScroll = this._handleScroll.bind(this);
this._handleScroll();
window.addEventListener('scroll', this._handleScroll, false);
this.setupStarfield();
this.setupTessellation();
@ -151,7 +153,7 @@ Engine = Base.extend({
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(){
@ -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(){
var scale = this.scale, tickStart;
var scale = this.scale;
if (window.scrollY > 700) {
if (this.scrollY > 700) {
window.requestAnimationFrame(this.render);
return;
}
tickStart = window.performance.now();
this.context.clearRect(
-(this.width / 2) * scale,
-(this.height / 2) * scale,
@ -205,8 +205,6 @@ Engine = Base.extend({
this.last = this.now;
this.ticks.push(window.performance.now() - tickStart);
window.requestAnimationFrame(this.render);
},
@ -238,7 +236,7 @@ Engine = Base.extend({
},
generateRandomShape: function(){
var p, index, rando, halfWidth, halfHeight, iter,
var halfWidth, halfHeight, iter,
shape, shapeTemplate, columns, rows, modWidth, row, column,
xOffset, yOffset;
@ -359,6 +357,10 @@ Engine = Base.extend({
_handleMouseCoords: function(event){
this.mouse.x = event.pageX;
this.mouse.y = event.pageY;
},
_handleScroll: function(){
this.scrollY = window.scrollY;
}
});

5
website/source/stylesheets/_jumbotron.less
View File

@ -16,11 +16,6 @@
padding-bottom: 0;
color: @jumbotron-color;
.container {
position:relative;
height:700px;
}
.terraform-canvas {
position:absolute;
top:0;

4
website/source/stylesheets/main.css
View File

@ -592,10 +592,6 @@ body.page-home #footer {
padding-bottom: 0;
color: #ffffff;
}
#jumbotron .container {
position: relative;
height: 700px;
}
#jumbotron .terraform-canvas {
position: absolute;
top: 0;