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

p5.js Coding Questions
1

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 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 :slightly_smiling_face:

2

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

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
3

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

1 Like
4

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
5

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

6

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