Click on shape in array

Processing Coding Questions
1

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?

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;
  }
}
2

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

  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 ith 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

1 Like
3

sorry, but
Gryd System Graphic Design 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