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


#1

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

#2

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.

Link to the reference: https://processing.org/reference/pushMatrix_.html


EDIT:

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


#3

Hello,

Thank you for responding to my inquiry. So what you’re saying is that by placing push and pop before and after (respectively) each shape and scale variable, they should be seen as separate objects, and as a result scale accordingly?