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 iArray;

var iClones;

// var sSeed;

// var sAmount;

// var sLo;

// var sHi;

​

var barWidth = 3;

var margin = 5;

var textMargin = 30;

​

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

​

function windowResized(){

  resizeCanvas(windowWidth, 200); 

}

​

function setup() {

  createCanvas(windowWidth, 200);

  iArray = createInput('0 12 5 7');

  iClones = createInput('-5 12 0 3 24');

}

​

function draw() {

  background(255);

​

  var arr = iArray.value().split(" ").map(x => Number(x));

  var clones = iClones.value().split(" ").map(x => Number(x));

  // Some generative code from Total-Serlialism package

  var vals = Mod.clone(arr, ...clones);

  var code = "Mod.clone([" + arr.join(", ") + "], ";

  code += [...clones].join(", ") + ");";

  var min = Stat.minimum(vals);

  var max = Stat.maximum(vals);

  // var min = 1;

  // var max = 6;

  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('consolas');

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

}