How to rotate the buttons in Processing

Processing Libraries
1

I have 24 buttons that will shape a circle together.

So, the image of the buttons should look in a rotating way like this:

enter image description here

I want to use the same 3 images (setImages(); 3 images for 3 mouseClick conditions in 1 button) in each of them. I thought I could maybe rotate the buttons instead of loading new images.

Is there any way to rotate the buttons? Or could you give me an idea like what would be the most logical way to do this?

Here is my code:

  for(int i=0; i<3; ++i){
    (imgden1[i] = loadImage("den" + i + ".png")).resize(20,20);} //the same 3 images for all the buttons
    
  for(int k=1; k<25; ++k){  //24 buttons in total
    cp5.addButton("Button" + k)  // The button
    .setPosition((50+40*k),140)  //I will set the algorithm for position later when I solve the rotation problem
    .setImages(imgden1)
    .updateSize()
    .setSize(20, 20)       // (width, height)
    .setFont(font)
    .moveTo(AreaRingGroup);
  
    
  }   // add it to the group 
  ;
1 Like
2

Did you see this? The trick seems to be to disable autoDraw and manually draw the buttons in your own draw loop, rather than settings its position when you create the Controller:

1 Like
3

if we know the location of the buttons and the angle of rotation can we not use standard trig to do collision detection. It does of course adding our own method for detection. But detecting rectangles isnt too hard, then you just have to amend it slightly to account for the angle of rotation. Currently working on something which has taken up a lot of my time so I cant come up with code as an example, though I’m almost done and might consider this later.