an Unapologetically Hospitable introduction to Ordinary Differential Equations.

A little background.

I don't have time to be too technically mathematical, so I'm going to rely on someone who put together exactly what I would say but better than I would say it. Before starting the activity below, watch the first 5 minutes of this excellent video

The activity:

Create a sandbox for yourself:

Follow the instructions in the "Housekeeping post" and remix this project!. Click on the name in the upper left corner and rename the project to something involving your name!

Getting your sea legs

Click on "show" -> "in a new window" i.e.

* Play with the sliders on the lefthand side, click on the image and see what happens. * Click on "hows the weather". Try to figure out what the rainbow lines mean. Do they correspond to what happens when you click? Don't worry if it doesn't make sense yet.

Editing the code!

In the window with the code, i.e.

click on "script.js". The top several lines of this file are important!

You don't need to know how to code for this project. This is a place where you should play with equations, not code.

A pea-sized intro to Javascript
  • x and y describe your position in the plane. They both vary between -1 and 1.
  • t is time in seconds. You can use this to make the wind field change over time.
  • Parentheses () are used to group mathematical expressions.
  • Multiplication must always be done using the * character, i.e. xy is not valid, nor is x(y)
  • Subtraction, division, and addition with -, /, + work as you would expect.
  • Calculating powers can be done using Math.pow, i.e. we could calculate x^1.5 by Math.pow(x, 1.5)
  • Exponentiation can be done e.g. e^x can be written Math.exp(x).
  • Trigonometric functions are incredibly useful for this activity, they can be done using e.g. Math.sin(x) Note: Math.sin expects arguments in radians, i.e. Math.sin(2 * Math.PI) is 0, but Math.sin(360) is a garbage number that we don't care about.
  • Logarithms can be calculated using Math.log.
  • More programmatic examples: you can use the following code to handle cases, e.g. have different wind in different quadrants
if (x < 0 && y < 0){
  horizontal_wind = ...
  vertical_wind = ...
} else if (x >= 0 && y < 0 ) {
  horizontal_wind = ...
  vertical_wind = ...
} else if (x >= 0 && y >= 0 ) {
  horizontal_wind = ...
  vertical_wind = ...
} else {
  horizontal_wind = ...
  vertical_wind = ...
}

Exercises:

Try modifying the equations for horizontal_wind and vertical_wind. Then do the "view in new window" mentioned in the "getting your sea legs" section above (or if it's already open, reload the page). If your code is correct, the particles will move differently when you click. If you check "hows the weather," it should look different from before.

If nothing seems to be happening, you might need to debug. Press ctrl-alt-i (windows) or command-alt-i (mac) to open developer tools. Click on console, as in the following images:

The fun part!

Here's where you get to shine. You have 15 minutes to design the best piece of art using a wind field (more formally refered to as a vector field) you can. Try out different wind fields, then play with brush strokes. You're literally painting with differential equations.