# How do I mirror the movement of another another shape?

**URL:** <https://discourse.processing.org/t/how-do-i-mirror-the-movement-of-another-another-shape/11573>\
**Category:** Coding Questions\
**Created:** [May 25, 2019, 1:19am UTC](https://discourse.processing.org/t/how-do-i-mirror-the-movement-of-another-another-shape/11573 "2019-05-25T01:19:49Z")\
**Posts on this page:** 10\
**Page:** 1

<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:** [May 25, 2019, 1:19am UTC](https://discourse.processing.org/t/how-do-i-mirror-the-movement-of-another-another-shape/11573/1 "2019-05-25T01:19:49Z")

</div>

I would like **the green rectangle on the right to mirror the movement of the pink rectangle on the left.** (And sometimes randomly overlap.)

Is there an easy way to draw the right side of the green rectangle so that it is stationary, with the left side moving randomly back and forth?

I looked through the reference page to see if there was something like translate() that moves the direction a shape is drawn but found nothing so I’m guessing this a little more complicated than I originally thought?

Any thoughts on this most welcome.

```auto
int x, y;

void setup() {
  size(400, 400);
  
  x = 50;
  y = 50;
}
void draw() {
  frameRate(3);
  background(255);
  noStroke();
  fill(#FA56C9,50);
  rect(x, y, random(10, width/2 +10), height/2);
  fill(#56FA83,50);
  rect(random(width/2 -10, width/2 +100), y, 200, height/2); //deadend attempts on how to mirror the rect above... 
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [May 25, 2019, 1:32am UTC](https://discourse.processing.org/t/how-do-i-mirror-the-movement-of-another-another-shape/11573/2 "2019-05-25T01:32:52Z")

</div>

try:

```auto
int x, y;

void setup() {
  size(400, 400);
  x = 50;
  y = 50;
  // frameRate(3);
  noStroke();
}
void draw() {
  background(255);
  fill(#FA56C9, 50);
  rect(x, y, mouseX, height/2);
  fill(#56FA83, 50);
  rect(200-mouseX, y, 200, height/2);
}

```

so idea is to / just for test / use the mouseX  
and do a mirrored movement by  
-1- mouseX as width  
-2- x- mouseX as pos

---

<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:** [May 25, 2019, 1:44am UTC](https://discourse.processing.org/t/how-do-i-mirror-the-movement-of-another-another-shape/11573/3 "2019-05-25T01:44:52Z")

</div>

After I posted my question I tried using  
**beginShape() / endShape()** and have the shape begin in upper right corner which stabilizes the right side.  
Would your mouseX test somehow work with this @kll ?

```auto
int x, y;
float xPos;

void setup() {
  size(400, 400);

  x = 50;
  y = 50;
  xPos = random(-50,50); //this variable is not working allowing left side to bounce back and forth
}
void draw() {
  frameRate(3);
  background(255);
  noStroke();
  fill(#FA56C9, 50);
  rect(x, y, random(10, width/2 +10), height/2);
  fill(#56FA83, 50);
  beginShape();
  vertex(350, 50);
  vertex(350, 250);
  vertex(width/2 + xPos, 250);
  vertex(width/2 + xPos, 50);
  endShape(CLOSE);
}

```

---

<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:** [May 25, 2019, 1:47am UTC](https://discourse.processing.org/t/how-do-i-mirror-the-movement-of-another-another-shape/11573/4 "2019-05-25T01:47:17Z")

</div>

I ran this and I see the mirroring, just not sure how I would join this with the second version I posted. Any suggestions @kll? 🙂

---

<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:** [May 25, 2019, 1:55am UTC](https://discourse.processing.org/t/how-do-i-mirror-the-movement-of-another-another-shape/11573/5 "2019-05-25T01:55:53Z")

</div>

This version shows with the xPos commented out and left side moves but is not even.

```auto
int x, y;
float xPos;

void setup() {
  size(400, 400);

  x = 50;
  y = 50;
  //xPos = random(-50,50); this variable stops the left side from moving
}
void draw() {
  frameRate(3);
  background(255);
  noStroke();
  fill(#FA56C9, 50);
  rect(x, y, random(10, width/2 +10), height/2);
  fill(#56FA83, 50);
  beginShape();
  vertex(350, 50);
  vertex(350, 250);
  vertex(width/2 + random(50), 250); // +random(50) restores movement but does not match the random number below creating a slanted side
  vertex(width/2 + random(50), 50);
  endShape(CLOSE);
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [May 25, 2019, 2:01am UTC](https://discourse.processing.org/t/how-do-i-mirror-the-movement-of-another-another-shape/11573/6 "2019-05-25T02:01:07Z")

</div>

that happens if you call random two times.  
use

```auto
  float off = random(50);
  vertex(width/2 + off, 250);
  vertex(width/2 + off, 50);

```

---

<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:** [May 25, 2019, 2:05am UTC](https://discourse.processing.org/t/how-do-i-mirror-the-movement-of-another-another-shape/11573/7 "2019-05-25T02:05:46Z")

</div>

This is what happens **when i call the random(50) 2 times**. The left side gets stuck…

```auto
int x, y;
float xPos;

void setup() {
  size(400, 400);

  x = 50;
  y = 50;
  xPos = random(50);
}
void draw() {
  frameRate(3);
  background(255);
  noStroke();
  fill(#FA56C9, 50);
  rect(x, y, random(10, width/2 +10), height-100);
  fill(#56FA83, 50);
  beginShape();
  vertex(350, 50);
  vertex(350, 350);
  vertex(width/2 + xPos, 350);
  vertex(width/2 + xPos, 50);
  endShape(CLOSE);

```

---

<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:** [May 25, 2019, 2:10am UTC](https://discourse.processing.org/t/how-do-i-mirror-the-movement-of-another-another-shape/11573/8 "2019-05-25T02:10:40Z")

</div>

Success!!! **I just moved the xPos = random (50) out of setup into draw.** and it now works!  
Thank you @kll for your help!  
It is greatly appreciated. 😄

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [May 25, 2019, 2:11am UTC](https://discourse.processing.org/t/how-do-i-mirror-the-movement-of-another-another-shape/11573/9 "2019-05-25T02:11:10Z")

</div>

forget the program for a moment,

i think there is a basic misunderstanding about the processing function.

-1- the setup function is executed ONCE at the start of the sketch  
( so your xPos is set to random value and ( after that FIX )

-2- draw is supposed to run 60 times per sec. unless you restrict it with frameRate

-3- when you use background the screen is cleared and redrawn ( that 60 times per sec. )  
in your case draws the same again and again ( what is ok unless you want any animation ? )

---

<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:** [May 25, 2019, 2:16am UTC](https://discourse.processing.org/t/how-do-i-mirror-the-movement-of-another-another-shape/11573/10 "2019-05-25T02:16:01Z")

</div>

Yes, I want the animation.  
Pasting the code below. This is how I wanted the sketch to run:

```auto
int x, y;
float xPos;

void setup() {
  size(400, 400);

  x = 50;
  y = 50;
  //xPos = random(50);
}
void draw() {
  frameRate(3);
  background(255);
  noStroke();
  fill(#FA56C9, 50);
  rect(x, y, random(10, width/2 +10), height-100);
  fill(#56FA83, 50);
  
  xPos = random(50);
  
  beginShape();
  vertex(350, 50);
  vertex(350, 350);
  vertex(width/2 + xPos, 350);
  vertex(width/2 + xPos, 50);
  endShape(CLOSE);
}

```