Animated GIF support in P5?

brig

Hi. I'm loading up an animated GIF and see that it loads just the first frame (doesn't play the animation). I'm assuming that animated GIFs aren't supported yet in P5 (but hoping I'm wrong!).

Other relevant links I found are: http://forum.processing.org/two/discussion/comment/42053/#Comment_42053 http://extrapixel.github.io/gif-animation/

Thanks.

brig

Aha! Figured it out. Need to use createImg instead of image, to load it as a DOM element.

I was trying this:

var bird = loadImage ("assets/bird_2.gif"); image(bird, 300, 300, 309, 156);

But the correct way is:

var mybird = createImg("assets/bird_2.gif") mybird.position(50,100)

GoToLoop

Actually loadImage() is more appropriate for most cases. It returns a p5.Image object:
http://p5js.org/reference/#/p5/loadImage

While createImg() returns a p5.Element instead.
http://p5js.org/reference/#/p5/createImg

However, in order to use loadImage(), we need to place it inside preload():
http://p5js.org/reference/#/p5/preload

Otherwise, specify a callback function for when loading is complete.

brig

I'd simplified that code for sake of posting. I do have the image being preloaded, but regardless, the GIF animation doesn't play when using loadImage. Have tried noLoop() to see if it was an issue with the draw refreshing so fast that only the first frame of the GIF loaded, repeatedly. But still, animation doesn't play with loadImage.

var bird_loadimg, bird_createimg;

   function preload(){
    bird_loadimg = loadImage ("assets/bird_2.gif");
    bird_createimg = createImg("assets/bird_2.gif");
   }

   function setup() {
  createCanvas(710, 400);
  background('yellow');
 //noLoop();
   }

   function draw() {
  image(bird_loadimg, 300, 300, 309, 156); //loads only first frame
  bird_createimg.position(50,100); //loads GIF correctly
  }

ps. why does markdown only work occasionally in this forum? Three backticks seems to work 50% of the time.

brig

Here's an example: http://dfilm.com/lucs/giftest/

GoToLoop

Three backticks seems to work 50% of the time.

GitHub uses backticks but this forum don't! :-\"

Instead either select whole code text and hit CTRL+O or place it inside <pre lang=> </pre> tags:
http://forum.Processing.org/two/discussion/8045/how-to-format-code-and-text

For example: <pre lang=javascript> code block </pre>.

GoToLoop

Indeed a p5.Image object is just a static image.
For animation it needs to be p5.Element instead.

Pay attention that p5.Element coordinates are the whole webpage.
While p5.Image is confined to the canvas.