How to change the color of objects near mouse click location or add a new object on mouseClick in p5.js?

p5.js Coding Questions
1

Hi, I have an array of ellipse object as below, and intend to change the color of ellipses near the mouse click, but the mouseIsPressed portion of code is not working. What could have gone wrong? Thanks in advance for any inputs!

let bubbles =[];
let num = 50;
let w=800, h=600;


function setup() {
    createCanvas(w, h);
      for(let i=0; i<num; i++) {
          bubbles[i] = new bubble(random(0,w),random(0,h),
            random(5,15)
            );
      }   
  }

  //object inheritance: apply action on some objects
  
  function draw() {
    background(0);

    for(let i=0; i<num; i++) {
        bubbles[i].display();
        bubbles[i].move();
    }
  }

  class bubble {
    //hold all variables 
    constructor(tempX, tempY, tempW) {
        this.x=tempX;
        this.y=tempY;
        this.width=tempW;
    }

    move(){
        //angle=this.direction+0.4*t;
        this.y+=6;
        this.y=this.y%h
    }


    display(){
        if (mouseIsPressed) {
            for(let i=0; i<num; i++) {
                if (dist(mouseX, mouseY, 
                    bubble[i].x,bubble[i].y)<50) {
                    fill (100,20,100);
                }
                else {fill(0);}
            }
            
        }

        ellipse(this.x, this.y, this.width,this.width);
    }

  }

Another problem is I intend to add in a new big ellipse that moves with the flow when mouseClicks, but the snippet below isn’t working:

    if (mouseIsPressed) {
        myBubble=new bubble(mouseX, mouseY,100,100);
        myBubble.display();
    }