/
spectro_flow.js
64 lines (54 loc) · 1.88 KB
/
spectro_flow.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
"use strict";
var App = App || {};
(function() {
var num_sections = 100;
var num_buckets = 5;
var FPS = 40;
App.buckets = [];
App.particles = [];
App.width = window.innerWidth - 10;
App.height = window.innerHeight - 80;
App.trim_width = 0;
var flowCanvas = document.getElementById('flow-canvas');
flowCanvas.setAttribute('width', App.width);
flowCanvas.setAttribute('height', App.height);
var padding = App.height / (num_buckets + 1);
var colors = ['#2ECC40','#FFDC00','#FF4136','#0074D9','#7FDBFF'];
for(var i = 0; i < num_buckets; i++) {
var x = App.width;
var y = padding + padding * i;
App.buckets.push(new App.Bucket(x,y,colors[i]));
}
function start() {
var canvas = document.getElementById('flow-canvas');
var context = canvas.getContext('2d');
var clearStartX = 0;
context.fillStyle = '#222'; // set text color
setInterval(function() {
App.clear_canvas();
var toRemove = 0;
var particles = App.particles;
for (var i = 0, l = particles.length; i < l; ++i) {
var entry = particles[i];
if (!entry.has_reached()) {
entry.step();
}
else {
clearStartX = entry.get_destination().x - 15;
toRemove++;
}
entry.display(context);
}
if (particles.length > 1000) {
App.trim_width = particles[300].get_position().x + 40;
particles.splice(0, 300);
}
}, 1000 / FPS);
}
App.clear_canvas = function() {
var canvas = document.getElementById('flow-canvas');
var context = canvas.getContext('2d');
context.clearRect(App.trim_width,0,canvas.width,canvas.height);
}
start();
})();