Make different objects appear at different timing

Hi, I have a code where I intend circles to appear on the canvas at different timing, then enlarge and disappear. Despite my attempts, they all seem to appear simultaneously.
Anything wrong with setTimeout here? Thanks.

``````let x = [20, 40, 60, 80, 100, 120];
let y = [30, 90, 60, 120, 180, 150];
let ts = [1, 4, 6, 8, 10, 12];
let i

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

}

function draw() {
background(255);
for (let i = 0; i < 6; i++) {
stroke(255, 0, 0);
ellipse(2 * x[i], 2 * y[i], 2, 2)
setTimeout(enlargingCircle(2 * x[i], 2 * y[i]), ts[i] * 1000);
}

}

function enlargingCircle(xpos, ypos) {
fill(0, 0, 20, 255 - frameCount);
if (frameCount <= 60) {
ellipse(xpos, ypos, frameCount, frameCount);
}
}
``````

where you find this? pls link

https://editor.p5js.org/kll/sketches/saSwqOoUR
of any help?
i use one timer only,
you seem to (re)start timer 60 * 6 per second???

Hi, Thanks! I tried to incorporate your code for my purpose by using rr as radius as well as transparency, but it doesnâ€™t work as expected. For some reason rr becomes NaN in console. The big circle stopped showing and I wasnâ€™t sure why.

``````let x = [20, 40, 60, 80, 100, 120];
let y = [30, 90, 60, 120, 180, 150];
let ts = [1, 4, 6, 8, 10, 12];
let dt = 3000;
let donow = false;
let rr;
function setup() {
createCanvas(720, 400);

}

function draw() {
background(255);
console.log(donow);
console.log(rr)
for (let i = 0; i < 6; i++) {
stroke(255, 0, 0);
ellipse(2 * x[i], 2 * y[i], 2, 2)
enlargingCircle(2 * x[i], 2 * y[i]);
}
}

function start() {
print("start");
donow = true;
rr = 255;
}

function enlargingCircle(xpos, ypos) {
fill(0, 0, 20, rr);
rr--;
if (rr<=10) {
donow = false;
setTimeout(start, dt);
ellipse(xpos, ypos, rr/50, rr/50);
}
}
``````

Also, how could I make dt to a varying timestamp like the ts array instead of fixed interval?

I havenâ€™t found similar code yet, so I donâ€™t know how to answer your first question.

sorry, no idea how to fix,
but i try a easy shuffling, not a timed thing

``````let x = [20, 40, 60, 80, 100, 120];
let y = [30, 90, 60, 120, 180, 150];
let r = [50, 10, 100, 30, 200, 80];
let rc= [0,0,0,0,0,0];               // running radius/transparency factor

function setup() {
createCanvas(720, 400);
frameRate(5);
}

function draw() {
background(255);
translate(width / 2, height / 2);
draw_circles();
}

function draw_circles() {
for (let i = 0; i < 6; i++) {
stroke(255, 0, 0);
fill(0, 200, 20, 200-rc[i]);     // when bigger more transparent
ellipse(x[i], y[i], rc[i])
rc[i]--;
if (rc[i] <= 1)  rc[i] = r[i];  // that give a nearly random cycle, but it is shuffling?
}
}

``````

you need to give it some time to run, to see its variations.

sorry, i mean where you find that command?
`setTimeout`
is there any documentation what would explain you about that,
that there could/should be only ONE timer possible, not a timer for each circle??

Is this what youâ€™re wanting?

https://editor.p5js.org/ZachMcMkay/sketches/UzyzllSxJ

1 Like

I saw it from here: https://www.youtube.com/watch?v=nGfTjA8qNDA
With the very helpful replies I might be able to get going now. Thanks.

1 Like

thanks, now i see
https://www.w3schools.com/jsref/met_win_setTimeout.asp
but nowhere mentioned about 6 parallel timer ( or nested )
is possible or not.
( i am sure it is not but i might be wrong )

BUT he used the word â€śconnectedâ€ť means at time out event auto restart.
in his next video actually do same with the

setInterval()

still all very different from your FOR 6 loop ( inside draw ) calling

setTimeout();

if you insist in 6 independent timer running parallel
you should first try to make your own timer by millis
and then start thinking how to do it 6 times parallel,
you will learn that in that case you need 6 separate memory variables
( and like you want also 6 separate setpoint variables ).

https://editor.p5js.org/kll/sketches/zenbBhwf7