function getColorGradient(x_loc) {

  // defines a simple gradient by starting with one HSB color

  // (which will be shown when x_loc = 0.0) and then saying

  // how the values should change to get to where we'll end up

  // (which will be shown when x_loc = 1.0).

  let hue_start = hue_start_slider.value();

  let hue_range = hue_range_slider.value();

  let sat_start = sat_start_slider.value();

  let sat_range = sat_range_slider.value();

​

  // let value_start = val_start_slider.value();

  // let value_range = val_range_slider.value();

  let value_start = 100;

  let value_range = -100;

  // you probably don't need to change anything in this function

  // below this comment! unless you want to, then feel free :D

  h = hue_start + x_loc * hue_range;

  s = sat_start + x_loc * sat_range;

  v = value_start + x_loc * value_range;

  // hue rotates around, so 101 = 1

  // sat and value should be between 0 and 100, so clamp them!

  return [h % 100, constrain(s, 0, 100), constrain(v, 0, 100)];

}

​

​

function setup() {

  createCanvas(400, 400);

  // switch to HSB (also called HSV, B = brightness, V = value, but they work the same)

  colorMode(HSB, 100); 

  hue_start_slider = createSlider(0, 100);

  hue_start_slider.position(10, 10);

  hue_start_slider.size(120);

  hue_range_slider = createSlider(-50, 50);

  hue_range_slider.position(150, 10);

  hue_range_slider.size(120);

  sat_start_slider = createSlider(0, 100);

  sat_start_slider.position(10, 40);

  sat_start_slider.size(120);

  sat_range_slider = createSlider(-100, 100);

  sat_range_slider.position(150, 40);

  sat_range_slider.size(120);

//   val_start_slider = createSlider(0, 100);

//   val_start_slider.position(10, 70);

//   val_start_slider.size(120);

//   val_range_slider = createSlider(-100, 100);

//   val_range_slider.position(150, 70);

//   val_range_slider.size(120);

}

​

​

​

function draw() {

  // you probably won't need to change this unless you want to!

  // we go through and draw 100 rectangles, stepping through

  // each of the colors

  let count = 100;

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

    let x_loc = i / count;

    let x = x_loc * width;

​

    let hsv = getColorGradient(x_loc);

    let fillColor = color(hsv[0], hsv[1], hsv[2], 100)

​

    fill(fillColor);

    noStroke();

    rect(x, 0, width / count, height);

  }

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

    let x_loc = i / count;

    let x = x_loc * width;

​

    let hsv = getColorGradient(x_loc);

    let fillColor = color(hsv[0], hsv[1], hsv[2], 100)

​

    fill(fillColor);

    noStroke();

    rect(x, 100, width / count, 10);

  }

  // for fun, add a rectangle that's a desaturated complement color

  // (e.g. hue + 50).

  // you can try adding other rectangles too

  let hsv = getColorGradient(0);

​

  fill(color((hsv[0] + 75) % 100, 30, 100));

  let other_size_x = 300;

  let other_size_y = 50;

  rect(width / 2 - other_size_x / 2, height / 2 - other_size_y / 2, other_size_x, other_size_y)

}