I have 4 buttons each shaped an arc.
The 4 buttons:
I made the buttons like this:
button1 = cp5.addButton("A1") // The button for the first area. The other 3 buttons will be "A2" , "A3" , "A4"
.setValue(128)
.setPosition(pos1.x,pos1.y) // x and y relative to the group
.setImages(ring1_imgs[0], ring1_imgs_1[0], ring1_imgs[1])
.updateSize()
.moveTo(AreaRingGroup); // add it to the group
;
In this case, the mouseClick is active in a rectangular way by default, in the size of the images. But I want the buttons to be active only if the mouse is inside the arcs.
so in draw(), I wrote these:
int dx = mouseX - centerX;
int dy = mouseY - centerY;
float c_2 = sqrt(dx*dx + dy*dy);
int r2 = (outerRadius);
int r1 = (innerRadius);
if( c_2 < r2 && c_2 > r1){
button1.setMouseOver(true);}
else{
button1.setMouseOver(false);}
So; if the distance from the center is smaller than the outer and bigger than the inner radius, the button should be active, otherwise it should stay still.
I think the basic math algorithm I wrote is true, but I don’t know how to implement this condition to the cp5 button, like which parameters should I use for mouseclicks. There is setImages(); that is using 3 images for 3 mouseclick conditions so I should make sure this arc-condition is true for all the 3 images.
Collision detection for mouse circle is simple it’s a simple distance call, then using atan2 you can figure out what quadrant the mouse is in. You should from there be able to know which button you should be interacting with.
Could you be more specific and explain it using my codes? I emphasized the problem in the last paragraph; How to implement the mouse algorithm to the CP5 button functions-parameters.
Hello, there are 4 buttons like quarters of 1 circle.
For example:
Here my mouse is over the first arc(first button):
Here I click on the first arc (first button):
But these over-and-click situations are in the rectangular form now and I want to be able to click exactly on the arcs. Using setMouseOver had no effect at all and I don’t know how to implement the math algorithm to this cp5 buttons.
I would say that you have a problem in there because when you set the images the button assumes they are squared images not arc. So the default mouseOver detection would fail.
When you set .setPosition(pos1.x,pos1.y) // x and y relative to the group,
Are they relative to which point of the image group? the middle?
float theta = atan2(y-mouse.y,x-mouse.x);
//test radius dist(mouse.x,mouse.y,x,y)<someDist&&
//test which quadrant the mouse is in
I may be wrong about the placement of the quadrants in respect to processing I forget exactly how they do it, but a quick test should inform you
//if(theta>0&&theta<pi/2) == top left
if(theta>pi/2&&theta<pi) == top right
if(theta>pi&&theta<3/2pi)==bottom left
if(theta>3/2pi&&theta<2pi)==bottom right
if(you wanted to only interact with the arc area you would need to do another radius test
the first one would give you the max dist then you would need another one
also please note that at this point the center of the circle you are testing is the center where all your images meet, the radius is the width of the images
But my problem is implementing this solution to cp5. addButton methods, I don’t know how to use these calculations within the controlP5 Button. You are showing the algorithm but I am struggling with implementing these algorithms to the controlP5 Button.
Let’s say I made the calculations just like you showed. There is a .setMouseOver() method within the controlP5 Button, right? So if use an if statement with your calculations and set the .setMouseOver() accordingly, it should work. But it does not work like this. My problem is how to implement these new mouseClick conditions to the cp5 Button methods.
OK I understand your problem. Unfortunately I’m not familiar with controlp5 or how the setMouseOver() method works, have you checked their github to look at the underlying code?
I’m looking through the cp5 contributed examples and I honestly dont know how to assign the logic you are looking for, everything is handled under the hood.
