an Unapologetically Hospitable introduction to Partial 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-7 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 controls at the top. Try uploading an image (any image!).
  • Click on "Show vectors". Try to figure out what the rainbow lines mean. This is especially tricky, so don't worry if it doesn't make sense yet.
  • Try with this image–do the rainbow vector visualization lines correspond to this?:

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

Like in the ODE case,

  • // or /* */ are ways of "commenting out" parts of code. If it's grayed out in the editor, it won't run.
  • 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 = ...
}

Warmups!

  • Increase/decrease the resolution Nx and Ny numbers. There's nothing wrong with having it run more slowly, because higher resolution means your image will be more detailed.
  • Try some initial data that has a single dot. Can you see the connection with the previous ODE integrator? Try out the provided F/G vector fields (add // in front of all of the lines that define your current F_marble and G_marble, and delete the // in front of )
    • Make some modifications to the example F/G vector fields. Change constants. What changes?
  • Graph things in desmos! Always try plotting equations in desmos, and see if they have the properties you want them to have.
  • Play with the visualization code for the vector fields: increase the density of the vectors, and reduce the "nstop" parameter. Note that this might be helpful

The fun part!

The remainder of the class is breakout rooms (the practical examples here can also be played with during the studio time we have the next few days:)

  1. History: Look at the provided resources (or find your own) and A) prove me wrong! I'm not an expert at this, and put together a presentation that builds out the history of cultural exchange that marbled paper represents. Special points to anyone who can contradict something I've said so far.
  2. History: Look at some of the provided resources on historical marbled papers. Follow the instructions for the DIY exercises and use Photopea/image editor of your choice to design initial data, and design a vector field that creates a similar pattern. Iteration is key! Design initial data, make several attempts at a vector field, then talk to your group mates and go back to the photo editor!
  3. Practice: Design an entirely new marbled paper with math! I've provided you with some starting points, but go wild! Stripes of color are an excellent way to get traditional marbled patterns, but the fact that we're using math to do it means that you can choose ANY IMAGE YOU WANT!! Go wild, surprise me!
  4. Practice: Marbled papers are often content with being pretty; in this activity I would like you to go beyond just aesthetic and experiment with creating a marbled work that has artistic meaning; a deeper story. Marbling as a medium is extremely good at embodying dynamism and motion, but also (selective) distortion. We have talked a lot in this class about what an artist privileges when they design a work: use the fact that most vector fields have different distortion in different regions. Design the initial data you use (collage work is particularly interesting) to fit this vector field.
  5. Practice: Go back and spend more time with the ODE project (maybe you liked that better!). The ODE website is quite good for representing the impact of a powerful force on an individual object. It is naturally quite good for representing flow (and also meditation).
  6. Mathematics: Explore the mathematics of https://en.wikipedia.org/wiki/Van_der_Pol_oscillator (pay special attention to the "Two-dimensional form"). What changes can you make to the dynamics while retaining the oscillation in the system (i.e. a particle moves in a closed loop). Bonus: build a vector field with the most complex closed loop you can (somewhat useless hint: https://en.wikipedia.org/wiki/Hamiltonian_system, ask me about this one)
  7. Mathematics: Watch some more of the Ordinary Differential Equations video: https://www.youtube.com/watch?v=p_di4Zn4wz4 . Using the first website we've played with, explore the interplay between what the site says and what the video says. If you want something more concrete, read some of this wikipedia page https://en.wikipedia.org/wiki/Euler_method and go into the code where there is a function called rk_step. Try to modify this function to match what is given in the Euler's Method wikipedia page. How have the characteristics changed? Ask me for help with the syntax of javascript; this shouldn't be a coding exercise.

Previous post: