rect change color on click

Programming Questions

rhnorskov

in Programming Questions • 9 months ago

Hello, I have made some buttons, and I cant figure out how to make them change color when clicked, and when another button is clicked the other button will change back to it's original color.

Thanks in advance

color selected = 150;
void setup () {
size (500, 350);
textAlign(CENTER, CENTER);
}
void button (int nr, String text, int filter) {
int buttonW = 70;
int buttonH = 20;
int buttonX = nr*(buttonW+10)-buttonW;
int buttonY = height-(buttonH+10);
fill (selected);
rect (buttonX, buttonY, buttonW, buttonH);
fill (0);
text (text, buttonX+buttonW/2, buttonY+buttonH/2);
}
void draw () {
button(1, "Button1", GRAY);
button(2, "Button2", GRAY);
button(3, "Button3", GRAY);
button(4, "Button4", GRAY);
button(5, "Button5", GRAY);
button(6, "Button6", GRAY);
}

Replies(3)

PhiLho

Re: rect change color on click

9 months ago

You should look into classes, it is easier with them!

But well, if you stick to procedural, you have to search how to check when mouse is over a rectangle. There are some button example sketches coming with Processing.

asimes

Re: rect change color on click

9 months ago

PhiLho is right, this should be done with a class, the code to make this work looks quite ugly:

color selected = 150;
boolean[] isSelected = new boolean[6];
void setup () {
size (500, 350);
textAlign(CENTER, CENTER);
for (int i = 0; i < 6; i++) isSelected[i] = false;
}
void button (int nr, String text, int filter) {
int buttonW = 70;
int buttonH = 20;
int buttonX = nr*(buttonW+10)-buttonW;
int buttonY = height-(buttonH+10);
if (isSelected[nr-1]) fill(255, 0, 0);
else fill(selected);
rect(buttonX, buttonY, buttonW, buttonH);
fill(0);
text(text, buttonX+buttonW/2, buttonY+buttonH/2);
}
void draw () {
button(1, "Button1", GRAY);
button(2, "Button2", GRAY);
button(3, "Button3", GRAY);
button(4, "Button4", GRAY);
button(5, "Button5", GRAY);
button(6, "Button6", GRAY);
}
void mousePressed() {
for (int i = 0; i < 6; i++) {
if (mouseY > height-30 && mouseY < height-10) {
int left = i*70+i*10+10;
if (mouseX > left && mouseX < left+70) {
for (int j = 0; j < 6; j++) isSelected[j] = false;
isSelected[i] = true;
break;
}
}
}
}

asimes

Re: rect change color on click

9 months ago

Button[] examples = new Button[6];
void setup() {
size(500, 350);
for (int i = 0; i < examples.length; i++) {
examples[i] = new Button(10+i*70+i*10, height-30, 70, 20);
}
}
void draw() {
for (int i = 0; i < examples.length; i++) examples[i].display();
}
class Button {
boolean selected = false;
int x, y, w, h;
Button(int inX, int inY, int inW, int inH) {
x = inX;
y = inY;
w = inW;
h = inH;
}
void display() {
if (selected) fill(255, 0, 0);
else fill(150);
rect(x, y, w, h);
}
boolean clicked() {
return mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h;
}
}
void mousePressed() {
for (int i = 0; i < examples.length; i++) {
if (examples[i].clicked()) {
for (int j = 0; j < examples.length; j++) {
examples[j].selected = false;
}
examples[i].selected = true;
break;
}
}
}

Edit: The advantage of this is that it generally is easier for other people to understand what is happening in your code.

Top Reply