color picker + shape slider

mySketch
xxxxxxxxxx
 
let sizeSlider;
let lastInput;
let input;
​
function setup() {
  //createCanvas(windowWidth, windowHeight);
  createCanvas(800, 800);
  background('white');
  
  penColor = 'red';
  
  sizeSlider = createSlider(0, width / 2, width / 4);
  sizeSlider.position(width / 2 - 200, windowHeight * 7 / 8);
  sizeSlider.style("width", "400px");
  lastInput = 0;
  input = 0;
}
​
function draw() {
  noStroke();
  drawColorBar();
  
  if (mouseIsPressed) {
    if (mouseY < 20) {
      //if mouse in color bar
      changeColor();
    } else {
      fill (penColor);
    ellipse(mouseX, mouseY, 20, 20);
    }
  }
  
  /// rect to circle
  lastInput = input;
  input = sizeSlider.value();
  if (lastInput != input) {
    push();
    fill(220);
    noStroke();
    rectMode(CENTER);
    background(255);
    rect(width / 2, height / 2, 800, 800, sizeSlider.value());
    pop();
  }
}
​
function changeColor() {
      if (mouseX < width/6) {
      penColor = 'red';
      } else {
        if (mouseX < width/3) {
          penColor = 'orange'
      } else {
          if (mouseX < width/2) {
          penColor = 'yellow';
        } else {
            if (mouseX < width/1.5) {
            penColor = 'green';
          } else {
              if (mouseX < width/1.2) {
              penColor = 'blue';
            } else {
            if (mouseX < width) {
              penColor = 'purple';
            } else {
            }
          }
        }
      }
    }
  }
}
​
function drawColorBar() {
  fill ('red');
  rect(0,0,width/6,20);
  fill ('orange');
  rect(width/6,0,width/6,20);
  fill ('yellow');
  rect(width/3, 0, width/6,20);
  fill ('green');
  rect(width/2, 0, width/6,20);
  fill ('blue');
  rect(width/1.5, 0, width/6, 20)
  fill ('purple');
  rect(width/1.2, 0, width/6,20);
}