Part 1

1. Do some debugging. Unscramble the code to create what you see on the screen. One thing at a time. Start with what you recognize.

​

2. (Extra) Add color in some way

*/

​

function setup() {

  noStroke();

  // stroke(250);

  // strokeWeight(5);

  createCanvas(windowWidth, windowHeight);

  // frameRate(10);

​

  // let interA = lerpColor(from, to, 0.33);

  // let interB = lerpColor(from, to, 0.66);

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

function draw() {

  background(224, 255, 255);

  let total = 20;

  let columnWidth;

  let pink = color(240, 128, 128);

  let red = color(178, 34, 34);

  // fill(lerpColor(from1, to1, 0.33));

  let xStart = 0;

  let xEnd = width;

​

  columnWidth = width / total;

​

  for (let counter = 0; counter < total; counter++) {

    let x = counter * columnWidth;

    let y = height / 4;

    let colHeight = height / 2;

    fill(lerpColor(pink, red, map(x, xStart, xEnd, 0, 1)));

    rect(x, y, columnWidth, colHeight);

  }

}

​