What are the most up to date instructions to visualize WGLMakie scenes inside a Pluto notebook?
3 Likes
The link isn’t loading for me, perhaps a temporary connection issue?
If you have slow internet, it may be a bit slow to load 
It has quite a bit of states cached for the offline interactivity feature.
1 Like
I want to produce web pages with a bit of text, code, some LaTeX maths and plots. I’ve previously used weave.jl to produce pdfs in Tufte style. But now I’d like to chuck in some interactive makie plots e.g. see how a stream plot changes with new parameter values.
Given that I have no background in html or Java script (but obviously happy to learn on the job), what do you think would be the simplest method to achieve this? I guess Documenter would be much the same as Weave.
This seems to be the most update to date link.
Here is a quick example I adapted from the Lorenz example.
Cell 1:
begin
using WGLMakie
using Bonito
using Makie
end
Cell 2
begin
WGLMakie.activate!()
Page()
Base.@kwdef mutable struct Lorenz
dt::Float64 = 0.01
σ::Float64 = 10
ρ::Float64 = 28
β::Float64 = 8/3
x::Float64 = 1
y::Float64 = 1
z::Float64 = 1
end
function step!(l::Lorenz)
dx = l.σ * (l.y - l.x)
dy = l.x * (l.ρ - l.z) - l.y
dz = l.x * l.y - l.β * l.z
l.x += l.dt * dx
l.y += l.dt * dy
l.z += l.dt * dz
Point3f(l.x, l.y, l.z)
end
end
Cell 3
App() do
attractor = Lorenz()
all_points = Point3f[]
all_colors = Int[]
set_theme!(theme_black())
for frame in 1:360
for i in 1:50
push!(all_points, step!(attractor))
push!(all_colors, frame)
end
end
points = Observable(@view all_points[1:end])
colors = Observable(@view all_colors[1:end])
fig, ax, l = lines(points, color = colors,
colormap = :inferno, transparency = true,
axis = (; type = Axis3, protrusions = (0, 0, 0, 0),
viewmode = :fit, limits = (-30, 30, -30, 30, 0, 50)))
scatter!(ax, lift(last, points))
step_slider = Makie.Slider(fig[2,1], range = 1:length(all_points))
cam = Camera3D(ax.scene)
on(step_slider.value) do step
points[] = @view all_points[1:step]
colors[] = @view all_colors[1:step]
#update_cam!(ax.scene, cam, mod(step/length(all_points)*2π, 2π), 0)
end
DOM.div(fig)
end
Interactive Figure
This notebook generates the following interactive figure with a slider that progressively shows the steps.
