Q:

p5.js a problem when using setInterval, array.push(), for loop to create animation

Using setInterval, array.push(), for loops, I want one bubble to appear every 3 seconds until the length of the array bubbles becomes 10.
However, when I execute my code, 10 bubbles appear altogether at once, and console.log(array.length) shows that the length is growing, although I set it to be smaller than 10.
I think there is something wrong with how I arrange the codes, can anyone help?

let bubbles = [];
var n = 10;

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

function addBubbles() {
    for (let i = 0; i < n; i++) {
        let x = random(50, 550);
        let y = random(50, 350);
        let r = random(10, 50);
        let b = new Bubble(x, y, r);
        setInterval(bubbles.push(b), 3000);
    }
}

function draw() {
    background(0);
    addBubbles();
    for (let i = 0; i < n; i++) {
      bubbles[i].show();
      bubbles[i].move();
    }
}

class Bubble {
    constructor(_x, _y, _r, _c) {
        this.x = _x;
        this.y = _y;
        this.r = _r;
        this.c = _c;
    }

    move() {
        this.x = this.x + random(-5, 5);
        this.y = this.y + random(-5, 5);
    }

    show() {
        stroke(255);
        noFill();
        strokeWeight(4);
        ellipse(this.x, this.y, this.r * 2);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

A:

There are a few problems in your code.
Problem 1:
Every time your canvas is drawn, you're starting 10 intervals. Each of these intervals will run a function every 3 seconds. This would quickly (and exponentially) give you a lot of bubbles.
To add 1 bubble every 3 seconds, you only need to start 1 interval. You can do this in your setup function as it's only called once.
You can add a check to the addBubble function that will cancel the interval once you have a certain number of bubbles.
Problem 2:
You're not passing a function as a parameter when calling setInterval().
You've passed bubbles.push(b) as the function to run every 3 seconds. bubbles.push(b) doesn't return a function type.
Instead of passing the return value of bubbles.push, we'll pass a function that adds a bubble to your array.
Problem 3:
You're only iterating over n (10) of your bubbles when drawing the canvas. Instead, you need to iterate over all of them.
let bubbles = [];
let maxBubbles = 10;
let interval;

funtion setup() {
  createCanvas(600, 400);
  interval = setInterval(addBubble, 3000);
}

function addBubble() {
  let x = random(50, 550);
  let y = random(50, 350);
  let r = random(10, 50);
  let b = new Bubble(x, y, r);
  bubbles.push(b);

  if (bubbles.length >= maxBubbles) {
    clearInterval(interval);
  }
}

function draw() {
  background(0);

  for (let bubble of bubbles) {
    bubble.show();
    bubble.move();
  }
}

