GIF animation speed confusion?

[villares]

I'm playing with the great py5_tools.animated_gif() export feature. But I wonder if I'm doing something wrong, thinking wrong about the duration that controls the speed. Maybe my GIF viewers don't support a higher speed?
Does this GIF seem slower than the running sketch?

import py5
from py5_tools import animated_gif

NUM_FRAMES = 100

def setup(): 
    py5.size(600, 600)
    animated_gif('out.gif',
                 frame_numbers=range(1, NUM_FRAMES + 1),
                 duration=0.0166)  # ~1/60 ?
    
def draw():   
    py5.background(0)
    f = py5.frame_count
    t = (f - 1) % NUM_FRAMES / NUM_FRAMES # lerp rate (will not reach 1)
    d = 100 # base diameter
    x = py5.lerp(-d / 2, py5.width + d / 2, t) # horizontal pos
    py5.circle(x, 200, d)
    a = py5.remap(t, 0, 1, 0, py5.TWO_PI)  # angle
    vd = d + d * py5.sin(a)  # variable diameter
    py5.circle(300, 400, vd)
    py5.window_title(f'{py5.get_frame_rate():.1f}') # about 60 fps
        
py5.run_sketch()

[hx2A]

Yes, that looks too slow. It might be a speed limit imposed by the PIL image library?

I was able to increase the speed with this:

https://ezgif.com/speed

So GIF allows it to be faster.

There are no limitations in py5 that would cause this to be slower. The PIL image library does not suggest any limitations.

https://pillow.readthedocs.io/en/stable/handbook/image-file-formats.html#gif-saving

It could be a technical shortcoming or limitation in PIL itself.

[villares]

I think a reasonable workaround is to export every other frame and double the duration...

    animated_gif('out.gif', # exporting every other frame
                 frame_numbers=range(1, NUM_FRAMES + 1, 2),
                 duration=0.033)  # ~1/30 

[hx2A]

That also works!

This example might benefit from some motion blur.

https://bleuje.com/tutorial6/

Did you post that on Mastodon recently? It came across my feed a few days ago.

[villares]

By the way, ezgif.com tools are great... I use the optimizer often to shrink my GIFs, it says it is based on gifscicle but it is much easier to use and I find I get better results than using command line gifscicle.

[villares]

Yes! I posted the motion blur tutorial on Mastodon! I was wondering if we could rewrite it with numpy...

[hx2A]

Yes, I think we could make that with numpy pretty easily. Isn't it just averaging several sequential frames?

You could create an array to store pixels with:

import numpy as np

N = 5
# sketch dimensions
width = 400
height = 400

pixel_storage = np.zeros(N, 3, height, width)

And later after drawing the frame, grab the pixels and populate the pixel storage with:

py5.get_np_pixels(bands="RGB", dst=pixel_storage[py5.frame_count % N])

And later set the motion blurred pixels with:

py5.set_np_pixels(pixel_storage.mean(axis=0), bands="RGB")

[villares]

😄

import py5
from py5_tools import animated_gif
import numpy as np

FPS = 60 # sketch frame rate target
NUM_FRAMES = 100
# To catch the blur from start use START = NUM_FRAMES, otherwise START = 1 is OK, avoid START = 0.
START = NUM_FRAMES # start recording on second cycle
STEP = 2 # set to 2 will capture half NUM_FRAMES
N = 3 # steps for blur

def setup():
    py5.size(400, 400)
    py5.no_stroke()
    global pixel_storage
    pixel_storage = np.zeros((N, py5.height, py5.width, 3))
    py5.frame_rate(FPS)
    animated_gif('output.gif',
                 frame_numbers=range(START, START + NUM_FRAMES, STEP),
                 duration=STEP*1/FPS)  # if FPS = 30 then 1/15
    
def draw():   
    py5.background(0)
    f = py5.frame_count
    t = (f - 1) % NUM_FRAMES / NUM_FRAMES # lerp rate (will not reach 1)
    d = 100 # base diameter
    a = py5.TWO_PI * t  # angle
    vd = d + d * py5.sin(a)  # variable diameter
    py5.circle(200, 100, vd)
    x = py5.lerp(-d / 2, py5.width + d / 2, t) # horizontal pos
    py5.circle(x, 300, d)
    
    # blur
    py5.get_np_pixels(bands="RGB", dst=pixel_storage[py5.frame_count % N])
    py5.set_np_pixels(pixel_storage.mean(axis=0), bands="RGB")
    py5.window_title(f'{py5.get_frame_rate():.1f}') # about 60 fps
        
py5.run_sketch()

[hx2A]

py5 + numpy makes complicated things very easy!

[Mad182]

I guess this issue was solved a long time ago, but I'll add my two cents since I stumbled upon it while looking for discussions related to ezgif.

The problem is that your GIF is too fast. GIFs store the duration as an integer representing one-hundredth of a second. Your original GIF has its duration set to 1, which, while technically correct for the GIF format, is usually ignored by most browsers, causing them to default to a much slower speed. The smallest delay value you can safely use is 2, which essentially means 50 fps.

[hx2A]

Good to know! Thank you, @Mad182 , for sharing your knowledge of GIF best practices!