createCanvas(400, 400);

}

​

function draw() {

  const columnWidth = width / 20;

​

  // array of pastel colors

  const pastelColors = [

    '#FFB3BA', '#FFDFBA', '#FFFFBA', '#BAFFC9', '#BAE1FF',

    '#FFC3A0', '#FF677D', '#D4A5A5', '#392F5A', '#B9FBC0',

    '#FFE156', '#FCE38A', '#85E3FF', '#A8D8EA', '#FF77A7',

    '#A7D4E0', '#E7D6C1', '#C4E3F3', '#FFC5A1', '#D5E2C1',

    '#F9AFAF'

  ];

​

  background(0); // set bg color to black

​

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

    const fillColor = isHovered(i, columnWidth) ? pastelColors[i] : 'black'; // set color based on hover

​

    fill(fillColor);

    stroke(255); // white stroke

    strokeWeight(1);

    rect(i * columnWidth, 0, columnWidth, height);

  }

}

​

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

function isHovered(index, columnWidth) {

  return mouseX > index * columnWidth && mouseX < (index + 1) * columnWidth && mouseY < height;

}

​