# Detecting mouse click on circle

I am trying to detect a mouse press on a circle. I know how to do so with a square and am using that for the hitbox right now. I would like to know what is supposed to go into my IF statement to detect MouseX and mouseY on the circle.

I Tristan,

You need to compute the distance form your mouse coordinate to the center of the circle. You can use the dist function for that.

Then in your if statement, you need to check whereas that distance is smaller than the radius of your circle or not.

I used dist to calculate the distance from mouseX and mouseY to the CenterX and centerY of the circle. However when i check to see if it’s less than the radius and made a println for it. it results in constantly the same amount. it doesnt change when i move the mouse.

It seems that your are not checking at the right moment.

My code uses variables in the dutch language, but i;ll provide some comments.

``````int teller() {
if (dist(mouseX, mouseY, schietschijfX, schietschijfY) < schijfStraal ) {
raak = raak + 1;
} else mis = mis +1;
return raak;
}
``````

teller = counter
schietschijfX is the X coordinate of the circle. Y is the Y coordinate
Raak = hit
mis = miss
it will return a hit to my text.

I again tried using the distance method but the method always returns the same value even though the mouse coordinates are changing

We don’t know when you are calling your `teller()` method and it might be the problem.

Most of the code is in dutch variables, due to it being a school asignment.
here is all of the code. I hope you can identify the problem with teller being called.

``````void setup() {
size(500, 500);
smooth();
ellipseMode(CENTER);
}

//Starten van spel
boolean startSpel = false;
int raak = 0;
int mis  = 0;

//verplaatsen van schijf
float schietschijfX = 25;
float schietschijfY = height/2;
float schijfStraal  = 20;
float schijfAfstandMouse = dist(mouseX, mouseY, schietschijfX, schietschijfY);

void vierkant() {

//vierkant maken in het scherm
int vierkantBreedte = 100;
int vierkantX       = width/2 - vierkantBreedte/2;
int vierkantHoogte  = 50;
int vierkantY       = height - vierkantHoogte -1;

fill(0, 255, 0);
rect(vierkantX, vierkantY, vierkantBreedte, vierkantHoogte);
}

void startStop() {

//start en stop het spel
int vierkantBreedte = 100;
int vierkantX       = width/2 - vierkantBreedte/2;
int vierkantHoogte  = 50;
int vierkantY       = height - vierkantHoogte -1;
int maxVierkantX  = vierkantX + vierkantBreedte;
int maxVierkantY  = vierkantY + vierkantHoogte;

if (mouseX >= vierkantX && mouseX <= maxVierkantX && mouseY >= vierkantY && mouseY <= maxVierkantY) {
startSpel = !startSpel;
}
}

void textStartStop() {

//start stop text in het vierkant zetten
int middenX = width/2;
int vierkantHoogte  = 50;
int middenYVierkant = height - vierkantHoogte/2;

if (startSpel==false) {
fill(0);
textAlign(CENTER, CENTER);
textSize(25);
text("Start", middenX, middenYVierkant);
}
if (startSpel==true) {
fill(0);
textAlign(CENTER, CENTER);
textSize(25);
text("Stop", middenX, middenYVierkant);
}
}

void schietschijf() {

int schietschijfY         = height/2;
int schietschijf1Diameter = 10;
int schietschijf2Diameter = 20;
int schietschijf3Diameter = 30;
int schietschijf4Diameter = 40;
float xSnelheid           = 3;
int xRichting             = 1;

if (startSpel==true) {

if (schietschijfX > width - schietschijf2Diameter) {
schietschijfX = 0;
}

//schietschijf bewegen
schietschijfX = schietschijfX + (xSnelheid * xRichting) ;

fill(255, 0, 0);
ellipse(schietschijfX, schietschijfY, schietschijf4Diameter, schietschijf4Diameter);
fill(255);
ellipse(schietschijfX, schietschijfY, schietschijf3Diameter, schietschijf3Diameter);
fill(255, 0, 0);
ellipse(schietschijfX, schietschijfY, schietschijf2Diameter, schietschijf2Diameter);
fill(255);
ellipse(schietschijfX, schietschijfY, schietschijf1Diameter, schietschijf1Diameter);
}
}

int teller() {
if(mouseX > schietschijfX-20 && mouseX < schietschijfX+20) {
raak = raak + 1;
}
else if(mouseY > schietschijfY-20 && mouseY < schietschijfY+20) {
raak = raak +1;
}
else { mis = mis +1; }
return raak;

}
//int teller() {
//  if (schijfAfstandMouse < schijfStraal ) {
//   raak = raak + 1;
//  } else mis = mis +1;
//  return raak;
//}

void tekstRaak() {
if (startSpel==true) {
int textX  = 0;
int textY  = 0;
int textX2 = 200;
int textY2 = 0;

//text bovenin scherm
textAlign(LEFT, TOP);
fill(255);
text("Aantal Raak: " + raak, textX, textY);
text("Aantal Mis: " + mis, textX2, textY2);
}
}

void draw() {
println(schijfAfstandMouse);

frameRate(60);
background(0);
//alle verschillende methodes worden uitgevoerd

vierkant();
tekstRaak();
schietschijf();
textStartStop();
}

void mousePressed() {
if (startSpel==true) {
teller();
}
startStop();
}
``````

The reason it doesn’t update is because you placed `teller()` inside `mousePressed()`. Your function will work every time you generate a click with your mouse on the canvas, right? Ify ou want it to change interactively, then you need to move `teller()` to `draw()`.

Also

1. In your code editor (PDE, VS code, Eclipse, etc) ensure you execute the beautifier function. This function automatically indents your code. Auto-indenting makes your code easier to read and helps catching bugs due to mismatch parenthesis, for instance. In the PDE, you use the key combination: `ctrl+t`
2. You copy and paste your code in the forum. Then you select the code and you hit the formatting button aka. the button with this symbol: `</>`