createCanvas(400, 400);

}

​

function draw() {

  background(220);

  const columnWidth = width / 20; // calculate the width of each column

​

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

    // set fill color based on hover status

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

    rect(i * columnWidth, 0, columnWidth, height); // draw the rectangle for each column

  }

}

​

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

function isHovered(index, columnWidth) {

  return mouseX > index * columnWidth && mouseX < (index + 1) * columnWidth && mouseY < height; // check for hover

}

​