Multiple Image-Buttons That will Shape a Circle Together

Processing Libraries
1

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);

  }
}
2

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)

1 Like