# Making a circle disappear when clicked on

**URL:** <https://discourse.processing.org/t/making-a-circle-disappear-when-clicked-on/18239>\
**Category:** Coding Questions\
**Created:** [February 29, 2020, 4:49am UTC](https://discourse.processing.org/t/making-a-circle-disappear-when-clicked-on/18239 "2020-02-29T04:49:48Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![meh](https://avatars.discourse-cdn.com/v4/letter/m/45deac/32.png) [@meh](https://discourse.processing.org/u/meh)\
**Post date:** [February 29, 2020, 4:49am UTC](https://discourse.processing.org/t/making-a-circle-disappear-when-clicked-on/18239/1 "2020-02-29T04:49:49Z")

</div>

I have some experience with java but I am new to p5js. I created a game with circles falling down and you gain 1 point every time you click on a circle, also when a circle reaches the bottom of the screen you lose a life. When you click on the circle it should disappear but it doesn’t, also the score doesn’t increase. Any help will be appreciated.

[code](https://www.openprocessing.org/sketch/850165/)

```auto
/*
-Goal of the Game is to click on as many circles as you can. 
-You start with 5 Lives. Lives get deducted by 1 for each circle that reaches the bottom of the screen.
-You get 1 point for each circle clicked
-Game is over when you have 0 Lives
-The game over screen will show you your score
-As you click on circles the curve following the mouse will change color
-The game over screen background will change to the average color of all the circles that was clicked on
*/

	let strokeColor;
	let circles;
  let mode = 0;
	let score =0;
	let lives = 5;
	let c2, avgColor;
	let totalPopped;
	var min_xPos=10, max_xPos=900;
	var min_yPos= -800, max_yPos=-10;
	var min_speed=1, max_speed= 2;
	var min_diam =30, max_diam=120;
  
  function setup(){
    createCanvas(900,900);
		strokeColor = color(0,255,255);
		circles = new Array(10);
    for (var i =0; i<circles.length; i++){
      circles[i] = new Circle();
    }
  }
  
  function draw(){
    if(mode == 0){
      splash();}
    if(mouseIsPressed == true){
      mode =1;}
    if (mode == 1){
      startGame();}
  }
  function startGame(){   
    background(0);
    textSize(30);
    fill(255);
    text( "Score: " + score, 50, 400);
    text("Lives: " + lives, 50, 450);
    drawCurves();
    
    for (var i = 0; i < circles.length; i++) {
      circles[i].createCircles();
      circles[i].GameOver();
    }
  }
  
  function splash(){
    background(0);
    fill(255);
    textSize(50);
    var s = "Goal is to destroy as many circles as you can. You gain 1 point for every circle you click on. You loose 1 life for every circle that touches the bottom of the screen. The game is over when you have no more lives. ";
    text(s,50,50,800,800);
    fill(255,0,0);
    text( "Click anywhere to start Game ", 100, 700);
  }

  function drawCurves(){
    noFill();
    stroke(strokeColor);//set the color to be the popped the circle
    strokeWeight(3);
    bezier(mouseX, mouseY,random(0,width),mouseY+random(0,height),random(0,width),mouseY,width/2,height);//create random curves following the mouse
  }
  
  function mouseClicked(){
		for (var i = 0; i < circles.length; i++) {
      if (circles[i].clickedCircle(mouseX, mouseY)){
        strokeColor=c2;//get the color from the clicked circle 
        score++;
        circles[i].isClicked = false;
        break;
      }
    }
}

class Circle{

  constructor(){
    this.circleSettings();
  }
  
  circleSettings(){//set values for position,createCanvas, speed and color for the circles
    this.isClicked = true;
    this.c = color(random(255),random(255),random(255));
    this.xpos = random(min_xPos, max_xPos);
    this.ypos = random(min_yPos, max_yPos);
    this.speed = random(min_speed, max_speed);
    this.diameter = random(min_diam, max_diam);
  }
  
  createCircles() {
    if(!this.isClicked){
      this.circleSettings();
    }
    this.move();
    this.draw_Circles();
  }
  
  move(){
		let dif = this.ypos-this.diameter;
    if (dif <= height){//the circles has not yet reached the bottom increase the speed.
      this.ypos += this.speed;
		}
    else if (dif > height ){//the circle reached the bottom of the screen minus 1 life
      this.isClicked = false;
      lives--; 
    }
  }
  
  draw_Circles(){
    fill(this.c);
    stroke(255);
    ellipse(this.xpos,this.ypos,this.diameter,this.diameter);
  }
  
  clickedCircle(mouseX, mouseY){
		var d = dist(mouseX, mouseY, this.xPos, this.yPos);
		 if (d < this.diameter / 2){
      c2 = this.c; // get the color of the current circle to set for color of curves
      totalPopped++;
      this.getAverage(c2);//get the average of all the popped circles colors 
      return true;    
    }else{
      return false;
    }
  }
  getAverage(tmp){
    var ravg =0, bavg=0, gavg=0;
    let redVal = red(tmp);//get the individual rgb values of the clicked circle
    let greenVal = green(tmp);
    let blueVal = blue(tmp);
    ravg += redVal;
    gavg += greenVal;
    bavg += blueVal;
    ravg = constrain(redVal,0,255);
    gavg = constrain(greenVal,0,255);
    bavg = constrain(blueVal,0,255);
    if(totalPopped == 0){
      avgColor= color(0);
    }else{ 
      ravg = ravg/ height * width;
      bavg = bavg/ height * width;
      gavg = gavg/ height * width;
      avgColor= color(ravg,gavg,bavg);
    }
    
  }
  GameOver(){
    if(lives == 0){
      background(avgColor);//set the background to be the average color of all the circles popped
      textSize(50);
      fill(255);
      text( "Game Over", 300, 300);
      text( "Score: " + score, 300, 400);
      setup();
    }
  }
  
}
  

```

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [February 29, 2020, 5:55pm UTC](https://discourse.processing.org/t/making-a-circle-disappear-when-clicked-on/18239/2 "2020-02-29T17:55:36Z")

</div>

check the variables in your dist within the `clickedCircle()` method, they don’t match your variable names.

you should also avoid naming your parameters mouseX/mouseY.

---

<div class="post-metadata">

**Author:** ![endurance21](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/endurance21/32/8149_2.png) [@endurance21](https://discourse.processing.org/u/endurance21)\
**Post date:** [February 29, 2020, 7:45pm UTC](https://discourse.processing.org/t/making-a-circle-disappear-when-clicked-on/18239/3 "2020-02-29T19:45:30Z")

</div>

@meh  
simply , check if the circle is clicked and if yes then pop out the circle from circle array  
!  
that’s it  
for this you will need to give every circle a id , to keep track which circle to pop out !

---

<div class="post-metadata">

**Author:** ![meh](https://avatars.discourse-cdn.com/v4/letter/m/45deac/32.png) [@meh](https://discourse.processing.org/u/meh)\
**Post date:** [March 1, 2020, 12:56am UTC](https://discourse.processing.org/t/making-a-circle-disappear-when-clicked-on/18239/4 "2020-03-01T00:56:38Z")

</div>

I thought mouseX and mouseY is a system variable to get the x and y position of the mouse?  
I first made this game in Processing and it was working fine, but now I need it in p5js. So I have been trying to figure out what changes I need to make this work in p5js.

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [March 1, 2020, 2:08am UTC](https://discourse.processing.org/t/making-a-circle-disappear-when-clicked-on/18239/5 "2020-03-01T02:08:27Z")

</div>

They are system variables … but if you don’t pass the arguments mouseX/mouseY will be undefined within that method. Seems like it’s an opening for confusion.

```auto
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  logMousePos();
}

const logMousePos = (mouseX,mouseY) => {
 console.log(mouseX,mouseY); 
}

```

---

<div class="post-metadata">

**Author:** ![meh](https://avatars.discourse-cdn.com/v4/letter/m/45deac/32.png) [@meh](https://discourse.processing.org/u/meh)\
**Post date:** [March 1, 2020, 4:57pm UTC](https://discourse.processing.org/t/making-a-circle-disappear-when-clicked-on/18239/6 "2020-03-01T16:57:06Z")

</div>

thanks for that idea. I got it to work using this method, but then there are no more circles falling down. so i created an if statement checking if there are less than 4 circles to push more circles in the array. This was the only way I can think of to have it continuously falling circles. Is there a better way?

---

<div class="post-metadata">

**Author:** ![meh](https://avatars.discourse-cdn.com/v4/letter/m/45deac/32.png) [@meh](https://discourse.processing.org/u/meh)\
**Post date:** [March 1, 2020, 5:03pm UTC](https://discourse.processing.org/t/making-a-circle-disappear-when-clicked-on/18239/7 "2020-03-01T17:03:16Z")

</div>

thanks for the explanation. I see what I did wrong, the game is slowly coming together.