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

**URL:** <https://discourse.processing.org/t/how-to-change-the-color-of-objects-near-mouse-click-location-or-add-a-new-object-on-mouseclick-in-p5-js/7884>\
**Category:** Coding Questions\
**Created:** [January 27, 2019, 5:00pm UTC](https://discourse.processing.org/t/how-to-change-the-color-of-objects-near-mouse-click-location-or-add-a-new-object-on-mouseclick-in-p5-js/7884 "2019-01-27T17:00:08Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![blkpanther](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Post date:** [January 27, 2019, 5:00pm UTC](https://discourse.processing.org/t/how-to-change-the-color-of-objects-near-mouse-click-location-or-add-a-new-object-on-mouseclick-in-p5-js/7884/1 "2019-01-27T17:00:08Z")

</div>

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!

```auto
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:

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

```