Real time animations with Makie in Pluto

Is there any way to create a real time animation using Makie in Pluto Notebooks? What I’m doing right now is creating the animation and recording it as video file, then inside the same Pluto cell, I load the file using LocalResource from PlutoUI, which may cause some trouble when exporting the notebook. I know Plots can create the animation without the need to save the animation. Is it possible to do the same using Makie do the same?

There are multiple ways…What’s your actual use case + goal?

My goal is as simple as it can get: just showing a dot moving in linear uniform motion in the screen. I’m a teacher using Julia/Pluto/Makie to make notebooks with simple simulations to my students. The code I’m using right now is to do it in Pluto is below:

using CairoMakie
using PlutoUI

#initial position
x0 = rand(-100:100)

#end position
x1 = rand(-100:100)

#time interval
Δt = rand(10:20)

fig_01 = Figure(resolution = (800, 200), backgroundcolor = :lightgreen)
ax_01 = fig_01[1, 1] = Axis(fig_01, 
	aspect = DataAspect(),
	backgroundcolor = :Gray70,
	xlabel = "Posição x (m)")

hlines!(ax_01, 0, linestyle = :dash, color = :white, linewidth = 3)
scatter!(ax_01, Point2f0(x0, 0), markersize = 15, color = (:black, 0.5))

ax_01.title = "Deslocamento (1D)"
limits!(ax_01, x0 - 140, x0 + 140,  -20, 20)

framerate = 30
nframes = framerate*Δt
traj_1d = range(x0,x1,length = nframes)

xt1d = Node(Float64(x0))
cron1d = Node(zero(Float64))
scatter!(ax_01, @lift(Point2($xt1d, 0)), markersize = 15, 
	color = :dodgerblue)
arrows!(ax_01, [x0], [0], @lift([$xt1d - x0]), [0], arrowsize = 15,
	color = (:red, 0.5), linewidth = 3)

text!(ax_01, @lift(string("t = ", round($cron1d, digits = 1), " s")),
	position = (x0 + 120, -18),
	align = (:right, :bottom),
	color = :black,
	textsize = 15)

record(fig_01, "trajetoria_1d.mp4", 1:nframes+2*framerate; 
	framerate = framerate) do i
		next_x = i < nframes ? traj_1d[i+1] : x1
		xt1d[] = next_x
		cron1d[] = i < nframes ? i/framerate : Δt
video_01_file = "d:\\folder\\trajetoria_1d.mp4"

I was more thinking about, how you want to use it, not the goal of the animation :wink:
So, do you want to share an offline version of the notebook, where the animation is still runnable?
Do you want to interact with the animation, while the notebook is running, and don’t really care about exporting it?

Oh, sorry! Well, my goal is still simple. I just want to export the notebook as a html file, so my students can see the animation that matches with the text describing it, without worrying to much about the path or url to the animation. Maybe just an embeded/real time generated animated gif.

So, Makie.VideoStream gets inlined directly as base64 data-url, when displayed in a cell, which I think is what you want.
The easiest way to create a raw VideoStream is like this:

	fig, ax, pl = scatter(rand(Point2f0, 10))
	CairoMakie.Makie.Record(fig, 1:20) do i
		pl[1] = rand(Point2f0, 10)

I just tested this for the first time in years, and turned out it somehow broke :smiley:
It should work, after this is merged:


Nice! Thanks as lot! :slight_smile: