> show canvas only <


/* 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);
    }
  }