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.

  • Okay, so thanks for those.

  • I'm really trying to spend more time keeping this site up.

  • And so each coding challenge has a card for both Thank you to all the people who have contributed to this website.

  • This is not a project I made are designed to myself.

  • This is a community developed project.

  • We just go to get up here and click on contributors.

  • Um and I, you know, rather that rather than name people like just sort of scroll here and we can see a lot of people who have contributed to this website.

  • So there's actually another project which is a sort of like, coding trained website 2.0, that's on the horizon.

  • But what?

  • My goal is to really have a place for the community to be able to share work that they're doing.

  • And for me to also make sure I'm crediting all of the different sources and things that I use.

  • So for each and the description, works and the playlist work to some extent.

  • But this is basically each challenge has a card.

  • If I go here, I'm gonna go to the DVD logo.

  • One are actually just go to this for a transform one.

  • So they go to the challenge.

  • This is the video, obviously.

  • But you could see here's the code.

  • There will be.

  • My goal is to have P five Jess Web editor and processing code for each challenge.

  • I know that David Snyder, a viewer, has made a processing version of this.

  • Hopefully that'll get up on the site soon you can download the code, see it live.

  • I don't know if that's the right terminology, but that will just give you a link to the actual demo running in the browser.

  • And then various other things that are related to the video are discussed here.

  • And this is the important part that I want to highlight.

  • This is where you can submit your own version.

  • So right now there's no kind of elegant, you know, Web form type thing.

  • This is all has to be done through a pool request, which could be somewhat daunting and a little confusing.

  • How to do that.

  • But there are these links will take you to instructions on how to do that.

  • And don't be afraid.

  • Come, we are welcoming and friendly in the coding train.

  • Get hub Depository.

  • If you've made something and you have no idea how?

  • It's a minute.

  • Open up a issue.

  • Say you need help.

  • Try and pull a quest.

  • Don't worry.

  • If you get it doesn't work.

  • It breaks.

  • There's a bug.

  • Just give it a try.

  • I I hear this from so many people.

  • Oh, I'm no good at that.

  • Get hub thing.

  • I wish I could contribute something.

  • Sometimes you just have to get over that first hurdle and you need people to be there, helping you get over that hurdle and so quoting trade.

  • There are lots of other places that are wonderful.

  • Community is open source communities helping people to get started contributing.

  • I hope that coding train can be one of those.

  • So it's just my little pitch to encourage you to contribute.

  • Okay.

  • I'm not using a timer today.

  • I will use my bell live demo.

  • Yeah.

  • Live demo Probably would make more sense.

  • Mark.

  • Sheriff writes in the chat.

  • That is, uh good question on you are Ben asked.

  • Do these live streams get saved in the channel?

  • Yes.

  • So let me take you to the coded trade on YouTube.

  • You can see here that I'm live streaming now.

  • If you go back, I'm just gonna go toe up loads.

  • All right, Here's my chaired by videos.

  • This'll what you would get if you were not logged in to YouTube.

  • Um, and you would see all these different videos when I'm looking for is yes.

  • So, uh, these are typically what the live streams look like.

  • This is live stream number 100.

  • Last one.

  • We're a little bit behind, so you can see these are some recent life streams that haven't that don't have, like, a thumbnail on a title with a number on them.

  • So little bit behind it that but the life streams usually get numbered.

  • And then everything else on the channel is mostly redundant content edited out of the life streams.

  • So, as always, anybody has a suggestion for how you could organize this stuff better a lot.

  • Some people on YouTube have separate channels.

  • One for live streaming, one for uploaded content.

  • I'm just kind of doing everything all in one challenge in one place.

  • Anyway, I'm joking.

  • There's nothing there, particularly private.

  • I will just mention that I make I have some videos that air for courts that I teach at N Y u that are unlisted because They're specifically only for that course, but they're just at administrative videos.

  • My sort of technique for the way that I do it is when I have content videos for a course.

  • I have those public on YouTube.

  • Okay.

  • Um okay.

  • Um, what am I trying to do?

  • Right.

  • So what am I doing today?

  • Uh, what am I doing today?

  • So I want to, um, let me pull up the Oh, my goodness.

  • Simon.

  • Wow.

  • So first, let me talk about Simon.

  • Simon is a viewer of the coding train I'm gonna do, Simon, and we're gonna get Simon's YouTube channel, and we're gonna click over here.

  • Simon, speaking of processing Community Day and I'm gonna click over here and then go to mythology er, heart of mathematics, this particular video.

  • Uh, then I'm gonna close this close this close.

  • This So this is a very famous pattern in mathematics called cardio aid.

  • There is a video on the mythology, a YouTube channel, which is a fantastic you two gentlemen, mathematics about using times tables to to visualize this cardio aid shape the cardio and shape appears in.

  • Amanda Brought said it appears and diagrams off.

  • Kind of like patterns.

  • There's a new explanation in this video of how you can see the cardio and pattern in a in the top of a coffee cup based on like the way the light bounces off of it and reflects off the coffee.

  • All sorts of fascinating stuff Here Simon Simon created a created a poster I have which I have downstairs hanging in my office.

  • I should've brought it up here to show you visualizing all of the times tables in in processing inspired by this particular video.

  • And this is Simon giving a presentation about it at processing Community Day Amsterdam.

  • So these are my two inspirations.

  • I think Vai Heart also has some videos about the cardio oId um, and about General, generally speaking by heart has amazing, wonderful one mind filling soul beautifying videos about mathematics and different types of things.

  • So I encourage you to check out the work of by heart.

  • If you don't already, Um, I never look at the chat.

  • Eso slow mode is not again.

  • Not on again.

  • I know I'm forgetting to not put slowdown in the chat.

  • Well, we'll see if I need to.

  • We'll see if I need Thio We'll see if I need to pull this car over.

  • Kids pull the car over.

  • So I would like to do this.

  • Um And so, in honor of trying to avoid saying Valentine's Day Butters to say, Valentine today, once in honor of tomorrow, I would like to make a heart.

  • I would like to express my love for processing.

  • And we're gonna do that here by visualizing the times tables and get this pattern.

  • And there's a I would like to re create the animation.

  • I'll just click over to it stuff.

  • I'm gonna I'm gonna let this play.

  • This'd is mythologize contents, not mine.

  • A mythology over here.

  • Probably just gonna let it play for a few seconds.

  • So I'm gonna try to kind of recreate this animation.

  • I'm gonna stop it now because I want to be careful about repurpose ing other content encouraging to go check out the mythology of video.

  • But I want to see if I could create my own version of this animation.

  • Okay.

  • Refresh this page.

  • Um, refresh this page.

  • There we go.

  • Um, Cardi oId There are lots of techniques for creating the cardio oId shape.

  • This being the most common this is super related to the EPA cycles video I recently did.

  • I don't know if it would make sense for me to make a video, just programming this way of generating it, but useful to see that.

  • And then I could also get Where's my Mandel brought set challenge.

  • Have that ready to go?

  • Let's see here.

  • Here we go.

  • Um, let's grab the processing code.

  • So what I want see it live?

  • Let's do that.

  • So long, Let's grab the processing code, um, and see what happens here because, um, why would I avoid Valentine's Day?

  • The result?

  • Avoid Valentine's Day Because it's a fake holiday, that excuse corporation to sell greeting cards.

  • Love is a real thing.

  • I've raised parts and puppies and ring both and all of those things.

  • But not this candy commerce nonsense.

  • It's my okay.

  • Let's take a look at this.

  • All right, so, in processing, I should be able to make this try to make this, uh 12 80 9 60 Yes.

  • So there you can see the cardio oId shape right here.

  • And then what?

  • What?

  • It's been another half an hour.

  • Jeez, Louise, I'm gonna get started doing something.

  • Get my ukulele out again.

  • Uh, Okay.

  • Why is this?

  • Let's just do this, okay?

  • This mess This?

  • Yeah.

  • This I have this.

  • I have this.

  • Okay.

  • What's interest?

  • What's here?

  • What's what Machine?

  • What is what is machine learning?

  • Think I should watch?

  • Next?

  • Interesting.

  • Fascinating.

  • Um, okay.

  • Um all right.

  • So this is legitimately.

  • Sometimes it's not that Is it something that I've programmed hundreds of times?

  • Not 100 times with several times before, but maybe not in years.

  • Sometimes it's something that I'm completely looking at for the first time and try to code on dhe.

  • Sometimes it's something that I like practice the day before.

  • And then I'm recoding again.

  • Usually it's this which is, like, I kind of understand how this works.

  • I watched this video a couple times.

  • If this seems very similar to all the things that I programmed, how hard could it be?

  • Famous last words.

  • But I am about to attempt this for the first time.

  • I have never tried to program this particular visualization.

  • I'm definitely going to need the whiteboard camera.

  • Um, so should I just say Valentine's Day?

  • There's nothing wrong with saying Valentine's Day.

  • I'm going to draw a nice heart here.

  • Um, I'm going to attempt to draw the P three logo, which kind of looks like a one.

  • And then it has kind of like a three like that.

  • I really like, like, live on you do.

  • Drawing a heart.

  • And like my own very poorly drawn version of the process logo.

  • Apparently, I am.

  • Okay, here we go.

  • So let's cycle the camera.

  • Let's get started.

  • Actually, I think what I'll do I'll start with this and what's Oh, interesting.

  • This is kind of envelope of a pencil of lunch.

  • This is basically the, uh this is they say the same thing.

  • Okay.

  • Okay.

  • Oh, what?

  • So you can see.

  • All right, I'm gonna start with this on my screen.

  • Oh, right.

  • Here we go.

  • Valentine's Day with Pete with processing.

  • Don't make me get out my ukulele.

  • Behave, chat.

  • Don't make me get out my ukulele.

  • Do I have a love song?

  • Here?

  • Have the lullaby.

  • That's not really a love song.

  • This is kind of lovey, lovey dovey way won't do any music, lad.

  • Cem, Cem from very impressive music in post.

  • All right, here we go.

  • Hello.

  • Happy Valentine's Day from the picture.

  • Gonna say it once, huh?

  • I'm serious for a moment.

  • Hello?

  • There's something in my heart that I love.

  • And here on this day, February 13th.

  • Although you might be watching this on February 14th or some other day in the future, I want to express my love for processing, processing, a programming language and environment that started in 2001 Created by Casey Reese and Ben Fry.

  • Please read all about the history of processing The Crossing Foundation.

  • It's work right now.

  • Process foundation dot org's and, um, I forgot to blow my train whistle.

  • At least there's no timer rights.

  • Nate.

  • The Let's Let's let's move this along, people.

  • Hello, I'm here.

  • It's February 13th.

  • I am feeling the love I would like to express my love for processing my first programming.

  • Love my one true love process.

  • E express it by creating this.

  • This is a famous shape and mathematics called the Cardio aid.

  • If I'm pronouncing that correctly cardio, I'd like heart.

  • It's kind of like a heart, and today it might be some other videos after this one where I make all sorts of heart patterns, but I just want to make this pattern.

  • If you wanna learn more about this shape and where it appears in mathematics, I want to point out to you this wonderful YouTube channel called mythology er, mythology.

  • Or has a video called Times Tables Mandel brought and the Heart the heart of mathematics, with mathematics and processing and code and all that sort of stuff.

  • Now I should also point out that rendering an animation of these times tables in processing has been done before, on most notably by Simon Tiger.

  • And one of things I love about Crossing this year is where there's been this world wide set of crossing community days recently in Amsterdam, Simon presented his work on creating this very large poster about the times tables prosecuted Amsterdam.

  • I was just a prosecutor today in New York over the weekend.

  • My heart is definitely full of, like, love and wonder, with all the things people are doing with prospects of this video is dedicated to all of the people who are working on processing and p five jazz and fellowships and everything I love you all know now everything's gonna go wrong cause I start coding, you know, So this this shape you can find it in looking at the ways of light reflects around a circle.

  • I mentioned the mantle brought.

  • Set.

  • You can see it right here, as in this bulb of the that sort of like, first bulb of the mantle brats.

  • Fractal set is a cardio in shape, and it's kind of amazing that it appears in this context of timetables.

  • So, uh, and then I think we're going to watch the end of the mythology or video.

  • There's this, like, animation at the end of it was just like, Whoa, that looks so cool and kind of show it to you now.

  • But I'm just gonna program it and hopefully will be at the end of this video, because somehow all program it.

  • So let me talk about how this works.

  • Okay?

  • Happy happy.

  • Almost happened February 13th everybody.

  • I love processing.

  • Okay, now, let's say and this is good timing, because in my course at N Y u this week, just today we were Yes, yesterday.

  • We're talking about polar coordinates.

  • I'm gonna need to make heavy use of polar coordinates for this particular visualization.

  • So we're gonna start with a circle and we are going to divide this circle equally into parts, basically almost like a pie chart.

  • But the way I wanna represent that is just by spacing out, equally spacing out instead of dots.

  • So I think of the mythology or video.

  • He starts with 10.

  • That seems like a good number.

  • So and probably make sense when you start over here 01 to wait a second.

  • I think this is working to get the three over here.

  • Right.

  • 3456 please.

  • And a only ever first failed record.

  • Scratch, you could add.

  • It was part of that.

  • That Thio just just ignore me.

  • I'm over here looking at something and yeah, okay, so that makes you just want to Who went to 34?

  • Okay, okay.

  • Okay.

  • Let's try that again.

  • I have one.

  • I have to.

  • Now I need eight more.

  • So I need four along the top and four along the bottom.

  • This is for me to get 10.

  • So 123 No, that's three.

  • 12341234 Okay, I did an okay job there.

  • So this is my circle.

  • Whoa!

  • Oh, my God.

  • Just bumped my head on the ukulele.

  • This really shouldn't be here.

  • Uh, what do you think they're doing?

  • Some interesting editing in this.

  • I'm okay, everybody don't worry.

  • That it sounded worse than me.

  • If anything, my glasses air might be broken.

  • They didn't actually.

  • At my head at the glasses.

  • All right, I have my circle with the evenly spaced out dots.

  • So now let me number them.

  • 0123456789 So I want to do times tables, meaning I want to multiply each one of these numbers by two.

  • And whatever number I get that I want to connect it to that.

  • So two times zero is what?

  • Zero.

  • So that's just hear one times two is what, too.

  • So that connects here.

  • Two times two is what's four three goes to 64 goes to shoot.

  • I have an easier time programming this.

  • That drawing it, that's for sure.

  • Four goes to 85 goes to 10.

  • There's no 10 while we wrap around.

  • We use the module.

  • Oh, operator.

  • So we use the remainder.

  • Bees lift.

  • If we keep counting like this would be 9 10 11 12 So five goes to 10 6 goes to 12 7 goes to 14 and a goes to 16 9 goes to 18 etcetera, etcetera, etcetera.

  • Yes.

  • So you can see here that this shape is sort of starting to emerge.

  • I did a terrible job of driving.

  • I feel like there's a mistake somewhere, but whatever.

  • Close enough, you get the idea.

  • So let's first start by just creating exactly this.

  • All right?

  • Oh, look, it's the perfect spaced out.

  • Well done, Macha.

  • Let's edit it to let me close these other things out.

  • Um, just cause I don't need them open.

  • I don't need this.

  • Let's let's save this on the desktop as times tables, Um and, uh, let me just add whoops.

  • I don't want the d.

  • Bugger on.

  • Let me add void Set up, boy.

  • Draw.

  • Let me say a size six.

  • Let's make it a square.

  • Right, 6 40 6 40 actually.

  • Hold on.

  • Let's just see what that looks like.

  • That's pretty good.

  • You Oh, my God.

  • I'm not in the right camera star.

  • Everybody, um, So what it used to be, I swear, in an old version of processing, wherever I would leave the window, it would kind of remember it and Then when I would run it again, it would end up there.

  • It just doesn't do that anymore.

  • It really makes me crazy.

  • There's probably a way I could modify like you can do.

  • Like, I don't get lost in this, but just give me a second.

  • Just curious.

  • No, it doesn't work anymore.

  • I have to investigate that try.

  • All right, all right, all right.

  • So let me start writing some code circle.

  • Okay?

  • So now what I need is I need a number of points.

  • So let me call this like, this is what This scale, the devised or I know what to call this.

  • Total points.

  • Just call a total.

  • All right?

  • So I'm gonna make it afloat.

  • Let's keep it as an intruder for right now.

  • I'm gonna change it to a floating a little bit.

  • You'll see why.

  • So now I'm going Thio, I need to do a loop and draw all those points.

  • I want the center of my, uh, visualization.

  • I want everything to be well, I want everything to be oriented around the center, going to translate to the center with divided by two height divided by two on and then this is where that polar coordinates thing comes in.

  • I need to figure out the way I'm going to find.

  • All those points is right.

  • There are how many slices of pie here?

  • 123456789 10.

  • How convenient.

  • So, beach, one of these angles is to pi divided by 10.

  • So that's how much I need to.

  • That's where each one of these points goes.

  • So I'm going to say, uh, a Delta, the sort of like Delta angle, we'll just call it Delta equals two pi, divided by total.

  • And then, um, another actually, another thing.

  • That way I could do it.

  • I could just use map so I could say angle equals map I, which goes between zero and total two between zero and two.

  • Pie might be an easier way.

  • They don't actually need this delta.

  • And then I need a radius.

  • So which is basically I need to know like, Well, how what is the radius of this circle that I'm visualizing?

  • And so, for that, let's just make the radius the width of the window divided by two.

  • So let's call that are, which is the width of the window divided by two.

  • And then I want to say X equals our times co sign of the angle.

  • Why equals our times sine of the angle.

  • And I will refer you to my video about polar coordinates to understand these particular formula.

  • Um, pasta a second.

  • I see that there's some super chats flying by.

  • Thank you so much.

  • When I finish this coding challenge, I will.

  • Thank you more properly.

  • Thank you.

  • Um and then the next thing I just want to do is draw a point.

  • So I'm gonna say I'm gonna make it in lips.

  • Fill 2 55 Ellipse at X Y and Oh, thank you, Ben Fry.

  • I'm going to call this circle.

  • There's a circle function now.

  • Uh, 16.

  • I love using these.

  • Okay, so let's see.

  • What do I get?

  • There we go.

  • Look, you can see there's my 10 dots around the circle now.

  • I probably want to be able to see that circle.

  • That would be nice too.

  • So let me say stroke to 55.

  • No, Phil lips and this translate needs to come before drawing this.

  • I just want to draw.

  • I know it's a circle.

  • It's a circle at 00 are times to write because the circle function expects the diameters.

  • The radius, times two.

  • So now we can see.

  • There we go.

  • I have my circle with all my points.

  • Now I need to do my math thing.

  • All right, So, uh, I'm gonna have a value.

  • I'm gonna call this end.

  • So n is going to be What is the times amount that I'm going to multiply each number by?

  • So there's total.

  • There's a lot of different parameters in the system, and you can play with them to create all sorts of different kinds of patterns.

  • Hopefully, we'll see some of those by the time I get to the end.

  • But right now, I'm gonna make this a two times table to try to get that heart that cardio aid.

  • So I'm gonna call that electrical had factor.

  • Let's call that factor.

  • Um, let's I'm gonna put that up here.

  • Thinned factor equals two, and I'm sure there's a nice way I could do all this together, but I'm gonna do this as a separate loop.

  • So now I'm gonna do this again.

  • Obviously, I'm just I will re factor this later as I like to say, but what I want to do is I want to say a is I like I want to go from point A to point B, which is I times factor.

  • Those are essentially my indices of like, where?

  • Where I'm connecting the lines.

  • So zero goes from 01 goes tu tu tu goes to four and then I need a function It actually this could be really useful for me to write a function that returns a p vector, Um, giving me the, uh giving me a given a p vector for any given index.

  • So, uh, so get vector for any given index and then So basically, I could say the angle is map that index but which goes between zero and total between zero and two pi and then the vector equals a new P vector at and this would be a global variable.

  • Are, um I cannot set the with up here because it doesn't know what the with is going to make.

  • This are here, and then I'm gonna say our equals with divided by two.

  • I could make that argument to this function, but just gonna keep that as a global variable make a new peopie vector.

  • Are are Times Co sign.

  • Actually, P factor class has something in it p vector from angle angle that will make the vector pointing in that direction.

  • And then I just want to multiply it by the are to set it to be that and then right.

  • So I'm using some vector stuff here, which I realize is now maybe a little bit beyond the scope of If you were coming to this video, just without knowledge of how the P vector class works in processing or in P five, which is a P five vector, it's just an object that has an X and A Y.

  • So it's a nice way for me to store the X and Y together, and I can make the X and Y components from an angle, and then I can scale that by multiplying it by some radius.

  • So it's really it's really got that sort of polar coordinate thing built into it.

  • So in a multiplied by our and say return our and then actually, since I'm here re factoring this, I could say right here p vector V equals what I call that function get vector based on eye on the mission bell say v dot x v dot white.

  • So I basically just took that code and put it into a function that I'm probably gonna need to do this quite a bit.

  • And I don't want to return our I want to return vey well, this is like what I'm doing so far, I think this might actually work.

  • Okay, so now I want to say, get vector for I and then get vector for I times factor.

  • But guess what?

  • It's not just high times factor, right?

  • What suffer?

  • So why?

  • Oh, this would be a P vector.

  • This should be a p vector.

  • So it's not just i times factor, although I guess I could rewrite this function.

  • It depends on where I want to put this.

  • I'm gonna put it here, So I need somewhere to deal with the fact that when I do six times too, I get 12.

  • But I really just want to because 12 divided by 10 is one remainder to 12 module.

  • 0 10 is to the module.

  • Oh, operator, which I have a video.

  • Thank you.

  • Go 11 about modelo is also linked now.

  • Okay, They're somewhere in a corner of this screen.

  • Okay, so now, right here.

  • I could just add that here, Ma Djalo total.

  • All right.

  • So I don't think I'd actually drew those lines, but this is still working.

  • That's there.

  • Now, I should be able to say line a dot Exe a dot y b dot exe b dot y.

  • It's backwards.

  • What does that mean?

  • It's not backwards.

  • Oh, because I started over there.

  • Interesting.

  • So a couple things I could do, I could just call like the scale function to flip it the other way.

  • When What's backwards?

  • What's forwards?

  • Who knows?

  • I'm just saying in terms of watching that mythology or video, it was oriented the other direction.

  • I also feel like our she needs to be a little bit smaller than the actual size of the window.

  • So let's make our equal like, let's give it a little bit of buffer, like 16 pixels.

  • That's a little bit nicer to see again.

  • My, my, my, my visual talent skills are so non existent.

  • And I know people are watching this word designers and artistic vision, and you will make something beautiful out of this and I can't wait to see um so ah ha, ha.

  • I saw chat message go by, which is really quite smart, which is that I could just hear if this is the angle, right?

  • This is the angle.

  • All I have to do is just If I wanted to start on the other side, just add pie being 100 80 degrees.

  • So if if I'm starting with the angle here, which, if this is zero, if I always just add pile, get here.

  • If I'm here, I'll get there, not type of thing.

  • And when I say pie, I mean the number pi not delicious.

  • Blueberry vegan blueberry pie.

  • Okay, lost time out for a second.

  • You really have to blow my nose.

  • Where my tissues it's dripping.

  • Okay.

  • All right, let's give us a try.

  • Oh, it looks right.

  • Okay, now, now we're getting somewhere, so the mythology uses the number 200.

  • I'm just gonna let's go to 20 and see what we get.

  • Woo.

  • That's kind of interesting.

  • Let's go to 200.

  • There we go.

  • What?

  • What?

  • There is the cardio that is, like a beautiful just on its own.

  • And by the way, What's interesting about this is this is very similar, if not precisely the pattern you would see if there were a

Hello, my stream thing.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it