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

**URL:** https://discourse.processing.org/t/how-do-i-generate-circles-appearing-one-at-a-time-rather-than-a-whole-cluster-of-circles-in-p5-js/24182
**Category:** Coding Questions
**Tags:** homework
**Created:** [September 28, 2020, 4:35am UTC](https://discourse.processing.org/t/how-do-i-generate-circles-appearing-one-at-a-time-rather-than-a-whole-cluster-of-circles-in-p5-js/24182 "2020-09-28T04:35:07Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![sam101](https://avatars.discourse-cdn.com/v4/letter/s/c67d28/32.png) [@sam101](https://discourse.processing.org/u/sam101)
#### Post date: [September 28, 2020, 4:35am UTC](https://discourse.processing.org/t/how-do-i-generate-circles-appearing-one-at-a-time-rather-than-a-whole-cluster-of-circles-in-p5-js/24182/1 "2020-09-28T04:35:07Z")

</div>

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?

```auto
var data; 
var instagram, snapchat, messenger, facebook, email, instagramCol, snapchatCol, messengerCol, facebookCol, emailCol;
var whichHour=0; //for iterating through data
var sizeMultiplier = 20; 
var time, size;
function preload (){
  data =loadJSON("Sunday.json");
}
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 🙂

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [September 28, 2020, 7:12am UTC](https://discourse.processing.org/t/how-do-i-generate-circles-appearing-one-at-a-time-rather-than-a-whole-cluster-of-circles-in-p5-js/24182/2 "2020-09-28T07:12:39Z")

</div>

Hello,

Just a hint… you can use draw() as your “for loop”.  
This is one way to do it.

In your example with frameRate(2):

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

```

`:)`

---

<div class="post-metadata">

### Author: ![Hyperion65](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hyperion65/32/10569_2.png) [@Hyperion65](https://discourse.processing.org/u/Hyperion65)
#### Post date: [September 28, 2020, 10:56am UTC](https://discourse.processing.org/t/how-do-i-generate-circles-appearing-one-at-a-time-rather-than-a-whole-cluster-of-circles-in-p5-js/24182/3 "2020-09-28T10:56:45Z")

</div>

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”  
modulo is also helpful:  
`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

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [September 28, 2020, 11:33am UTC](https://discourse.processing.org/t/how-do-i-generate-circles-appearing-one-at-a-time-rather-than-a-whole-cluster-of-circles-in-p5-js/24182/4 "2020-09-28T11:33:27Z")

</div>

> [@Hyperion65](#):
>
> if (millis%1000 =0) { do something }

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():

> [@Need assistance with timing! \[millis()\]](https://discourse.processing.org/t/need-assistance-with-timing-millis/18854/4):
>
> I provided a simple example: int whattimeisitnow; int whattimeisitatstartofstopwatch; int timepassedtoresetstopwatch = 1000; //setup runs once void setup() { whattimeisitatstartofstopwatch = millis(); } //draw loops 60 frames per sec void draw() { whattimeisitnow = millis(); if (whattimeisitnow \> whattimeisitatstartofstopwatch + timepassedtoresetstopwatch) { println("1000 ms have passed!"); whattimeisitatstartofstopwatch = millis(); //reset st…

`:)`

---

<div class="post-metadata">

### Author: ![sam101](https://avatars.discourse-cdn.com/v4/letter/s/c67d28/32.png) [@sam101](https://discourse.processing.org/u/sam101)
#### Post date: [September 28, 2020, 11:39am UTC](https://discourse.processing.org/t/how-do-i-generate-circles-appearing-one-at-a-time-rather-than-a-whole-cluster-of-circles-in-p5-js/24182/5 "2020-09-28T11:39:53Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Hyperion65](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hyperion65/32/10569_2.png) [@Hyperion65](https://discourse.processing.org/u/Hyperion65)
#### Post date: [September 28, 2020, 3:01pm UTC](https://discourse.processing.org/t/how-do-i-generate-circles-appearing-one-at-a-time-rather-than-a-whole-cluster-of-circles-in-p5-js/24182/6 "2020-09-28T15:01:15Z")

</div>

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 😉