# Help with animations in Makie.jl

**URL:** <https://discourse.julialang.org/t/help-with-animations-in-makie-jl/83422>\
**Category:** New to Julia\
**Tags:** question, plotting\
**Created:** [June 27, 2022, 7:17pm UTC](https://discourse.julialang.org/t/help-with-animations-in-makie-jl/83422 "2022-06-27T19:17:09Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Adi\_Rai](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/adi_rai/32/34413_2.png) [@Adi\_Rai](https://discourse.julialang.org/u/Adi_Rai)\
**Post date:** [June 27, 2022, 7:17pm UTC](https://discourse.julialang.org/t/help-with-animations-in-makie-jl/83422/1 "2022-06-27T19:17:09Z")

</div>

Hi Everyone,

I was using Observables in Makie to update my plots. Along with observables I was trying to animate the plots using record function. This is my code:

```julia
cbe_img_calib = zeros(156,400)
points1 = Observable(Point2f[]) #Declaring First Observable 
points2 = Observable(Point2f[]) #Declaring Second Observable 

f5 = Figure()
axis = f5[1,1]
scatterlines(f5[1, 1],mTime, mTemp, color=:red, marker=:x, markersize=20)
scatterlines!(f5[1, 1],mTime, mCBE_circ, color=:green, linestyle=:dot, marker=:x, markersize=20)
scatterlines!(f5[1, 1],mTime, mCBE_cont, color=:blue, linestyle=:dot, marker=:x, markersize=20)

file_no_iterator = range(start=1, stop=105)

	
function plot_graphs(file_no)

    cbe_img = cbe_data[file_no]
    global cbe_img_calib = (cbe_img * CBE_T) .+ T0

    #Steps to get circular_ROI_mask
    mask_inter = ((X .- circ_ROI_centre_x).^2 .+ (Y .- circ_ROI_centre_y).^2)

    circ_ROI_mask = zeros(size(mask_inter)[1], size(mask_inter)[2])
        
        
    for i = 1:size(mask_inter)[1]
        for j = 1:size(mask_inter)[2]
            if (mask_inter[i,j] < (circ_ROI_radius).^2)
                circ_ROI_mask[i,j] = 1
            else
                circ_ROI_mask[i,j] = 0
            end
        end
    end

    #Get the circ_ROI_img
    circ_ROI_img =cbe_img_calib .* circ_ROI_mask;

    #Get all values in cbe_img_calib where circ_ROI_mask is 1
    indices = (findall(x-> x==1, circ_ROI_mask))
    global cbe_mean[file_no] = mean(cbe_img_calib[indices])

    #Get values in cbe_mean_cont
    cont_thresh = maximum(circ_ROI_img)*0.95
    indices2 = findall(x->(x>cont_thresh), circ_ROI_img)
    global cbe_mean_cont[file_no] = mean(circ_ROI_img[indices2])

    p = [mTime[file_no], cbe_mean[file_no]]
    q = [mTime[file_no], cbe_mean_cont[file_no]]
    
    push!(points1[], p)
    push!(points2[], q)

    notify(points1)  
    scatter!(axis, points1, color=:pink, marker=:circle, markersize=20, overdraw=true)

    notify(points2)
    scatter!(axis, points2, color=:teal, marker=:circle, markersize=20, overdraw=true)
    sleep(1/60)
    
end
	
record(plot_graphs, f5, "Graphs_30.mp4", file_no_iterator, framerate=30)

```

  
However the mp4 file I get after recording does not display the plots in the plot\_graphs function. The only plots I get are the three plots outside the plot\_graphs function.  

 ![Screenshot (54)](https://global.discourse-cdn.com/julialang/original/3X/2/b/2b900a8fa52a7f5c1bb7b0bc12414a3ce538f28b.png)

  
I tried running the same code in Pluto.jl and removed the record function. This is the exact output I need while using the record function:  

 ![image](https://global.discourse-cdn.com/julialang/original/3X/e/3/e3bf10e71d4862ea2f04976af8e20ac601c078ea.png)

  

Where am I going wrong? Any help would be greatly appreciated. Thanks.

---

<div class="post-metadata">

**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://discourse.julialang.org/u/jules)\
**Post date:** [June 27, 2022, 7:59pm UTC](https://discourse.julialang.org/t/help-with-animations-in-makie-jl/83422/2 "2022-06-27T19:59:13Z")

</div>

You shouldn’t call `scatter!` each frame, just once at the beginning, then only update the observables.

---

<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:** [June 27, 2022, 7:59pm UTC](https://discourse.julialang.org/t/help-with-animations-in-makie-jl/83422/3 "2022-06-27T19:59:33Z")

</div>

I think you need to move the creation of the plots outside the animation loop. I would first create the two observables and the plots (outside the `plot_graphs` function).

```julia
points1 = Observable(Vector{Vector{Float32}}())
points2 = Observable(Vector{Vector{Float32}}())
scatter!(axis, points1, color=:pink, marker=:circle, markersize=20, overdraw=true)
scatter!(axis, points2, color=:teal, marker=:circle, markersize=20, overdraw=true)

```

Then inside plot\_graphs, you should only need to do

```julia
    push!(points1, p)
    push!(points2, q)

```

to update the plots. Calling `notify` is only necessary if you modify the `val` property of the observable directly.

---

<div class="post-metadata">

**Author:** ![Adi\_Rai](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/adi_rai/32/34413_2.png) [@Adi\_Rai](https://discourse.julialang.org/u/Adi_Rai)\
**Post date:** [June 27, 2022, 8:32pm UTC](https://discourse.julialang.org/t/help-with-animations-in-makie-jl/83422/4 "2022-06-27T20:32:24Z")

</div>

Hi,  
Thanks for your quick response @contradict and @jules. As per your suggestions, I tried moving the scatter plot outside the function and then updated the two observables.  
Still my graph isnt showing the plots. Here is my updated code:

```julia
tcbe_img_calib = zeros(156,400)
points1 = Observable(Point2f[])
points2 = Observable(Point2f[])

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

scatterlines!(ax,mTime, mTemp, color=:red, marker=:x, markersize=20)
scatterlines!(ax,mTime, mCBE_circ, color=:green, linestyle=:dot, marker=:x, markersize=20)
scatterlines!(ax,mTime, mCBE_cont, color=:blue, linestyle=:dot, marker=:x, markersize=20)

scatter!(ax, points1, color=:pink, marker=:circle, markersize=20, overdraw=true)
scatter!(ax, points2, color=:teal, marker=:circle, markersize=20, overdraw=true)

file_no_iterator = range(start=1, stop=105)

	
function plot_graphs(file_no)

    cbe_img = cbe_data[file_no]
    global cbe_img_calib = (cbe_img * CBE_T) .+ T0

    #Steps to get circular_ROI_mask
    mask_inter = ((X .- circ_ROI_centre_x).^2 .+ (Y .- circ_ROI_centre_y).^2)

    circ_ROI_mask = zeros(size(mask_inter)[1], size(mask_inter)[2])
        
        
    for i = 1:size(mask_inter)[1]
        for j = 1:size(mask_inter)[2]
            if (mask_inter[i,j] < (circ_ROI_radius).^2)
                circ_ROI_mask[i,j] = 1
            else
                circ_ROI_mask[i,j] = 0
            end
        end
    end

    #Get the circ_ROI_img
    circ_ROI_img =cbe_img_calib .* circ_ROI_mask;

    #Get all values in cbe_img_calib where circ_ROI_mask is 1
    indices = (findall(x-> x==1, circ_ROI_mask))
    global cbe_mean[file_no] = mean(cbe_img_calib[indices])

    #Get values in cbe_mean_cont
    cont_thresh = maximum(circ_ROI_img)*0.95
    indices2 = findall(x->(x>cont_thresh), circ_ROI_img)
    global cbe_mean_cont[file_no] = mean(circ_ROI_img[indices2])

    p = [mTime[file_no], cbe_mean[file_no]]
    q = [mTime[file_no], cbe_mean_cont[file_no]]
    
    push!(points1[], p)
    push!(points2[], q)

    sleep(1/60)
    
end
	
record(plot_graphs, f5, "Graphs_30.mp4", file_no_iterator, framerate=30)

```

  
My Output:

 ![image](https://global.discourse-cdn.com/julialang/original/3X/2/c/2c1559b7a4426b5d4dde9fb4034dd8e291bc1daf.jpeg)

---

<div class="post-metadata">

**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://discourse.julialang.org/u/jules)\
**Post date:** [June 27, 2022, 8:49pm UTC](https://discourse.julialang.org/t/help-with-animations-in-makie-jl/83422/5 "2022-06-27T20:49:51Z")

</div>

After `push!` you do need `notify` because the `push!` mutates the array within the observable without the observable knowing about it.

---

<div class="post-metadata">

**Author:** ![Adi\_Rai](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/adi_rai/32/34413_2.png) [@Adi\_Rai](https://discourse.julialang.org/u/Adi_Rai)\
**Post date:** [June 27, 2022, 8:59pm UTC](https://discourse.julialang.org/t/help-with-animations-in-makie-jl/83422/6 "2022-06-27T20:59:16Z")

</div>

Thanks! That solved the problem.