Changing rect color

Programming Questions

etan32

in Programming Questions • 1 year ago

So I'm doing an assignment at the moment and was wondering if anybody could give me assistance on how to change the color of a rect from gray to white with the mousePressed function.

So far this is what i've got, but I'm a little stuck an unsure why it doesn't quite wor

color white = color(255, 255, 255);
color gray = color(105, 105, 105);
int value = gray;
void setup() {
size(500, 500);
}
void draw() {
smooth();
rectMode(CENTER);
background(0);
fill(gray); //Fill Gray
//Row 1
rect(50, 50, 50, 50);
rect(100, 50, 50, 50);
rect(150, 50, 50, 50);
rect(200, 50, 50, 50);
rect(250, 50, 50, 50);
rect(300, 50, 50, 50);
rect(350, 50, 50, 50);
rect(400, 50, 50, 50);
rect(450, 50, 50, 50);
//Row 2
rect(50, 100, 50, 50);
rect(50, 150, 50, 50);
rect(50, 200, 50, 50);
rect(50, 250, 50, 50);
rect(50, 300, 50, 50);
rect(50, 350, 50, 50);
rect(50, 400, 50, 50);
rect(50, 450, 50, 50);
//Row 3
rect(100, 100, 50, 50);
rect(150, 100, 50, 50);
rect(200, 100, 50, 50);
rect(250, 100, 50, 50);
rect(300, 100, 50, 50);
rect(350, 100, 50, 50);
rect(400, 100, 50, 50);
rect(450, 100, 50, 50);
//Row 4
rect(100, 150, 50, 50);
rect(150, 150, 50, 50);
rect(200, 150, 50, 50);
rect(250, 150, 50, 50);
rect(300, 150, 50, 50);
rect(350, 150, 50, 50);
rect(400, 150, 50, 50);
rect(450, 150, 50, 50);
//Row 5
rect(100, 200, 50, 50);
rect(150, 200, 50, 50);
rect(200, 200, 50, 50);
rect(250, 200, 50, 50);
rect(300, 200, 50, 50);
rect(350, 200, 50, 50);
rect(400, 200, 50, 50);
rect(450, 200, 50, 50);
//Row 6
rect(100, 250, 50, 50);
rect(150, 250, 50, 50);
rect(200, 250, 50, 50);
rect(250, 250, 50, 50);
rect(300, 250, 50, 50);
rect(350, 250, 50, 50);
rect(400, 250, 50, 50);
rect(450, 250, 50, 50);
//Row 7
rect(100, 300, 50, 50);
rect(150, 300, 50, 50);
rect(200, 300, 50, 50);
rect(250, 300, 50, 50);
rect(300, 300, 50, 50);
rect(350, 300, 50, 50);
rect(400, 300, 50, 50);
rect(450, 300, 50, 50);
//Row 8
rect(100, 350, 50, 50);
rect(150, 350, 50, 50);
rect(200, 350, 50, 50);
rect(250, 350, 50, 50);
rect(300, 350, 50, 50);
rect(350, 350, 50, 50);
rect(400, 350, 50, 50);
rect(450, 350, 50, 50);
//Row 9
rect(100, 400, 50, 50);
rect(150, 400, 50, 50);
rect(200, 400, 50, 50);
rect(250, 400, 50, 50);
rect(300, 400, 50, 50);
rect(350, 400, 50, 50);
rect(400, 400, 50, 50);
rect(450, 400, 50, 50);
//Row 10
rect(100, 450, 50, 50);
rect(150, 450, 50, 50);
rect(200, 450, 50, 50);
rect(250, 450, 50, 50);
rect(300, 450, 50, 50);
rect(350, 450, 50, 50);
rect(400, 450, 50, 50);
rect(450, 450, 50, 50);
}
void mousePressed() {
if(mousePressed == true) {
fill(white);
rect(50, 50, 50, 50);
rect(100, 50, 50, 50);
rect(150, 50, 50, 50);
rect(200, 50, 50, 50);
rect(250, 50, 50, 50);
rect(300, 50, 50, 50);
rect(350, 50, 50, 50);
rect(400, 50, 50, 50);
rect(450, 50, 50, 50);
} else {
fill(gray);
rect(50, 50, 50, 50);
rect(100, 50, 50, 50);
rect(150, 50, 50, 50);
rect(200, 50, 50, 50);
rect(250, 50, 50, 50);
rect(300, 50, 50, 50);
rect(350, 50, 50, 50);
rect(400, 50, 50, 50);
rect(450, 50, 50, 50);
}
}

Any help would be much appreciated. I will be looking at turning all the rects I have into white squares when you press on them, and I'm hoping they will turn into gray squares when you press on them again. If anybody wants to know what I'm doing to make things more clear, feel free to ask.

Thanks :)

- Ethan

Replies(11)

calsign

Re: Changing rect color

1 year ago

Are you trying to change the color for each rectangle individually?
For this, you'd need to use arrays or classes...

In mousePressed(), you check to see if the mouse is pressed. This is incredibly redundant. If you put the code in this function inside draw() (before you draw the rectangles) and use it to change the fill color, then you would be able to control the color of all of the rectangles... but not each one individually.

PhiLho

Re: Changing rect color

1 year ago

void mousePressed() {
if(mousePressed == true) {

Redundant. mousePressed() is called only if mouse is pressed, obviously...

(perhaps you copied the code verbatim from draw()?)

No need to put the rect() calls identical on each branch. You can call fill() in the branches, and the rect() after the condition.

Anyway, the fill() in draw() is overriding what you have put in mousePressed() (at best, you can see the color flashing before the next frame is drawn.

All your rect() calls can probably be replaced by a pair of loops...

You have a value variable. Set it to gray or white depending if mouse is pressed or not and call it in draw(), after having drawn the other rectangles.

etan32

Re: Changing rect color

1 year ago

Yes, I am looking at changing the rect color individually. Pretty much I'm looking at making something similar to this - http://img44.imageshack.us/img44/6182/music.swf but using processing. I already have the sound files I need, so I'm just looking at getting the colors for the rect to work and then assigning a sound value to each one.

Would you mind giving me a hand with these "classes" ? I do remember going them over in class but wasn't quite sure how to use them in this specific way. I believe once I get the rect's to work I'll be able to figure out the rest for myself.

Thanks!

PhiLho

Re: Changing rect color

1 year ago

Here is a simplified version of your code:

color white = color(255, 255, 255);
color gray = color(105, 105, 105);
// Better put the value in a constant: clearer and easier to change everywhere
int SIZE = 50; // Constant are usually writtern in uppercase
int value = gray;
void setup() {
size(500, 500);
smooth();
rectMode(CENTER);
}
void draw() {
background(0);
for (int x = SIZE; x < width; x += SIZE)
{
for (int y = SIZE; y < height; y += SIZE)
{
if (y == SIZE && mousePressed)
{
fill(white);
}
else
{
fill(gray);
}
rect(x, y, SIZE, SIZE);
}
}
}

Usually I advice to use mousePressed() the function, but here it would have been overkill & redundant.

v.k.

Re: Changing rect color

1 year ago

A hand with classes ;-)

class Squared
{
int x;
int y;
int SIZE = 50;
Squared (int _x, int _y)
{
x = _x;
y = _y;
}
void drawSq()
{
if (isOver() && mousePressed)
{
fill(255);
}else
{
fill(70);
}
stroke(0);
rect (x, y, SIZE, SIZE);
}
boolean isOver()
{
if (mouseX > x && mouseX < x + SIZE && mouseY > y && mouseY < y + SIZE)
{
return true;
}
else{
return false;
}
}
}
Squared[][] grid = new Squared [10][10];
void setup()
{
size (500,500);
for (int i = 0; i< grid.length; i++)
{
for (int j = 0; j< grid.length; j++)
{
grid[i][j] = new Squared(i*50, j*50);
}
}
}
void draw()
{
for (int i = 0; i< grid.length; i++)
{
for (int j = 0; j< grid.length; j++)
{
grid[i][j].drawSq();
}
}
}

And a question together: In a bidimensional array with different lengths for each dimension the "array.length" holds only the first dimension length right? PhiLho? thanks

EDIT: I found it:

for (int i = 0; i< grid.length; i++)
{
for (int j = 0; j< grid[0].length; j++) // here the length of each row
// that might have different lengths !!
{
grid[i][j].doSomething
}
}

etan32

Re: Changing rect color

1 year ago

Wow thanks so much for the feedback guys really appreciate! Final question, what would I have to do to make it so that when I click each rect it stays white unless I press it again!

I'd appreciate it if you wouldn't write code for this one and just explain it perhaps? I don't want to feel like I'm leeching off you guys and your hard work.

Thank you :)

PhiLho

Re: Changing rect color

1 year ago

You need to maintain an array of states.
Something like: boolean states[][] = new boolean[10][10];
Or if you feel like using classes, just use v.k.'s code and add a boolean field.
He also shows you how to find how a square is clicked.
Instead of just changing the display when we have mousePressed, you change the value of the state, and use this value when drawing the square.

In my code, you would use, instead of:
if (y == SIZE && mousePressed)
just:
if (states[x / SIZE][y / SIZE])

and in mousePressed() (the function, here), you find if the mouse coordinates are over a given rectangle (use the same division trick) to toggle the state of the square:
states[i][j] = !state[i][j]

If you are still stuck with my vague explanations, just ask...

etan32

Re: Changing rect color

1 year ago

Alright, I've finally got a chance to look at this, and just can't quite get the boolean thing to work. I've been going over some past notes from our course but I've still had no luck with getting the rectangles to stay one color when I press them, and then change back to gray when I press them again.

I have another code which I made earlier in the year where I can get one square to change color because I assign the coordinates of the mousePressed function onto it, but can't quite to do it for multiple rects. Any help would be appreciated as usual,

thanks :)

PhiLho

Re: Changing rect color

1 year ago

As usual, show us the current state of your code.
And if you tell us what you don't understand with booleans, we can explain more.

etan32

Re: Changing rect color

1 year ago

I'm using V.K.'s code at the moment and experimenting with that.

class Squared
{
int x;
int y;
int SIZE = 50;
Squared (int _x, int _y)
{
x = _x;
y = _y;
}
void drawSq()
{
if (isOver() && mousePressed)
{
fill(255);
}else
{
fill(70);
}
stroke(0);
rect (x, y, SIZE, SIZE);
}
boolean isOver()
{
if (mouseX > x && mouseX < x + SIZE && mouseY > y && mouseY < y + SIZE)
{
return true;
}
else{
return false;
}
}
}
Squared[][] grid = new Squared [10][10];
void setup()
{
size (500,500);
for (int i = 0; i< grid.length; i++)
{
for (int j = 0; j< grid.length; j++)
{
grid[i][j] = new Squared(i*50, j*50);
}
}
}
void draw()
{
for (int i = 0; i< grid.length; i++)
{
for (int j = 0; j< grid.length; j++)
{
grid[i][j].drawSq();
}
}
}

PhiLho

Re: Changing rect color

1 year ago

As I wrote, add a boolean field to the class:

boolean bActive;

then when you test the mouse, toggle it:

void mousePressed() // Same level than draw() and setup()
{
for (int i = 0; i < grid.length; i++)
{
for (int j = 0; j < grid.length; j++)
{
grid[i][j].checkMouse();
}
}
}

where checkMouse() is a method in Squared:

void checkMouse()
{
bActive = !bActive: // Take the opposite value
}

Then the color you use to fill depends on the boolean:

void drawSq()
{
if (bActive)
{
fill(255);
}else
{
fill(70);
}
stroke(0);
rect (x, y, SIZE, SIZE);
}

Top Reply