Ho do I add a delay to items being generated from an array?

trink

I am trying to add zzz's to my sleeping background image. My Z is in a constructor function and I want to make an array of zzz's coming from a specific point in the sketch constantly at intervals of a few seconds each. They reset if they leave the screen at the top. Anybody have any ideas as to the best way to do this? (thanks in advance!)

var awake;
var ray;

var radius = 156;
var x = 672;
var y = 356;

var zzz = []; // empty array of zzz's

// var zx = x -72 ;
// var zy = y;

var button = false;
var playing = false;

function preload() {
  asleep = loadImage("images/asleep.png");
  awake = loadImage("images/lightbulb.png");
  ray = loadAnimation("images/ray_01.png", "images/ray_04.png");
}

function setup() {
  createCanvas(1024, 768);

  frameRate(20);

  // for (var i = 0; i < 5; i++) { //was trying to just have 5 random sized Z's on the screen at any one time
    zzz.push(new Z());
    // zzz[i] = new Z();
  // }
}

function draw() {


  if (button) {

    background(84, 161, 224);
    image(awake, 0, 0, width, height);
    drawSprites();
    playing = true;


  } else {

    image(asleep, 0, 0, width, height);
    // z();

    for (var i = 0; i < zzz.length; i++) {
      zzz[i].move();
      zzz[i].display();
      zzz[i].reset();

    }
  }
}

function mousePressed() { 

  var d = dist(mouseX, mouseY, x, y); 
  if (d < radius) {

    if (!playing) { //if the animation is not playing then play

      var rays = createSprite(x, 240);
      rays.addAnimation("normal", "images/ray_01.png", "images/ray_04.png");
    }

    button = !button; //toggle state
  }
}

function Z() {
  this.x = 600;
  this.y = 350;
  this.textsize = random(20, 50);
  // this.speed = 1;

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

  this.display = function() {

    fill(255);
    textSize(this.textsize);
    text("Z", this.x, this.y);

  };

  this.reset = function() {
    if (this.y < 0) {
      this.y = 400;
    }
  };

};

trink

okay so managed to crack this one! I just needed to take a step back, think about what I was trying to do and go again! I'm posting the code below to answer this

var awake;
var ray;

var radius = 156;
var x = 670;
var y = 400;

var zzz = []; // empty array of zzz's

var button = false;
var playing = false;

function preload() {
  asleep = loadImage("images/asleep.png");
  awake = loadImage("images/lightbulb.png");
  ray = loadAnimation("images/ray_01.png", "images/ray_04.png");
}

function setup() {
  createCanvas(1024, 768);

  frameRate(20);

  for (var i = 0; i < 5; i++) {
    zzz[i] = new Z(x, y, random(4), random(20, 40), random(200, 255));
  }
}

function draw() {


  if (button) {

    background(84, 161, 224);
    image(awake, 0, 0, width, height);
    drawSprites();
    playing = true;


  } else {

    image(asleep, 0, 0, width, height);

    for (var i = 0; i < zzz.length; i++) {
      zzz[i].move();
      zzz[i].display();
    }
  }
}

function mousePressed() { 

  var d = dist(mouseX, mouseY, x, y); 
  if (d < radius) {

    if (!playing) { 

      var rays = createSprite(x, 240);
      rays.addAnimation("normal", "images/ray_01.png", "images/ray_04.png");
    }

    button = !button; 
  }
}


function Z(tempX, tempY, tempYspeed, tempSize, tempC) { 

  this.xpos = tempX;
  this.ypos = tempY;
  this.yspeed = tempYspeed;
  this.textsize = tempSize;
  this.c = tempC;

}

Z.prototype.display = function() {
 fill(this.c);
  textSize(this.textsize);
  text("Z", this.xpos, this.ypos)
};

Z.prototype.move = function() {
  this.xpos = this.xpos + random(-1, 1);
  this.ypos = this.ypos - this.yspeed;
  if (this.ypos < 100) { //where z's finish
    this.ypos = 400; //reset
  }
};