From 31cfad5c44ce58d2a6dcb7cf167cd7f6de7f817a Mon Sep 17 00:00:00 2001 From: Amadeus Demarzi Date: Sat, 26 Jul 2014 00:11:43 -0700 Subject: [PATCH] Various performance optimizations * Reducing hot function calls * Optimized surrounding HTML and CSS * Removed a forced redraw test in render --- website/source/index.html.erb | 14 +++--- .../javascripts/app/Engine.Polygon.Puller.js | 22 ---------- .../source/javascripts/app/Engine.Polygon.js | 26 ----------- .../javascripts/app/Engine.Shape.Puller.js | 44 +++++++++++++++---- .../source/javascripts/app/Engine.Shape.js | 23 +++++++++- website/source/javascripts/app/Engine.js | 24 +++++----- website/source/stylesheets/_jumbotron.less | 5 --- website/source/stylesheets/main.css | 4 -- 8 files changed, 76 insertions(+), 86 deletions(-) diff --git a/website/source/index.html.erb b/website/source/index.html.erb index ac56e8a2f..a9e7903e9 100644 --- a/website/source/index.html.erb +++ b/website/source/index.html.erb @@ -2,14 +2,12 @@
-
-
- +
+
diff --git a/website/source/javascripts/app/Engine.Polygon.Puller.js b/website/source/javascripts/app/Engine.Polygon.Puller.js index a6957b029..3ad4227b7 100644 --- a/website/source/javascripts/app/Engine.Polygon.Puller.js +++ b/website/source/javascripts/app/Engine.Polygon.Puller.js @@ -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 - ); } }; diff --git a/website/source/javascripts/app/Engine.Polygon.js b/website/source/javascripts/app/Engine.Polygon.js index 0b470dec2..31618a622 100644 --- a/website/source/javascripts/app/Engine.Polygon.js +++ b/website/source/javascripts/app/Engine.Polygon.js @@ -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(); - } } }; diff --git a/website/source/javascripts/app/Engine.Shape.Puller.js b/website/source/javascripts/app/Engine.Shape.Puller.js index 361a9ae72..0e1c57189 100644 --- a/website/source/javascripts/app/Engine.Shape.Puller.js +++ b/website/source/javascripts/app/Engine.Shape.Puller.js @@ -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(); diff --git a/website/source/javascripts/app/Engine.Shape.js b/website/source/javascripts/app/Engine.Shape.js index a814931d7..a0383f89e 100644 --- a/website/source/javascripts/app/Engine.Shape.js +++ b/website/source/javascripts/app/Engine.Shape.js @@ -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( diff --git a/website/source/javascripts/app/Engine.js b/website/source/javascripts/app/Engine.js index eebac2eed..17169e28a 100644 --- a/website/source/javascripts/app/Engine.js +++ b/website/source/javascripts/app/Engine.js @@ -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; } }); diff --git a/website/source/stylesheets/_jumbotron.less b/website/source/stylesheets/_jumbotron.less index afd13266a..113b30adb 100755 --- a/website/source/stylesheets/_jumbotron.less +++ b/website/source/stylesheets/_jumbotron.less @@ -16,11 +16,6 @@ padding-bottom: 0; color: @jumbotron-color; - .container { - position:relative; - height:700px; - } - .terraform-canvas { position:absolute; top:0; diff --git a/website/source/stylesheets/main.css b/website/source/stylesheets/main.css index 7a8da3900..f833fc3f3 100644 --- a/website/source/stylesheets/main.css +++ b/website/source/stylesheets/main.css @@ -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;