# Real time animations with Makie in Pluto

**URL:** <https://discourse.julialang.org/t/real-time-animations-with-makie-in-pluto/63684>\
**Category:** Pluto\
**Tags:** visualization, pluto, makie, animations\
**Created:** [June 28, 2021, 10:20am UTC](https://discourse.julialang.org/t/real-time-animations-with-makie-in-pluto/63684 "2021-06-28T10:20:38Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![GHRALIMA](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ghralima/32/19244_2.png) [@GHRALIMA](https://discourse.julialang.org/u/GHRALIMA)\
**Post date:** [June 28, 2021, 10:20am UTC](https://discourse.julialang.org/t/real-time-animations-with-makie-in-pluto/63684/1 "2021-06-28T10:20:38Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![sdanisch](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sdanisch/32/1406_2.png) [@sdanisch](https://discourse.julialang.org/u/sdanisch)\
**Post date:** [June 28, 2021, 10:23am UTC](https://discourse.julialang.org/t/real-time-animations-with-makie-in-pluto/63684/2 "2021-06-28T10:23:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GHRALIMA](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ghralima/32/19244_2.png) [@GHRALIMA](https://discourse.julialang.org/u/GHRALIMA)\
**Post date:** [June 28, 2021, 2:13pm UTC](https://discourse.julialang.org/t/real-time-animations-with-makie-in-pluto/63684/3 "2021-06-28T14:13:06Z")

</div>

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:

```julia
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)
hideydecorations!(ax_01)
hidespines!(ax_01)

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
end
	
video_01_file = "d:\\folder\\trajetoria_1d.mp4"
LocalResource(video_01_file)

```

---

<div class="post-metadata">

**Author:** ![sdanisch](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sdanisch/32/1406_2.png) [@sdanisch](https://discourse.julialang.org/u/sdanisch)\
**Post date:** [June 28, 2021, 3:00pm UTC](https://discourse.julialang.org/t/real-time-animations-with-makie-in-pluto/63684/4 "2021-06-28T15:00:33Z")

</div>

I was more thinking about, how you want to use it, not the goal of the animation 😉  
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?

---

<div class="post-metadata">

**Author:** ![GHRALIMA](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ghralima/32/19244_2.png) [@GHRALIMA](https://discourse.julialang.org/u/GHRALIMA)\
**Post date:** [June 28, 2021, 3:13pm UTC](https://discourse.julialang.org/t/real-time-animations-with-makie-in-pluto/63684/5 "2021-06-28T15:13:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![sdanisch](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sdanisch/32/1406_2.png) [@sdanisch](https://discourse.julialang.org/u/sdanisch)\
**Post date:** [June 28, 2021, 4:16pm UTC](https://discourse.julialang.org/t/real-time-animations-with-makie-in-pluto/63684/6 "2021-06-28T16:16:25Z")

</div>

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:

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

```

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

> <https://github.com/MakieOrg/Makie.jl/pull/1082>

---

<div class="post-metadata">

**Author:** ![GHRALIMA](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ghralima/32/19244_2.png) [@GHRALIMA](https://discourse.julialang.org/u/GHRALIMA)\
**Post date:** [June 29, 2021, 12:30pm UTC](https://discourse.julialang.org/t/real-time-animations-with-makie-in-pluto/63684/7 "2021-06-29T12:30:18Z")

</div>

Nice! Thanks as lot! 🙂

---

<div class="post-metadata">

**Author:** ![1115](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/1115/32/4465_2.png) [@1115](https://discourse.julialang.org/u/1115)\
**Post date:** [October 23, 2022, 11:55am UTC](https://discourse.julialang.org/t/real-time-animations-with-makie-in-pluto/63684/8 "2022-10-23T11:55:29Z")

</div>

Hi, @sdanisch , I tried your code sample (replacing `Point2f0` with `Point2f`), however, it freezes my notebook. Is this example broken now?

---

<div class="post-metadata">

**Author:** ![czimm](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/czimm/32/20380_2.png) [@czimm](https://discourse.julialang.org/u/czimm)\
**Post date:** [October 27, 2022, 10:11pm UTC](https://discourse.julialang.org/t/real-time-animations-with-makie-in-pluto/63684/9 "2022-10-27T22:11:00Z")

</div>

This is currently an issue with Pluto and how Makie interacts with stdout. There is varying success with using `Pluto.run(capture_stdout=false)`. [Recording Makie animations in Pluto stalls indefinitely · Issue #2283 · fonsp/Pluto.jl · GitHub](https://github.com/fonsp/Pluto.jl/issues/2283)

---

<div class="post-metadata">

**Author:** ![1115](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/1115/32/4465_2.png) [@1115](https://discourse.julialang.org/u/1115)\
**Post date:** [October 29, 2022, 2:11pm UTC](https://discourse.julialang.org/t/real-time-animations-with-makie-in-pluto/63684/10 "2022-10-29T14:11:51Z")

</div>

Many thanks!