Logo is now centered, optimized context.translate

This commit is contained in:
Amadeus Demarzi 2014-07-24 22:50:14 -07:00
parent 4c2e31b827
commit 35945d6c2d

View File

@ -88,8 +88,8 @@ Engine = Base.extend({
setupTessellation: function(canvas){ setupTessellation: function(canvas){
this.shapes = []; this.shapes = [];
this.logo = new Engine.Shape( this.logo = new Engine.Shape(
(this.width / 2 - 180), -(180),
(this.height / 2 - 180), -(180),
360, 360,
360, 360,
Logo.Points, Logo.Points,
@ -98,23 +98,20 @@ Engine = Base.extend({
}, },
render: function(){ render: function(){
var tick; var scale = this.scale,
tick;
if (window.scrollY > 700) { if (window.scrollY > 700) {
window.requestAnimationFrame(this.render); window.requestAnimationFrame(this.render);
return; return;
} }
// this.context.clearRect( this.context.clearRect(
// 0, -(this.width / 2) * scale,
// 0, -(this.height / 2) * scale,
// this.width * this.scale, this.width * scale,
// this.height * this.scale this.height * scale
// ); );
// Potentially more performant than clearRect
this.canvas.width = this.width * this.scale;
this.canvas.height = 700 * this.scale;
this.now = Date.now() / 1000; this.now = Date.now() / 1000;
@ -166,28 +163,29 @@ Engine = Base.extend({
}, },
resize: function(){ resize: function(){
var scale = this.scale;
this.width = window.innerWidth; this.width = window.innerWidth;
this.height = 700; this.height = 700;
this.canvas.width = this.width * this.scale; this.canvas.width = this.width * scale;
this.canvas.height = this.height * this.scale; this.canvas.height = this.height * scale;
this.context.translate(
this.width / 2 * scale >> 0,
this.height / 2 * scale >> 0
);
}, },
renderStarfield: function(){ renderStarfield: function(){
var scale = this.scale, p, index; var scale = this.scale, p, index;
// Update all particles... may need to be optimized // Update all particles... may need to be optimized
this.context.save();
this.context.translate(
this.width / 2 * scale >> 0,
this.height / 2 * scale >> 0
);
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); .draw(this.context, scale);
} }
this.context.restore();
// Remove destroyed particles // Remove destroyed particles
for (p = 0; p < this._deferredParticles.length; p++) { for (p = 0; p < this._deferredParticles.length; p++) {