Shapes not in their correct place

Processing Coding Questions
1

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
Screenshot 2018-12-27 at 03.53.12.png1600×1612 95.5 KB

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

1 Like
2

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:

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;

}
2 Likes
3

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

4

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