2 public/js/animations.js
View file

Large diffs are not rendered by default.

2 public/js/dashboard.js
View file
54 source/dashboard.html
View file

Large diffs are not rendered by default.

1 source/js/animation-controller.js
View file
@@ -40,4 +40,3 @@ var animationController = {
two.bind('update', function() {
TWEEN.update();
}).play();

160 source/js/animations-og.js
View file
@@ -150,7 +150,69 @@ var highRise = (function(){

})();

var sqaureExplode = (function() {

var flash = (function() {

var playing = false;
var callback = _.identity;

var shape = two.makeRectangle(center.x, center.y, width, height);
var timeout;
shape.noStroke().fill = currentPallette[0];
shape.visible = false;

var start = function(onComplete, silent) {
if (!_.isUndefined(timeout)) {
clearTimeout(timeout);
timeout = undefined;
}
playing = true;
if (!silent && exports.sound) {
exports.sound.stop().play();
}
timeout = setTimeout(function() {
playing = false;
callback();
shape.visible = false;
}, duration * 0.25);
if (_.isFunction(onComplete)) {
callback = onComplete;
}
};

var update = function() {
shape.fill = currentPallette[0];
};

var resize = function() {
var vertices = shape.vertices;
vertices[0].set(- center.x, - center.y);
vertices[1].set(center.x, - center.y);
vertices[2].set(center.x, center.y);
vertices[3].set(- center.x, center.y);
shape.translation.copy(center);
};

two.bind('update', function() {
if (!playing) {
return;
}
shape.visible = Math.random() > 0.5;
});

var exports = {
start: start,
update: update,
clear: _.identity,
resize: resize,
playing: function() { return playing; },
};
return exports;
})();



var starExplode = (function() {
var callback = _.identity;
var playing = false;

@@ -209,6 +271,100 @@ var sqaureExplode = (function() {
// ======================================
var middleGround = two.makeGroup();


var suspension = (function() {

var playing = false,
callback = _.identity,
amount = 16,
r1 = min_dimension * 12 / 900,
r2 = min_dimension * 20 / 900,
theta, deviation, distance = height,
destinations = [],
circles = _.map(_.range(amount), function(i) {
var r = Math.round(map(Math.random(), 0, 1, r1, r2));
var circle = two.makeCircle(0, 0, r);
circle.fill = colors.white;
circle.noStroke();
destinations.push(new Two.Vector());
return circle;
});

var group = two.makeGroup(circles);
group.translation.set(center.x, center.y);

var i, c;
var start = function(onComplete, silent) {
for (i = 0; i < amount; i++) {
circles[i].visible = true;
}
_in.start();
if (!silent && exports.sound) {
exports.sound.stop().play();
}
if (_.isFunction(onComplete)) {
callback = onComplete;
}
};

start.onComplete = reset;

var options = { ending: 0 },
t, d, x, y;

var _in = new TWEEN.Tween(options)
.to({ ending: 1 }, duration * 0.5)
.easing(Easing.Sinusoidal.Out)
.onStart(function() {
playing = true;
})
.onUpdate(function() {
t = options.ending;
for (i = 0; i < amount; i++) {
c = circles[i];
d = destinations[i];
x = lerp(c.translation.x, d.x, t);
y = lerp(c.translation.y, d.y, t);
c.translation.set(x, y);
}
})
.onComplete(function() {
start.onComplete();
callback();
});

function reset() {
theta = Math.random() * TWO_PI;
deviation = map(Math.random(), 0, 1, Math.PI / 4, Math.PI / 2);
options.ending = 0;

for (i = 0; i < amount; i++) {
c = circles[i];
t = theta + Math.random() * deviation * 2 - deviation;
a = Math.random() * distance;
x = a * Math.cos(t);
y = a * Math.sin(t);
destinations[i].set(x, y);
c.visible = false;
c.fill = randomColor();
c.translation.set(0, 0);
}

playing = false;
_in.stop();
}

reset();

var exports = {
start: start,
clear: reset,
playing: function() { return playing; },
};

return exports;
})();

// ======================================
// FORE GROUND
// ======================================
@@ -267,9 +423,7 @@ var circlePop = (function(){
clear: reset,
playing: function() { return playing; },
};

return exports;

})();

var horizontalLine = (function() {
62 source/js/animations.js
View file
@@ -904,68 +904,6 @@ var squiggle = (function() {
})();


var flash = (function() {

var playing = false;
var callback = _.identity;

var shape = two.makeRectangle(center.x, center.y, width, height);
var timeout;
shape.noStroke().fill = currentPallette[0];
shape.visible = false;

var start = function(onComplete, silent) {
if (!_.isUndefined(timeout)) {
clearTimeout(timeout);
timeout = undefined;
}
playing = true;
if (!silent && exports.sound) {
exports.sound.stop().play();
}
timeout = setTimeout(function() {
playing = false;
callback();
shape.visible = false;
}, duration * 0.25);
if (_.isFunction(onComplete)) {
callback = onComplete;
}
};

var update = function() {
shape.fill = currentPallette[0];
};

var resize = function() {
var vertices = shape.vertices;
vertices[0].set(- center.x, - center.y);
vertices[1].set(center.x, - center.y);
vertices[2].set(center.x, center.y);
vertices[3].set(- center.x, center.y);
shape.translation.copy(center);
};

two.bind('update', function() {
if (!playing) {
return;
}
shape.visible = Math.random() > 0.5;
});

var exports = {
start: start,
update: update,
clear: _.identity,
resize: resize,
playing: function() { return playing; },
};

return exports;

})();


var pistons = (function() {
var i = 1;
var playing = false;
36 source/js/dashboard.js
View file
@@ -1,12 +1,42 @@
var socket = io();

var average_acceleration = 0;
num_users = 0;
var average_acceleration = 0,
num_users = 0;

new Chartist.Line('.ct-chart', {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3],
[1, 3, 4, 5, 6]
]
}, {
fullWidth: true,
chartPadding: {
right: 40
}
});

new Chartist.Line('.ct-chart-2', {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
series: [
[3, 9, 7, 6, 9],
[2, 3, 2, 7, 7],
[1, 3, 2, 4, 6]
]
}, {
fullWidth: true,
chartPadding: {
right: 40
}
});

socket.on("acceleration_input", function(msg) {
average_acceleration = msg;
document.querySelector("#accel-data").innerHTML = average_acceleration;
});

socket.on("user_input", function(msg) {
num_users = msg;
});
document.querySelector("#current-users").innerHTML = num_users;
});
9 source/sass/components/_nav-header.scss
View file
@@ -0,0 +1,9 @@
.nav-header {
padding: 1em;
background: linear-gradient(45deg, #A6F4FE, #E9547D, #DFD4B8);
background-size: 300% 300%;

&--title {
color: rgba(white, 50%);
}
}
30 source/sass/dashboard.scss
View file
@@ -0,0 +1,30 @@
@import "components/nav-header";
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);

body {
font-family: Roboto;
font-weight: 400;
margin: 0;
}

section {
margin-top: 2em;
display: flex;
flex-direction: row;
justify-content: space-around;
}

._half {
min-width: 50%;
}

.chart {
box-sizing: border-box;
padding: 2em;

&--title {
position: relative;
left: 50%;
transform: translateX(-50%);
}
}