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.
Hello,
An example:
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:
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:
:)
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 
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.
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?
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;
}
}
Array version:
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.
:)
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
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.
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.
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.
Great job! Classes are a simple solution to having to have arrays for each parameter that you’re interesting in, eg. instead of:
xPositions = new float[numLeds];
yPositions = new float[numLeds];
ledStatus = new boolean[numLeds];
ledLabel = new String[numLeds];
you get:
LED allMyLeds = new LED[numLeds];
whereby all data is stored inside each LED object, like:
println(allMyLeds[0].x);
println(allMyLeds[0].y);
println(allMyLeds[0].status);
println(allMyLeds[0].label);
Thank you… I will look at all this data tomorrow. Brain is dead at this time. Thank you so much you all.
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.
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;
}
Are the “b1s, b2s, b3s” necessary here? or could it be just
boolean flag;
???
EDIT: To answer my question, yes. I can leave just “boolean flag;”