# Click on shape in array
**URL:** https://discourse.processing.org/t/click-on-shape-in-array/10515
**Category:** Coding Questions
**Created:** [April 21, 2019, 11:12am UTC](https://discourse.processing.org/t/click-on-shape-in-array/10515 "2019-04-21T11:12:54Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@Tims](https://discourse.processing.org/u/Tims)
#### Post date: [April 21, 2019, 11:12am UTC](https://discourse.processing.org/t/click-on-shape-in-array/10515/1 "2019-04-21T11:12:54Z")
Hi everyone. I’m currently trying to create several shapes where each shape can be clicked on seperately. I currently have an array of rectangles which are being drawn onto the screen. I want to be able to click on a rectangle and have it change color without having the other rectangles change color as well. Somehow the code I have right now doesn’t work as nothing happens at all. What am I doing wrong?
```auto
int[] rects = new int[3];
int x = 20;
int y = 100;
int h = 100;
int marge = 20;
int w = ((600 - ((rects.length+1)*marge)) / rects.length);
void setup() {
size(600, 500);
}
void draw() {
drawRect();
}
void mousePressed() {
for (int i = 0; i < rects.length; i++) {
if (mouseX >= x && mouseX <= x + w && mouseY >= y && mouseY <= y + h) {
fill(0);
}
else {
fill(255);
}
}
}
void drawRect() {
for(int i = 0; i < rects.length; i++) {
rect(x, y, w, h);
x += w + marge;
}
}
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [April 21, 2019, 11:38am UTC](https://discourse.processing.org/t/click-on-shape-in-array/10515/2 "2019-04-21T11:38:43Z")
Good code, good that you use functions already! Well done!
**Several issues though.**
first since it’s a animation, I recommend to start draw with `background(110);`
Now you increase x in drawRect. You should increase x in mousePressed too, so it checks the right areas with if.
But since drawRect is called 60 times per second, you should reset x to 20 at the beginning of drawRect and of mousePressed too. Otherwise it gets too big
Now when you change your code, you will see effects on mouse pressed, but **all** rects are either black or white. Bad.
Now, the fill commands in mousePressed are useless. This is because, draw runs so often, that the fill in mousePressed are forgotten (except the last one, but this will count for all rects. Bad).
**Solution**
Instead, in mousePressed store the color for each rect in a new array `col` and use it in `drawRect`
**before setup:**
`color[] col = new color[3];`
As you can see, we have as many colors as we have rects.
So both arrays are parallel:
- The 0th entry of the array col tells us the color for the 0th rect,
- the 2nd entry in coll tells us the color for the 1st rect etc.
we store the color for each rect in the array `col`
A color is like a list
**in setup**
```auto
for (int i = 0; i < rects.length; i++) {
col[i] = color (0);
}
```
we give each entry in the array col a color. All black.
col[i] = means: we define the **i** th entry in the array/list col
**in mousePressed**
`col[i] = color (150); e.g. (and if you like col[i] = color (255,0,0);` // red )
Now, when a rect is clicked, we change its color. You can make it so that only one rect is red and all others go back to black.
Or you make it so that you can toggle each rect separately between red and black - more difficult I think!
**in drawRect**
`fill(col[i]);`
- we use the rect’s color
- we must use fill **before** the rect() command
- col[i] gives us the color in the entry number **i** in `col`.
I hope this helps! There can be more improved in your code but we come to that later.
Welcome to the forum!
Regards, Chrisir
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [April 21, 2019, 12:13pm UTC](https://discourse.processing.org/t/click-on-shape-in-array/10515/3 "2019-04-21T12:13:57Z")
sorry, but
[Gryd System Graphic Design](https://discourse.processing.org/t/gryd-system-graphic-design/10457/14) here
i just posted a array of class of rect
for a other purpose,
pls test with key ‘f’
and after use mouse right click and left click