terraform/website/source/javascripts/app/Engine.js

379 lines
7.1 KiB
JavaScript
Raw Normal View History

(function(
Base,
Vector,
Logo,
Grid,
Chainable
){
2014-07-24 05:35:57 +02:00
var sqrt, pow, Engine;
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
}
sqrt = Math.sqrt;
pow = Math.pow;
Engine = Base.extend({
scale: window.devicePixelRatio || 1,
// scale:1,
2014-07-26 08:09:04 +02:00
shapes : [],
particles : [],
particlesA : [],
particlesB : [],
2014-07-24 05:35:57 +02:00
2014-07-24 09:46:14 +02:00
_deferredParticles: [],
2014-07-26 08:09:04 +02:00
ticks: [],
2014-07-24 05:35:57 +02:00
starGeneratorRate: 600,
mouse: {
x: -9999,
y: -9999
},
constructor: function(canvas, background, tagLine){
this.canvas = canvas;
this.background = background;
this.tagLine = tagLine;
2014-07-24 05:35:57 +02:00
if (!this.canvas.getContext) {
return null;
2014-07-24 05:35:57 +02:00
}
this.context = this.canvas.getContext('2d');
this.setupEvents();
this.setupStarfield();
this.setupTessellation();
2014-07-26 10:55:57 +02:00
this.setupMisc();
2014-07-26 10:55:57 +02:00
this.startEngine();
},
2014-07-26 10:55:57 +02:00
startEngine: function(){
var parent = this.canvas.parentNode;
2014-07-26 10:05:31 +02:00
this.background.className += ' show';
this.canvas.style.opacity = 1;
2014-07-24 05:52:27 +02:00
new Chainable()
.wait(1000)
.then(function(){
2014-07-25 12:18:49 +02:00
this.starGeneratorRate = 200;
}, this)
.wait(500)
.then(function(){
parent.className += ' state-one';
})
.wait(150)
.then(function(){
parent.className += ' state-two';
})
.wait(150)
.then(function(){
parent.className += ' state-three';
})
.wait(500)
.then(function(){
parent.className += ' state-four';
})
.wait(100)
.then(function(){
this.showShapes = true;
}, this)
.wait(1000)
.then(function(){
this.logo.startBreathing();
2014-07-26 10:55:57 +02:00
this.showGrid = true;
}, this)
.wait(1000)
.then(function(){
this.typewriter.start();
}, this);
this.render();
2014-07-24 05:35:57 +02:00
},
2014-07-26 10:55:57 +02:00
setupMisc: function(){
this.last = Date.now() / 1000;
this.render = this.render.bind(this);
this.typewriter = new Engine.Typewriter(this.tagLine);
},
setupEvents: function(){
this.resize = this.resize.bind(this);
this.resize();
window.addEventListener('resize', this.resize, false);
this._handleScroll = this._handleScroll.bind(this);
this._handleScroll();
window.addEventListener('scroll', this._handleScroll, false);
this._handleMouseCoords = this._handleMouseCoords.bind(this);
window.addEventListener('mousemove', this._handleMouseCoords, false);
},
2014-07-24 05:35:57 +02:00
setupStarfield: function(){
this.particles = [];
// this.generateParticles(50, true);
this.generateParticles(400);
2014-07-24 05:35:57 +02:00
},
setupTessellation: function(canvas){
var size, offset;
2014-07-24 09:37:27 +02:00
this.shapes = [];
2014-07-28 03:19:06 +02:00
if (window.innerWidth < 570) {
size = 300;
offset = 0;
2014-07-28 03:19:06 +02:00
} else {
size = 360;
offset = 40;
2014-07-28 03:19:06 +02:00
}
2014-07-24 09:37:27 +02:00
this.logo = new Engine.Shape(
2014-07-28 03:19:06 +02:00
-(size / 2),
-(size / 2 + offset),
2014-07-28 03:19:06 +02:00
size,
size,
2014-07-28 01:31:43 +02:00
Logo.points,
Logo.polygons
2014-07-24 09:37:27 +02:00
);
this.grid = new Engine.Shape.Puller(this.width, this.height, Grid);
2014-07-24 05:35:57 +02:00
},
2014-07-26 08:09:04 +02:00
getAverageTickTime: function(){
var sum = 0, s;
for (s = 0; s < this.ticks.length; s++) {
sum += this.ticks[s];
}
window.console.log('Average Tick Time:', sum / this.ticks.length);
2014-07-26 08:09:04 +02:00
},
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;
}
}
window.console.log('Max tick was:', max, 'at index:', index);
2014-07-26 08:09:04 +02:00
},
2014-07-24 05:35:57 +02:00
render: function(){
var scale = this.scale, p, particle, index;
2014-07-24 05:35:57 +02:00
if (this.paused) {
return;
}
if (this.scrollY > this.height) {
2014-07-24 07:28:16 +02:00
window.requestAnimationFrame(this.render);
return;
}
2014-07-24 05:35:57 +02:00
this.context.clearRect(
-(this.width / 2) * scale,
-(this.height / 2) * scale,
2014-07-26 08:09:04 +02:00
this.width * scale,
this.height * scale
);
2014-07-24 07:28:16 +02:00
this.now = Date.now() / 1000;
this.tick = Math.min(this.now - this.last, 0.017);
2014-07-24 05:35:57 +02:00
// Update all particles... may need to be optimized
for (p = 0; p < this.particles.length; p++) {
this.particles[p].update(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
for (p = 0; p < this._deferredParticles.length; p++) {
index = this.particles.indexOf(this._deferredParticles.pop());
if (index >= 0) {
this.particles.splice(index, 1);
}
}
2014-07-24 05:35:57 +02:00
if (this.showGrid) {
this.grid
.update(this)
.draw(this.context, scale, this);
}
if (this.showShapes) {
2014-07-26 08:09:04 +02:00
this.logo
.update(this)
.draw(this.context, scale, this);
2014-07-24 05:35:57 +02:00
}
2014-07-26 10:55:57 +02:00
this.typewriter.update(this);
2014-07-24 05:35:57 +02:00
this.last = this.now;
this.generateParticles(this.starGeneratorRate * this.tick >> 0);
2014-07-24 05:35:57 +02:00
window.requestAnimationFrame(this.render);
},
generateParticles: function(num, fixed){
var p;
2014-07-24 09:46:14 +02:00
for (p = 0; p < num; p++) {
if (fixed) {
this.particles.push(new Engine.Particle.Fixed(this.width, this.height));
} else {
this.particles.push(new Engine.Particle(this.width, this.height));
2014-07-24 09:46:14 +02:00
}
}
2014-07-24 05:35:57 +02:00
},
resize: function(){
var scale = this.scale,
size, offset;
if (window.innerWidth < 570) {
this.height = 560;
} else {
this.height = 700;
}
2014-07-24 05:35:57 +02:00
this.width = window.innerWidth;
this.canvas.width = this.width * scale;
this.canvas.height = this.height * scale;
this.context.translate(
this.width / 2 * scale >> 0,
this.height / 2 * scale >> 0
);
2014-07-28 02:19:01 +02:00
this.context.lineJoin = 'bevel';
if (this.grid) {
this.grid.resize(this.width, this.height);
}
if (this.logo) {
if (this.height === 560) {
size = 300;
offset = 0;
} else {
size = 360;
offset = 40;
}
this.logo.resize(size, offset);
}
2014-07-24 05:35:57 +02:00
},
_handleMouseCoords: function(event){
this.mouse.x = event.pageX;
this.mouse.y = event.pageY;
},
_handleScroll: function(){
this.scrollY = window.scrollY;
},
pause: function(){
this.paused = true;
},
resume: function(){
if (!this.paused) {
return;
}
this.paused = false;
this.render();
},
getSnapshot: function(){
window.open(this.canvas.toDataURL('image/png'));
2014-07-24 05:35:57 +02:00
}
});
Engine.map = function(val, istart, istop, ostart, ostop) {
return ostart + (ostop - ostart) * ((val - istart) / (istop - istart));
};
Engine.getRandomFloat = function(min, max) {
return Math.random() * (max - min) + min;
};
Engine.getRandomInt = function(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
};
2014-07-24 09:37:27 +02:00
Engine.clone = function(ref) {
var clone = {}, key;
for (key in ref) {
clone[key] = ref[key];
}
return clone;
};
2014-07-24 05:35:57 +02:00
window.Engine = Engine;
})(
window.Base,
window.Vector,
window.Logo,
window.Grid,
window.Chainable
);