Drawing differential equations as wind
An old widget of mine, rebuilt in plain javascript, that draws the phase space of a differential equation the way those wind maps draw the wind.
Years ago I threw together a little widget for drawing differential equations. It ran on Angular and a pile of jQuery and bootstrap sliders, and like a lot of things from that stretch of my life it quit working the moment one of its dependencies wandered off without it. I’ve been meaning to bring it back for ages. This week I finally sat down and rewrote the whole thing in plain javascript, no framework, nothing left to rot. The original is still sitting on github if you want to see where it started.
The idea behind it I borrowed, more or less, from the wind maps that were floating around back then, the ones that draw the wind over the country as thousands of tiny streaks that comb along with the flow. A differential equation is a flow too. At every point it tells you which way to move and how fast, and if you drop a particle in and let it follow that instruction you trace out a path. The wind map’s trick is to drop in thousands of particles at once and let them all streak along together. Where the flow is calm you get smooth combed lines. Where it swirls or pinches or spirals into a point you can read it straight off the texture, without ever drawing a single arrow.
That texture is really the whole reason I keep coming back to this. A formula for the solution, when you can even get one, tells you about a single starting condition. The picture tells you about all of them at once.
The plane it’s drawing on is what physicists call phase space. The simplest honest example is a mass on a spring. To know what a spring is going to do next it isn’t enough to know where it is, you also have to know how fast it’s moving and in which direction. Those two numbers, position and velocity, are the state. Put position on one axis and velocity on the other and the whole future of the spring becomes a single point sliding around on a plane. The equation is the current of that plane. Here it is:
Drag the stiffness up and down and watch the orbits tighten. Add a little damping and the closed loops open into spirals that wind down to the middle. I’ll get into why that particular shape shows up in the next post, but you can already see the thing I find worth the trouble: the equation isn’t a curve on a graph, it’s a weather pattern, and its personality is written in the way the streaks move.
This is the first of a handful of posts where I point the widget at some of the equations everybody meets in a first physics or math course and just look at the shapes. The spring, the pendulum with a bit of friction added back in, the van der Pol oscillator, the logistic equation. In each one I want to start from where the equation actually comes from, some real bit of physics or population counting, and then let the flow show you what that bit of physics feels like. Half of what I learned putting these together was the physics and the other half was how to make it visible. Both halves were worth it.