# My p5.js -2nd timed setInterval(); rolling ball flickers

**URL:** <https://discourse.processing.org/t/my-p5-js-2nd-timed-setinterval-rolling-ball-flickers/23218>\
**Category:** Coding Questions\
**Created:** [August 13, 2020, 1:52am UTC](https://discourse.processing.org/t/my-p5-js-2nd-timed-setinterval-rolling-ball-flickers/23218 "2020-08-13T01:52:20Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![HFredrickson](https://avatars.discourse-cdn.com/v4/letter/h/d2c977/32.png) [@HFredrickson](https://discourse.processing.org/u/HFredrickson)\
**Post date:** [August 13, 2020, 1:52am UTC](https://discourse.processing.org/t/my-p5-js-2nd-timed-setinterval-rolling-ball-flickers/23218/1 "2020-08-13T01:52:20Z")

</div>

This p5.js code works in my local server Chrome browser. The problem is the 2nd moving circle created flickers as it moves.

```
I tried:

```

1. setTimeout(); instead of setInterval();-no change
2. window.fill(51) to try to solve a possible “This” scope problem but nothing changed. The 2nd ball does seem to flicker differently when I use a time interval of 1997 instead of 2000 so maybe the canvas refresh rate is out of synch somehow between the 2 balls.refresh.

Hopefully some smart reader can just see some oversight of mine. (This is my first post so suggestions on improving my posts are welcome.  
Thank you very much.

\<  
var x = 0;  
var x2 = 0;  
var speed = 3;

var playing = false;  
var mousePressed;  
var cnv;

function setup() {  
cnv = createCanvas(600, 400);  
}

function draw() {  
setInterval(drawball, 1000);  
setInterval(draw2ball, 2000);  
}

function drawball() {  
background(255, 0, 255);  
fill(51);[//window.fill](https://window.fill)(51) doesn’t help  
strokeWeight(4);  
stroke(255, 204, 100);  
ellipse(x, 50, 50, 50);

```
if(x>width) {
    speed=-1;
    }
    x= x + speed;     

```

}

function draw2ball() {  
x2=x-100  
strokeWeight(4);  
fill(51);[//window.fill](https://window.fill)(51) doesn’t help  
stroke(0, 204, 100);  
ellipse(x2, 200, 100, 100);  
} /\>

---

<div class="post-metadata">

**Author:** ![Hapiel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hapiel/32/10226_2.png) [@Hapiel](https://discourse.processing.org/u/Hapiel)\
**Post date:** [August 13, 2020, 2:31am UTC](https://discourse.processing.org/t/my-p5-js-2nd-timed-setinterval-rolling-ball-flickers/23218/2 "2020-08-13T02:31:43Z")

</div>

Why do you want to use setInterval?

I haven’t worked out exactly what is going on yet, but right now, in every frame you set a new timer for 1000ms. So one second later, every frame a timer will go off. Sometimes more than one.

It’s a rather odd use of the setInterval function, I think…

What is it that you want to happen?

---

<div class="post-metadata">

**Author:** ![HFredrickson](https://avatars.discourse-cdn.com/v4/letter/h/d2c977/32.png) [@HFredrickson](https://discourse.processing.org/u/HFredrickson)\
**Post date:** [August 13, 2020, 5:02am UTC](https://discourse.processing.org/t/my-p5-js-2nd-timed-setinterval-rolling-ball-flickers/23218/3 "2020-08-13T05:02:50Z")

</div>

> [@HFredrickson](#):
>
> setTimeout()

Actually I want to use- setTimeout() to start a new ball moving behind the previous ball.

---

<div class="post-metadata">

**Author:** ![jamesb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jamesb/32/10257_2.png) [@jamesb](https://discourse.processing.org/u/jamesb)\
**Post date:** [August 13, 2020, 7:12am UTC](https://discourse.processing.org/t/my-p5-js-2nd-timed-setinterval-rolling-ball-flickers/23218/4 "2020-08-13T07:12:28Z")

</div>

Hey HFredrickson,

As Hapiel pointed out, the draw() method is called every time the canvas is rendered to the screen. So the general flow of your code would be:

```auto
setup - create the canvas
while program is running
    draw - function called
        -> wait one second then draw ball 1
        -> wait two more seconds then draw ball 2
    go back to the start of the while loop

```

So every time your draw function is invoked, a new interval is started and the second ball is not drawn until this finishes.

Maybe it would be better to create both balls in the setup function along with a flag variable.  
You could then change the flag variable after a certain time and the second ball would then only be drawn after the variable evaluates to true.

---

<div class="post-metadata">

**Author:** ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)\
**Post date:** [August 13, 2020, 3:03pm UTC](https://discourse.processing.org/t/my-p5-js-2nd-timed-setinterval-rolling-ball-flickers/23218/5 "2020-08-13T15:03:53Z")

</div>

Hey there !

A warm welcome to the Processing forum !

Always remember to put all your code are these beauties `Preformatted text` it just make’s your code look nice and epic.

I am here to help you out with this.

> [@HFredrickson](#):
>
> Actually I want to use- setTimeout() to start a new ball moving behind the previous ball.

Now you could play around utilizing `setTimeout` but it gonna get messy gotta keep recalling the setTimeouts and oh oof it just not great to use them in this scenario !

P5.js offers something called `frameCount` this counts how many frames have been drawn on screen. With this we can separate when each ball moves. By specifying them to move after a different amount of frames for each of them.

[This example should give a taste of what I mean !](https://editor.p5js.org/InferNova/sketches/qRDKrD1ew)

I think the example is straight-forward so I won’t bore you explaining more but if you do have further questions. Let me know !

Happy coding !

---

<div class="post-metadata">

**Author:** ![HFredrickson](https://avatars.discourse-cdn.com/v4/letter/h/d2c977/32.png) [@HFredrickson](https://discourse.processing.org/u/HFredrickson)\
**Post date:** [February 12, 2022, 2:48am UTC](https://discourse.processing.org/t/my-p5-js-2nd-timed-setinterval-rolling-ball-flickers/23218/6 "2022-02-12T02:48:57Z")

</div>

Below is the final solution I used:

> <https://stackoverflow.com/questions/71088562/online-piano-works-but-i-want-to-eliminate-static-sound>