# Shapes not in their correct place

**URL:** <https://discourse.processing.org/t/shapes-not-in-their-correct-place/6918>\
**Category:** Coding Questions\
**Created:** [December 27, 2018, 3:54am UTC](https://discourse.processing.org/t/shapes-not-in-their-correct-place/6918 "2018-12-27T03:54:03Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ginazx](https://avatars.discourse-cdn.com/v4/letter/g/ba8739/32.png) [@Ginazx](https://discourse.processing.org/u/Ginazx)\
**Post date:** [December 27, 2018, 3:54am UTC](https://discourse.processing.org/t/shapes-not-in-their-correct-place/6918/1 "2018-12-27T03:54:03Z")

</div>

Hiya. I just need help understanding this code. I found this code online in order to create some moving blobs

```
float yOffset = 0.0;
    Blob blobz1 = new Blob();
    Blob bloz2 = new Blob();

void setup() {
  size(800, 800);
  noStroke();

}

void draw() {
  background(50);
  translate(300, height / 2);

   blobz1.makeBlob(150.0, 2, color(90, 255, 116, 255));
   translate(300, height / 2);
   bloz2.makeBlob(150.0, 2.0, color(255, 13, 255, 255));
  //blob.makeBlob(140.0, 5.0, color(0, 139, 255, 255));

  yOffset += 0.02;

```

}

```
class Blob {

  void makeBlob(float radius, float _xoffset, color bColor) {

   fill(bColor);

   
  beginShape();

  float xOffset = _xoffset;
    for (float i = 0; i < 50; i += 0.1) {
      float offset = map(noise(xOffset, yOffset), 0, 1, -30, 30);
      float r = radius + offset;
      float x = r * cos(i);
      float y = r * sin(i);

  vertex(x, y);

      xOffset += 0.1;
    }

    endShape();
  }
}

```

thing is when adding a second blob, they don’t move to the correct co ordinates. All shapes shift out of place. I’m wondering why this is and if anyone can give any insight into correcting this issue. Ive posted a pic to highlight what I mean.

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

Both translate operations denote the same x y position, yet they dont overlap.

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [December 27, 2018, 4:17am UTC](https://discourse.processing.org/t/shapes-not-in-their-correct-place/6918/2 "2018-12-27T04:17:29Z")

</div>

As you have discovered, translations are cumulative! This is not a mistake.

What you should do is call `pushMatrix()` before you translate to a blob’s position, and `popMatrix()` after you have drawn the blob. These functions save - and then later restore - the transformation matrix which stores the cumulative effects of translate(), rotate(), and scale() calls.

Like so:

```auto
void draw() {
  background(50);
  
  pushMatrix();
  translate(300, height / 2);
  blobz1.makeBlob(150.0, 2, color(90, 255, 116, 255));
  popMatrix();

  pushMatrix();
  translate(300, height / 2);
  bloz2.makeBlob(150.0, 2.0, color(255, 13, 255, 255));
  popMatrix();

  yOffset += 0.02;

}

```

---

<div class="post-metadata">

**Author:** ![Ginazx](https://avatars.discourse-cdn.com/v4/letter/g/ba8739/32.png) [@Ginazx](https://discourse.processing.org/u/Ginazx)\
**Post date:** [December 27, 2018, 5:05am UTC](https://discourse.processing.org/t/shapes-not-in-their-correct-place/6918/3 "2018-12-27T05:05:16Z")

</div>

> [@TfGuy44](#):
>
> pushMatrix();

Wow I cant believe it was that simple. Thank you so much.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [January 6, 2019, 11:11pm UTC](https://discourse.processing.org/t/shapes-not-in-their-correct-place/6918/4 "2019-01-06T23:11:37Z")

</div>

and, belatedly: don’t forget (future readers) there are more examples of how to use pushMatrix / popMatrix in the reference:

- [https://processing.org/reference/pushMatrix\_.html](https://processing.org/reference/pushMatrix_.html)
- [https://processing.org/reference/popMatrix\_.html](https://processing.org/reference/popMatrix_.html)