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