Estoy tratando de crear un lienzo con el que el usuario pueda interactuar. Necesito ayuda para resolver los siguientes problemas.

En la fuente en el frente, las elipses deben volar en el aire. Todas las elipses deben moverse un poco diferente a las demás. Las elipses también deberían volver a bajar a la superficie del agua y luego desaparecer. Simplemente debería verse como una pequeña salpicadura. Esto debe hacerse dentro de un cierto radio desde el clic del mouse que hace el usuario para activar el evento.

Aquí está la parte del código que tiene que hacer con el problema. También estoy compartiendo mi lienzo para que todo quede un poco más claro.

 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); } } }