Gifs don't animate when drawing to p5.Graphics

[davepagurek]

Most appropriate sub-area of p5.js?

• [ ] Accessibility
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] DOM
• [ ] Events
• [X] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Build process
• [ ] Unit testing
• [ ] Internationalization
• [ ] Friendly errors
• [ ] Other (specify if possible)

p5.js version

1.9.2

Web browser and version

Firefox 117

Operating system

MacOS 14.2.1

Steps to reproduce this

Steps:

1. Load a gif
2. Create a graphic
3. Draw the gif to the graphic
4. Draw the graphic to the main canvas

Only the first frame of the gif plays. This is because p5.Image::_animateGif tries to access pInst._lastRealFrameTime, which exists on the main canvas but doesn't on the graphic.

Snippet:

let gif;

// Load the image.
let cnv;
function preload() {
  gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');
}

function setup() {
  createCanvas(100, 100);
  cnv = createGraphics(100, 100);
}

function draw() {
  // manually update the time of the graphic
  cnv._lastRealFrameTime = millis()
  cnv.background(255);
  cnv.image(gif, 0, 0);
  image(cnv, 0, 0);
}

Note that as a quick workaround, one can manually set the time on the graphic:

 let gif;

 // Load the image.
 let cnv;
 function preload() {
   gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');
 }

 function setup() {
   createCanvas(100, 100);
   cnv = createGraphics(100, 100);
 }

 function draw() {
+  // manually update the time of the graphic
+  cnv._lastRealFrameTime = millis()
   cnv.background(255);
   cnv.image(gif, 0, 0);
   image(cnv, 0, 0);
 }

[kaiserarg]

Hey, I would like to work on this. Thanks!