/* built with Studio Sketchpad:
* https://sketchpad.cc
*
* observe the evolution of this sketch:
* https://studio.sketchpad.cc/sp/pad/view/ro.FJz6tSSqIxY/rev.2096
*
* authors:
*
* Dmitri Sadakov
* license (unless otherwise specified):
* creative commons attribution-share alike 3.0 license.
* https://creativecommons.org/licenses/by-sa/3.0/
*/
// By cDima, Dimitri Sadakov, making an animated steamgraph,
// as in this paper : http://www.leebyron.com/else/streamgraph/
// This sketch builds on a prior work,
// http://vis.stanford.edu/protovis/ex/stream.html
// http://sketchpad.cc/sp/pad/view/ro.UTAXkLMWvL0/rev.130
// Pressing Control-R will render this sketch.
int i = 0;
var n = 5,
m = 20, // number of samples per layer
data = layers(n, m);
void setup() { // this is run once.
// set the background color
background(211);
// canvas size (Integers only, please.)
size(300, 300);
// smooth edges
smooth();
// limit the number of frames per second
frameRate(1);
// set the width of the line.
strokeWeight(0);
noFill();
//var c = colorGraph[layer];
int r = random(80, 100);
int g = random(80, 100);
int b = random(90, 220);
stroke(r, g, b, 100);
fill(r, g, b, 0.3 * 255);
}
void draw() {
background(220);
// light blue: "#aad", "#556"
int maxHeight = height / 2;
// we're dealing with a stacked graph
var currentStackSum = [];
for (i = 0; i < m; i++) currentStackSum[i] = 0;
var stackSum = [];
for (var i = 0; i < n; i++){
stackSum[i] = 0;
for (var ii = 0; ii < n; ii++){
stackSum[i] += data[i][ii];
}
}
var baseline = maxHeight - (stackSum[0] / 2);
for (layer = 0; layer < n; layer++) {
beginShape();
curveVertex(0, maxHeight);
curveVertex(0, maxHeight);
for (i = 0; i < n; i++) {
currentStackSum[i] += data[layer][i];
var x = i * (width / n);
//curveVertex(i*width / n,
// maxHeight + (
// (currentStackSum[i] - (stackSum[i] / 2)
// ) +2 * height * 0.01) );
y = baseline + currentStackSum[i];
curveVertex(x, y);
}
curveVertex(width, maxHeight);
curveVertex(width, maxHeight);
endShape();
}
for(i = 0; i < n; i++) RandomWave(data[i]); //bump(data[i]);
}
function layers(n, m){
var layers = [];
for (var layerNum = 0; layerNum < n; layerNum++) {
var a = [];
for (i = 0; i < m; i++) a[i] = 0;
for (i = 0; i < 50; i++) bump(a);
layers[layerNum] = a;
}
return layers;
}
var randomWave = [];
for(var i = 0; i < m+1; i++) randomWave[i] = 0;
void RandomWave(a) {
for (var i = 0; i < m; i++) {
//a[i] += random(-1, 1);
a[i-1] = random(10);
a[i] = a[i-1] + random(-1, 1); // - a[i+1];
}
}
void bump(a) {
var x = 1 / (.1 + Math.random()),
y = 2 * Math.random() - .5,
z = 10 / (.1 + Math.random());
for (var i = 0; i < m; i++) {
var w = (i / m - y) * z;
a[i] += x * Math.exp(-w * w);
}
}