I'm trying to create a canvas that the user can interact with. I need help solving the following problems.

At the fountain at the front, ellipses should fly up into the air. All ellipses should move a little differently than the others. The ellipses should also come down to the water surface again and then disappear. It should simply look like a small splash. This should be done within a certain radius from the mouse click the user makes to activate the event.

Here is the part of the code that have with the problem to do. I am also sharing my canvas to hopefully make everything a bit clearer.

var Water;
var image;

function preload() {
  image = loadImage("Vy över Versailles.png");
  soundFormats('mp3', 'ogg');
  Water = loadSound('202915__tritus__fountain02.wav');
}

function setup() {
  let cnv = createCanvas(638, 413);
  cnv.mouseClicked(CanvasPressed);
  background(image);
}

function CanvasPressed() {
  if (mouseX > 0 && mouseX < 638 && mouseY > 170 && mouseY < 300) {
    Water.stop();
    Water.play();

    let blue = color(0, 0, 255);
    fill(blue);
    noStroke();
    let antal = random(5)

    if (mouseX > 130 && mouseX < 510 && mouseY > 275 && mouseY < 310) {
      for (var i = 0; i < antal; i++) {
        let musX = mouseX - random(i * 10);
        let musY = mouseY - random(i * 10);
        let xSize = random(20);
        ellipse(musX, musY, xSize);
      }
      ellipse(mouseX, mouseY, 50, 6);
    }
  }
}