Simulation Class: Intro and Prerequisites

Introduction

The goal of this four-week course is to teach the basic structure of physical simulation engines, from a coding perspective. At the end of this class, if you have chosen to follow along with the coursework at home, you will have constructed a simple 2D navier-stokes fluid solver, which will run in a web browser.

This class will be taught with a programming focus, and will use source code to illustrate the basic concepts that most simulation engines have in common. The field of physical simulation is vast, and rather than trying to encompass the whole field in a scattershot way, we will attempt to learn an introduction by focusing on a simple simulation.

By the end of these four weeks, we'll have built a small smoke solver that responsds to mouse input and runs in a web broswer. The final version of the solver code that we'll build is running right here in this post. Click and drag in the view below to try it out! Use the 'v' key to toggle display of velocity vectors.

This whole solver is 795 lines long, and we'll build those up from scratch as we go through these four classes.

Prerequisites and Tools

We will use the Processing programming language, as ported into the web browser via the javascript library Processing.js. Processing is a C-like language, specifically geared towards small graphics applications. We will be working in the processing language directly, rather than in Javascript.

To try out the example code in our tutorials, you have a few options. Firstly, you can download the Processing execution environment, which will run outside a web-browser, and will offer a more robust development environment. This is the easiest way to work, especially when trying to figure out where you've made errors in your code. The way I worked to put this class together was to build the examples in the processing UI until they worked, and then put them into HTML using processing.js. Amazingly, in many cases the web versions run as fast or faster than the Processing UI.

A great website that allows for coding HTML that uses Processing directly is JS Fiddle. To use it, create an account and log in - then, from the uppermost menu on the left that says "Frameworks & Extensions", select "Processing.js 1.4.1". Then, in the upper left quadrant, simply enter your processing code surrounded by an HTML5 canvas element and an HTML script wrapper. To see your code run, press the "Run" button in the top menu, and your result will appear in the lower right quadrant. Here's a link to a simple processing.js starting point in jsfiddle: JS Fiddle Processing Hello World. Thank you MTF for showing me this amazing website! It's amazing how powerful this site is - here's the whole processing fluid solver running in it: JS Fiddle Processing Smoke Solver.

Github

All of the source code for this class, including the HTML for the web pages, and all of the processing code, is stored publicly on GitHub, and you are welcome to fork the repository to start working on your own code! Here is the link to the github repo: Encino Sim Class on GitHub

Acknowledgements

The solver code that this class is based around was built in processing by the inimitable Allen Hemberger, and my changes to his code are largely cosmetic, expanding for the purposes of teaching. Allen's solver was in turn based on the amazing paper, Real Time Fluid Dynamics for Games, written by Jos Stam. This paper includes an entire fluid solver source code, written in C, that was able to run on a mobile phone in 2003. This paper, and Stam's Stable Fluids paper before it provide a template for solver construction that is mostly followed to this day!

Download

All of the files associated with this class are available via a public github repository, found here: https://github.com/blackencino/SimClass