# Make different objects appear at different timing

**URL:** <https://discourse.processing.org/t/make-different-objects-appear-at-different-timing/9806>\
**Category:** Coding Questions\
**Created:** [March 31, 2019, 5:04am UTC](https://discourse.processing.org/t/make-different-objects-appear-at-different-timing/9806 "2019-03-31T05:04:58Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![blkpanther](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Post date:** [March 31, 2019, 5:04am UTC](https://discourse.processing.org/t/make-different-objects-appear-at-different-timing/9806/1 "2019-03-31T05:04:58Z")

</div>

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.

```auto
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);
    }
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [March 31, 2019, 5:58am UTC](https://discourse.processing.org/t/make-different-objects-appear-at-different-timing/9806/2 "2019-03-31T05:58:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![blkpanther](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Post date:** [March 31, 2019, 1:55pm UTC](https://discourse.processing.org/t/make-different-objects-appear-at-different-timing/9806/3 "2019-03-31T13:55:06Z")

</div>

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.

```auto
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.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [March 31, 2019, 3:54pm UTC](https://discourse.processing.org/t/make-different-objects-appear-at-different-timing/9806/4 "2019-03-31T15:54:04Z")

</div>

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

```auto
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.

> [@blkpanther](#):
>
> I haven’t found similar code yet, so I don’t know how to answer your first question.

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

---

<div class="post-metadata">

**Author:** ![ZachMcMkay](https://avatars.discourse-cdn.com/v4/letter/z/8e7dd6/32.png) [@ZachMcMkay](https://discourse.processing.org/u/ZachMcMkay)\
**Post date:** [March 31, 2019, 4:20pm UTC](https://discourse.processing.org/t/make-different-objects-appear-at-different-timing/9806/5 "2019-03-31T16:20:41Z")

</div>

Is this what you’re wanting?

[https://editor.p5js.org/ZachMcMkay/sketches/UzyzllSxJ](https://editor.p5js.org/ZachMcMkay/sketches/UzyzllSxJ)

---

<div class="post-metadata">

**Author:** ![blkpanther](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Post date:** [March 31, 2019, 7:12pm UTC](https://discourse.processing.org/t/make-different-objects-appear-at-different-timing/9806/6 "2019-03-31T19:12:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 1, 2019, 1:58am UTC](https://discourse.processing.org/t/make-different-objects-appear-at-different-timing/9806/7 "2019-04-01T01:58:27Z")

</div>

thanks, now i see

> **[Window setTimeout() Method](https://www.w3schools.com/jsref/met_win_setTimeout.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

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

> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/zenbBhwf7)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.