# What's a good way to create an animation from a timestamped image sequence?

**URL:** <https://discourse.julialang.org/t/whats-a-good-way-to-create-an-animation-from-a-timestamped-image-sequence/44471>\
**Category:** General Usage\
**Tags:** animations\
**Created:** [August 7, 2020, 1:39am UTC](https://discourse.julialang.org/t/whats-a-good-way-to-create-an-animation-from-a-timestamped-image-sequence/44471 "2020-08-07T01:39:27Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![NightMachinary](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/nightmachinary/32/14196_2.png) [@NightMachinary](https://discourse.julialang.org/u/NightMachinary)\
**Post date:** [August 7, 2020, 1:39am UTC](https://discourse.julialang.org/t/whats-a-good-way-to-create-an-animation-from-a-timestamped-image-sequence/44471/1 "2020-08-07T01:39:27Z")

</div>

I am doing an event-based simulation, that gets updated when each event happens. For simplicity’s sake, assume it’s a simple Poisson process that creates a random 100x100 matrix when each event happens. So we’ll have a series of matrices with the time they happened. Interpreting the matrices as grayscale images, the data would be a timestamped image sequence. How can I animate this sequence?

I have searched around, and the best idea I have found so far is to save the images with specific modification timestamps, and use the `image2` demuxor from ffmpeg with `ts_from_file 2` that uses the modification times as frame timestamps. But this is a rather clunky solution …

---

<div class="post-metadata">

**Author:** ![contradict](https://avatars.discourse-cdn.com/v4/letter/c/ac91a4/32.png) [@contradict](https://discourse.julialang.org/u/contradict)\
**Post date:** [August 7, 2020, 2:37am UTC](https://discourse.julialang.org/t/whats-a-good-way-to-create-an-animation-from-a-timestamped-image-sequence/44471/2 "2020-08-07T02:37:07Z")

</div>

[VideoIO.jl](https://juliaio.github.io/VideoIO.jl/stable/writing/) can write your frames to an `mp4` file.

```julia
using VideoIO, Distributions

encodevideo("noise.mp4", [rand(Poisson(100), (100, 100)) for _ in 1:60], framerate=30)

```

I don’t know of any video formats that allow irregularly spaced frames, so if your timestamps are not regular you will have to interpolate/decimate using a technique appropriate to your data and then save at a fixed frame rate.

---

<div class="post-metadata">

**Author:** ![pauljurczak](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/pauljurczak/32/921_2.png) [@pauljurczak](https://discourse.julialang.org/u/pauljurczak)\
**Post date:** [August 7, 2020, 6:54am UTC](https://discourse.julialang.org/t/whats-a-good-way-to-create-an-animation-from-a-timestamped-image-sequence/44471/3 "2020-08-07T06:54:30Z")

</div>

You could use [https://makie.juliaplots.org/dev/animation.html#Animation](https://makie.juliaplots.org/dev/animation.html#Animation)

---

<div class="post-metadata">

**Author:** ![NightMachinary](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/nightmachinary/32/14196_2.png) [@NightMachinary](https://discourse.julialang.org/u/NightMachinary)\
**Post date:** [August 7, 2020, 1:41pm UTC](https://discourse.julialang.org/t/whats-a-good-way-to-create-an-animation-from-a-timestamped-image-sequence/44471/4 "2020-08-07T13:41:32Z")

</div>

I found some good answers [here](https://discourse.julialang.org/t/update-existing-imshow-with-new-image-data/8296/12). Here is one way using `imshow`:

```julia
using Images, ImageView, Gtk, TestImages, GtkReactive
data = [...]
imgsig = Signal(data[1])
guidict = imshow_gui((300, 300))
canvas = guidict["canvas"]
Gtk.showall(guidict["window"])
imshow(canvas, imgsig)
begin
    for i in 2:length(data)
        push!(imgsig, data[i])
        sleep(0.05)
    end
end

```

---

<div class="post-metadata">

**Author:** ![Raf](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/raf/32/3383_2.png) [@Raf](https://discourse.julialang.org/u/Raf)\
**Post date:** [August 7, 2020, 3:42pm UTC](https://discourse.julialang.org/t/whats-a-good-way-to-create-an-animation-from-a-timestamped-image-sequence/44471/5 "2020-08-07T15:42:09Z")

</div>

Gif is simple, something like:

```julia
using FileIO, Colors
sequence = cat(map(matrix -> RGB4.(matrix), matrices)..., dims=3)
FileIO.save("test.gif", sequence; fps=25)

```

---

<div class="post-metadata">

**Author:** ![NightMachinary](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/nightmachinary/32/14196_2.png) [@NightMachinary](https://discourse.julialang.org/u/NightMachinary)\
**Post date:** [August 7, 2020, 5:18pm UTC](https://discourse.julialang.org/t/whats-a-good-way-to-create-an-animation-from-a-timestamped-image-sequence/44471/6 "2020-08-07T17:18:48Z")

</div>

The problem is that my frames will be irregularly timed. (E.g., one frame, sleep 2.3, another frame, sleep 0.3, …)

---

<div class="post-metadata">

**Author:** ![caleb-allen](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/caleb-allen/32/14054_2.png) [@caleb-allen](https://discourse.julialang.org/u/caleb-allen)\
**Post date:** [August 7, 2020, 9:17pm UTC](https://discourse.julialang.org/t/whats-a-good-way-to-create-an-animation-from-a-timestamped-image-sequence/44471/7 "2020-08-07T21:17:45Z")

</div>

Like @contradict said, you will likely need to separate the irregular timings of your data from the regularly timed framerate.

I’ve had some good luck with time-sensitive animations and timings using this package:

[https://github.com/jkrumbiegel/Animations.jl](https://github.com/jkrumbiegel/Animations.jl)

It’s a simple package and is not connected to any image framework, which is what made it useful to me. Here’s a sample from its docs:

```julia
using Animations
anim = Animation(
    0, 1.0, # t = 0, value = 1
    sineio(),
    1, 2.0, # t = 1, value = 2
    linear(),
    2, 3.0 # t = 2, value = 3
)

```

There are more ways to create the animations, but I think you could essentially use the `t` values to indicate the keyframe values of your data. Something like this, maybe:

```julia
anim = Animation(
    0, 1.0,
    noease(),
    rel(2.3), 2.0, # sleep 2.3
    noease(),
    rel(0.3), 3.0 # sleep 0.3
)

```

When you create the animation (gif, mp4, etc), you can generate each frame to be written by iterating over `anim`, and plugging in the values it returns (`1.0`, `2.0`, `3.0` in this case) to generate or fetch your matrix data.

---

<div class="post-metadata">

**Author:** ![Raf](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/raf/32/3383_2.png) [@Raf](https://discourse.julialang.org/u/Raf)\
**Post date:** [August 8, 2020, 1:26am UTC](https://discourse.julialang.org/t/whats-a-good-way-to-create-an-animation-from-a-timestamped-image-sequence/44471/8 "2020-08-08T01:26:40Z")

</div>

Also you might be able to use [DynamicGrids.jl](https://github.com/cesaraustralia/DynamicGrids.jl) for the whole simulation, and get all the outputs for free (it will print text of the timestamp onto the live output/gif, the REPL).

---

<div class="post-metadata">

**Author:** ![Raf](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/raf/32/3383_2.png) [@Raf](https://discourse.julialang.org/u/Raf)\
**Post date:** [August 8, 2020, 1:33am UTC](https://discourse.julialang.org/t/whats-a-good-way-to-create-an-animation-from-a-timestamped-image-sequence/44471/9 "2020-08-08T01:33:49Z")

</div>

> The problem is that my frames will be irregularly timed. (E.g., one frame, sleep 2.3, another frame, sleep 0.3, …)

I missed this sorry. But you do need a fixed frame-rate at some stage…

I would just choose one at the start (it can be high) and round your events to the frame rate.