Placeholder Image

Subtitles section Play video

  • Hello, my stream thing.

  • Oh, yes, I am.

  • Mmm.

  • Something?

  • Something in the way Draw loops attracts me like no other function.

  • Oh, I can't I can't get anything right, huh?

  • Let's Let's try it again.

  • So that in the way, draw Loop's tracks me like no other function some way draw you I don't want to stop coding Now you know this song is dedicated Thio processing my first love, My one True, huh?

  • Happy February 13 one of my favorite days of the year.

  • First, he's not I did.

  • You hear that rattle?

  • It is the ukulele because it has a weird rattle.

  • And so, me being the mechanically minded person than I am very mechanically, you know, really good with tools and building and putting things together.

  • That's sarcasm.

  • You hear my voice Terrible.

  • It all that stuff.

  • I found this screwdriver and I tried tightening all these different screws that I found all over this thing.

  • But I don't know, still rattles s So if anybody wants to submit other love odes to processing or maybe the P five Js or other types of programming things, I will sink those later on.

  • Today's heart themed coding train episode.

  • All right, so welcome.

  • Good morning.

  • My name is Dan on booth Coding train.

  • Um, this is a live stream that now happens every Wednesday at 10:30 a.m. Eastern.

  • Believe that I have an actual regularly scheduled time.

  • All of you have been asking Come here next week at this exact time I will be here.

  • Speaks up for what?

  • I cancel.

  • Something happens like snow tour for like, a beating came up that day a different day.

  • Hopefully I haven't.

  • I can't bring myself to actually put on the top of the YouTube banner like every went live every Wednesday at 10:30 a.m. Because I'm afraid that will jinx myself.

  • But that's what that's That's my plan.

  • So, um yeah, people are Eric is asking.

  • Shouldn't think yellow colors fade to blue as time goes on.

  • Oh, Alexandra says, Hey, it's probably from the nut or the action.

  • You should check the trust rod.

  • I have no idea what any of that stuff is.

  • I hope you're not.

  • That's not look, but that probably has to do with parts of the ukulele.

  • Um, So, um yes.

  • So this is a, uh this is the result of the coding challenge that I did last week, and I don't remember where what the settings here is somewhat arbitrary in terms of the fading and terms of some of these values.

  • Let me run this again, So I kind of wanted to continue with this this week, But I don't know.

  • Things didn't go well for me in the last week after putting this code together, but I do want to talk about how they still want to do some follow up videos about that.

  • So, uh, let me begin by talking a little bit about fluid simulation and where my head is that with that.

  • So I want I want to talk about If you think so.

  • This is what you're seeing.

  • Here is the result of me porting code from Mike Ash.

  • It's a blogger post called Fluid Dynamics or fluid simulation or something like that for Dummies.

  • That code That bloke Post was written based on the seminal paper from 2003 real time fluid dynamics for games from by Joss Stam on So this is like kind of 1/15 generation version of that in processing, and it works in this nice way to create this fluid like feeling that feels.

  • Look, the visual appearance here is much more like smoke.

  • But with changing the way you render the design changing the various parameters of the design, you could probably create a variety of different kinds of fluid like simulations.

  • However, this is not many people have gone before me to create versions of this in more thoughtful and sophisticated ways.

  • So my original plan was just a port the code, which I did the next step, I was going to try to re factor the code on dhe.

  • I started working on that a little bit.

  • I want to show you where I got to, because maybe some of you might have some suggestions.

  • So I'm gonna go to get hub dot com slash sift Shiffman slash c f d.

  • The C F.

  • D stands for computational fluid dynamics.

  • And these were some like these were something like test bits of code that I put together before I did the actual Lifestream.

  • If you want to find theat actual code from the live stream, you can just go to here.

  • You will see the video here.

  • This is on the coding train dot com This link will take you ups.

  • This link will take you to the code on and then one person who This is exciting.

  • We have one community contributions.

  • So let's take a look at this community contribution really quickly from Juan Carlos punks.

  • Campuzano Ah, flow around circle in compressible, non viscous fluid.

  • I love this.

  • So this looks like it is a particle based fluid simulation, which is really, really where I want to get, too, with all this stuff on, and you can see the path of these dots kind of moving around this circle, can I move that circle?

  • I can move the circle.

  • That's kind of cool, I might suggest it surprised me that it went the color of the background when I clicked it.

  • So I might if I were giving my quick off the cuff feedback here.

  • I might consider a different color change for when I click and drag, but I can Let's try.

  • Let's click on Trace So that's cool so we can see the trails of these particles.

  • Let's click on speed.

  • It says drag circle right there.

  • What?

  • His radius!

  • D'oh!

  • Oh, that makes the radius of this interesting, though much smaller Let's make that big.

  • Let me drag it around Cool.

  • So that's great.

  • I'd be curious to look, and I would I would love some documentation here about, and I wonder it's probably in the source code if I click here some documentation.

  • About what?

  • What What algorithms led you to this particular simulation?

  • Or did you invent them yourself or what was the sort of technique employed here?

  • That's terrific.

  • Um, okay, so but where I was getting Thio is, um, over here I started re factoring the code.

  • And if we look at my code from last week, which is just again a port of other people's code, what you'll see is that, um, we go here to fluid class.

  • What you'll see is all of the data that's part of this fluid simulation is a set of six different individual arrays.

  • There is a velocity vector associated with each spot on the canvas, each spot on that grid of pixels, and that velocity vector is described by an X and A y.

  • This zero no, Tate, the sort of previous philosophy lecture.

  • So we always need to know historically, what was the velocity before this moment in time.

  • And this is very common in a lot of different Siler automata algorithms that involved data on a grid on dhe.

  • Then also, there's this idea of density which which I might think about renaming to die because it's the amount of die at any spot in the fluid.

  • And that's how we end up visualizing whether we're using.

  • We've mapped that amount of di tua, Hugh, or to a brightness value, and then s is the previous amount of die.

  • So I had this idea that let me let me and I was gonna do this live.

  • But I thought I would try the first steps of it, which you can see here.

  • And this is my fluid re factor.

  • And if I go here, I had this idea.

  • Okay, Well, what if I had like, this idea of a velocity object and it was actually a p vector object and the velocity object knew a current velocity in a previous Flossie.

  • So hey, I'm just trying to get some new variable renaming to make the code a bit more readable.

  • But also and then if I had a di object which would just be a scaler.

  • So the velocity object is a vector.

  • The dye object is a scaler.

  • And then this would allow me to have the fluid class have just these two arrays, like the array of velocities in the ray of dies.

  • And then I could start the code with sort of, like, simplify in tow like this.

  • I kept going down this road, and this is this doesn't work.

  • But then this is my idea.

  • Oh, then I could apply the different steps of this particular simulation Diffusion projection.

  • Diffuse Project Adv Act and I would diffuse and project the velocity and advocate project the velocity and diffuse an advocate the density.

  • And then I started realizing the whole way the code is written if we go into those functions that perform these operations is to operate off of a single generic array.

  • So I guess I could overload the 52 different versions of the dysfunctions whether they're getting a vector or I.

  • Then I started to get lost.

  • It was like, I don't know the best way to do this.

  • And that was like late at night last night, I was like that polite story about this tomorrow morning.

  • So, um you know, rather than take up all of today's life stream trying to re factor this code, what I'm asking for you is your suggestion.

  • So if you're watching this right now, Andi, want to think about this?

  • Have some ideas for me.

  • Let me let me know, because my goal is to re factor it in a way that's more readable.

  • Maybe turn it into a library.

  • Maybe ported the job script may be optimized.

  • There's lots of possibilities here.

  • But then I was sort of thinking, What am I doing here?

  • Am I really the person in the world who's going to invent a new fluid, simulation like library and algorithm and organize it?

  • I mean, probably not baby on.

  • Certainly with the help that I've found with this wonderful Internet community of people who watch this channel, I'm sure there are lots, lots of people watching who really could thoughtfully contributed this idea.

  • But there are many other there are.

  • This is not a new idea, and in fact, researching this a bit more.

  • I found another library called pixel flow.

  • Its last commit was pretty recent that Oh, no, that's not the reason that's a year ago.

  • Last commit was a year ago, but you can see it has a lot of functionality for this.

  • These ideas on dhe if you you can download and I actually ransom these examples which are quite Oh, here we go, Uh, which you can see are quite exciting and amazing.

  • So this is an interesting possibility for me to look into actually just using a library where all of this has already been sort of re factored and reorganized in a way that makes it useful for for, like, making the projects.

  • There is also M s, a fluid, which is a library that I used many years ago, which is the exact same algorithm that I implemented but thoughtfully packaged into a library but not currently compatible with processing.

  • Three quickly checked.

  • I think this would require a small amount of work work that I could actually to to update it toe work with processing three more easily, So that's a possibility.

  • But I I've been in touch a little bit with Gabriel.

  • Why mouth we find Gabriel?

  • Why mouth on Twitter?

  • Um, Gabriel.

  • Why?

  • Mouth is a researcher specifically in fluid structure interactions based in the UK This is the website and Gabriel why?

  • Mouth has created something called a lily pad processing, which is and I'm only just download this.

  • I'm gonna Let's let's take a moment, cause this will actually just run right off the bat.

  • I'm gonna show this to you because this is really, really phenomenal.

  • And why why wise my Z s h broken?

  • Um, let me actually go to the desktop and let me clue in this repo real quick.

  • Um, let me open here and let me open this up in processing.

  • I'm goto lily pad uh, lily pad, and I'm gonna run this.

  • So look at this.

  • Let me zoom into this year, we can see we've got a really excellent and more dynamic and probably accurate fluid fluid simulation here and there.

  • So much.

  • There's so much to this, like this.

  • This quick demo.

  • This is like scratching the surface of what?

  • This example.

  • I know what to call it example.

  • Demo open source code project does, but to me and and and it's really well organized thoughtfully in an object oriented fashion, but for for me to use it on to like there's just, like so much going on here.

  • Andi.

  • It's probably fairly well documented here.

  • Documentation on the Solver guide to contributing the project's simple instructions.

  • There's lots of documentation here, but what I think might be useful would be to turn this into a processing library.

  • And by that I mean something that I could do, actually, just through here in port library, add library, for example.

  • If I look for pixel flow, is it here?

  • Yeah, pixel flow is right here, so I'm gonna I'm gonna find pixel flow in the library's I'm gonna hit install.

  • I'm gonna install it and then let me go find one of the pixel flow examples.

  • So go over examples and I could go to contributed libraries and go to pixel flow.

  • We could pick any of these.

  • Let's just try fluid to de fluid basic, and then we can run this.

  • And, ah, look at this.

  • The package control p five doesn't exist, which means this is dependent on another library.

  • If we quit this.

  • These, by the way, is there.

  • So sketch import library, add library.

  • I'm gonna add control P five, which is interface library, which it's much harder to do interface elements in an elegant and flexible way and processing p five jazz because you're in the browser being able to manipulate text boxes and buttons and sliders and create an interface.

  • There's so many more possibilities, given the rich set of features that a browser affords.

  • Um, okay, so let me Now, try running this again.

  • So there we go.

  • Okay.

  • So we can see this is a similar idea of yet another fluid simulation example.

  • So So this is where I'm struggling with how to how to move forward.

  • First of all, I got a lot of stuff time I could really spend on this fluid simulation I'm so fascinated by.

  • I want to Oh, I want to, um uh, but, um, so one path, which my original path was to kind of re factor my code, make it a little bit.

  • Try to understand how the algorithms work a little bit more and explain those things that will take some time and research on my part, which is a little atypical for how I do things which is more fly by the seat of my, uh um pants.

  • So that's one possibility.

  • The other possibility would be to leave that fluid video alone and go straight to using a library, whether it's pixel flow and it's a fluid or lily pad.

  • All three.

  • So that's what I'm looking for thoughts and suggestions about.

  • But I'm going to leave that, um Now I'm I like looking over here, and I'm seeing some would say he is not looking at chat question Mark.

  • So no, I am not looking at Jack except for every once in a while and I to look at that.

  • Okay, so I want to put that aside.

  • And today I want to focus on the heart.

  • We quit this.

  • Okay, wait, let's also go and go to the DVD logo challenge.

  • Since there were several community contributions, let's take a look at some of these.

  • So let's look first at bouncing DVD logo.

  • Bye, Bruno in three d.

  • That's pretty great.

  • That's pretty awesome.

  • Thank you for submitting that.

  • Let's look at wurl it DVD logo by unr Rog, Uh, this is cool.

  • So look.

  • So add rope.

  • There we go.

  • So now these looks like on Iraq.

  • Who created this?

  • Actually made an entire Verlegh physics library for lit dot Js I typically have used toxic lips dot jaspher my violet physics.

  • That's really cool to see the thing about alternative physics for this DVD video bouncing nineties screen saver Look beautiful.

  • Let's see, what else do we got here?

  • Bouncing DVD with corner detection and Maur?

  • Oh, look at this.

  • I love this.

  • So it's counting the number of collisions, the number of corners.

  • The corner threshold, I guess, is like, How close does it have to be?

  • The size is the size of the logo.

  • The speed.

  • Let's make it go fast.

  • All right, Come on, everyone.

  • I would hit the corner.

  • Okay, Uh, and then changeable speed track and hit the quarter detection by temporary pride.

  • Well, like this, um, press t to enable disabled the track of the logo.

  • Cool.

  • Scroll the mouse wheel to speed.

  • Oh, I love that.

  • I can scroll the mouse wheel, which speeds it up or slows it down.

  • And background switches.

  • If the logo hits the corner logo color switches.

  • If the logo hits, the edge s so we know if it's 1/4 at the quarter.

  • If the logo Yeah, wonderful.