For loop doesnt work like I want

Processing Coding Questions
1

Hello,

First I show you my code.

int[] randomZahl = {3,6,8,9,4};

void setup(){

size(500,500);

}

void draw(){

line(100,0,100,500);
line(200,0,200,500);
line(300,0,300,500);
line(400,0,400,500);
line(500,100,0,100);
line(500,200,0,200);
line(500,300,0,300);
line(500,400,0,400);

}

void mouseClicked(){

int a = 0;

//Zeile 1

if(mouseX<=100 && mouseY<=100){
rect(0,0,100,100);
a = 1;
}

else if(mouseX<=200 && mouseX>=100 && mouseY<=100 && mouseY>=0){
rect(100,0,100,100);
a = 2;
}

else if(mouseX<=300 && mouseX>=200 && mouseY<=100 && mouseY>=0){
rect(200,0,100,100);
a = 3;
}

else if(mouseX<=400 && mouseX>=300 && mouseY<=100 && mouseY>=0){
rect(300,0,100,100);
a = 4;
}

else if(mouseX<=500 && mouseX>=400 && mouseY<=100 && mouseY>=0){
rect(400,0,100,100);
a = 5;
}

//Zeile 2

else if(mouseX<=100 && mouseX>=0 && mouseY<=200 && mouseY>=100){
rect(0,100,100,100);
a = 6;
}

else if(mouseX<=200 && mouseX>=100 && mouseY<=200 && mouseY>=100){
rect(100,100,100,100);
a = 7;
}

else if(mouseX<=300 && mouseX>=200 && mouseY<=200 && mouseY>=100){
rect(200,100,100,100);
a = 8;
}

else if(mouseX<=400 && mouseX>=300 && mouseY<=200 && mouseY>=100){
rect(300,100,100,100);
a = 9;
}

else if(mouseX<=500 && mouseX>=400 && mouseY<=200 && mouseY>=100){
rect(400,100,100,100);
a = 10;
}

//Zeile 3

else if(mouseX<=100 && mouseX>=0 && mouseY<=300 && mouseY>=200){
rect(0,200,100,100);
a = 11;
}

else if(mouseX<=200 && mouseX>=100 && mouseY<=300 && mouseY>=200){
rect(100,200,100,100);
a = 12;
}

else if(mouseX<=300 && mouseX>=200 && mouseY<=300 && mouseY>=200){
rect(200,200,100,100);
a = 13;
}

else if(mouseX<=400 && mouseX>=300 && mouseY<=300 && mouseY>=200){
fill(0);
rect(300,200,100,100);
a = 14;
}

else if(mouseX<=500 && mouseX>=400 && mouseY<=300 && mouseY>=200){
rect(400,200,100,100);
a = 15;
}

//Zeile 4

else if(mouseX<=100 && mouseX>=0 && mouseY<=400 && mouseY>=300){
rect(0,300,100,100);
a = 16;
}

else if(mouseX<=200 && mouseX>=100 && mouseY<=400 && mouseY>=300){
rect(100,300,100,100);
a = 17;
}

else if(mouseX<=300 && mouseX>=200 && mouseY<=400 && mouseY>=300){
rect(200,300,100,100);
a = 18;
}

else if(mouseX<=400 && mouseX>=300 && mouseY<=400 && mouseY>=300){
rect(300,300,100,100);
a = 19;
}

else if(mouseX<=500 && mouseX>=400 && mouseY<=400 && mouseY>=300){
rect(400,300,100,100);
a = 20;
}

//Zeile 5

else if(mouseX<=100 && mouseX>=0 && mouseY<=500 && mouseY>=400){
rect(0,400,100,100);
a = 21;
}

else if(mouseX<=200 && mouseX>=100 && mouseY<=500 && mouseY>=400){
rect(100,400,100,100);
a = 22;
}

else if(mouseX<=300 && mouseX>=200 && mouseY<=500 && mouseY>=400){
rect(200,400,100,100);
a = 23;
}

else if(mouseX<=400 && mouseX>=300 && mouseY<=500 && mouseY>=400){
rect(300,400,100,100);
a = 24;
}

else if(mouseX<=500 && mouseX>=400 && mouseY<=500 && mouseY>=400){
rect(400,400,100,100);
a = 25;
}

for(int i = 0; i < randomZahl.length; ++i){

if(randomZahl[i] == a){
fill(0);
}
}

}

So for loop should check if a is in the array, the box should get filled with a colour.

But my solution didnt work? Why?

1 Like
2

In short, the problem is that you are deciding what color a box should be after you have drawn it. Imagine you were making a painting. If you want to draw a colored box, do you draw the box first and then pick what color paint to use? No, you pick the color first.

Your code is also very WET: Write Everything Twice. You repeat a lot of things. You don’t have to. You can write DRY code that does the same thing. DRY: Don’t Repeat Yourself.

In your case, you have some squares. So a good thing to have would be some code that describes what a square is and what it can do.

class Square{
  // Code in here will describe what a square is and can do.
}

Pretend you are a square. Seriously. What do you need to know about yourself to be a good Square?

You might need to know your side length.
You might need to know your position.
You might need to know your color.

What can you, as a Square, do?
You could be drawn.
You could check to see if the mouse is over you!
And a less common thought:
You can start to exist.

Now that we have a list of things that a Square is and can do, we can fill in what a Square is:

class Square {
  float x=100, y=100; // A Square has a position.
  float s; // A Square has a side length.
  color c; // A Square has a color.
  // A Square can start to exist.
  Square(){
    c = color(255); // I am white.
    s = 100; // I am large.
  }
  // A Square can be drawn.
  void draw(){
    fill( c ); // Using my color of paint,
    ellipse( x, y, s, s ); // Draw a Square.
  }
  // A Square can see if the mouse is over it.
  boolean over(){
    // What goes here?
    return( false ); // Placeholder. TODO: Fix this.
  }
} // That's all a Square is.

As you can see, I added variables for things a Square needs to remember about itself, and I added functions (with some basic, incorrect implementations!) to describe the things a Square can do.

Now we can make use of this definition of what a Square is to be able to have a Square.

Square my_first_square; // There is space for a Square here.

void setup(){
  size(600,400);
  my_first_square = new Square(); // This square starts to exist now.
}

void draw(){
  background(0);
  my_first_square.draw();
}

// ---- CODE BELOW REMAINS UNCHANGED.
// ---- SIMPLY DEFINES WHAT THE SQUARE IS.

class Square {
  float x=100, y=100;
  float s;
  color c;
  Square(){
    c = color(255);
    s = 100;
  }
  void draw(){
    fill( c );
    ellipse( x, y, s, s );
  }
  boolean over(){
    return( false ); // Placeholder. TODO: Fix this.
  }
}

Try running this - you get a Square! Well, okay, no, you don’t… But we can fix that later…

2 Likes
3

“Wait wait wait,” you exclaim, “That’s a lot of work! Why bother?”

This is why: Because we have defined what a Square is, it is now easier to have a lot of them. Like so:

// Not a complete example - do not run. Just look at the code.
Square[] squares; // There is some space for Squares here.

void setup(){
  size(500,500);
  squares = new Square[25]; // The space is enough for 25 Squares.
  for(int i = 0; i < squares.length; i++){
    squares[i] = new Square();
  }
}

void draw(){
  background(0);
   for(int i = 0; i < squares.length; i++){
    squares[i].draw();
  }
}

Of course if we have a lot of them right now, they will all be in the same place. So let’s fix that by passing in a position when we create them:

Square[] squares; // There is some space for Squares here.

void setup(){
  size(500,500);
  ellipseMode(CORNER);
  squares = new Square[25]; // The space is enough for 25 Squares.
  for(int i = 0; i < squares.length; i++){
    squares[i] = new Square(100*(i%5), 100*(i/5));
  }
}

void draw(){
  background(0);
   for(int i = 0; i < squares.length; i++){
    squares[i].draw();
  }
}

class Square {
  float x, y;
  float s;
  color c;
  Square(float ix, float iy){
    x = ix;
    y = iy;
    c = color(255);
    s = 100;
  }
  void draw(){
    fill( c );
    ellipse( x+10, y+10, s-20, s-20 );
  }
  boolean over(){
    return( false ); // Placeholder. TODO: Fix this.
  }
}
3 Likes
4

“But those aren’t even squares!”, you exclaim.

Right. But because each Square shares the definition of a Square, we only need to change the definition to be able to effect change in all of them. This is powerful! Imaging how much work it would take you to change the squares in your code to be ellipses!

While we’re at it, we’ll add the code to detect if the mouse is over one of our Squares:

Square[] squares;

void setup(){
  size(500,500);
  ellipseMode(CORNER);
  squares = new Square[25];
  for(int i = 0; i < squares.length; i++){
    squares[i] = new Square(100*(i%5), 100*(i/5));
  }
}

void draw(){
  background(0);
   for(int i = 0; i < squares.length; i++){
    squares[i].draw();
  }
}

class Square {
  float x, y;
  float s;
  color c;
  Square(float ix, float iy){
    x = ix+10;
    y = iy+10;
    c = color( random(255),random(255),random(255) );
    s = 80;
  }
  void draw(){
    fill( c );
    if( over() ){
      fill(255);
    }
    rect( x, y, s, s );
  }
  boolean over(){
    return( x < mouseX && mouseX < x + s && y < mouseY && mouseY < y + s );
  }
}

And that’s it! Notice how DRY this code is! No checks are done in endless if-else blocks. To change the behavior of all the Squares you only need to do so in one place.

1 Like
5

Thank you but seriously I understand what you mean with the squares, but this is not the solution for my problem? Can you just tell me how do I fix it?

6

you have that answer already, in the first post of @TfGuy44

1 Like