This page provides a visualization for dynamical systems (systems that are described by differential equations). It is capable of working with one dimensional systems of first or second order. While working only with one dimensional systems is a limitation, it nonetheless allows for plenty of freedom to explore and makes visualizations significantly simpler.
There are some rather large and possibly intimidating equations below. If you aren't familiar with differential equations, get what you can out of them and move on. Hopefully the text explains what is going on well enough that you can do without the equations.
The visualization shows three different representations of the same system. The second and third are probably familiar to you, but the first may not be. I will go over the representations in reverse order.
The third shows a plot of the variable $x$ over time. This is a fairly standard representation of a one dimensional system. For the default system, it should display a damped sinusoid.
The second shows the current position of the particle (or the current value of the variable, if we aren't dealing with a mechanical system). This is the same information as in the third representation, but it only displays the value at the current instant.
The first is a bit stranger. The horizontal axis is the velocity of the particle (again, doesn't have to be a particle, so just rate of change) and the vertical axis is the value of the variable. Together, they form what is called a phase portrait. This type of diagram shows the complete state of the system as a function of time. Time appears only implicitly as the path is traced out; it doesn't appear on either axis. Note that for the default system (and all mechanical systems) the speed of the trace moving vertically along the position axis is equal to the distance away from the y-axis (the velocity). This is expected, because the velocity is just the directed speed of the particle.
Another quick note: $\frac{dx}{dt}$ is exactly the same as $x'(t)$, and I mix the two notations freely in the below. Both refer to the rate of change of the variable, $x$ in this case.
The default system is a damped harmonic oscillator. This type of system shows up often in physics, whether as a spring-mass system or an RLC circuit. The governing differential equation of this system is \[ m \frac{d^2x}{dt^2} + \gamma \frac{dx}{dt} + k x = F(t), \] where $F(t)$ is an applied external force. In the following, I will assume $m = 1$ and $F(t) = 0$.
In order to numerically solve this system, we decompose it into two first order differential equations. This is a neat trick that generalizes to decompose any $n$th-order differential equations into $n$ first order equations. I feel that this representation is actually superior to the second order equation because it allows more intuition than the above equation, especially for mechanical systems. When deriving the governing equation, however, it is often easier to use the single second order ODE.
The idea is to introduce an auxiliary variable $v(t) = x'(t)$. Using the original equation, we can now form two equations: \[ \frac{dx}{dt} = v.\] \[ \frac{dv}{dt} = -\gamma v - k x \] What do these equations mean? The first one is more simple that it appears, it is just saying that the rate of change of position, $x(t)$, is equal to the velocity, $v(t)$. That is just the definition of velocity.
How about the second equation? $v'(t)$ is the acceleration, so it says that the force (by $F = ma$ with $m=1$) on the particle is opposing the motion (the negative signs) and is proportional to both the velocity and the position. The portion $-k x$ is a restoring force because it pushes the particle back toward position zero. The portion $- \gamma v$ is a damping force because it resists the motion of the particle and tends to slow the particle to a halt.
Now we are prepared to start playing around with the visualization above. Try moving the sliders for the damping and spring constant and see what happens.
You can also try modifying the initial values of the system using the two boxes on the right hand side and restarting.
Note that the center text fields for $\frac{dx}{dt}$ and $\frac{dv}{dt}$ are the two first order equations above transcribed into javascript code.
Now that we have seen what each of the parameters of the visualization are, we are ready to start looking at systems with entirely different behaviour, not just variations on the harmonic oscillator.
If you are familiar with dynamical systems, go ahead and make some
modifications to the derivatives in the center text fields. If the field
is highlighted in red, it means that you have an error in your
expression, possibly a missing semicolon at the end. The variables
x and v represent your variable and its
rate of change. In addition gamma and k are
the variables controlled by the sliders on the left. They aren't
mandatory, and you can just directly enter constants as well, like this:
return -5*v - 14*x;
If you aren't familiar with dynamical systems, I'll provide some possibilities that you may like to try. Under each heading below, there are expressions for the two derivatives. You can either type the expressions in yourself or hit the activate link next to each title. The link will restart the simulation using the new model.
$\frac{dx}{dt}$: return x/gamma;
$\frac{dv}{dt}$: return 0;
Initial x value: 10
This is actually a first order system, since we are ignoring the second derivative entirely. As a result, the phase portrait is pretty boring, but the second and third representations work well.
This will give you an exponential curve in the third plot, and the second plot will show the block moving upwards slowly at first but increasing in speed.
Because of the exponential nature of this system, the visualization is short-lived. The variables will all be off the charts after just a few seconds.
Exponential growth is used to model all kinds of phenomena in many different fields. For example, it is a fairly good model for:
$\frac{dx}{dt}$: return gamma*x*(1-x/(5*k+1));
$\frac{dv}{dt}$: return 0;
Initial x value: 0 to 50
Another first order system. While exponential growth is a good model for many things over relatively short timescales, it has the unfortunate problem that it quickly predicts values going to infinity. The physical world, however, doesn't tend to like infinities. As some examples, population growth (of any population) is limited by food supply and other factors and chemical reactions are limited by concentrations of the reactants.
In these cases, logistic growth is a better model. At the beginning it
exhibits near exponential growth, but the value levels off as it approaches
the system's carrying capacity. In the above expression,
gamma represents the growth rate of the system, and
k represents the carrying capacity of the system.
Logistic growth is used to model systems such as:
Play around with the parameters to see their effects. If you are feeling Malthusian, increase the carrying capacity initially and then quickly decrease it. This will demonstrate a Malthusian catastrophe.
$\frac{dx}{dt}$: return v;
$\frac{dv}{dt}$: return gamma/2*(1-x*x/2500)*v - k/10*x;
Initial x value: 100 to 200
A more complex and interesting oscillator than the harmonic oscillator described above. By comparing this equation to that of the damped harmonic oscillator, we can see that the restoring force term is identical, but the damping is nonlinearly dependent on $x$.
Here, gamma represents the damping coefficient, and
k represents the restoring coefficient, just like in
the harmonic oscillator system.
This oscillator exhibits interesting limit cycles, which are cyclic trajectories in phase space that the system tends towards.
The Van der Pol oscillator is a good model for relaxation oscillators, which are widely used as an oscillator in applications where an accurate frequency is not required and the waveform can be a bit strange. Think of this when you turn your windshield wipers on in the rain or watch blinking turn signals almost synchronize at red lights.
$\frac{dx}{dt}$: return 5*x - 0.08*x*v;
$\frac{dv}{dt}$: return 0.26*x*v - 10*v;
Initial x value: 5 to 50
Initial v value: 5 to 50
TODO
I have implemented three numerical solvers: Euler, Improved Euler, and RK4. The visualization defaults to using Improved Euler, a second order iterative method which has good enough performance for visualizing most things.
If you would like to switch integrators, you can open the web console and
type integrator = rk4; or integrator = euler;
Pretty much the only reason to use the Euler method is to see how
bad it is, but RK4 may actually be useful to you because of its increased
accuracy.
I haven't gotten around to implementing a fixed time step yet, so the simulation speed is frame rate dependent and if your frame rate drops the error will increase.