​

var slider;

const sliderMax = 100;

​

function setup() {

  createCanvas(400, 400);

  slider = createSlider(0.0, 100.0, 0.0);

}

​

function draw() {

  background(220);

  //the width of a 'notch' in the slider

  const notch = 1.0/numChannels;

  //iterate over each bus output

  for (let i = 0; i < numChannels; i++) {

    //the 100% position of the current bus output on the slider

    const homePosition = (1.0/numChannels) * i;

    //the actual position that our slider is in

    let position = slider.value();

    position = position/sliderMax;

    //get the difference between current position and the '100%' position for channel

    let level = abs(homePosition - position);

    level = constrain(level, 0, notch);

    //normalize the slider value

    level = level/notch;

    //invert our value

    level = 1.0 - level;

    //draw the results

    let x = width/numChannels * i;

    let w = width/numChannels;

    let y = height;

    let h = -height * level;

    rect(x, y, w, h);

  }

}