# Make the rectangle move to the opposite corner

**URL:** https://discourse.processing.org/t/make-the-rectangle-move-to-the-opposite-corner/39510
**Category:** Coding Questions
**Tags:** homework
**Created:** [October 30, 2022, 4:51pm UTC](https://discourse.processing.org/t/make-the-rectangle-move-to-the-opposite-corner/39510 "2022-10-30T16:51:59Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![add](https://avatars.discourse-cdn.com/v4/letter/a/0ea827/32.png) [@add](https://discourse.processing.org/u/add)
#### Post date: [October 30, 2022, 4:51pm UTC](https://discourse.processing.org/t/make-the-rectangle-move-to-the-opposite-corner/39510/1 "2022-10-30T16:51:59Z")

</div>

hello! I need your help, please.  
I have to make the rectangle move to the opposite corner and after disappearing in the lower corner, it should appear again in the upper opposite corner. The condition is to use the modulo-operator.  
I don’t know what I did wrong, but only the red rectangle returns, the others do not reappear.

```auto
float x = 0;
float y = 0;
float a = 0;
float z= 380;
float speed = 1;
  
void setup() {
  size(480,480);
 
}

void draw() {
  background(255);
  noStroke();
  x = (x + speed)% width;
  z= (z-speed)% width;
  y= (y+speed)%height;
  
  fill(255,0,0);
  rect(x,y,100,100);
 
  fill(0,255,0);
  rect(z,y,100,100);
 
  fill (155);
  rect(z,z, 100,100);
  
  fill(0,0,255);
  rect (x,z,100,100);
}

```

---

<div class="post-metadata">

### Author: ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)
#### Post date: [October 30, 2022, 6:05pm UTC](https://discourse.processing.org/t/make-the-rectangle-move-to-the-opposite-corner/39510/2 "2022-10-30T18:05:08Z")

</div>

Interesting question! 🙂

I did a quick google search. And found this on stackoverflow:

> <https://stackoverflow.com/questions/14785443/is-there-an-expression-using-modulo-to-do-backwards-wrap-around-reverse-overfl>

I played with the numbers a bit. As far as I can tell the problem is here:

> [@add](#):
>
> `z = (z-speed)% width;`

One of the proposed solutions is the following expression (see stackoverflow post for author attribution):  
“Your expression should be `((x-1) + k) % k` . This will properly wrap x=0 around to 11. In general, if you want to step back more than 1, you need to make sure that you add enough so that the first operand of the modulo operation is \>= 0.”

**I tried doing this:**

`z = ((z - speed)+z) % 380;`

And no, it is not the solution.  
**HOWEVER,** it does bring the green square back to the top right. But it now bounces left to right as it moves down the canvas. So further experimentation may be worth investigating.

Also, a word of advice. To eliminate distraction, comment out the bottom 2 rectangles.  
Once you solve the movement of the green rectangle, then test with the rest of the rectangles.  
Good luck!  
🤓

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [October 30, 2022, 7:44pm UTC](https://discourse.processing.org/t/make-the-rectangle-move-to-the-opposite-corner/39510/3 "2022-10-30T19:44:23Z")

</div>

Hello @add,

A hint:

```auto
float x = 0;
 
void setup() 
  {
  size(300, 100);
  }

void draw() 
  {
  background(255);
  x = (x+1)%width;
  
  println(x, 300-x); // Useful!
  
  circle(x, 50, 10);
  circle(300-x, 50, 10); // Interesting! It is going the other direction...
  }

```

`:)`

---

<div class="post-metadata">

### Author: ![add](https://avatars.discourse-cdn.com/v4/letter/a/0ea827/32.png) [@add](https://discourse.processing.org/u/add)
#### Post date: [October 31, 2022, 9:06am UTC](https://discourse.processing.org/t/make-the-rectangle-move-to-the-opposite-corner/39510/4 "2022-10-31T09:06:27Z")

</div>

thank you very much @debxyz and @glv . I did it, using instead of z 380-x.