If I change tabs and come back, my GIF freezes for a while (p5.js)

Question

Code for Catbus game

Whenever I try to run it, it works fine, but when I change to another tab and back, the gif freezes for the same amount of time I was in the other tab. I'm trying to be able to run both the background AND the gif. So, do y'all know anything that may fix the gif?

(Code is as follows)

let img;
let img2;
var bgImg;
var x1 = 0;
var x2;

var scrollSpeed = 4;

var screen = 0;
var y = -20;
var x = 200;
var speed = 2;
var score = 0;

let bing


function preload() {
  bgImg = loadImage("backgwound.png");

  bing=loadSound('catbus theme song.mp3')

}

function setup() {
  createCanvas(1000, 1000);

  img = loadImage("backgwound.png");

  img2 = loadImage("catgif.gif");

  x2 = width;

bing.loop()
  
}

function draw() {
  if (screen == 0) {
    startScreen();
  } else if (screen == 1) {
    gameOn();
  } else if (screen == 2) {
    endScreen();
  }

  let time = frameCount;

  image(img, 0 - time, 0);

  image(bgImg, x1, 2, width, height);
  image(bgImg, x2, 2, width, height);

  x1 -= scrollSpeed;
  x2 -= scrollSpeed;

  if (x1 <= -width) {
    x1 = width;
  }
  if (x2 <= -width) {
    x2 = width;
  }

  scale(0.4, 0.4);
  translate(300, 1855);

  image(img2, 0, 0);
}

function startScreen() {
  background(96, 157, 255);
  fill(255);
  textAlign(CENTER);
  text("CAT BUS BIZARRE ADVENTURE", width / 2, height / 2);
  text("click any key to START", width / 2, height / 2 + 20);
  reset();
}

function gameOn() {
  background(0);
  text("SCORE = " + score, 30, 20);
  ellipse(x, y, 20, 20);
  rectMode(CENTER);
  rect(mouseX, height - 10, 50, 30);
  y += speed;
  if (y > height) {
    screen = 2;
  }
  if (y > height - 10 && x > mouseX - 20 && x < mouseX + 20) {
    y = -20;
    speed += 0.5;
    score += 1;
  }
  if (y == -20) {
    pickRandom();
  }
}

function pickRandom() {
  x = random(20, width - 20);
}

function endScreen() {
  background(150);
  textAlign(CENTER);
  text("GAME OVER", width / 2, height / 2);
  text("SCORE = " + score, width / 2, height / 2 + 20);
  text("click space to play again", width / 2, height / 2 + 40);
}

function mousePressed() {
  if (screen == 0) {
    screen = 1;
  } else if (screen == 2) {
    screen = 0;
  }
}

function reset() {
  score = 0;
  speed = 2;
  y = -20;
}

Answer 1

I wasn't able to find the route cause of the issue but I found a potential workaround, and it might even benefit you later when adding the ability for the cat to jump.

Rather than using loadImage I'm using createImg - here's a link to the docs.

  let cat = {
    x: 50,
    y: 730
  }


  ...
  // in setup()

  catGif = createImg("catgif.gif");
  catGif.position(cat.x, cat.y);
  catGif.size(200, 100);

If you get stuck, I've implemented the changes in this p5.js sketch to point you in the right direction.

Then later on, in your draw() method you can dynamically set the position of the cat based on some velocity, I'd recommend taking a look at this post as it should help you understand forces and how they can be applied to your game.

Answer 2

The problem here is actually a bug in p5.js. The code in _animateGif that gets the current time is oddly buggy (sometimes it gets a time in the past). I don't understand why the authors of that code decided to use pInst._lastFrameTime + pInst.deltaTime instead of just using pInst.millis().