## 字幕表 動画を再生する

• (whistle whistles)

• - Hello and welcome to a Coding Challenge,

• a calm, soothing, although somewhat turbulent,

• Coding Challenge, called Fluid Simulation.

• Now I have something to admit to you.

• I don't really understand how any of this stuff works.

• I did make this at one point, and so I'm hoping

• this Coding Challenge to recreate exactly this,

• which will be a basis on which hopefully a lot

• of other interesting ideas will come about.

• This idea came into mind when I recently saw

• Smarter Every Day's video on laminar flow.

• You know, I love laminar flow and all,

• but Team Turbulence for life, muah.

• Alright, so there's a wonderful 3Blue1Brown,

• do I just reference the same other

• YouTube channels every single time?

• Yes, I do.

• But there's also an excellent 3Blue1Brown video

• on turbulence, which I would also recommend.

• So, let me give you some background here.

• So first of all, there is a GitHub issue thread

• which started by deardanielxd, from 2016.

• Lattice Boltzmann methods for fluid simulations.

• So this is one method.

• But what I want to highlight here is that this,

• people have, oh, what I want to

• highlight here are these three links.

• So these seminal kind of canonical standard,

• or the origins of doing fluid dynamics in computer graphics

• Real-Time Fluid Dynamics for Games.

• I believe this was a Siggraph paper, 2003.

• Somebody fact check me on that.

• And it's built on top of this idea of these

• Navier-Stokes Equations, which are partial differential

• equations that describe fluid dynamics

• and there was actually a \$1 million challenge for proving

• that this can or cannot be solved in three dimensions.

• None of this is anything I'm capable of doing.

• But this paper includes some of the formulas,

• includes a lot of the code, and you can see one thing that's

• sort of key concept here is a fluid simulation can be done

• by thinking about fluid as kind of

• particles that live in a grid.

• And obviously it might be like an infinitely small grid

• (laughs) in real life, but we can make that discrete.

• Think about the grid of pixels and what the sort of density

• or the velocity of the fluid is at every one of these spots

• on the grid, that's ultimately what I'm going to do.

• And there's some nice C code

• and descriptions of some of these algorithms.

• for Memo Atken's processing library,

• called MSAFluid, and is also an open frameworks library,

• which is a C++ engine.

• And you can see here the way

• that this ends up looking by sort of distorting

• this vector field, ah, this is awesome.

• Oh, I'm sure the YouTube compression

• is totally ruining this.

• But it's beautiful, check out that library.

• You should also check out Gabriel Weymouth's,

• I hope I pronounced that correctly, LilyPad project,

• which was actually I believe used

• in the 3Blue1Brown video on turbulence.

• Gabriel writes here at the end a bunch of things

• So this is a giant rabbit hole you could go down.

• And I have spent some time poking around

• in this rabbit hole in the last week.

• The article that I found that I kind of enjoyed the most

• in terms of style was Mike Ash's article called

• Fluid Simulation for Dummies, which is actually a port,

• not a port, but a version of Jos Stam's paper,

• but actually turning it into 3-D and how to render that 3-D

• with paralyzing computing power

• is all here in his master's thesis.

• That's another rabbit hole you could go down.

• So what I would like to do is use this article,

• and I try to make sure that I don't

• repurpose somebody else's content without permission,

• even if it's sort of on the web in an open-source way.

• What I try to do, what I want to do,

• I think it's @MikeAsh, but I'll include a link in this

• video's description, if I could go through this in a video.

• So what I'm going to do is I'm going to

• go through this in the video and mostly

• just kind of like copy-paste this code,

• which is written, I believe, C++ or C.

• Something like that, some object-oriented C-flavor language.

• And I'm going to copy-paste it into Processing,

• which is a Java-based programming environment.

• And kind of like adjust the code to work

• in the way that I know and see if I can

• get the result and play with the result.

• So I don't feel obligated to understand or explain

• all of the maths involved throughout all this.

• And I would definitely encourage you to read this,

• I would entirely stop and read this whole article

• before you continue watching this.

• And then, this is going to be in three parts at a minimum.

• So this first part, I hope you just like get it working.

• Just want to copy-paste the code, change the syntax around,

• get it rendering, and play with it.

• Number two is I want to kind of refactor the code,

• this'll be in another video.

• I'm actually going to refactor it in a more

• kind of modern approach, I think modern's the wrong word,

• I mean this was done over 10 years ago.

• But I want to use like object-oriented programming,

• vector, like the PVector class in processing,

• I think there're some ways that I can redo the code

• to make it a little bit more readable than this particular

• style that uses a lot of esoteric variable meaning.

• So that's number two, and then number three,

• I want to then apply this logic to my,

• my flow field example from the Nature of Code book.

• So if I could take the fluid simulation,

• turn it into a vector field,

• I can just toss particles in that fly around.

• I think some visual opportunities will come of that.

• So that's three part.

• Just get the thing working, that's what I'm about to attempt

• to do right now, I'm sure it will go wrong. (laughs)

• But I will try my best.

• Number two, refactor the code to make it sort of fit

• with how I think about coding and processing in P5GS today.

• And then also, try to do some more stuff with it visually.

• And I would say one of the things is, there's going to be some

• performance issues, I'm going to keep things low-resolution.

• But you'll see a lot of the implementations of this,

• use shaders or webGL, all sorts of fancy tricks

• that I'm not going to get into,

• but if you know about that stuff and can build

• on top of whatever I'm doing, then fantastic.

• Alright, so I'm about to get started coding,

• but before I do that, I've written in advance a bunch

• of the concepts that are involved in this implementation

• that I want to make sure that I don't forget to mention.

• The first one that I think is really important

• is this idea of an incompressible fluid.

• An incompressible fluid is a fluid that density

• must remain constant throughout, like water.

• So for example if you have water in a balloon,

• and you squeeze that balloon, the water's got to like

• come out, it's not compressible, whereas air is

• actually compressible, its density can change.

• So this, apparently, from the little research

• that I've done, simplifies a lot of the stuff.

• So this fluid simulation is going to work

• only for this idea of an incompressible fluid.

• I should also mention that the goal here

• is not necessarily to with scientific accuracy simulate

• true fluid mechanics, but rather to create the illusion

• and feeling of that through some remote connection

• to that actual scientific accuracy.

• And I'm sure whatever I do will be less accurate than what

• people before, based on how I know the way I make things.

• Alright, but that's an important thing.

• So the first thing that we need to consider

• is that the fluid is going to live inside of a box.

• And I think, the way the math is sort of

• tuned in these examples I believe is

• so that this box should really be a square.

• And sometimes, I don't know why,

• like a power of two is maybe a nice thing.

• or maybe 256 by 256 just to make it low resolution.

• So you can think of this as a grid of pixels.

• And there is going to be

• inside of this grid a velocity vector.

• A velocity vector that points in a given direction.

• So if the velocity vector in every spot in the grid is zero,

• it's like completely still water.

• If I put a velocity vector moving to the right,

• it's like the water, that would be

• like Laminar Flow, by the way.

• Because the velocity, everything is smooth and perfect

• and all moving in exactly the same direction,

• as opposed to turbulence where

• everything's kind of going crazy.

• So that's one thing that's going to exist in here.

• So that is something I should say, there is this idea

• of the velocity field, or the vector field.

• And that's going to have Xs and Ys.

• In Mike Ash's blog post, it's actually all done in 3-D

• (laughs) with X, Ys, and Zs, and I'm going to take out

• that third dimension while I'm doing it.

• But you should add it back in and see what happens there.

• Now, the other thing is there's going

• to be this idea of dye.

• Oh, I wrote this over here already,

• 'cause I wanted to explain that.

• There's this idea of dye.

• And we're going to talk about the density of the dye,

• which is, in other words, this vector field,

• we wouldn't be able to see anything moving,

• we wouldn't be able to under see the flow through

• the fluid without like putting something in it.

• So you could imagine sprinkling a little dye in it

• and having it diffuse,

• all around the fluid.

• But what I want to make clear is when we start

• talking about density in this code example,

• and this Mike Ash makes very specific,

• makes a very specific point about.

• When we're talking about the density of this dye,

• which is like an extra thing we're adding,

• just so we can visualize it.

• We're also able to visualize it just as a vector field,

• which I will do at some point,

• but the dye is what's going to give it more this

• like smoky-like quality by visualizing the amount

• of dye as it moves throughout the fluid.

• So this is the basic idea.

• So the first thing I need to do is get an array to store all

• of the Xs and Ys of the vector field and the amount of dye,

• for every single one of these spots.

• And in the example, it's done with three separate arrays,

• an array of Xs, an arrays of Ys, an arrays of densities,

• and it kind of works like a cellular automata simulation,

• where I need the previous state and the next state,

• all the velocity of the previous and the next velocity,

• all the density and the next density.

• So I'm actually going to need two.

• So this is why the code gets really confusing,

• because I need x, Y, and density, then I need

• what's named as x zero, Y zero, and density zero.

• I forget, this might be called like S

• or something in the code, but I need

• the sort of previous of all of these.

• So there's a whole bunch of arrays.

• And this is what I want to later refactor it and see

• if I can just use Pvector, an object that stores a PVector

• and a density value in the previous, all that stuff.

• Alright, let's go back to

• Mike Ash's page.