# How to rotate the buttons in Processing

**URL:** https://discourse.processing.org/t/how-to-rotate-the-buttons-in-processing/32228
**Category:** Libraries
**Created:** [September 13, 2021, 12:56pm UTC](https://discourse.processing.org/t/how-to-rotate-the-buttons-in-processing/32228 "2021-09-13T12:56:17Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![seym](https://avatars.discourse-cdn.com/v4/letter/s/4491bb/32.png) [@seym](https://discourse.processing.org/u/seym)
#### Post date: [September 13, 2021, 12:56pm UTC](https://discourse.processing.org/t/how-to-rotate-the-buttons-in-processing/32228/1 "2021-09-13T12:56:17Z")

</div>

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](https://i.stack.imgur.com/d7fpD.png)](https://i.stack.imgur.com/d7fpD.png)

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 
  ; 

```

---

<div class="post-metadata">

### Author: ![rapatski](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rapatski/32/5164_2.png) [@rapatski](https://discourse.processing.org/u/rapatski)
#### Post date: [September 14, 2021, 9:03am UTC](https://discourse.processing.org/t/how-to-rotate-the-buttons-in-processing/32228/2 "2021-09-14T09:03:28Z")

</div>

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:

> [@Does anyone know how to rotate 90º a Textfield in ControlP5?](https://discourse.processing.org/t/does-anyone-know-how-to-rotate-90-a-textfield-in-controlp5/26962/6):
>
> I’ve got a almost complete gui sketch you can make use of if you want, it’s large though you could add a method or a class initializer to do the rotation. It isn’t as fully featured as g4p or control p5 and currently is pc only, but it includes menus tabs windows sliders and buttons.

---

<div class="post-metadata">

### Author: ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)
#### Post date: [September 14, 2021, 9:22am UTC](https://discourse.processing.org/t/how-to-rotate-the-buttons-in-processing/32228/3 "2021-09-14T09:22:25Z")

</div>

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.