P5.js: Animated Gif doesn't work inside a createImage()?

[nazimba]

I’m trying to display animated gif within an image created with createImage() but it apparently doesn’t work with the great new gif update made for p5.js? Is this possible? Or am I forgetting something?

let img, gif;

function preload() {
gif = loadImage('assets/test.gif');
}

function setup() {
createCanvas(960, 540);
img = createImage(320, 180);
}

function draw() {
img.image(gif,0,0);
}

II have also noticed that you cannot get a mask of animated gif with the mask() function either, it is right?
https://p5js.org/reference/#/p5.Image/mask

Most appropriate sub-area of p5.js?

• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] Events
• [x] Image
• [x] IO
• [ ] Math
• [ ] Typography
• [x] Utilities
• [ ] WebGL
• [ ] Other (specify if possible)

New feature details:

[stalgiag]

Hi @nazimba --

createImage() returns a p5.Image which does not have a .image() method.

I think you might be looking for createGraphics(). This sketch will work for example:

let graphics, gif;

function preload() {
  gif = loadImage('assets/test.gif');
}

function setup() {
  createCanvas(960, 540);
  graphics = createGraphics(320, 180);
}

function draw() {
  // draw gif into graphics object
  graphics.image(gif, 0, 0);
  // draw graphics object into canvas
  image(graphics, 0, 0);
}

[nazimba]

Hello! Thanks for your help. It's true what you say, it was a typing error because it doesn't really work with createGraphics () either. Have you tested it? You can't even make a mask out of them either.

[DivyamAhuja]

https://editor.p5js.org/DivyamAhuja/sketches/2saib5V_V

Well I noticed something weird like if we just use the above code by @stalgiag it will show static image of gif, but if we call image(gif, 320, 0) then it starts animating the both gifs.

you can see that by uncommenting the line in my sketch.

[nazimba]

You are right. I assumed it was a problem with the online editor for p5 but obviously the same thing happens on my local server. It is the same behavior that it had before the implementation of p5.js to visualize animated gifs without external libraries.

[stalgiag]

I am seeing this locally as well. It is because pInst.deltaTime in this line is always 0 when this function is called from a graphics object Renderer2D.

[DivyamAhuja]

I can't figure out why it's happening cause c1/c2._pInst.deltaTime is returning same value for both.
https://editor.p5js.org/DivyamAhuja/sketches/XSVTNmkLz

Is it related to context or this binding or maybe this.gifProperties?

[stalgiag]

In this line this._pInst actually points to the graphics object which does not have an updating deltaTime. If you change that line to this._pInst._pInst it will work when the GIF is playing inside of a graphic object (as with this issue) but it will break when the GIF is being drawn directly into the canvas.

The most direct (ie hacky) fix would be to do a conditional check to see if the context is a graphics object and pass this._pinst._pinst or this._pInst. Alternatively, graphics objects could track deltaTime.There is likely an elegant solution somewhere in there. Any interest in taking a look @DivyamAhuja ?

[DivyamAhuja]

Yeah sure @stalgiag, I will try solving this one.

[DivyamAhuja]

@stalgiag I went with the direct(hacky) way, as graphics objects keeping track of deltaTime might be tricky. So I think fixing it this way will be better for now.