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.

Please provide your full code so we can help you.
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
Schijfstraal is the radius.
Raak = hit
mis = miss
it will return a hit to my text.

JeffreyThompson.org/collision-detection/point-circle.php

1 Like

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

Please post your full code.

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

Please format your code :blush:

It consist on these two steps:

  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: </>

That’s it! Please notice you do not create a new post in case you need to format something you already posted. You can edit your post, copy the code to the PDE, indent the code properly there and then past it back here, format the code and >> save << the edits.

Extra info:

Formatting your code makes everybody’s life easier, your code looks much better plus it ensures your code integrity is not affected by the forum’s formatting (Do you know the forum processes markup code?) Please visit the sticky posts or the FAQ section/post to learn about this, other advantages and super powers you can get in this brand new forum.

Kf