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

Got the base scene functioning

This commit is contained in:
Amadeus Demarzi 2014-07-23 20:35:57 -07:00
parent 3adfc52092
commit c85b68f978
13 changed files with 1702 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,20 +1,16 @@
<!-- Main jumbotron for a primary marketing message or call to action -->
<div id="jumbotron-mask">
<div id="jumbotron">
<div class="container">
<div class="col-lg-6 col-md-6">
<h2 class="rls-l">
Service discovery and configuration made easy.
Distributed, highly available, and
datacenter-aware.
</h2>
<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="jumbo-logo-wrap col-lg-offset-1 col-lg-5 col-md-6 hidden-xs hidden-sm">
<div class="jumbo-logo"></div>
</div>
<!-- <p><a class="btn btn-primary btn-lg">Learn more &raquo;</a></p> -->
</div>
<div class="jumbotron-dots"></div>
</div>
</div>
</div>

627
website/source/javascripts/app/Circle.js Normal file
View File

@ -0,0 +1,627 @@
// jshint unused:false
var Circle = {
"Points": [
{
"id": "point-0",
"x": 329.40000000000003,
"y": 282.96000000000004
},
{
"id": "point-1",
"x": 355.26,
"y": 224.82
},
{
"id": "point-2",
"x": 282.66,
"y": 330.3
},
{
"id": "point-5",
"x": 279.12,
"y": 224.10000000000002
},
{
"id": "point-8",
"x": 217.26000000000002,
"y": 246.06
},
{
"id": "point-11",
"x": 190.01999999999998,
"y": 293.52
},
{
"id": "point-14",
"x": 209.21999999999997,
"y": 360.9
},
{
"id": "point-17",
"x": 127.08000000000001,
"y": 257.88
},
{
"id": "point-20",
"x": 124.55999999999999,
"y": 354.12
},
{
"id": "point-26",
"x": 48.6,
"y": 303.06
},
{
"id": "point-28",
"x": 353.1,
"y": 128.46
},
{
"id": "point-32",
"x": 237.48000000000002,
"y": 188.51999999999998
},
{
"id": "point-38",
"x": 172.68,
"y": 183
},
{
"id": "point-41",
"x": 130.68,
"y": 189
},
{
"id": "point-47",
"x": 61.2,
"y": 198.96000000000004
},
{
"id": "point-53",
"x": 8.34,
"y": 240.48000000000002
},
{
"id": "point-55",
"x": 236.88000000000002,
"y": 107.28000000000002
},
{
"id": "point-59",
"x": 165.23999999999998,
"y": 97.8
},
{
"id": "point-65",
"x": 79.91999999999999,
"y": 121.14000000000001
},
{
"id": "point-74",
"x": 0,
"y": 160.44
},
{
"id": "point-78",
"x": 305.7,
"y": 50.88
},
{
"id": "point-79",
"x": 251.82,
"y": 14.879999999999999
},
{
"id": "point-83",
"x": 197.88,
"y": -0.12000000000000001
},
{
"id": "point-89",
"x": 132.6,
"y": 6.06
},
{
"id": "point-95",
"x": 44.64000000000001,
"y": 60.96
},
{
"id": "point-98",
"x": 18.060000000000002,
"y": 99.60000000000001
}
],
"Polygons": [
{
"id": "poly-0",
"color": {
"h": 260.28985507246375,
"s": 92.82511210762333,
"l": 56.27450980392157,
"a": 1
},
"points": [
"point-0",
"point-1",
"point-2"
]
},
{
"id": "poly-1",
"color": {
"h": 263.27102803738313,
"s": 100,
"l": 58.03921568627452,
"a": 1
},
"points": [
"point-2",
"point-1",
"point-5"
]
},
{
"id": "poly-2",
"color": {
"h": 263.4905660377359,
"s": 86.88524590163934,
"l": 52.156862745098046,
"a": 1
},
"points": [
"point-2",
"point-5",
"point-8"
]
},
{
"id": "poly-3",
"color": {
"h": 263.3653846153846,
"s": 88.88888888888889,
"l": 54.11764705882353,
"a": 1
},
"points": [
"point-2",
"point-8",
"point-11"
]
},
{
"id": "poly-4",
"color": {
"h": 264.82758620689657,
"s": 79.6078431372549,
"l": 50,
"a": 1
},
"points": [
"point-2",
"point-11",
"point-14"
]
},
{
"id": "poly-5",
"color": {
"h": 267.192118226601,
"s": 100,
"l": 39.80392156862745,
"a": 1
},
"points": [
"point-11",
"point-8",
"point-17"
]
},
{
"id": "poly-6",
"color": {
"h": 266.8421052631579,
"s": 100,
"l": 37.254901960784316,
"a": 1
},
"points": [
"point-11",
"point-17",
"point-20"
]
},
{
"id": "poly-7",
"color": {
"h": 267.029702970297,
"s": 93.5185185185185,
"l": 42.35294117647059,
"a": 1
},
"points": [
"point-11",
"point-20",
"point-14"
]
},
{
"id": "poly-8",
"color": {
"h": 262.54777070063693,
"s": 100,
"l": 30.784313725490197,
"a": 1
},
"points": [
"point-20",
"point-17",
"point-26"
]
},
{
"id": "poly-9",
"color": {
"h": 266.1764705882353,
"s": 87.17948717948718,
"l": 45.88235294117647,
"a": 1
},
"points": [
"point-1",
"point-28",
"point-5"
]
},
{
"id": "poly-10",
"color": {
"h": 267.192118226601,
"s": 100,
"l": 39.80392156862745,
"a": 1
},
"points": [
"point-5",
"point-28",
"point-32"
]
},
{
"id": "poly-11",
"color": {
"h": 267.029702970297,
"s": 93.5185185185185,
"l": 42.35294117647059,
"a": 1
},
"points": [
"point-5",
"point-32",
"point-8"
]
},
{
"id": "poly-12",
"color": {
"h": 264.40677966101697,
"s": 100,
"l": 34.705882352941174,
"a": 1
},
"points": [
"point-8",
"point-32",
"point-38"
]
},
{
"id": "poly-13",
"color": {
"h": 260.8,
"s": 100,
"l": 29.411764705882355,
"a": 1
},
"points": [
"point-8",
"point-38",
"point-41"
]
},
{
"id": "poly-14",
"color": {
"h": 262.54777070063693,
"s": 100,
"l": 30.784313725490197,
"a": 1
},
"points": [
"point-8",
"point-41",
"point-17"
]
},
{
"id": "poly-15",
"color": {
"h": 256.07142857142856,
"s": 88.88888888888889,
"l": 24.705882352941178,
"a": 1
},
"points": [
"point-17",
"point-41",
"point-47"
]
},
{
"id": "poly-16",
"color": {
"h": 252.94117647058826,
"s": 87.93103448275862,
"l": 22.745098039215687,
"a": 1
},
"points": [
"point-17",
"point-47",
"point-26"
]
},
{
"id": "poly-17",
"color": {
"h": 244.56521739130434,
"s": 100,
"l": 18.03921568627451,
"a": 1
},
"points": [
"point-26",
"point-47",
"point-53"
]
},
{
"id": "poly-18",
"color": {
"h": 249.89010989010993,
"s": 77.77777777777779,
"l": 22.941176470588236,
"a": 1
},
"points": [
"point-28",
"point-55",
"point-32"
]
},
{
"id": "poly-19",
"color": {
"h": 247.59493670886073,
"s": 76.69902912621359,
"l": 20.19607843137255,
"a": 1
},
"points": [
"point-32",
"point-55",
"point-59"
]
},
{
"id": "poly-20",
"color": {
"h": 250.2,
"s": 78.12500000000001,
"l": 25.098039215686274,
"a": 1
},
"points": [
"point-32",
"point-59",
"point-38"
]
},
{
"id": "poly-21",
"color": {
"h": 250.12048192771087,
"s": 79.04761904761905,
"l": 20.58823529411765,
"a": 1
},
"points": [
"point-38",
"point-59",
"point-65"
]
},
{
"id": "poly-22",
"color": {
"h": 250.00000000000003,
"s": 77.99999999999999,
"l": 19.607843137254903,
"a": 1
},
"points": [
"point-38",
"point-65",
"point-41"
]
},
{
"id": "poly-23",
"color": {
"h": 249.79591836734693,
"s": 77.77777777777777,
"l": 24.705882352941178,
"a": 1
},
"points": [
"point-41",
"point-65",
"point-47"
]
},
{
"id": "poly-24",
"color": {
"h": 250.54054054054055,
"s": 78.72340425531914,
"l": 18.43137254901961,
"a": 1
},
"points": [
"point-47",
"point-65",
"point-74"
]
},
{
"id": "poly-25",
"color": {
"h": 250.74626865671638,
"s": 78.82352941176471,
"l": 16.666666666666664,
"a": 1
},
"points": [
"point-47",
"point-74",
"point-53"
]
},
{
"id": "poly-26",
"color": {
"h": 247.01298701298703,
"s": 90.58823529411765,
"l": 16.666666666666664,
"a": 1
},
"points": [
"point-78",
"point-79",
"point-55"
]
},
{
"id": "poly-27",
"color": {
"h": 250.1538461538462,
"s": 91.54929577464787,
"l": 13.92156862745098,
"a": 1
},
"points": [
"point-55",
"point-79",
"point-83"
]
},
{
"id": "poly-28",
"color": {
"h": 240,
"s": 77.77777777777777,
"l": 12.352941176470589,
"a": 1
},
"points": [
"point-55",
"point-83",
"point-59"
]
},
{
"id": "poly-29",
"color": {
"h": 247.24137931034483,
"s": 90.62500000000001,
"l": 12.549019607843137,
"a": 1
},
"points": [
"point-59",
"point-83",
"point-89"
]
},
{
"id": "poly-30",
"color": {
"h": 242.53521126760566,
"s": 87.65432098765433,
"l": 15.88235294117647,
"a": 1
},
"points": [
"point-59",
"point-89",
"point-65"
]
},
{
"id": "poly-31",
"color": {
"h": 247.63636363636363,
"s": 90.16393442622952,
"l": 11.960784313725489,
"a": 1
},
"points": [
"point-65",
"point-89",
"point-95"
]
},
{
"id": "poly-32",
"color": {
"h": 246.25,
"s": 88.88888888888887,
"l": 10.588235294117649,
"a": 1
},
"points": [
"point-65",
"point-95",
"point-98"
]
},
{
"id": "poly-33",
"color": {
"h": 240,
"s": 87.50000000000001,
"l": 9.411764705882353,
"a": 1
},
"points": [
"point-98",
"point-74",
"point-65"
]
},
{
"id": "poly-34",
"color": {
"h": 250.2,
"s": 78.12500000000001,
"l": 25.098039215686274,
"a": 1
},
"points": [
"point-28",
"point-78",
"point-55"
]
}
]
};

77
website/source/javascripts/app/Engine.Particle.Fixed.js Normal file
View File

@ -0,0 +1,77 @@
(function(
Particle,
Engine,
Vector
){
Particle.Fixed = function(width, height){
var targetX, targetY;
this.radius = Engine.getRandomFloat(0.1, 1);
// this.fillA = 'rgba(136,67,237,' + Engine.getRandomFloat(0.4, 0.5) + ')';
// this.fillB = 'rgba(136,67,237,' + Engine.getRandomFloat(0.51, 0.6) + ')';
this.fillA = '#3a1066';
this.fillB = '#561799';
this.frameMax = Engine.getRandomInt(4, 10);
this.max = {
x: width + this.maxRadius,
y: height + this.maxRadius
};
this.min = {
x: 0 - this.maxRadius,
y: 0 - this.maxRadius
};
targetX = Engine.getRandomInt(0 + this.radius, width + this.radius);
targetY = Engine.getRandomInt(0 + this.radius, height + this.radius);
this.pos = new Vector(targetX, targetY);
};
Engine.Particle.Fixed.prototype = {
radius: 1,
pos: {
x: 0,
y: 0
},
frame: 0,
showA: false,
update: function(engine){
this.frame++;
if (this.frame > this.frameMax) {
this.frame = 0;
this.showA = !this.showA;
}
return this;
},
draw: function(ctx, scale){
// Draw a circle - far less performant
ctx.beginPath();
ctx.arc(
this.pos.x * scale,
this.pos.y * scale,
this.radius * scale,
0,
Math.PI * 2,
false
);
if (this.showA) {
ctx.fillStyle = this.fillA;
} else {
ctx.fillStyle = this.fillB;
}
ctx.fill();
return this;
}
};
})(window.Engine.Particle, window.Engine, window.Vector);

176
website/source/javascripts/app/Engine.Particle.js Normal file
View File

@ -0,0 +1,176 @@
(function(
Engine,
Vector
){
Engine.Particle = function(width, height){
var side, targetX, targetY;
this.accel = Vector.coerce(this.accel);
this.vel = Vector.coerce(this.vel);
this.pos = new Vector(
width / 2,
height / 2
);
this.maxRadius = Engine.getRandomFloat(0.1, 2.5);
this.maxSpeed = Engine.getRandomFloat(0.01, 1000);
this.max = {
x: width + this.maxRadius,
y: height + this.maxRadius
};
this.min = {
x: 0 - this.maxRadius,
y: 0 - this.maxRadius
};
// Pick a random target
side = Engine.getRandomInt(0, 3);
if (side === 0 || side === 2) {
targetY = (side === 0) ? (0 - this.maxRadius) : (height + this.maxRadius);
targetX = Engine.getRandomInt(0 - this.maxRadius, width + this.maxRadius);
} else {
targetY = Engine.getRandomInt(0 - this.maxRadius, height + this.maxRadius);
targetX = (side === 3) ? (0 - this.maxRadius) : (width + this.maxRadius);
}
this.target = new Vector(targetX, targetY);
this.maxDistance = this.distanceTo(this.target);
// this.fillA = 'rgba(136,67,237,' + Engine.getRandomFloat(0.7, 0.8) + ')';
// this.fillB = 'rgba(136,67,237,1)';
// this.fillA = '#651bb3';
// this.fillB = '#9027ff';
this.fillA = '#8750c2';
this.fillB = '#b976ff';
// b976ff
this.frameMax = Engine.getRandomInt(1, 5);
};
Engine.Particle.prototype = {
radius: 1,
frame: 0,
showA: false,
accel: {
x: 0,
y: 0
},
vel: {
x: 0,
y: 0
},
pos: {
x: 0,
y: 0
},
opacity: 1,
maxSpeed: 1500,
maxForce: 1500,
update: function(engine){
var distancePercent;
this.accel.mult(0);
this.seek();
this.vel
.add(this.accel)
.limit(this.maxSpeed);
this.pos.add(Vector.mult(this.vel, engine.tick));
if (
this.pos.x < this.min.x ||
this.pos.x > this.max.x ||
this.pos.y < this.min.y ||
this.pos.y > this.max.y
) {
this.kill(engine);
}
distancePercent = (this.maxDistance - this.distanceTo(this.target)) / this.maxDistance;
this.radius = Math.max(0.1, this.maxRadius * distancePercent);
this.frame++;
if (this.frame > this.frameMax) {
this.frame = 0;
this.showA = !this.showA;
}
return this;
},
seek: function(){
var desired, steer;
desired = Vector.sub(this.target, this.pos)
.normalize()
.mult(this.maxSpeed);
steer = Vector
.sub(desired, this.vel)
.limit(this.maxForce);
this.applyForce(steer);
},
draw: function(ctx, scale){
if (this.radius < 0.25) {
return;
}
if (this.showA) {
ctx.fillStyle = this.fillA;
} else {
ctx.fillStyle = this.fillB;
}
// Draw a square - very performant
ctx.fillRect(
this.pos.x * scale,
this.pos.y * scale,
this.radius * scale,
this.radius * scale
);
// Draw a circle - far less performant
// ctx.beginPath();
// ctx.arc(
// this.pos.x * scale,
// this.pos.y * scale,
// this.radius * scale,
// 0,
// Math.PI * 2,
// false
// );
// ctx.fill();
return this;
},
applyForce: function(force){
this.accel.add(force);
return this;
},
kill: function(engine){
engine._deferred.push(this);
return this;
},
distanceTo: function(target) {
var xd = this.pos.x - target.x;
var yd = this.pos.y - target.y;
return Math.sqrt(xd * xd + yd * yd );
}
};
})(window.Engine, window.Vector);

88
website/source/javascripts/app/Engine.Point.js Normal file
View File

@ -0,0 +1,88 @@
(function(
Engine,
Vector
){
Engine.Point = function(id, x, y, width, height){
this.id = id;
this.pos = new Vector(x, y);
this.target = this.pos.clone();
this.pos.x = width / 2;
this.pos.y = height / 2;
this.accel = Vector.coerce(this.accel);
this.vel = Vector.coerce(this.vel);
this.pos.add({
x: (Engine.getRandomFloat(0, 6) - 3),
y: (Engine.getRandomFloat(0, 6) - 3)
});
// Physics randomness
// this.stiffness = Engine.getRandomFloat(2, 5);
// this.stiffness = Engine.getRandomFloat(0.4, 0.8);
this.stiffness = Engine.getRandomFloat(3, 6);
this.friction = Engine.getRandomFloat(0.15, 0.3);
};
Engine.Point.prototype = {
radius: 1,
stiffness : 0.5,
// friction : 0.00001,
friction : 0.01,
threshold : 0.03,
pos: {
x: 0,
y: 0
},
accel: {
x: 0,
y: 0
},
vel : {
x: 0,
y: 0
},
target: {
x: 0,
y: 0
},
update: function(engine){
var newAccel;
newAccel = Vector.sub(this.target, this.pos)
.mult(this.stiffness)
.sub(Vector.mult(this.vel, this.friction));
this.accel.set(newAccel);
this.vel.add(this.accel);
this.pos.add(
Vector.mult(this.vel, engine.tick)
);
},
draw: function(ctx, scale){
ctx.beginPath();
ctx.arc(
this.pos.x * scale,
this.pos.y * scale,
this.radius * scale,
0,
Math.PI * 2,
false
);
ctx.fillStyle = '#ffffff';
ctx.fill();
}
};
})(window.Engine, window.Vector);

85
website/source/javascripts/app/Engine.Polygon.js Normal file
View File

@ -0,0 +1,85 @@
(function(
Engine,
Vector
){
Engine.Polygon = function(a, b, c, color){
this.a = a;
this.b = b;
this.c = c;
this.color = color;
this.maxS = this.color.s;
this.maxL = this.color.l;
// this.color.s = 0;
this.color.l = 0;
this.start = Date.now() / 1000;
this.fillStyle = this.hslaTemplate.substitute(this.color);
// this.up = !!Engine.getRandomInt(0,1);
// this.hueShiftSpeed = 15;
// this.toColor = {
// a: 1
// };
};
Engine.Polygon.prototype = {
rgbaTemplate: 'rgba({r},{g},{b},{a})',
hslaTemplate: 'hsla({h},{s}%,{l}%,{a})',
hueShiftSpeed: 20,
duration: 3,
delay: 2.5,
// Determine color fill?
update: function(engine){
var delta;
delta = engine.now - this.start;
if (
delta > this.delay &&
delta < this.delay + this.duration + 1 &&
this.color.l < this.maxL
) {
// this.color.s = this.maxS * delta / this.duration;
this.color.l = this.maxL * (delta - this.delay) / this.duration;
if (this.color.l > this.maxL) {
// this.color.s = this.maxS;
this.color.l = this.maxL;
}
this.fillStyle = this.hslaTemplate.substitute(this.color);
}
},
draw: function(ctx, scale){
ctx.beginPath();
ctx.moveTo(
this.a.pos.x * scale,
this.a.pos.y * scale
);
ctx.lineTo(
this.b.pos.x * scale,
this.b.pos.y * scale
);
ctx.lineTo(
this.c.pos.x * scale,
this.c.pos.y * scale
);
ctx.closePath();
ctx.fillStyle = this.fillStyle;
ctx.lineWidth = 0.25 * scale;
ctx.strokeStyle = this.fillStyle;
ctx.fill();
ctx.stroke();
}
};
})(window.Engine, window.Vector);

227
website/source/javascripts/app/Engine.js Normal file
View File

@ -0,0 +1,227 @@
/* jshint unused: false */
/* global console */
(function(Base, Vector, Circle){
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,
particles : [],
_deferred : [],
points : [],
polygons : [],
speed: 1,
accel: 0.08,
constructor: function(canvas, bg){
var image, el;
if (typeof canvas === 'string') {
this.canvas = document.getElementById(canvas);
} else {
this.canvas = canvas;
}
if (!this.canvas.getContext) {
return;
}
this.context = this.canvas.getContext('2d');
this.resize = this.resize.bind(this);
this.resize();
window.addEventListener('resize', this.resize, false);
this.setupStarfield(bg);
this.setupTessellation();
this.last = Date.now() / 1000;
this.start = this.last;
this.render = this.render.bind(this);
this.render();
this.canvas.style.opacity = 1;
/*
image = document.getElementById(bg);
image.style.webkitTransform = 'translate3d(0,0,0) scale(1)';
image.style.opacity = 1;
*/
el = document.body;
setTimeout(function() {
el.className += ' state-one';
setTimeout(function() {
el.className += ' state-two';
setTimeout(function() {
el.className += ' state-three';
setTimeout(function() {
el.className += ' state-four';
}, 550);
}, 200);
}, 200);
}, 4000);
},
setupStarfield: function(){
this.particles = [];
this.generateParticles(50, true);
this.generateParticles(200);
},
setupTessellation: function(canvas){
var row, col, rows, cols, rowMod, colMod, i, p, ref, point, poly;
ref = {};
for (i = 0; i < Circle.Points.length; i++) {
point = new Engine.Point(
Circle.Points[i].id,
Circle.Points[i].x + (this.width / 2 - 180),
Circle.Points[i].y + (this.height / 2 - 180),
this.width,
this.height
);
ref[point.id] = point;
this.points.push(point);
}
for (i = 0; i < Circle.Polygons.length; i++) {
poly = Circle.Polygons[i];
this.polygons.push(new Engine.Polygon(
ref[poly.points[0]],
ref[poly.points[1]],
ref[poly.points[2]],
poly.color
));
}
},
render: function(){
var tick;
this.context.clearRect(
0,
0,
this.width * this.scale,
this.height * this.scale
);
this.now = Date.now() / 1000;
// if (this.slow) {
// this.speed = Math.max(0.1, this.speed - this.accel);
// } else {
// this.speed = Math.min(1, this.speed + this.accel);
// }
tick = Math.min(this.now - this.last, 0.017);
this.tick = this.speed * tick;
this.renderStarfield(this.now);
this.tick = tick;
if (this.now - this.start > 3) {
// this.slow = true;
this.renderTessellation(this.now);
}
this.last = this.now;
window.requestAnimationFrame(this.render);
},
renderTessellation: function(){
var scale = this.scale,
p;
for (p = 0; p < this.points.length; p++) {
this.points[p].update(this);
// this.points[p].draw(this.context, scale);
}
for (p = 0; p < this.polygons.length; p++) {
this.polygons[p].update(this);
this.polygons[p].draw(this.context, scale);
}
},
generateParticles: function(num, fixed){
var p;
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));
}
}
},
resize: function(){
this.width = window.innerWidth;
this.height = 700;
this.canvas.width = this.width * this.scale;
this.canvas.height = this.height * this.scale;
window.scrollTo(0, 0);
},
renderStarfield: function(){
var scale = this.scale, p, index;
// Update all particles... may need to be optimized
for (p = 0; p < this.particles.length; p++) {
this.particles[p]
.update(this)
.draw(this.context, scale);
}
// Remove destroyed entities
for (p = 0; p < this._deferred.length; p++) {
index = this.particles.indexOf(this._deferred.pop());
if (index >= 0) {
this.particles.splice(index, 1);
}
}
this.generateParticles(600 * this.tick >> 0);
}
});
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);
};
window.Engine = Engine;
})(window.Base, window.Vector, window.Circle);

36
website/source/javascripts/app/Init.js Normal file
View File

@ -0,0 +1,36 @@
(function(
Engine
){
var Init = {
start: function(){
var id = document.body.id.toLowerCase();
if (this.Pages[id]) {
this.Pages[id]();
}
},
Pages: {
'page-home': function(){
var jumbotron = document.getElementById('jumbotron'),
canvas;
if (!jumbotron) {
return;
}
canvas = document.createElement('canvas');
canvas.className = 'terraform-canvas';
jumbotron.appendChild(canvas);
window.engine = new Engine(canvas, 'image');
}
}
};
Init.start();
})(window.Engine);

136
website/source/javascripts/app/Puller.js Normal file
View File

@ -0,0 +1,136 @@
(function(
Engine,
Vector
){
var Puller = function(x, y){
this.pos.x = x;
this.pos.y = y;
this.pos = Vector.coerce(this.pos);
this.home = this.pos.clone();
this.accel = Vector.coerce(this.accel);
this.vel = Vector.coerce(this.vel);
};
Puller.prototype = {
fillStyle: '#ffffff',
radius: 5,
maxSpeed: 160,
maxForce: 50,
pos: {
x: 0,
y: 0
},
accel: {
x: 0,
y: 0
},
vel: {
x: 0,
y: 0
},
aRad: 200,
safety: 0.25,
update: function(engine){
var distanceToMouse = this.distanceTo(engine.mouse),
toHome, mag, safety;
// distanceToHome = this.distanceTo(this.home);
this.accel.mult(0);
if (distanceToMouse < this.aRad) {
this.toChase(engine.mouse);
}
this.toChase(this.home, this.maxForce / 2);
this.vel.add(this.accel);
this.pos.add(
Vector.mult(this.vel, engine.tick)
);
toHome = Vector.sub(this.home, this.pos);
mag = toHome.mag();
safety = this.aRad * (this.safety * 3);
if (mag > this.aRad - safety) {
toHome.normalize();
toHome.mult(this.aRad - safety);
this.pos = Vector.sub(this.home, toHome);
}
},
toChase: function(target, maxForce){
var desired, steer, distance, mult, safety;
maxForce = maxForce || this.maxForce;
target = Vector.coerce(target);
desired = Vector.sub(target, this.pos);
distance = desired.mag();
desired.normalize();
safety = this.aRad * this.safety;
if (distance < safety) {
mult = Engine.map(distance, 0, safety, 0, this.maxSpeed);
} else if (distance > this.aRad - safety){
mult = Engine.map(this.aRad - distance, 0, safety, 0, this.maxSpeed);
} else {
mult = this.maxSpeed;
}
desired.mult(mult);
steer = Vector.sub(desired, this.vel);
steer.limit(maxForce);
this.accel.add(steer);
},
draw: function(ctx, scale){
// ctx.beginPath();
// ctx.arc(
// this.home.x * scale,
// this.home.y * scale,
// this.aRad * scale,
// 0,
// Math.PI * 2,
// false
// );
// ctx.fillStyle = 'rgba(255,255,255,0.1)';
// ctx.fill();
ctx.beginPath();
ctx.arc(
this.pos.x * scale,
this.pos.y * scale,
this.radius * scale,
0,
Math.PI * 2,
false
);
ctx.fillStyle = this.fillStyle;
ctx.fill();
},
distanceTo: function(target) {
var xd = this.home.x - target.x;
var yd = this.home.y - target.y;
return Math.sqrt(xd * xd + yd * yd );
}
};
window.Puller = Puller;
})(
window.Engine,
window.Vector
);

14
website/source/layouts/_footer.erb
View File

@ -19,5 +19,19 @@
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/javascripts/lib/dbg.js"></script>
<script type="text/javascript" src="/javascripts/lib/Base.js"></script>
<script type="text/javascript" src="/javascripts/lib/String.substitute.js"></script>
<script type="text/javascript" src="/javascripts/lib/Vector.js"></script>
<script type="text/javascript" src="/javascripts/app/Circle.js"></script>
<script type="text/javascript" src="/javascripts/app/Engine.js"></script>
<script type="text/javascript" src="/javascripts/app/Engine.Particle.js"></script>
<script type="text/javascript" src="/javascripts/app/Engine.Particle.Fixed.js"></script>
<script type="text/javascript" src="/javascripts/app/Engine.Point.js"></script>
<script type="text/javascript" src="/javascripts/app/Engine.Polygon.js"></script>
<script type="text/javascript" src="/javascripts/app/Init.js"></script>
</body>
</html>

2
website/source/layouts/_header.erb
View File

@ -34,7 +34,7 @@
</script>
</head>
<body class="page-<%= current_page.data.page_title ? "#{current_page.data.page_title} layout-#{current_page.data.layout} page-sub" : "home layout-#{current_page.data.layout}" %>">
<body id="page-<%= current_page.data.page_title ? "#{current_page.data.page_title}" : "home" %>" class="page-<%= current_page.data.page_title ? "#{current_page.data.page_title} layout-#{current_page.data.layout} page-sub" : "home layout-#{current_page.data.layout}" %>">
<div id="header" class="<%= current_page.data.page_title == "home" ? "" : "navbar-static-top" %>">
<div class="container">
<div class="col-sm-12 col-md-4 nav-logo">

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

@ -4,7 +4,6 @@
#jumbotron-mask{
overflow: hidden;
width: 100%;
height: @jumbotron-total-height;
margin-top: @negative-hero-margin;
background-color: black;
@ -15,63 +14,140 @@
height: @jumbotron-total-height;
padding-top: 0;
padding-bottom: 0;
margin-top: @negative-hero-margin;
color: @jumbotron-color;
background: transparent url('../images/hero-bg.png') center center no-repeat;
background-size: cover;
&.mobile-hero{
background: transparent url( ../images/node-hero-pattern.jpg ) center center;
background-size: 320px 320px;
background: -webkit-image-set( url('../images/node-hero-pattern.jpg') 1x, url('../images/node-hero-pattern@2x.jpg') 2x );
.terraform-canvas {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.logo-container {
position:absolute;
z-index:999;
top:0;
left:0;
right:0;
bottom:0;
.container{
position: relative;
height: 100%;
margin-top: @header-height;
> div{
display: none;
}
.jumbo-logo-wrap{
margin-top: 135px;
.jumbo-logo{
width: 318px;
height: 316px;
background: transparent url( ../images/consul-hero-logo@2x.png ) 0 0 no-repeat;
background-size: 318px 316px;
z-index: 20;
}
}
h2{
margin-top: 175px;
font-size: 40px;
line-height: 48px;
letter-spacing: 1px;
margin-left: 40px;
}
-webkit-transform:translate3d(0,0,0);
}
}
@media (max-width: 992px) {
#jumbotron .container {
h2{
text-align: center;
margin-left: 0;
}
}
.animated-logo {
position:absolute;
z-index:200;
top:50%;
left:50%;
width:140px;
height:140px;
margin:-28px 0 0 -115px;
opacity:1;
-webkit-transition:-webkit-transform 300ms ease-in-out;
-webkit-transform-origin:100% 0;
-webkit-transform-style:preserve-3d;
-webkit-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scaleX(1);
}
@media (max-width: 480px) {
#jumbotron .container {
h2{
margin-top: 130px;
font-size: 32px;
}
.state-one.state-two.state-three.state-four .animated-logo {
-webkit-transform:translate3d(0,0,0) rotateY(-45deg) skewY(22deg) scaleX(1.26);
}
.white-block {
position:absolute;
width:68px;
height:68px;
background-color:rgba(255,0,0,0.3);
background-color:#fff;
}
.state-one .white-block {
-webkit-transition:-webkit-transform 300ms ease-out;
}
.block-one,
.block-two,
.block-three,
.block-four {
top:0;
left:72px;
-webkit-transform-origin:50% 50%;
-webkit-transform:translate3d(0,0,0);
}
.block-one {
opacity:0;
}
.block-two {
opacity:0;
top:0;
left:0;
-webkit-transform:translate3d(0,0,0) scaleX(1);
}
.block-three {
opacity:0;
top:72px;
-webkit-transform:translate3d(0,0,0) scaleY(1);
}
.block-four {
-webkit-transform-origin:0 0;
-webkit-transform:translate3d(73px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
}
.state-one .block-one {
opacity:1;
-webkit-animation:PopIn 300ms 1 ease-in;
animation:PopIn 300ms 1 ease-in;
}
.state-one.state-two .block-two {
opacity:1;
-webkit-animation:PopIn 300ms 1 ease-in;
animation:PopIn 300ms 1 ease-in;
}
.state-one.state-two.state-three .block-three {
opacity:1;
-webkit-animation:PopIn 300ms 1 ease-in;
animation:PopIn 300ms 1 ease-in;
}
@-webkit-keyframes PopIn {
0% {
opacity:0;
-webkit-transform:translate3d(0,0,0) scale(0);
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out;
}
40% {
opacity: 1;
-webkit-transform:translate3d(0,0,0) scale(1.2);
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out;
}
70% {
opacity: 1;
-webkit-transform:translate3d(0,0,0) scale(0.90);
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out;
}
100% {
opacity: 1;
-webkit-transform:translate3d(0,0,0) scale(1);
}
}

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

@ -575,61 +575,124 @@ body.page-home #footer {
}
#jumbotron-mask {
overflow: hidden;
width: 100%;
height: 804px;
height: 700px;
margin-top: -90px;
background-color: black;
}
#jumbotron {
position: relative;
height: 804px;
height: 700px;
padding-top: 0;
padding-bottom: 0;
margin-top: -90px;
color: #ffffff;
background: transparent url('../images/hero-bg.png') center center no-repeat;
background-size: cover;
}
#jumbotron.mobile-hero {
background: transparent url(../images/node-hero-pattern.jpg ) center center;
background-size: 320px 320px;
background: -webkit-image-set(url('../images/node-hero-pattern.jpg') 1x, url('../images/node-hero-pattern@2x.jpg') 2x);
}
#jumbotron .container {
position: relative;
#jumbotron .terraform-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin-top: 90px;
}
#jumbotron .container > div {
display: none;
#jumbotron .logo-container {
position: absolute;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform: translate3d(0, 0, 0);
}
#jumbotron .container .jumbo-logo-wrap {
margin-top: 135px;
.animated-logo {
position: absolute;
z-index: 200;
top: 50%;
left: 50%;
width: 140px;
height: 140px;
margin: -28px 0 0 -115px;
opacity: 1;
-webkit-transition: -webkit-transform 300ms ease-in-out;
-webkit-transform-origin: 100% 0;
-webkit-transform-style: preserve-3d;
-webkit-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scaleX(1);
}
#jumbotron .container .jumbo-logo-wrap .jumbo-logo {
width: 318px;
height: 316px;
background: transparent url(../images/consul-hero-logo@2x.png ) 0 0 no-repeat;
background-size: 318px 316px;
z-index: 20;
.state-one.state-two.state-three.state-four .animated-logo {
-webkit-transform: translate3d(0, 0, 0) rotateY(-45deg) skewY(22deg) scaleX(1.26);
}
#jumbotron .container h2 {
margin-top: 175px;
font-size: 40px;
line-height: 48px;
letter-spacing: 1px;
margin-left: 40px;
.white-block {
position: absolute;
width: 68px;
height: 68px;
background-color: rgba(255, 0, 0, 0.3);
background-color: #fff;
}
@media (max-width: 992px) {
#jumbotron .container h2 {
text-align: center;
margin-left: 0;
.state-one .white-block {
-webkit-transition: -webkit-transform 300ms ease-out;
}
.block-one,
.block-two,
.block-three,
.block-four {
top: 0;
left: 72px;
-webkit-transform-origin: 50% 50%;
-webkit-transform: translate3d(0, 0, 0);
}
.block-one {
opacity: 0;
}
.block-two {
opacity: 0;
top: 0;
left: 0;
-webkit-transform: translate3d(0, 0, 0) scaleX(1);
}
.block-three {
opacity: 0;
top: 72px;
-webkit-transform: translate3d(0, 0, 0) scaleY(1);
}
.block-four {
-webkit-transform-origin: 0 0;
-webkit-transform: translate3d(73px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
}
.state-one .block-one {
opacity: 1;
-webkit-animation: PopIn 300ms 1 ease-in;
animation: PopIn 300ms 1 ease-in;
}
.state-one.state-two .block-two {
opacity: 1;
-webkit-animation: PopIn 300ms 1 ease-in;
animation: PopIn 300ms 1 ease-in;
}
.state-one.state-two.state-three .block-three {
opacity: 1;
-webkit-animation: PopIn 300ms 1 ease-in;
animation: PopIn 300ms 1 ease-in;
}
@-webkit-keyframes PopIn {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0) scale(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@media (max-width: 480px) {
#jumbotron .container h2 {
margin-top: 130px;
font-size: 32px;
40% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) scale(1.2);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
70% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) scale(0.9);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) scale(1);
}
}
.outline-btn {