var Gen = TS.Generative;

var Algo = TS.Algorithmic;

var Mod = TS.Transform;

var Rand = TS.Stochastic;

var Stat = TS.Statistic;

var Util = TS.Utility;

​

var val1;

var val2;

var val3;

var sPeriod;

var sWidth = 140;

var sText;

​

var barWidth = 3;

var margin = 5;

var textMargin = 30;

​

var randomHue = (Math.floor(Math.random() * 5) + 4) * 36;

// var randomHue = 4 * 36;

​

function windowResized(){

  resizeCanvas(windowWidth, 200); 

}

​

function setup() {

  createCanvas(windowWidth, 200);

  val1 = createSlider(1, 50, 6);

  val2 = createSlider(1, 50, 14);

  val3 = createSlider(1, 50, 12);

}

​

function draw() {

  background(255);

​

  var v1 = val1.value();

  var v2 = val2.value();

  var v3 = val3.value();

  // Some generative code from Total-Serlialism package

  var vals = Gen.fill(5, v1, 2, v2, 8, v3);

  var code = ["Gen.fill("+5, v1, 2, v2, 8, v3+");"].join(", ");

  var min = Stat.minimum(vals);

  var max = Stat.maximum(vals);

  var range = max - min;

  var step = (width - textMargin) / vals.length;

  var prevH;

  var imgH = height - margin * 2;

  for (let i in vals){

    let pos = i * step;

    let h = height - (vals[i]-min) / (max-min) * imgH-margin;

    colorMode(HSB);

    let c = ((90 / vals.length) * i + randomHue) % 360;

    fill(c, 40, 100);

    noStroke();

    rect(pos+barWidth, h, step-barWidth, height);

    colorMode(RGB);

    strokeWeight(2);

    stroke(0);

    line(pos+barWidth, h, pos+step, h);

  }

​

  textFont('inconsolata');

  // draw center line

  strokeWeight(1);

  stroke(100);

  line(0, height/2, width, height/2);

  // draw top maximum value

  fill(0);

  noStroke();

  textSize(14);

  textAlign(RIGHT, TOP);

  text(max, width-margin, 0);

  // draw bottom minimum value

  textAlign(RIGHT, BOTTOM);

  text(min, width-margin, height);

  fill(0, 150);

  textAlign(LEFT, TOP);

  text(code, margin, margin);

}