
Fluid Simulation (with WebGL demo) - robertelder
http://jamie-wong.com/2016/08/05/webgl-fluid-simulation/
======
zackmorris
Very good writeup of fluid dynamics, I've been down Wikipedia crawls regarding
Navier-Stokes but have never seen those equations applied like this in such a
step-by-step manor.

It occurs to me however that we really don't have long-form ways of expressing
the equations (especially in more than one dimension). The math can't be
simplified, but I was still lost about a quarter of the way through the work
even though I used to know partial derivatives quite well. The article
requires something like 4 or 5 semesters of calculus to grok.

I think what makes math so hard to translate from written form to a mental map
is that we’re still expressing it in sort of a write-only language like APL:

[http://c2.com/cgi/wiki?AplLanguage](http://c2.com/cgi/wiki?AplLanguage)

I’m curious if anyone knows of any other way to express equations. For
example:

* can variables be longer than a single letter without making equations too large to “see” at first glance?

* can all of the notation like the one for partial derivative be rewritten as ordinary functions?

* is there a way to “break up” long functions into shorter expressions (like sub-functions) without losing their relationships?

What I’m getting at is that people are able to visualize large, complex
abstractions like SQL, OpenGL, matrices (barely), but not really statistics,
probability, calculus, and so on. Have these other disciplines just not had
time to be expressed in layman’s terms? I don’t buy that they are
fundamentally more difficult than other disciplines. Just more.. esoteric.
Thoughts?

~~~
corndoge
I've often wondered if math would be better with a static type system

~~~
osense
A type system was actually the original solution to Russell's paradox [1].
Today, we have type theories such as Martin-Löf type theory and Homotopy type
theory, which can be used as a basis for constructive mathematics (i.e.
mathematics, where law of the excluded middle, ∀(p : Proposition).p ∨ ¬p,
doesn't generally hold — more or less).

[1]
[https://en.wikipedia.org/wiki/Type_theory#History](https://en.wikipedia.org/wiki/Type_theory#History)

------
Fifer82
Really amazing article. When you take away all the garbage(from day to day
life), these interactive experiences are why I continue to really love
Computing. Thanks

------
paulpauper
_We can expand this to its partial derivative form, expanding vector
components to leave us with only scalar variables._

I don't understand the part where he expands the navier stokes equations to
the matrix form. Can some explain how he gets to that step

~~~
Figs
The `u dot del u` term is describing the "self-advection" of the velocity
field.

You can interpret `u dot del u` as `(u dot del)u` where `(u dot del)` is an
operator which seems to sometimes be called the "advection operator" or the
"directional derivative" or the "convection derivative" and probably even more
names I don't even know -- which makes it really annoyingly hard to look up
information about.

See
[https://en.wikipedia.org/wiki/Advection](https://en.wikipedia.org/wiki/Advection)
and [https://en.wikipedia.org/wiki/Del](https://en.wikipedia.org/wiki/Del)
(section "directional derivative").

`(u dot del)` expands to `u_x * d(__)/dx + u_y * d(__)/dy` in 2D -- a function
taking a scalar (plugged into where I wrote the `__`s) and which evaluates to
a scalar. As indicated on the 2nd link above, to operate on a vector just
apply it to each component (similar to how you'd normally multiply a scalar
and a vector). So that means that `(u dot del)u` becomes:

    
    
        u_x * d(u_x)/dx + u_y * d(u_x)/dy
        u_x * d(u_y)/dx + u_y * d(u_y)/dy
    

which can be factored into a matrix-vector multiplication (by pulling out the
`u_x * ___ + u_y * ___` part into a vector):

    
    
        [d(u_x)/dx  d(u_x)/dy]   [u_x]
        [d(u_y)/dx  d(u_y)/dy] * [u_y]
        

As you can see, that's what was written in the article. I'm not sure why the
author wrote it out with a matrix like this.

As DanWaterworth said in the other comment, `del p` is just the gradient of
the pressure.

------
sporkologist
This is one of the most beautiful things I've seen on the internet lately.
Thank you!!

------
iamleppert
Really great. My only comment would be instead of the terse mathematical
notation (as you can do so in this case), a simple example with code would add
to clarity, especially for those of us who lack a proper maths education.

~~~
cLeEOGPw
Why not instead of terse mathematical notation use a simple visual
representation using balls and teddies for clarity, especially for those who
lack mathematical and coding education?

Anyone who wants to read articles that contain math should learn notation.

------
hyperpallium
There's a pasto in the SIGGRAPH course notes link:
[https://www.cs.ubc.ca/~rbridson/fluidsimulation/fluids_notes...](https://www.cs.ubc.ca/~rbridson/fluidsimulation/fluids_notes.pd://www.cs.ubc.ca/~rbridson/fluidsimulation/fluids_notes.pdf)

this works
[https://www.cs.ubc.ca/~rbridson/fluidsimulation/fluids_notes...](https://www.cs.ubc.ca/~rbridson/fluidsimulation/fluids_notes.pdf)
(5.5MB pdf)

------
Hydraulix989
The write-up is really great.

------
gfaure
This kind of writeup of a complex topic really shows the work the author put
into understanding the material. Great work!

With the demo at the very top, given that the initial configuration is always
the same, shouldn't 'mixing' the colours vigorously always yield the same
uniform colour as a steady state? Probably missing something here but
shouldn't this be the case?

~~~
phleet
(Author here) I cheated: to prevent that steady state (since it's ugly), I
have 3 dye injectors strategically placed, causing certain areas to get
redder, greener, and bluer over time.

Without that, yes, it turns into a muddy grey.

------
lucb1e
I like this. The title hints at a "look how cool this is"-demo but it goes way
beyond that with a very understandable article explaining how it's made.

------
gavanwoolery
Very good writeup - I've always been curious to implement 2D fluid simulation
but only had a faint idea in the back of my head in terms of how it might
work.

------
fitzwatermellow
Cool technique! Next step: add buoyancy vector ;)

~~~
LoSboccacc
actually this would be wonderful base for a plasma pong remake

~~~
elihu
I had never heard of plasma pong; here's a youtube link, for anyone else who's
curious:
[https://www.youtube.com/watch?v=NDjseVmruH8](https://www.youtube.com/watch?v=NDjseVmruH8)

------
magicmu
Awesome write-up!! I had never heard of linear calculus before, is that an
extension of linear algebra or a distinct field?

------
bobajeff
It doesn't work with touch events.. so I can't test on my phone. :(

~~~
reddytowns
Your phone can display the webgl? What kind of phone is it, if you don't mind
me asking?

~~~
bobajeff
It's a Nexus 6 but even my 1st gen Moto G could display WebGL. In my
experience it's way more common to find phones that support WebGL than
desktops/laptops.

------
bluetwo
Nice.

