# Multiple Image-Buttons That will Shape a Circle Together

**URL:** https://discourse.processing.org/t/multiple-image-buttons-that-will-shape-a-circle-together/32221
**Category:** Libraries
**Created:** [September 13, 2021, 5:18am UTC](https://discourse.processing.org/t/multiple-image-buttons-that-will-shape-a-circle-together/32221 "2021-09-13T05:18:44Z")
**Posts on this page:** 2
**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, 5:18am UTC](https://discourse.processing.org/t/multiple-image-buttons-that-will-shape-a-circle-together/32221/1 "2021-09-13T05:18:44Z")

</div>

I have several buttons that I created like this:

**In the** `setup()`

```
PImage[] imgs1 = {loadImage("AREA1_1.png"),loadImage("AREA1_2.png"),loadImage("AREA1_3.png")};
cp5.addButton("AREA_1") // The button
.setValue(128)
.setPosition(-60,7) // x and y relative to the group
.setImages(imgs1)
.updateSize()
.moveTo(AreaRingGroup); // add it to the group 
; 

```

**After** `draw()`

```
void AREA_1(){
  println("AREA_1");
  if (port != null){ 
      port.write("a\n");
  }

```

Now, I have to add about 24 small buttons from images that are going to be seen as 1 circle. But instead of adding them using `cp5.addButton` like above, I thought I should create a class.

I want to extend the existing CP5 button class because I want to be able to reach the cp5 parameters; like using `.setImages()` for 3 mouseClick conditions for each of the buttons.

**My problem is, I couldn’t figure out**

- How to extend the CP5 button class, so that I can use angles (since I want to place buttons in a circular way) instead of giving x,y positions.

- How to use serial port writings using this class, like the above void (AREA\_1) example.

**Here is my silly attempt:**

```
class myButton extends Button
 {
   myButton(ControlP5 cp5, String theName)
   {
     super(cp5, cp5.getTab("default"), theName, 0,0,0, autoWidth, autoHeight);
   }
   
  PVector pos = new PVector (0,0);
  PVector center = new PVector(500,500);
  PImage[] img = new PImage[3];
  String lable;
  int sizeX = 10, sizeY=10;
  color imgColor;
  Boolean pressed = false;
  Boolean clicked = false;
  
  //Constructor
  myButton(float a, String theName)
  {
    
    //Angle between the center I determined and the position of the 
    button. 
    a = degrees (PVector.angleBetween(center, pos));

    //Every button will have 3 images for the 3 mouseClick conditions.
    for (int i = 0; i < 2; ++i)
        (img[i] = loadImage(lable + i + ".png")).resize(sizeX, sizeY);

  }
}
```

---

<div class="post-metadata">

### Author: ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [September 13, 2021, 12:18pm UTC](https://discourse.processing.org/t/multiple-image-buttons-that-will-shape-a-circle-together/32221/2 "2021-09-13T12:18:29Z")

</div>

Hello,  
You can easily use the x, y coordinates system to position things on a circle.

Imagine a circle at position i, j and of radius r.  
Then given an angle alpha, you can position an object on that circle using the following set of formulas:

x = i + r \* cos(alpha)  
y = j + r \* sin(alpha)