Loop to move rectangle down

Processing Coding Questions
1

hello

i want the rectangles that are moving down to be in a loop moving downwards and i don’t know how to do that, so when it goes off screen it starts at the top and moves downwards and repeats that cycle over and over again. i am fairly new to this program so im sorry if i dont understand what to do.
take a look at my code:

//variables 
float xmovement ;
float whereIsIt ;
float one = -60; 
float two = -150 ; 
float three = -110; 
float four = -200 ;
float five = -130 ; 
float six = -200 ;
float seven = -450; 
float eight = -200;
float nine = -300;
int Xposition;
//setup 
void setup() { 
  size (370, 500) ;
  background (255) ;
  xmovement = -20 ;
  Xposition=250;
}

//rectangles 
void draw () { 

  frameRate (100) ;
  fill (0) ;
  noStroke() ;
  rectMode (CENTER) ;
  rect (185, 250, 350, 480) ;
  fill (255) ;
  rect (mouseX, 460, 35, 10) ;


  // falling obstackles 
  rect (150, xmovement, 9, 23) ;
  rect (Xposition, one, 9, 23) ;
  rect (250, two, 9, 23) ;
  rect (100, three, 9, 23) ;
  rect (270, four, 9, 23) ;
  rect (300, five, 9, 23) ;
  rect (90, six, 9, 23) ;
  rect (40, seven, 9, 23) ;
  rect (160, eight, 9, 23) ;
  rect (230, nine, 9, 23) ;


  // logic 
  xmovement = xmovement + random(1, 6) ;
  one = one + 4 ;
  two = two + 3 ;
  three  = three + 4.5;
  four = four + 2;
  five = five + 5 ;
  six = six + 2;
  seven = seven + 5;
  eight = eight + 4; 
  nine = nine + 2.8;
}
2

When you draw the rectangles use modulus(%).

Ex. rect(270,four % height, 9, 23);

1 Like
3

Hi Processingn00b,

Can you please format your code?
To do it, hit the little pen icon in the bottom right of your previous post to edit it.
Once in edition mode, select all of you code and hit this icon </> in the toolbar of the text editor.
Don’t forget to select all of you code and hit ctrl + t in the processing IDE to properly indent it!

Thank you :slight_smile:

1 Like
4

You explain exactly what you want to do.
Now you just need to translate it to your code.

Let’s start with a simplified example:

//variables
float one = -150;


//setup
void setup() {
  size (370, 500);
  
}


//rectangles
void draw () {
  background (0);
  noStroke() ;
  rectMode (CENTER) ;
  fill (255) ;

  // falling obstackles
  rect (250, one, 9, 23) ;

  // logic
  one = one + 3 ;
}

If you run the code above, you just get a rectangle going down.

Now, your sentence starts like this when it goes off screen. You can also say if it goes off screen then… So we already know that we can use an if statement to handle that situation.

What does it mean for a rectangle to go off screen? It means that its position is lower than the height of the screen (plus its size).

If you put it together you get something like this:

if ((one - 23 / 2.0) > height) {
  ...
}

The reason you have - 23 / 2.0 is to compensate for the height of the rectangle (which is 23). You set your rectMode to be CENTER so the position of your rectangle is defined by its center. if you just had if(one > height), you would just check if the rectangle is half outside the screen. To see if it is completely outside the screen you need the check that it’s position is lower than the screen by half the height of your rectangle.

I tried to make a quick illustration to make sense :crazy_face:

Example
Example1015×656 7.5 KB

The next part of your sentence is: it starts at the top. This just means that you need to reset your one variable:

if ((one - 23 / 2.0) > height) {
    one = - 23 / 2.0; // Again compensating for the height of your rectangle
}

To finish: and moves downwards and repeats that cycle over and over again. You already handle that mechanism n the beginning of your draw() function so no need to implement it again.

Finally you got that:

//variables
float one = -150;


//setup
void setup() {
  size (370, 500);
  
}


//rectangles
void draw () {
  background (0);
  noStroke() ;
  rectMode (CENTER) ;
  fill (255) ;

  // falling obstackles
  rect (250, one, 9, 23) ;

  // logic
  one = one + 3 ;
  
  if ((one - 23 / 2.0) > height) {
    one = 0 - 23 / 2.0;
  }
}

Some side notes:

  • You don’t need to set the frame rate in draw. It will be set at every frame if you do it this way. Put it in the setup() part.
  • Try to name your variables with something that makes sense. One is not the best name. You could instead use something like yPos1.
2 Likes