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

var sDiv;

var sAmt;

var sRot;

​

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

  iHex = createInput('a92f');

  sAmt = createSlider(1, 32, 4);

  sDiv = createSlider(1, 32, 16);

  sRot = createSlider(-12, 12, 3);

}

​

function draw() {

  background(255);

​

  var hex = iHex.value();

  var amt = sAmt.value();

  var div = sDiv.value();

  var rot = sRot.value();

  // Some generative code from Total-Serlialism package

  var vals = Mod.every(Algo.hexBeat(hex), amt, div, rot);

  var code = "Mod.every(Algo.hexBeat('"+hex+"'), "+ amt +", "+div+", "+rot+");";

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

}