Help for a beginner please...

Programming Questions

strawberr..

Help for a beginner please...

in Programming Questions • 2 years ago

Hi all,

This is my first topic and i'm just learning how to code with processing. I want to make a simple grid with 16 box, when i move my mouse on a box, the color change, and when i click on it, color change again...

Here is my first work on it (you can download it to check it out) :

http://dim.maxx.free.fr/processing/wtf03.pde

I know, this is a very basic code, and as you can see i have trouble with it because only one line is working....

Could you help me to write the correct code to have my 16 box correct ?

Thanks in advance for your help

Strawberry

Replies(3)

jun.jk

Re: Help for a beginner please...

2 years ago

Having looked at your code, I'm not sure I understand how you had sorted out your if statements. Happily, it can be done much more simply. A key element here is the "for" loop, which (usually) takes an initial number and iterates over it until a given maximum. Let me know if this code doesn't make sense.

void setup(){
size(200,200);
stroke(255); //since the stroke color never changes, no need to call it every draw loop
}
void draw(){
background(0);
//instead of drawing lines and then drawing rects by the mouse,
//why not draw the rects and let the mouse just change the fill?
//"for" statements simplify this greatly
for(int row = 0; row < 4; row++){//make rows, up to 4
for(int column = 0; column < 4; column++){//likewise with columns
if(mouseX >= column * 50 && mouseX < (column + 1) * 50 //if mouse is over
&& mouseY >= row * 50 && mouseY < (row + 1) * 50){ //current rect
if(mousePressed){ //and if mouse is pressed
fill(0,0,255); //fill with blue
} else { //and if mouse is not pressed
fill(255,0,0); //fill with red
}
} else { //if not over current rect
noFill(); //don't fill at all
}
rect(column * 50, row * 50, 50, 50);
}
}
}

strawberr..

Re: Help for a beginner please...

2 years ago

Hey !

Thank you so much for your help ...
Actually,it's much more simply that way... it's right...This code makes sense ^^
I'm learning and i don't totally know the loops yet , i understood the way you used it here..
I'm a bit confused about that line :

if(mouseX >= column * 50 && mouseX < (column + 1) * 50 //if mouse is over
&& mouseY >= row * 50 && mouseY < (row + 1) * 50){ //current rec

Can you explain me more in details the meaning ?
Is it the way to draw the rects ?

Thank you once again for your help and the time you took to answer me ... : )

jun.jk

Re: Help for a beginner please...

2 years ago

The rect is drawn no matter what. The initial if statement that you quoted determines whether or not a rect's position has the mouse over it. If it evaluates true, we fill with either blue or red, depending on whether or not the mouse button is pressed. I did it this way since it is graphically identical to what you wanted. However, if, for programmatic reasons, you wanted the rects to only be drawn when the mouse was over them, I would modify the code as follows: The rect statement would be inside the initial if loop - the rect is only drawn if the mouse is hovering over its position. The line statements would then be necessary, but as you can see, they also make use of the for loops.

void setup(){
size(200,200);
stroke(255);
}
void draw(){
background(0);
for(int row = 0; row < 4; row++){
line(0,row * 50,width,row * 50);
for(int column = 0; column < 4; column++){
line(column * 50,0,column * 50,height);
if(mouseX >= column * 50 && mouseX < (column + 1) * 50
&& mouseY >= row * 50 && mouseY < (row + 1) * 50){
if(mousePressed){
fill(0,0,255);
} else {
fill(255,0,0);
}
rect(column * 50, row * 50, 50, 50);
}
}
}
}

Top Reply