6 ms·

Fluid Simulation (with WebGL demo)

196 points by robertelder 10y ago

Hydraulix989 10y ago
The write-up is really great.
bluetwo 10y ago
Nice.
sporkologist 10y ago
This is one of the most beautiful things I've seen on the internet lately. Thank you!!
bobajeff 10y ago
It doesn't work with touch events.. so I can't test on my phone. :(
- reddytowns 10y ago
  Your phone can display the webgl? What kind of phone is it, if you don't mind me asking?
  - RobotCaleb 10y ago
    My Nexus 5x will do it. No touch inputs, but does render.
  - bobajeff 10y ago
    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.
fitzwatermellow 10y ago
Cool technique! Next step: add buoyancy vector ;)
- LoSboccacc 10y ago
  actually this would be wonderful base for a plasma pong remake
  - elihu 10y ago
    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
zackmorris 10y ago
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 10y ago
  I've often wondered if math would be better with a static type system
  - osense 10y ago
    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
  - andrepd 10y ago
Fifer82 10y ago
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
iamleppert 10y ago
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 10y ago
  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.
paulpauper 10y ago
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
- DanWaterworth 10y ago
  It's quite confusing, the del operator means different things in each term. del of p is just the gradient of the pressure, but the convective term is more complicated. This may help [1]. The key part is: Generally the convective derivative of the field u•∇y, the one that contains the covariant derivative of the field, can be interpreted both as involving the streamline tensor derivative of the field u•(∇y), or as involving the streamline directional derivative of the field (u•∇) y, leading to the same result. [1] https://en.wikipedia.org/wiki/Material_derivative https://en.wikipedia.org/wiki/Material_derivative
- Figs 10y ago
  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.
magicmu 10y ago
Awesome write-up!! I had never heard of linear calculus before, is that an extension of linear algebra or a distinct field?
lucb1e 10y ago
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 10y ago
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.
hyperpallium 10y ago
There's a pasto in the SIGGRAPH course notes link: https://www.cs.ubc.ca/~rbridson/fluidsimulation/fluids_notes.pd://www.cs.ubc.ca/~rbridson/fluidsimulation/fluids_notes.pdf https://www.cs.ubc.ca/~rbridson/fluidsimulation/fluids_notes... this works https://www.cs.ubc.ca/~rbridson/fluidsimulation/fluids_notes.pdf https://www.cs.ubc.ca/~rbridson/fluidsimulation/fluids_notes... (5.5MB pdf)
gfaure 10y ago
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 10y ago
  (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.
helenad2016 10y ago
Do you need a professional to go to for all of your cyber/internet issues, i implore you to hire the best only so as to get your job completed without hassles. For more info contact: Darkwebssolutions on gmail or text +9193076946 (Text only)

196 points by robertelder 10y ago

Hydraulix989 10y ago

The write-up is really great.

bluetwo 10y ago

Nice.

sporkologist 10y ago

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

bobajeff 10y ago

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

reddytowns 10y ago
Your phone can display the webgl? What kind of phone is it, if you don't mind me asking?
- RobotCaleb 10y ago
  My Nexus 5x will do it. No touch inputs, but does render.
- bobajeff 10y ago
  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.

fitzwatermellow 10y ago

Cool technique! Next step: add buoyancy vector ;)

LoSboccacc 10y ago
actually this would be wonderful base for a plasma pong remake
- elihu 10y ago
  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

zackmorris 10y ago

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 10y ago
I've often wondered if math would be better with a static type system
- osense 10y ago
  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
- andrepd 10y ago

Fifer82 10y ago

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

iamleppert 10y ago

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 10y ago
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.

paulpauper 10y ago

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

DanWaterworth 10y ago
It's quite confusing, the del operator means different things in each term. del of p is just the gradient of the pressure, but the convective term is more complicated. This may help [1]. The key part is: Generally the convective derivative of the field u•∇y, the one that contains the covariant derivative of the field, can be interpreted both as involving the streamline tensor derivative of the field u•(∇y), or as involving the streamline directional derivative of the field (u•∇) y, leading to the same result. [1] https://en.wikipedia.org/wiki/Material_derivative https://en.wikipedia.org/wiki/Material_derivative
Figs 10y ago
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.

magicmu 10y ago

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

lucb1e 10y ago

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 10y ago

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.

hyperpallium 10y ago

There's a pasto in the SIGGRAPH course notes link: https://www.cs.ubc.ca/~rbridson/fluidsimulation/fluids_notes.pd://www.cs.ubc.ca/~rbridson/fluidsimulation/fluids_notes.pdf https://www.cs.ubc.ca/~rbridson/fluidsimulation/fluids_notes... this works https://www.cs.ubc.ca/~rbridson/fluidsimulation/fluids_notes.pdf https://www.cs.ubc.ca/~rbridson/fluidsimulation/fluids_notes... (5.5MB pdf)

gfaure 10y ago

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 10y ago
(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.

helenad2016 10y ago

Do you need a professional to go to for all of your cyber/internet issues, i implore you to hire the best only so as to get your job completed without hassles. For more info contact: Darkwebssolutions on gmail or text +9193076946 (Text only)