constructor(_imgs, _x, _y) {

    this.x = _x;

    this.y = _y;

    this.delay = 100;

    this.imgs = _imgs;

    this.currentIndex = 0;

    this.lastUpdate = 0;

  }

​

  draw() {

    if (millis() > this.lastUpdate + this.delay) {

      this.currentIndex = (this.currentIndex + 1) % this.imgs.length;

      this.lastUpdate = millis();

    }

​

    let currentImg = this.imgs[this.currentIndex];

​

    push();

    translate(this.x, this.y);

    translate(-currentImg.width / 2, -currentImg.height / 2);

    image(currentImg, 0, 0);

    pop();

  }

}

​

let spriteInfo = [

  { name: "princess-muscles", imgCount: 6, imgs: [] },

  { name: "ice-king", imgCount: 6, imgs: [] },

];

​

function preload() {

  for (let si = 0; si < spriteInfo.length; si++) {

    let info = spriteInfo[si];

    let name = info.name;

    for (let ii = 0; ii < info.imgCount; ii++) {

      let mImg = loadImage("./sprites/" + name + "/tile00" + ii + ".png");

      info.imgs.push(mImg);

    }

  }

}

​

let mGifs = [];

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  mGifs.push(new Gif(spriteInfo[0].imgs, width / 2, height / 2));

}

​

function draw() {

  background(220);

  for (let i = 0; i < mGifs.length; i++) {

    mGifs[i].draw();

  }

}

​

function byY(gifA, gifB) {

  return gifA.y - gifB.y;

}

​

function mouseClicked() {

  let mIndex = random([0, 1]);

  mGifs.push(new Gif(spriteInfo[mIndex].imgs, mouseX, mouseY));

  mGifs.sort(byY);

}

​