# Makie interaction: Slider with animation

**URL:** <https://discourse.julialang.org/t/makie-interaction-slider-with-animation/25179>\
**Category:** General Usage\
**Created:** [June 12, 2019, 9:19am UTC](https://discourse.julialang.org/t/makie-interaction-slider-with-animation/25179 "2019-06-12T09:19:24Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![neuralian](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/neuralian/32/8859_2.png) [@neuralian](https://discourse.julialang.org/u/neuralian)\
**Post date:** [June 12, 2019, 9:19am UTC](https://discourse.julialang.org/t/makie-interaction-slider-with-animation/25179/1 "2019-06-12T09:19:24Z")

</div>

(Edited for clarity in the light of feedback (thanks, yakir12) about how to post on this forum)

I’m struggling to figure out how to use a slider to interact with an animation in Makie.

I’m using v1.1.1 in Atom under Win10. The code below is MWE using animation. The hexagons move across the plot while dot changes color from blue to yellow with random probability proportional to the height of the second hexagon.

I want to control the x-position of the hexagons using the slider, and have the dot continue to change color randomly even if the slider is not sliding. I’ve looked at the slider examples in the Makie gallery but can’t figure out how to generalize to my problem. Also can’t find documentation about e.g. RecordEvents (what is the string in the second argument? It seems to be essential but what is it for?).

```julia
using Makie
using AbstractPlotting
using Colors

x₀ =-5.
gateState = false
xRange = 10

# deflection
p₀(x) = x/2

# plot
nPts = 100.
x = (x₀ .+ collect((-nPts/2.):(nPts/2.))/nPts*xRange)
scene = lines(x, p₀(x),
             linewidth =4,
             color = :darkcyan,
             leg = false
        )
axis = scene[Axis]
 axis[:names][:axisnames] =
 ( "x","y")

HC_handle = scatter!([-4], [2], marker=:circle,
          markersize = .5, color = :red)[end]

s1 = slider(LinRange(-5.0, 5.0, 101),
      raw = true, camera = campixel!, start = -5.0)

kx = s1[end][:value]

scatter!(scene, [kx[]; kx[]],[0.5; p₀(kx[])], marker = :hexagon,
    color = RGBA(.5,0.,.5,.5),
    markersize = .35, strokewidth = 1, strokecolor = :black)
Kc_handle = scene[end]

record(hbox(scene, s1, parent = Scene(resolution = (800, 600))),
   "gate.mp4", 1:200) do i
    Δx = x₀ + 0.05*i
    p = p₀(Δx)
    gateState = rand(1)[]<(p + 2.5)/5
    HC_handle[:color] = gateState ? :gold1 : :dodgerblue1
    Kc_handle[1] = [Δx, Δx]
    Kc_handle[2] = [0, p]
end

```

 ![image](https://global.discourse-cdn.com/julialang/original/3X/7/6/765bcc3ee4b469b89bbd8240623087aa36ae1d80.png)

---

<div class="post-metadata">

**Author:** ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)\
**Post date:** [June 12, 2019, 11:03am UTC](https://discourse.julialang.org/t/makie-interaction-slider-with-animation/25179/2 "2019-06-12T11:03:23Z")

</div>

start with this:

> [@Please read: make it easier to help you](https://discourse.julialang.org/t/psa-make-it-easier-to-help-you/14757):
>
> Welcome to the Julia Discourse! We are enthusiastic about helping Julia programmers, both beginner and experienced. This public service announcement (PSA) outlines best practices when asking for help. Following these points makes it easier for us to help you and more likely you’ll get a prompt, useful answer. Keywords are highlighted to make it easier to refer to specific points. Choose a descriptive title that captures the key part of your question, eg “plots with multiple axes” instead of …

---

<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 12, 2019, 3:17pm UTC](https://discourse.julialang.org/t/makie-interaction-slider-with-animation/25179/3 "2019-06-12T15:17:44Z")

</div>

You use the signal from the slider without lifting it. A fix would be:

```nohighlight
using Makie
using AbstractPlotting
using Colors

x₀=-5.
gateState = false
xRange = 10

p₀(x) = x/2

nPts = 100.
x = (x₀ .+ collect((-nPts/2.):(nPts/2.))/nPts*xRange)
scene = lines(x, p₀(x),
    linewidth =4,
    color = :darkcyan,
    leg = false
)
axis = scene[Axis]
axis[:names][:axisnames] = ("x","y")

HC_handle = scatter!([-4], [2], marker=:circle, markersize = .5, color = :red)[end]

s1 = slider(LinRange(-5.0, 5.0, 101), raw = true, camera = campixel!, start = -5.0)

kx = s1[end][:value]

scatter!(
    scene, [kx; kx], lift(x-> [0.5; p₀(x)], kx), marker = :hexagon,
    color = RGBA(.5,0.,.5,.5),
    markersize = .35, strokewidth = 1, strokecolor = :black
)
Kc_handle = scene[end]
hbox(scene, s1, parent = Scene(resolution = (800, 600)))

```

Please make sure that your example runs (e.g. xScale was undefined, and I had to edit out Plot / deflection, correct x00 to x₀). To get help, it really helps if I can simply copy and paste your code and don’t need to waste any time to get it to run!

---

<div class="post-metadata">

**Author:** ![neuralian](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/neuralian/32/8859_2.png) [@neuralian](https://discourse.julialang.org/u/neuralian)\
**Post date:** [June 12, 2019, 8:21pm UTC](https://discourse.julialang.org/t/makie-interaction-slider-with-animation/25179/4 "2019-06-12T20:21:46Z")

</div>

Thanks. I appreciate the advice.

---

<div class="post-metadata">

**Author:** ![neuralian](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/neuralian/32/8859_2.png) [@neuralian](https://discourse.julialang.org/u/neuralian)\
**Post date:** [June 12, 2019, 9:07pm UTC](https://discourse.julialang.org/t/makie-interaction-slider-with-animation/25179/5 "2019-06-12T21:07:59Z")

</div>

Thanks, sdanish, I appreciate you taking the time to help.

I edited my code as you suggested, using lift() to specify the x- and y- coordinates of the hexagons,

```julia
scatter!(scene, lift(x->[x; x],kx), lift(x-> [0.5; p₀(x)], kx), marker = :hexagon,
    color = RGBA(.5,0.,.5,.5),
    markersize = .35, strokewidth = 1, strokecolor = :black)
Kc_handle = scene[end]

hbox(scene, s1, parent = Scene(resolution = (800, 600)))

```

Now the hexagons are correctly controlled by the slider.

My problem is how to do this while running an animation? I don’t want to generate a movie file (although in future I might), but I want other things changing in the scene even when the slider is not sliding. In the MWE I have the dot randomly changing colour in a way that depends on the slider value. (How) can this be done?

Thanks.

---

<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 12, 2019, 9:17pm UTC](https://discourse.julialang.org/t/makie-interaction-slider-with-animation/25179/6 "2019-06-12T21:17:15Z")

</div>

That should just work like this:

```nohighlight
while isopen(scene)
 #animate any parameter
 ...
 yield() # yield to render loop
end

```

If you want to keep interacting with the REPL/Atom, you can just prefix the while loop with `@async`

---

<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 12, 2019, 9:19pm UTC](https://discourse.julialang.org/t/makie-interaction-slider-with-animation/25179/7 "2019-06-12T21:19:22Z")

</div>

Btw, kx is a signal, and the value can be extracted like this in the loop:

```julia
kx[]

```

---

<div class="post-metadata">

**Author:** ![neuralian](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/neuralian/32/8859_2.png) [@neuralian](https://discourse.julialang.org/u/neuralian)\
**Post date:** [June 12, 2019, 9:48pm UTC](https://discourse.julialang.org/t/makie-interaction-slider-with-animation/25179/8 "2019-06-12T21:48:14Z")

</div>

Thank you!  
I just filled in the Julia user survey. For me the best thing about Julia (apart from Julia) is the community of smart people who are super-helpful. The worst thing is the difficultly in finding documentation, and examples that work in v1.1.1. Do you have any advice about learning Makie without bothering the experts every time I get stuck?

---

<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 12, 2019, 9:49pm UTC](https://discourse.julialang.org/t/makie-interaction-slider-with-animation/25179/9 "2019-06-12T21:49:59Z")

</div>

Well, besides [http://juliaplots.org/MakieGallery.jl/stable/](http://juliaplots.org/MakieGallery.jl/stable/) and the examples in the gallery, there isn’t that much right now you can consult besides Discourse and the Julia slack!

---

<div class="post-metadata">

**Author:** ![neuralian](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/neuralian/32/8859_2.png) [@neuralian](https://discourse.julialang.org/u/neuralian)\
**Post date:** [June 14, 2019, 3:41am UTC](https://discourse.julialang.org/t/makie-interaction-slider-with-animation/25179/10 "2019-06-14T03:41:04Z")

</div>

Working demo of animation with slider control, to help the next newbie who gets stuck in this place:

```julia
using Makie
using AbstractPlotting
using Colors

x₀ =-5.
#gateState = false
xRange = 10

# deflection
p₀(x) = x/2

# plot
nPts = 100.
x = (x₀ .+ collect((-nPts/2.):(nPts/2.))/nPts*xRange)
scene = lines(x, p₀(x),
             linewidth =4,
             color = :darkcyan,
             leg = false
        )
axis = scene[Axis]
axis[:names][:axisnames] = ( "x","y")

D = Node(x₀)
HC_handle = scatter!(lift(x->[x], D), [2], marker=:circle,
          markersize = 1., color = :red)[end]

s1 = slider(LinRange(-10.0, 0.0, 101),
      raw = true, camera = campixel!, start = -10.0)
kx = s1[end][:value]

scatter!(scene, lift(x->[x; x],kx), lift(x-> [0.5; p₀(x)], kx),
    marker = :hexagon, color = RGBA(.5,0.,.5,.5),
    markersize = .35, strokewidth = 1, strokecolor = :black)

S = hbox(scene, s1, parent = Scene(resolution = (800, 600)))
display(S) 

@async while isopen(S)
  p = p₀((10.0+kx[])/10.)
  gateState = rand(1)[]<p
  HC_handle[:color] = gateState ? :gold1 : :dodgerblue1
  push!(D, -3. + rand(1)[]/5.)
  yield()
end

RecordEvents(S, "output");

```

---

<div class="post-metadata">

**Author:** ![asinghvi17](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/asinghvi17/32/8272_2.png) [@asinghvi17](https://discourse.julialang.org/u/asinghvi17)\
**Post date:** [July 22, 2019, 10:12am UTC](https://discourse.julialang.org/t/makie-interaction-slider-with-animation/25179/11 "2019-07-22T10:12:19Z")

</div>

> [@neuralian](#):
>
> ```julia
> using Colors
> 
> x₀ =-5.
> #gateState = false
> xRange = 10
> 
> # deflection
> p₀(x) = x/2
> 
> # plot
> nPts = 100.
> x = (x₀ .+ collect((-nPts/2.):(nPts/2.))/nPts*xRange)
> scene = lines(x, p₀(x),
> linewidth =4,
> color = :darkcyan,
> leg = false
> )
> axis = scene[Axis]
> axis[:names][:axisnames] = ( "x","y")
> 
> D = Node(x₀)
> HC_handle = scatter!(lift(x->[x], D), [2], marker=:circle,
> markersize = 1., color = :red)[end]
> 
> s1 = slider(LinRange(-10.0, 0.0, 101),
> raw = true, camera = campixel!, start = -10.0)
> kx = s1[end][:value]
> 
> scatter!(scene, lift(x->[x; x],kx), lift(x-> [0.5; p₀(x)], kx),
> marker = :hexagon, color = RGBA(.5,0.,.5,.5),
> markersize = .35, strokewidth = 1, strokecolor = :black)
> 
> S = hbox(scene, s1, parent = Scene(resolution = (800, 600)))
> display(S) 
> 
> @async while isopen(S)
> p = p₀((10.0+kx[])/10.)
> gateState = rand(1)[]<p
> HC_handle[:color] = gateState ? :gold1 : :dodgerblue1
> push!(D, -3. + rand(1)[]/5.)
> yield()
> end
> 
> RecordEvents(S, "output");
> 
> ```

I’m getting an `InexactError: trunc(Int64, Inf)` when I try to run this. Will need some time to debug, and possibly try to get a better error message for this…

Edit: It looks like `src/layouting.jl#L215` is the problem.