Animated GIF support in P5?

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:



  • edited September 2015

    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)

  • edited September 2015

    Actually loadImage() is more appropriate for most cases. It returns a p5.Image object:

    While createImg() returns a p5.Element instead.

    However, in order to use loadImage(), we need to place it inside preload():

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

  • edited September 2015

    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);
       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.

  • edited September 2015 Answer ✓

    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:

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

  • 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.

Sign In or Register to comment.