How do I make a Makie animation appear in a VSCode plotting window?

Specific Domains Visualization
,
1

I have some code (copied from the Makie website) to make an animation:

using GLMakie
time = Observable(0.0)

xs = range(0, 7, length=40)

ys_1 = @lift(sin.(xs .- $time))
ys_2 = @lift(cos.(xs .- $time) .+ 3)

fig = lines(xs, ys_1, color = :blue, linewidth = 4,
    axis = (title = @lift("t = $(round($time, digits = 1))"),))
scatter!(xs, ys_2, color = :red, markersize = 15)

framerate = 30
timestamps = range(0, 2, step=1/framerate)

record(fig, "time_animation.mp4", timestamps;
        framerate = framerate) do t
    time[] = t
end

I run it in VSCode. When the figure is plotted, it appears in my plotting window in VSCode. However, the animation is just saved to a file. How do I make the animation appear in the VSCode plotting window? Also, what do I do if I do not want the animation saved to a file? I tried looking at API, but I couldn’t really figure it out.

2

Also, what do I do if I do not want the animation saved to a file?

If you run your script then the recorded video should be saved to a file called time_animation.mp4 inside your current working directory.

1 Like
3

Yes, but what do I do if I do not want to have the animation saved to a file?
(in this case because I want to display it directly only)

4

I am sorry, I must have overlooked the not in your question.

Nevermind, there is a simpler trick. You can use Observables to trigger re-plotting and wrap this into a for loop. See the first code snippet under the section Animating a plot "live" here: Animations

Anyways, what’s the problem with just opening the animation with a standard video player?

5

Thanks, I am trying it out now.

When I am doing investigations, it is just much easier, to run the code, and the animation appear in the same window I have open, as opposed to having to open up a file system, navigate to the folder where it is saved, double click on the animation file, and watch it in another window, and then have to go back to the cading windows to make modifications etc.

6

One cannot animate with GLMakie inside VSCode’s plotting pane, currently. There’s this PR which might give the ability to do that at some point by updating a specific image over time: WIP: display_with_id by pfitzseb · Pull Request #2940 · julia-vscode/julia-vscode · GitHub

To make a live animation, you can either use GLMakie and open a native window, updating your plots via observables in a for loop or so, as was noted above. Or you can use WGLMakie, which can use web contexts to display a javascript-controlled plot, which can also be updated via observables, and the VSCode plot pane happens to be such a web context. But note that WGLMakie is both slower, as well as not as feature complete as GLMakie. For example, currently it still doesn’t have picking which means things that require information about what stuff was clicked on don’t work (but this is being worked on).

1 Like
7

Thanks, that’s a very throughout explanation. Hopefully the PR goes through some time soon :slight_smile:

8

Casually, I found an error using WGLMakie to make this animation appear in the VSCode plot pane, and it was related to the VSCode zoom. When it is zommed by default (ctrl+0 in Windows), this following MWE should work.

using Makie, WGLMakie
Makie.inline!(true)

time = Observable(0.0)

x = range(0,1,100)
y = @lift(sin.(2π*x)*cos(2π*$time))

fig = Figure()
ax = Axis(
    fig[1,1]
)

scatterlines!(x, y)

framerate = 30
timestamps = range(0, 2, step=1/fps)

record(fig, "sim.mp4", timestamps; framerate=framerate) do t
    time[] = t
end