var slider;

var lastSliderValue;

​

var button1;

var button2;

var button3;

var button4;

​

var isBars = true;

var isLines = false;

​

function setup() {

  createCanvas(600, 400);

  colorMode(HSB, 100);

​

  // Create interactive slider

  slider = createSlider(3, 50, 18);

  slider.position(50, height);

  slider.size(120);

​

  // Create interactive buttons

  button1 = createButton('Bars');

  button1.position(0, height);

  button1.mousePressed(drawSpectrumBars);

​

  button2 = createButton('Lines');

  button2.position(0, height + 20);

  button2.mousePressed(drawSpectrumLines);

​

  button3 = createButton('Continuous');

  button3.position(0, height + 40);

  button3.mousePressed(drawContinuous);

​

  button4 = createButton('Continuous with Saturation');

  button4.position(0, height + 60);

  button4.mousePressed(drawContinuousWHeight);

}

​

function draw() {

  // Only checks slider if drawing bars

  if (isBars || isLines) {

    // Calls drawSpectrumBars function when slider value changes

    if (lastSliderValue != slider.value()) {

      numBars = slider.value();

      if (isBars) drawSpectrumBars();

      if (isLines) drawSpectrumLines();

    }

  }

}

​

function drawSpectrumBars() {

  isBars = true;

  isLines = false;

  for (let w = 0; w < numBars; w++) {

    for (let h = 0; h < height; h++) {

      let widthColor = map(w, 0, numBars, 0, 100);

      stroke(widthColor, 100, 100);

      fill(widthColor, 100, 100);

      rect(w * (width / numBars), 0, (width / numBars), h);

    }

  }

}

​

function drawSpectrumLines() {

  isBars = false;

  isLines = true;

​

  background(255);

  for (let w = 0; w < numBars; w++) {

    for (let h = 0; h < height; h++) {

      let widthColor = map(w, 0, numBars, 0, 100);

      stroke(widthColor, 100, 100);

      point(w * (width / numBars), h);

    }

  }

}

​

function drawContinuous() {

  isBars = false;

  isLines = false;

​

  for (let w = 0; w < width; w++) {

    for (let h = 0; h < height; h++) {

      let widthColor = map(w, 0, width, 0, 100);

      stroke(widthColor, 100, 100);

      point(w, h);

    }

  }

}

​

function drawContinuousWHeight() {

  isBars = false;

  isLines = false;

​

  for (let w = 0; w < width; w++) {

    for (let h = 0; h < height; h++) {

      let widthColor = map(w, 0, width, 0, 100);

      let heightColor = map(h, 0, height, 0, 100);

      stroke(widthColor, heightColor, 100);

      point(w, h);

    }

  }

}