createCanvas(400, 400);

}

​

function draw() {

  background(220);

​

  // define the number of columns

  let numColumns = 20;

  // calculate the width of each column

  let columnWidth = width / numColumns;

​

  // initialize the column index

  let i = 0;

​

  // loop through the number of columns using a while loop

  while (i < numColumns) {

    // set the fill color based on hover status

    fill(isHovered(i, columnWidth) ? 'red' : 'lavender');

    // draw the rectangle for each column

    rect(i * columnWidth, 0, columnWidth, height); // fill the height of the canvas

​

    // increment the col index

    i++;

  }

}

​

// check if the mouse is hovering over a specific column

function isHovered(index, columnWidth) {

  let x = index * columnWidth;

  return mouseX > x && mouseX < x + columnWidth && mouseY < height; // fill the height of the canvas

}

​