Make different objects appear at different timing

p5.js Coding Questions
1

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

where you find this? pls link
i play it for a restart timer just to get a idea about this:

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???

3

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.

4

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??

5

Is this what you’re wanting?

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

1 Like
6

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
7

thanks, now i see

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 ).