# Objects becoming children of other objects. How do I make them completely separate?

Greetings,

I am trying to create a small animation where squares scale down at different speeds from different positions to eventually stop at a specific size and create a mosaic made of several squares. I wrote different variables and values for each of the four squares I currently have, but the third and fourth squares seem to be children of the second, and scale down according to the values in that one. Is it possible to make each square completely independent of each other so they can scale down at different rates?

My code as of right now is here:

``````var b = 100;
var shrink = 0.5;

var c = 100;
var shrink2 = 0.3;

var d = 100;
var shrink3 = 1;

var e = 100;
var shrink4 = 0.8;

function setup() {
createCanvas(400, 400);
noStroke()

}

function draw() {
background(20);
scale(b);
rect(0, 100, 10, 10);
b = b - shrink

if (b < 10){
shrink = .1;
}

if (b < 1){
shrink = 0;
}

scale(c)
rect(20, 100, 10, 10);
c = c - shrink2

if (c < 10){
shrink2 = 0.5;
}
if (c < 1){
shrink2 = 0;
}

scale(d)
rect(200, 300, 10, 10);
d = d - shrink3

if (d < 10){
shrink3 = 0.51;
}
if (d < 1){
shrink3 = 0;
}

scale(e)
rect(300, 250, 10, 10);
e = e - shrink4

if(e < 10){
shrink4 = .4;
}
if (e < 1){
shrink4 = 0;
}
}
``````

Hi,

All the transorfm operation (translate, scale, rotate…) are cumulative. Meaning that if you put to `rotate(20)` it is like putting one `rotate(40)`.

In your case you want to use popMatrix() and pushMatrix() so the transformation appears only in specific part of the code.

I forgot you were using p5.js. I think the equivalent is simply `pop()` and `push()`: https://p5js.org/reference/#/p5/push