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

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(51) doesn’t help
stroke(255, 204, 100);
ellipse(x, 50, 50, 50);

if(x>width) {
    x= x + speed;     


function draw2ball() {
fill(51);//window.fill(51) doesn’t help
stroke(0, 204, 100);
ellipse(x2, 200, 100, 100);
} />

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?

1 Like

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

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:

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.

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.

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 !

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 !


Below is the final solution I used: