How do I mirror the movement of another another shape?

Processing Coding Questions
1

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.

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... 
}
2

try:

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

3

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 ?

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);
}
4

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? :slight_smile:

5

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

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);
}
6

that happens if you call random two times.
use

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

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

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);
8

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. :smile:

9

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 ? )

1 Like
10

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

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);
}
1 Like