# How do I generate circles appearing one at a time, rather than a whole cluster of circles in p5.js

Hi everyone, so I was wondering how do I get the ellipse that I have drawn to appear one at a time, rather than having 10 all appear at once as a group?

``````var data;
var whichHour=0; //for iterating through data
var sizeMultiplier = 20;
var time, size;
}
function setup() {
createCanvas (windowWidth, windowHeight);
background (255);
noStroke ();
textSize (20);
instagramCol = color (142, 68, 173, 30);
messengerCol = color (133, 193, 233, 30);
snapchatCol = color (247, 220, 111, 30);
facebookCol = color (118, 215, 196, 30);
emailCol = color (178, 186, 187, 30);
frameRate(2);

}
function draw () {
for (whichHour=0; whichHour<data.hours.length; whichHour++){
fill (instagramCol);
size = data.hours[whichHour].instagram*sizeMultiplier;
ellipse (random(20+(whichHour*50)), height/4, size, size);

}

}
``````

Any suggestions would be much appreciated

Hello,

Just a hintâ€¦ you can use draw() as your â€śfor loopâ€ť.
This is one way to do it.

``````function draw()
{
//for (whichHour=0; whichHour<data.hours.length; whichHour++)
{
fill (instagramCol);
size = data.hours[whichHour].instagram*sizeMultiplier;
ellipse (random(20+(whichHour*50)), height/4, size, size);
}
whichHour++;
//And so on... you will have to complete this part.
}
``````

`:)`

1 Like

Hello, I would not lower the frameRate() since it is slowing down your whole sketch.

One interesting way imho is to use millis();
you can do things like saying: â€śdo something every 10 secondsâ€ť
`if (millis%1000 =0) { do something }`
= if the current time (in milliseconds) divided by 1000 is zero -> that happens every secondâ€¦

then you could increase the radius of the ellipse you drawâ€¦
â€¦ and use background(0); so you do not draw the ellipse(s) on top of each other

other than thatâ€¦ listen to @glv

1 Like

if (millis%1000 == 0)
The chances of this happening are extremely low at the instant that you are checking millis() during a frame (draw() cycle).

if (frameCount%60 == 0)
This will work for frameCount since this increments each frame (draw() cycle).

This is a Processing example that uses millis():

`:)`

2 Likes

ahh yes I was looking into frameCount! Thanks for the suggestion

hm ok. ill believe you there, I use it for years like this and it always worked though
frameCount sure is a good option, but it doesnâ€™t give you measure of how much time has passed
probably a more complicated construction using both can root out all possible errors