# "Mirroring" PShape objects (translation / rotation issue)

**URL:** https://discourse.processing.org/t/mirroring-pshape-objects-translation-rotation-issue/7099
**Category:** Coding Questions
**Created:** [January 2, 2019, 12:58pm UTC](https://discourse.processing.org/t/mirroring-pshape-objects-translation-rotation-issue/7099 "2019-01-02T12:58:16Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)
#### Post date: [January 2, 2019, 12:58pm UTC](https://discourse.processing.org/t/mirroring-pshape-objects-translation-rotation-issue/7099/1 "2019-01-02T12:58:16Z")

</div>

Hi,

I’m trying to “mirror” a PShape object like in the picture below:

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1198eda74f62695ffb9888603ff7b719f6cbff0d.jpeg)

The tricky part is not to invert the shape but to rotate it (and maybe translating it ?) so as it sticks to the preceding shape. I’ve been trying to use `angleBetween()` or `atan2()` but without success.

So far here is what I’ve got.

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/79bcd2ec37bb03b89dc4c7e4929882c7c61161a9.png)

```auto
int W = 20;
int H = 20;
int D = 20; 

PShape object;

void setup(){
    size(600, 600, P2D);
    smooth(8);
    
}
    
    
void draw(){
    background(255);
    
    pushMatrix();
    translate(width/2, height/1.3);
    
    int td = -1;
    for (int i = 0; i < 6; i++){
        translate(0, td*H*2);
        scale(-1, 1);
        rotate(PI);
        object();
        td *= -1;
    }
        

    popMatrix();
    
}
    
    
void object() {
    beginShape(QUADS);

    vertex(-20, 20);
    vertex(20, 0);
    vertex(20, -20);
    vertex(-20, -20);
    
    endShape();
}

```

Would appreciate any help.

---

<div class="post-metadata">

### Author: ![MxFxM](https://avatars.discourse-cdn.com/v4/letter/m/71e660/32.png) [@MxFxM](https://discourse.processing.org/u/MxFxM)
#### Post date: [January 2, 2019, 2:05pm UTC](https://discourse.processing.org/t/mirroring-pshape-objects-translation-rotation-issue/7099/2 "2019-01-02T14:05:18Z")

</div>

Hi,  
maybe it would be easier to rotate when you start your shape at a corner (0,0) instead of in the middle. Then you have a nice reference for how you rotate?

---

<div class="post-metadata">

### Author: ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)
#### Post date: [January 2, 2019, 10:57pm UTC](https://discourse.processing.org/t/mirroring-pshape-objects-translation-rotation-issue/7099/4 "2019-01-02T22:57:38Z")

</div>

My last question about angles was also left unanswered. Please tell me if I’m not clear enough when formulating the issue or if the question is too complex for the forum.

---

<div class="post-metadata">

### Author: ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)
#### Post date: [January 5, 2019, 11:34pm UTC](https://discourse.processing.org/t/mirroring-pshape-objects-translation-rotation-issue/7099/5 "2019-01-05T23:34:22Z")

</div>

Trying again with pictures to be as clear as possible.

I would like to:

- **translate** , **invert** and **rotate** a single quadrilateral (PShape object) multiple times
- then **change the height** of one of its 2 top vertices

so as the whole thing act as an articulated arm **that can be bent**  **either to the right or the left**.

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d791ff5ead3508a78be925219e1ddacc1780315b.png)

* * *

![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0a127bd3fd8fecdd895645bf09f7167285ff72fc.png)

* * *

![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/83ec12b9a8854c6377d8bdb55c16f762baeee95f.png)

* * *

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/ade8c7136b511901e4df897a21905c45116ff848.png)

* * *

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/aaa2d617a6018816efe256fdd667c811e38fcb0b.png)

I know that I can:

- **translate** the quadrilateral using `translate()`
- **flip** (invert) it with `scale(1, -1)`
- **rotate** it using the `atan2()` function

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/030e27ca3c3a90102d924007c33370bfa1469a38.png)

**PROBLEM**

When combining the 3 together I end up with this:

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1f95d0b6ceb4523de2971780017fe97c9b878f98.gif)

The angle of rotation seems correct but obviously there’s something off with the translation (either on the X or Y axis) and I can’t figure out what exactly.

I would really appreciate if someone could help me understand what I’m doing wrong and how to fix this problem.

```auto
int W = 40;
int H = 40;
int Yoffset = 10; 
    
float[] p0 = {-W/2, -H/2};
float[] p1 = {W/2, -H/2 - Yoffset};
float[] p2 = {W/2, H/2};
float[] p3 = {-W/2, H/2};
    
PShape object;
    
    
void setup(){
    size(600, 600, P2D);
    smooth(8);
    noFill();
}
    
        
void draw(){
    background(255);
        
    pushMatrix();
    translate(width>>1, height>>1);
        
    float angle = atan2(p1[1] - p0[1], p1[0] - p0[0]);
        
    for (int i = 0; i < 6; i++){
          
        int factor = (i % 2 == 0) ? 1 : -1;
            
        //Height translation
        translate(0, H*factor);
            
        //Flip all quads except 1st one
        if (i > 0){
          scale(1, -1);
        }
            
        //Rotate once every 2 quads
        if (i%2 == 1){
          rotate(-angle*2);
        }
            
        object();
      }
    
    popMatrix();
        
}
        
        
void object() {
    beginShape(QUADS);
    
    vertex(p0[0], p0[1]);
    vertex(p1[0], p1[1]);
    vertex(p2[0], p2[1]);
    vertex(p3[0], p3[1]);
        
    endShape();
}

```

---

<div class="post-metadata">

### Author: ![bryan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bryan/32/2538_2.png) [@bryan](https://discourse.processing.org/u/bryan)
#### Post date: [January 5, 2019, 11:38pm UTC](https://discourse.processing.org/t/mirroring-pshape-objects-translation-rotation-issue/7099/6 "2019-01-05T23:38:08Z")

</div>

Could be the order of the transformations, I think you have to scale first, then translate and finally rotate

---

<div class="post-metadata">

### Author: ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)
#### Post date: [January 5, 2019, 11:40pm UTC](https://discourse.processing.org/t/mirroring-pshape-objects-translation-rotation-issue/7099/7 "2019-01-05T23:40:42Z")

</div>

Hi @bryan,

No, I’m afraid the problem here is not the order of the transformations.

I suspect a missing translation for the pivot but can’t say for sure. I’m really at loss.

---

<div class="post-metadata">

### Author: ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)
#### Post date: [January 6, 2019, 5:55pm UTC](https://discourse.processing.org/t/mirroring-pshape-objects-translation-rotation-issue/7099/8 "2019-01-06T17:55:17Z")

</div>

Finally found a workaround

**Fixes** :

- the vertices order of the `QUADS` was incorrect
- the computation of the pivot height was missing
- the translation based on that height needs to be operated before **and** after the rotation (not sure to understand the reason)
- the rotation angle has to be multiplied by -1 (negative angle) in order to change the bending side

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2df31d8cb0e9091f6a5455a705985f6d4048b1a5.gif)
