Add WGLMakie notebook

[jucheval]

As discussed in PR #94, I made a notebook to present how WGLMakie animations can be integrated into Pluto.

[behinger]

I started with a review, but then I actually stumbled upon how you run Makie code, which I hadn't seen before (in this context, I know about Bonito.App)

While I do have issues with WGLMakie using portforwarding etc. - typically it "just works" in a normal local environment.

What I mean is:

#cell 1
a = Observable([1,2,3.])

#cell 2
scatter(a)

# cell3
a[]  = rand(3)

typically works to update, whenever you run cell 3.

---

I therefore tried your example and the buttons also worked (didnt check the other example). Could you add some motivation why you need the App? I

[jucheval]

To be honest, I recently came into Pluto's world and I had some previously made animations made with GLMakie. Hence I looked for ways to integrate these animations in a Pluto notebook (with as few modifications as possible). I came across this discourse discussion: https://discourse.julialang.org/t/updated-instructions-for-makie-pluto/62531/5

So I adapted this example to my purpose and then to this tutorial. IMHO, a key purpose of this tutorial si to give more visibility to the solution provided by the discourse discussion cited above.

Concerning the App, I agree with you: I mean, I changed App() do by begin and it seems to work as well. I would have say that DOM.div() outside an App creates only static html but I am clearly mistaken... I should try to replace App() do by begin for more complex animations. If it is robust then I would replace them in the tutorial notebook.

[jucheval]

Here is an update:

• all animations seem to behave in the same way,
• App()is not necessary and DOM.div() also! (replace begin ... end by let ... end if you want to keep the local scope behavior)
• whatever the order of your animations, you always have to re-execute the first animation... I am gonna ask this as a question on the discourse. Edit: here is the discourse topic

[behinger]

just a quick feedback: I did not need to re-excute the first animation. I simply clicked the "live update" and it started animating

Also it might be worth adding this to the notebook:

How to combine PlutoUI + Makie Observables (you need 3 separate cells, a bit unintuitive

[jucheval]

just a quick feedback: I did not need to re-excute the first animation. I simply clicked the "live update" and it started animating

OK but I would keep the sentence "You may have to manually run the cell below." in case this trouble happens to someone else than me. Do you agree ?

Also it might be worth adding this to the notebook:
How to combine PlutoUI + Makie Observables (you need 3 separate cells, a bit unintuitive

I am not sure to catch your point here. If I am correct, the output is the same if I replace the 3 cells by the unique cell:

scatter(1:val, axis=(;limits=(0,10,0,10)))

Interactivity is entirely handled by PlutoUI here, Observables are not needed.
However, I could add such an example right below the first paragraph ("The most natural way to put interactivity ... to elaborate on."). And mention the following facts:

• Makie can be used like any other plot ecosystem,
• The plot freezes when val modified because the cell is re-evaluated (which does not occur with WGLMakie).

Do you agree ?

[behinger]

The difference to your example is, that in your code the whole figure is replottet, in mine, only the observable updated.

In yours one often gets white flashes (especially with larger plots) and it is slower (generating a plot takes some few 100ms).

I didn't really catch the last Bullerpoint. What do you mean?

[jucheval]

My bad. I wrongly copied your code or did not pay attention but I thought it had white flashes too...

I didn't really catch the last Bullerpoint. What do you mean?

I meant the white flashes you talk about.

Summary: I will add your example in a new section "Integration in Pluto (with PlutoUI)"

[behinger]

cool! Indeed!

Maybe we can have a more fancy plot than the range, e.g.

@bind val PlutoUI.Slider(0:0.01:40)
val_obs[] = 0:0.1:val
val_obs = Observable(1:0.1:10)
begin
	x = @lift(@. exp(-$val_obs/8)*cos($val_obs))
y = @lift(@. exp(-$val_obs/8)*sin($val_obs))
lines(x,y)
end

I think it should also be made explicit, that three cells are needed for this solution - in difference to the makie solution

[jucheval]

Than you for this nice example. I replaced the old one.

Concerning the "three cells", I wrote:

The code must be separated into four cells as above (slider, definition of the observable, update of the observable, plot). In fact, the definition of the observable could be included in the "plot cell".

[fonsp]

@behinger @jucheval Feel free to merge this when it's ready! I can review it if you want me to but I don't need to.

Can you add frontmatter? https://github.com/JuliaPluto/featured/blob/main/CONTRIBUTING.md#technical-information

[jucheval]

Oops, I forgot the frontmatter. Now it is done and you can merge whenever you want.

[behinger]

very nice! Thanks a lot, I think this will be quite useful :-)