Update blog post

Author: langestefan

_posts/guides/interactive-blog/2025-02-13-interactive-julia-plotting.md

@@ -78,7 +78,17 @@ order of rendering, since new dependencies get included in the session that firs
 that dependency.
 {% endalert %}
 
-## A DifferentialEquations.jl example
+## A second example
+
+To render multiple plots we need to use a `Subsession`, which skips uploading similar 
+assets/data and setup. The sub session can be created by calling `Session(session)` with
+the parent session as an argument.
+
+{% include_code file="_posts/guides/interactive-blog/plots.jl" lang="julia" start="30" end="34" %}
+
+{% include_relative volume.html %}
+
+## (Bonus) A DifferentialEquations.jl example
 
 Now for a more exciting example, we will use the 
 [DifferentialEquations.jl](https://docs.sciml.ai/DiffEqDocs/stable/) package to calculate
@@ -88,7 +98,7 @@ to visualize the resulting trajectory.
 We will start from a physical description of the problem. This description is derived
 from Newton's second law of motion, which states that the acceleration of an object is
 directly proportional to the net forces acting on it. An excellent summary of the 
-physics involved can be found in a series of blog posts by Hugo, namely [Bend it like Newton: curves in football](http://chalkdustmagazine.com/blog/bend-it-like-newton-curves-in-football/) and [The maths behind a chip goal](https://chalkdustmagazine.com/blog/the-maths-behind-a-chip-goal/).
+physics involved can be found in a series of blog posts by Hugo, namely [Bend it like Newton: curves in football](http://chalkdustmagazine.com/blog/bend-it-like-newton-curves-in-football/), [The maths behind a chip goal](https://chalkdustmagazine.com/blog/the-maths-behind-a-chip-goal/) and [Football free-kicks… taken by Newton](https://chalkdustmagazine.com/blog/free-kicks/).
 
 <div style="margin-top: 20px; margin-bottom: -100px;"><center>
 <svg viewBox="0 0 250 250">
@@ -99,20 +109,125 @@ physics involved can be found in a series of blog posts by Hugo, namely [Bend it
 ### The trajectory of a soccer ball
 
 The position of a soccer ball in three dimensions can be described by a vector 
-$\vec{x} = [x, y, z]^T$. 
+$\vec{x} = [x, y, z]^T$, its velocity by $\vec{v} = [v_x, v_y, v_z]^T $. The
+initial position of the ball is $\vec{p}_0$, and the initial velocity is $\vec{v}_0$.
 
 Newton's second law of motion relates the acceleration of the ball to the forces acting
 on it. Mathematically, this can be written as:
 
 $$
 \begin{equation}
-    m \frac{d^2 \vec{x}}{dt^2} = \vec{F_G} + \vec{F_D} + \vec{F_L}
+    m \cdot \vec{a} = m \frac{d^2}{dt^2}\vec{x} = \vec{F_G} + \vec{F_D} + \vec{F_L}
 \end{equation}
 $$
 
 Where we consider the gravitational force $\vec{F_G}$, the drag force $\vec{F_D}$ and the
 lift force $\vec{F_L}$. We are interested in solving this equation for $\vec{x}$ because
-that will give us the position of the ball at any given time. $m$ is the mass of the ball.
+that will give us the position of the ball (with mass $m$) at any given time $t$.
+
+We will refer to the <i>trajectory</i> of the ball as the time-dependent position vector 
+$\vec{x}(t)$.
+</div>
+
+There are a bunch of interesting questions we can ask in this general problem context.
+A few that come to mind are:
+- How does the trajectory of the ball change when we change the initial velocity $\vec{v}_0$?
+- Given some initial velocity $\vec{v}_0$, what is the maximum horizontal distance the ball can travel?
+- Given (noisy) observations of a ball's trajectory, can we estimate what the initial 
+  position $\vec{p}_0$ and velocity $\vec{v}_0$ were? Or even more interesting, can we
+  predict where the ball will land while it is still in the air?
+
+<div class="theorem-box" markdown="1">
+### Forces affecting a ball’s trajectory
+
+The gravitational force $\vec{F_G}$ is given by:
+
+$$
+\begin{equation}
+    \vec{F_G} = -m \vec{g}
+\end{equation}
+$$
+
+Where $\vec{g} = [0, 0, 9.81]^T$ is the downward acceleration due to gravity. The drag 
+force $\vec{F_D}$ is the aerodynamic force that opposes the motion of the ball due to air
+resistance. It is given by:
+
+$$
+\begin{equation}
+    \vec{F_D} = -\frac{1}{2} \rho A C_D \left| \vec{v} \right| \cdot \vec{v} 
+\end{equation}
+$$
+
+Where $\rho$ is the air density, $A$ is the cross-sectional area of the ball,
+$C_D$ is the drag coefficient, $v$ is the velocity of the ball and 
+$\left| \vec{v} \right| = \sqrt{v_x^2 + v_y^2 + v_z^2}$ is the magnitude of the velocity.
+
+The lift force $\vec{F_L}$, or Magnus force, is the force that causes the ball to curve
+in flight and is perpendicular to the velocity vector of the ball $\vec{v}$. It is given 
+by:
+
+$$
+\begin{equation}
+    \vec{F_L} = \frac{1}{2} \rho A C_L \left| \vec{v} \right| \cdot \vec{v} \cdot f(\theta)
+\end{equation}
+$$
+
+Where $C_L$ is the lift coefficient, $\theta$ is the angle of attack and $f(\theta)$ is a
+function that depends on the spin angle of the ball. Let's assume that the ball is spinning
+around the $z$-axis, then $f(\theta) = [-1, 1, 0]^T$ where we assume that the dependence
+on the angular velocity $\omega$ is already included in $C_L$.
+</div>
+
+We are now almost there. We have a physical description of the problem, but this 
+description is only solvable analytically in specific, simplified cases. We need to
+write out the equations in a form that can be solved numerically, so that we can then
+use the `DifferentialEquations.jl` package to integrate the equations of motion which
+will give us the trajectory of the ball.
+
+<div class="theorem-box" markdown="1">
+### System of differential equations
+
+To make it easier to write out the equations of motion, we will introduce the
+constant $H = \frac{\rho A}{2m}$, which will simplify the equations. 
+
+Using the fact that $\frac{dx}{dt} = v_x, \frac{dy}{dt} = v_y, \frac{dz}{dt} = v_z$ the 
+system of differential equations can then be written as:
+
+<!-- $$
+\begin{align}
+    H &= \frac{\rho A}{2m} \\
+    \left| \vec{v} \right| &= \sqrt{v_x^2 + v_y^2 + v_z^2}
+    % C_L &= \left| \vec{v} \right|^{-1} \omega r \\ % C_L &= \frac{\omega r}{\left| \vec{v} \right|}\\
+    % \omega &= \omega_0 \cdot \exp\left(-\frac{t}{\tau}\right)    
+\end{align}
+$$ -->
+
+$$
+\begin{align}
+    \vec{a} &= -\left | \vec{v}\right | H      
+    \begin{bmatrix}
+      C_D \cdot v_x + C_L \cdot v_y \\
+      C_D \cdot v_y - C_L \cdot v_x \\
+      C_D \cdot v_z - g
+    \end{bmatrix}
+\end{align}
+$$
+
+The value of $C_L$ is usually derived from experiments and depends on the speed and 
+angular velocity of the ball. We will assume that $C_L$ takes the following form:
+
+$$
+\begin{align}
+    C_L &= \frac{\omega r}{\left| \vec{v} \right|}\\
+    \omega &= \omega_0 \cdot \exp\left(-\frac{t}{\tau}\right)
+\end{align}
+$$
+
+Where $\omega_0$ is the initial angular velocity and $\tau$ is the time constant. We 
+will solve this system numerically to get the trajectory of the ball. 
 </div>
 
+Now we can finally start writing code! Which should be a breeze after because we have 
+access to [DifferentialEquations.jl](https://docs.sciml.ai/DiffEqDocs/stable/).
 
+{% include_code file="_posts/guides/interactive-blog/plots.jl" lang="julia" start="30" end="50" %}

_posts/guides/interactive-blog/plots.jl

@@ -1,6 +1,6 @@
 using Bonito, WGLMakie
 
-output_file = "_posts/examples/diffeqviz/sinc_surface.html"
+output_folder = "_posts/guides/interactive-blog/"
 
 function as_html(io, session, app)
     dom = Bonito.session_dom(session, app)
@@ -10,14 +10,14 @@ end
 session = Session(NoConnection(); asset_server=NoServer())
 
 # plot 1 - random scatter plot
-open("_posts/guides/interactive-blog/scatter.html", "w") do io
+open(output_folder * "scatter.html", "w") do io
     println(io, """<center>""")
     app = App() do 
-        markersize = Bonito.Slider(range(0.01, stop=0.11, length=6))
+        markersize = Bonito.Slider(range(0.01, stop=0.11, length=6), value=0.07)
         scale_value = DOM.div("\\(s = \\)", markersize.value)
 
         # Create a scatter plot
-        fig, ax = meshscatter(rand(3, 100), markersize=markersize, figure=(; size=(550, 550)))
+        fig, ax = meshscatter(rand(3, 100), markersize=markersize, figure=(; size=(500, 500)))
 
         # Return the plot and the slider
         return Bonito.record_states(session, DOM.div(fig, scale_value, markersize))
@@ -26,27 +26,36 @@ open("_posts/guides/interactive-blog/scatter.html", "w") do io
     println(io, """</center>""")
 end
 
-using DifferentialEquations
-
-# struct to hold problem constants
-struct SoccerConst
-    m::Float64 # mass of the ball
-    g::Float64 # acceleration due to gravity
-    r::Float64 # radius of the ball
-    ρ::Float64 # density of the air
-    C_L::Float64 # lift coefficient
-    C_D::Float64 # drag coefficient
+# plot 2 - volume plot
+open(output_folder * "volume.html", "w") do io
+    sub = Session(session)
+    app = App(volume(rand(10, 10, 10), figure=(; size=(500, 500))))
+    as_html(io, sub, app)
 end
 
-# inital conditions
-struct SoccerIC
-    x::Float64 # initial x position
-    y::Float64 # initial y position
-    z::Float64 # initial z position
-    v_x::Float64 # initial x velocity
-    v_y::Float64 # initial y velocity
-    v_z::Float64 # initial z velocity
-end
+# plot 3 - differential equation
+
+# using DifferentialEquations
+
+# # struct to hold problem constants
+# struct SoccerConst
+#     m::Float64 # mass of the ball
+#     g::Float64 # acceleration due to gravity
+#     r::Float64 # radius of the ball
+#     ρ::Float64 # density of the air
+#     C_L::Float64 # lift coefficient
+#     C_D::Float64 # drag coefficient
+# end
+
+# # inital conditions
+# struct SoccerIC
+#     x::Float64 # initial x position
+#     y::Float64 # initial y position
+#     z::Float64 # initial z position
+#     v_x::Float64 # initial x velocity
+#     v_y::Float64 # initial y velocity
+#     v_z::Float64 # initial z velocity
+# end
 
 # open("_posts/examples/diffeqviz/contour.html", "w") do io
 #     app = App() do 

_posts/guides/interactive-blog/scatter.html

@@ -6,6 +6,7 @@
     border: 2px solid rgba(50, 50, 53, 0.5);
     padding: 20px;
     border-radius: 5px;
+    margin-bottom: 50px;
 }
 
 .theorem-box h3 {