# Create 8 clickable circles

**URL:** <https://discourse.processing.org/t/create-8-clickable-circles/32002>\
**Category:** Coding Questions\
**Created:** [August 29, 2021, 11:01pm UTC](https://discourse.processing.org/t/create-8-clickable-circles/32002 "2021-08-29T23:01:29Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![jhsa](https://avatars.discourse-cdn.com/v4/letter/j/e47c2d/32.png) [@jhsa](https://discourse.processing.org/u/jhsa)\
**Post date:** [August 29, 2021, 11:01pm UTC](https://discourse.processing.org/t/create-8-clickable-circles/32002/1 "2021-08-29T23:01:29Z")

</div>

I have been looking for examples on how to draw 8 clickable circles. The idea is to emulate 8 LEDs, and turn them ON/OFF when clicking on them with the mouse.

I have been playing with the example I found (that one with a circle and a rectangle changing the background color) but I don’t really understand how I could modify it for my needs.  
Thank you in advance for your help.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 30, 2021, 12:16am UTC](https://discourse.processing.org/t/create-8-clickable-circles/32002/2 "2021-08-30T00:16:09Z")

</div>

Hello,

An example:

```auto
int x, y;  
color b1, b2, b3;

// Button state
boolean b1s, b2s, b3s, flag;

void setup() 
	{
  size(220, 220);
  b1 = b2 = b3 = color(100);
	}

void draw() 
	{
  background(0);
  
  if (flag)
    {      
    update1();
    flag = false;
    }
  update2();
  }

void update2()
  {
  if (b1s)
    b1 = color(255, 0, 0);  
  else
    b1 = color(0, 255, 0);
    
  if (b2s)
    b2 = color(255, 0, 0);  
  else
    b2 = color(0, 255, 0);

  if (b3s)
    b3 = color(255, 0, 0);  
  else
    b3 = color(0, 255, 0);
    
  fill(b1);
  rect(100, 50, 20, 20);
  fill(b2);
  rect(100, 100, 20, 20);
  fill(b3);
  rect(100, 150, 20, 20);        
  }

void update1()
  {
  if (x>100 && x<120 && y>50 && y<50+20)
      {
      b1s = !b1s;  
      }
      
  else if (x>100 && x<120 && y>2*50 && y<2*50+20)
      {
      b2s = !b2s; 
      }

  else if (x>100 && x<120 && y>3*50 && y<3*50+20)
      {
      b3s = !b3s;   
      }
  }
    
void mouseReleased()
  {
  x = mouseX;
  y = mouseY;
  println(x, y);
  flag = true;
  }

```

Inspired by:

> **[Button / Examples](https://processing.org/examples/button.html)**
>
> Click on one of the colored shapes in the center of the image to change the color of the background.

You can modify this for circles.

Next step would be to add arrays to keep track of button location, states and colors in an array.

Even better would be to create a button class.

There may be some GUI libraries that simplify all this for you.

I did some cools stuff years ago with those simple examples:

> **Old School**
>
> ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/aed61df066f4c858d5a591558d15cde6656044fd.png)

`:)`

---

<div class="post-metadata">

**Author:** ![jhsa](https://avatars.discourse-cdn.com/v4/letter/j/e47c2d/32.png) [@jhsa](https://discourse.processing.org/u/jhsa)\
**Post date:** [August 30, 2021, 12:27am UTC](https://discourse.processing.org/t/create-8-clickable-circles/32002/3 "2021-08-30T00:27:24Z")

</div>

Thanks, create a button class? I have just started crawling on this processing thing, and you want me to create classes? 😃  
I have been trying to make a button disappear behind a circle, but still clickable. \>No success, if I make all the button transparent, there is still a black square. It looks like that for processing transparent means black ☹

---

<div class="post-metadata">

**Author:** ![jhsa](https://avatars.discourse-cdn.com/v4/letter/j/e47c2d/32.png) [@jhsa](https://discourse.processing.org/u/jhsa)\
**Post date:** [August 30, 2021, 12:29am UTC](https://discourse.processing.org/t/create-8-clickable-circles/32002/4 "2021-08-30T00:29:05Z")

</div>

I do understand your code though. I have been trying to play with arrays but still don’t understand them in processing. I am fine with them on Arduino.

---

<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:** [August 30, 2021, 12:38am UTC](https://discourse.processing.org/t/create-8-clickable-circles/32002/5 "2021-08-30T00:38:55Z")

</div>

Hi jhsa,

Don’t know if this makes sense to you (yet), but this would be a nice case to learn about / use classes.

It was tempting to solve it for you, but perhaps you can have a look at this start, and fill in the blanks?

```auto
LED led1;
LED led2;
LED led3;
LED led4;

void setup() {
  size(500, 300);

  // create your four "LED" objects
  led1 = new LED("led 1", 100, 150, 50);
  led2 = new LED("led 2", 200, 150, 50);
  led3 = new LED("led 3", 300, 150, 50);
  led4 = new LED("led 4", 400, 150, 50);
}

void draw() {
  background(200);

  // draw your LEDs
  led1.display();
  led2.display();
  led3.display();
  led4.display();
  
  // typing all these lines again and again is repetitive..
  // have you heard of arrays and for loops?
}

/* below is the class definition of your new "LED" object/datatype */
/* - it's a blueprint for objects you create, or 'instance'. */

class LED {

  // properties
  String label;
  float x, y, size;
  boolean isOn;

  /* this is called the constructor */
  /* which is called when you make a new LED instance, like: "myLed = new LED("cool led", 10, 10, 50);" */
  LED(String _label, float _x, float _y, float _size)
  {
    // here we're just passing in data, storing it in the class
    label = _label;
    x = _x;
    y = _y;
    size = _size;
  }

  /* inside here, you should check if the mouse is currently over the LED && if the mouse is pressed */
  /* and if so, toggle the "isOn" property */
  void update() {
  }

  /* here we draw ourselves */
  void display() {
    ellipse(x, y, size, size);
  }

  /* should return when the mouse is close / over the LED */
  boolean isMouseOver() {
    // how could you check if this is true?
    return false;
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 30, 2021, 12:43am UTC](https://discourse.processing.org/t/create-8-clickable-circles/32002/6 "2021-08-30T00:43:58Z")

</div>

Array version:

```auto
int x, y;  
//color b1, b2, b3;

boolean [] bState = new boolean[3];
color [] bCol = new color[3];

// Button state
boolean b1s, b2s, b3s, flag;

void setup() 
  {
  size(220, 220);
  //b1 = b2 = b3 = color(100);
  }

void draw() 
  {
  background(0);
  
  if (flag)
    {      
    update1();
    flag = false;
    }
  update2();
  }

void update2()
  {
  //if (b1s)
  // b1 = color(255, 0, 0);  
  //else
  // b1 = color(0, 255, 0);
    
  //if (b2s)
  // b2 = color(255, 0, 0);  
  //else
  // b2 = color(0, 255, 0);

  //if (b3s)
  // b3 = color(255, 0, 0);  
  //else
  // b3 = color(0, 255, 0);
    
  for (int i = 0; i<3; i++)
    {
  if (bState[i])
    bCol[i] = color(255, 0, 0);  
  else
    bCol[i] = color(0, 255, 0);    
    }
  
    
  fill(bCol[0]);
  rect(100, 50, 20, 20);
  fill(bCol[1]);
  rect(100, 100, 20, 20);
  fill(bCol[2]);
  rect(100, 150, 20, 20);        
  }

void update1()
  {
  if (x>100 && x<120 && y>50 && y<50+20)
      {
      bState[0] = ! bState[0];
      //b1s = !b1s;  
      }
      
  else if (x>100 && x<120 && y>2*50 && y<2*50+20)
      {
      bState[1] = ! bState[1];
      //b2s = !b2s; 
      }

  else if (x>100 && x<120 && y>3*50 && y<3*50+20)
      {
      bState[2] = ! bState[2];  
      //b3s = !b3s;   
      }
  }
    
void mouseReleased()
  {
  x = mouseX;
  y = mouseY;
  println(x, y);
  flag = true;
  }

```

I added some arrays and you can see how that starts to simplify things.

`:)`

---

<div class="post-metadata">

**Author:** ![jhsa](https://avatars.discourse-cdn.com/v4/letter/j/e47c2d/32.png) [@jhsa](https://discourse.processing.org/u/jhsa)\
**Post date:** [August 30, 2021, 12:44am UTC](https://discourse.processing.org/t/create-8-clickable-circles/32002/7 "2021-08-30T00:44:49Z")

</div>

Thanks, still a bit hard to understand, but I will look at it with a fresh brain tomorrow. At the moment my brain feels like a squashed tomato 😃

---

<div class="post-metadata">

**Author:** ![jhsa](https://avatars.discourse-cdn.com/v4/letter/j/e47c2d/32.png) [@jhsa](https://discourse.processing.org/u/jhsa)\
**Post date:** [August 30, 2021, 12:52am UTC](https://discourse.processing.org/t/create-8-clickable-circles/32002/8 "2021-08-30T00:52:46Z")

</div>

Thank you, so bState is actually the LED state detection, right?  
I am reading an emulated eeprom from a text file. In this case every bit of a byte represents the state of each LED. I read these bits and display them, color 1 for OFF and color 2 for ON. then i can change each state by clicking on them. Then i save the new state back to the correct emulated eeprom address.

---

<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:** [August 30, 2021, 12:53am UTC](https://discourse.processing.org/t/create-8-clickable-circles/32002/9 "2021-08-30T00:53:56Z")

</div>

Classes are great, and really you shouldn’t be afraid of them - they’re really not scary or complicated…! 🙂 If anything they make your code look nice and should feel more intuitive. And very cool! You’re going to make your own datatypes! Like String, PShape or Table, you can now make your own!

What may also help is that normally you reserve a tab for each class definition in the Processing window, so they don’t clutter your main window. So the whole section after "class LED { " you can cut and paste into a new tab.

---

<div class="post-metadata">

**Author:** ![jhsa](https://avatars.discourse-cdn.com/v4/letter/j/e47c2d/32.png) [@jhsa](https://discourse.processing.org/u/jhsa)\
**Post date:** [August 30, 2021, 1:00am UTC](https://discourse.processing.org/t/create-8-clickable-circles/32002/10 "2021-08-30T01:00:31Z")

</div>

Yeah, I am doing that, sort of. As I said, I am still crawling… I did already achieve quite a lot with the wonderful help I have been getting on these forums. Thank you.

 ![ProcessingIDE](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/94e284169c651cae100bc49aafbcc94750cdc5bd.png)

---

<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:** [August 30, 2021, 1:14am UTC](https://discourse.processing.org/t/create-8-clickable-circles/32002/11 "2021-08-30T01:14:40Z")

</div>

Great job! Classes are a simple solution to having to have arrays for each parameter that you’re interesting in, eg. instead of:

```auto
 xPositions = new float[numLeds];
 yPositions = new float[numLeds];
 ledStatus = new boolean[numLeds];
 ledLabel = new String[numLeds];

```

you get:

```auto
 LED allMyLeds = new LED[numLeds];

```

whereby all data is stored inside each LED object, like:

```auto
 println(allMyLeds[0].x);
 println(allMyLeds[0].y);
 println(allMyLeds[0].status);
 println(allMyLeds[0].label);

```

---

<div class="post-metadata">

**Author:** ![jhsa](https://avatars.discourse-cdn.com/v4/letter/j/e47c2d/32.png) [@jhsa](https://discourse.processing.org/u/jhsa)\
**Post date:** [August 30, 2021, 1:18am UTC](https://discourse.processing.org/t/create-8-clickable-circles/32002/12 "2021-08-30T01:18:34Z")

</div>

Thank you… I will look at all this data tomorrow. Brain is dead at this time. Thank you so much you all.

---

<div class="post-metadata">

**Author:** ![jhsa](https://avatars.discourse-cdn.com/v4/letter/j/e47c2d/32.png) [@jhsa](https://discourse.processing.org/u/jhsa)\
**Post date:** [August 30, 2021, 2:24am UTC](https://discourse.processing.org/t/create-8-clickable-circles/32002/13 "2021-08-30T02:24:17Z")

</div>

Ok, please see what I did with your code. Am I on the right path? I think it got a bit smaller and I can just easily increase the number of circles.  
I can also tweak the position of the LEDs by adding or subtracting the value of “n” I guess…  
I am going to bed now. It is 4:30 in the morning here 😛  
Thank you so much to all of you.

EDIT: Mistake fixed in the code below.

```auto
int x, y;  
//color b1, b2, b3;
int NumberOfLEDs = 3;
boolean [] bState = new boolean[NumberOfLEDs];
color [] bCol = new color[NumberOfLEDs];

// Button state
boolean b1s, b2s, b3s, flag;
int circleX = 50;
int circleY = 50;
int diam = 20;

void setup() 
  {
  size(220, 220);
  //b1 = b2 = b3 = color(100);
  }

void draw() 
  {
  background(0);
  
  if (flag)
    {      
    update1();
    flag = false;
    }
  update2();
  }

void update2()
  {
 
    
  for (int i = 0; i<NumberOfLEDs; i++)
    {
  if (bState[i])
    bCol[i] = color(255, 0, 0);  
  else
    bCol[i] = color(0, 255, 0);    
    }
  
  for (int q = 0; q<NumberOfLEDs; q++) {
    int n = circleX + (q*circleX);
    fill(bCol[q]);
  circle(n, circleY, 20);
  }

  }

void update1()
  {
    for(int q = 0;q<NumberOfLEDs; q++) {
     int n = circleX + (q*circleX); 
   if (x > n - (diam/2) && x < n +(diam/2) && y > circleY - (diam/2) && y < circleY +(diam/2))
      {
      bState[q] = ! bState[q];
 
      }
    }

  }
    
void mouseReleased()
  {
  x = mouseX;
  y = mouseY;
  println(x, y);
  flag = true;
  }

```

---

<div class="post-metadata">

**Author:** ![jhsa](https://avatars.discourse-cdn.com/v4/letter/j/e47c2d/32.png) [@jhsa](https://discourse.processing.org/u/jhsa)\
**Post date:** [August 30, 2021, 2:33am UTC](https://discourse.processing.org/t/create-8-clickable-circles/32002/14 "2021-08-30T02:33:21Z")

</div>

> [@jhsa](#):
>
> `boolean b1s, b2s, b3s, flag;`

Are the “b1s, b2s, b3s” necessary here? or could it be just

```auto
boolean flag;

```

???

EDIT: To answer my question, yes. I can leave just “boolean flag;”