Placeholder Image

Subtitles section Play video

  • all right.

  • Oh, I'm sorry.

  • Did just been afraid.

  • Okay.

  • Yeah, but in theory, that would be better to get that working.

  • And I should have yelled to do that.

  • Okay, We're gonna start streaming Were probably already streaming right now.

  • Hello?

  • I was gonna say good Friday afternoon.

  • Is it?

  • Yeah, because good Monday morning is your thing.

  • Yeah.

  • So it's good Friday, but good Friday is like a holiday, so it sounds a little weird.

  • Anyway.

  • Say choo choo I don't have.

  • By the way, I don't have any, like, opening things.

  • They're closing things.

  • I was watching Captain Disillusion.

  • Who says Like you don't know Captain Disillusion.

  • Like American Captain Solutions.

  • A YouTube youtuber makes, uh, uh videos about how other people fake videos.

  • Yes, well, he's like a visual effects artists and shows how other people made like a fake trick shot video.

  • That's actually anyway, he says, love with your heart.

  • Use your head for everything else.

  • You say good Monday morning.

  • Somebody else like Jebreal watched rials videos.

  • He's another youtuber.

  • He says Always feed your curiosity.

  • Okay.

  • Wait.

  • I should say hello.

  • Hello, everyone.

  • Um, my name is Dan.

  • Well, what can I do you know that is not a health hazard?

  • I don't mind.

  • Well, that's that's actually Jesus.

  • Yeah, I would really like to get coding train, Brandon train whistles as, like, a thing.

  • So we're here for a very special Friday.

  • Livestream.

  • I'm just gonna I've got two laptops going.

  • Um, I'm gonna just check.

  • Nobody is saying anything like the audio's not working.

  • The sound is not working.

  • People are saying, What's this?

  • So welcome.

  • My name is Dan.

  • This is M p J.

  • From fun fund function.

  • Hello.

  • If you're not familiar with the fun, fun, fun, fun, fun in function gentle.

  • And also there's a you have to sort of two channels.

  • Is that right?

  • Yeah.

  • So we have a nickel, it's yours is 600 thousands.

  • Which side function is 180 years?

  • I've been running it for, like, three years or something.

  • It's very focused on, like the joy of learning and like being being a little bit more about It's, like, vulnerable and having fun with programming and like accepting that it's everything goes horribly Arrival time.

  • Deaf tips is kind of the same thing.

  • We took it over a year ago from Thomas Nielsen, right?

  • Running for many years, it was called Deputy for designers.

  • Initially on, it's a longer front and focused.

  • So it's It's yet physically more tooling and more for people who are just getting into development from other other years of life making designer.

  • And you are based in case people aren't familiar.

  • Uh, you're Can you just tell a little bit about yourself in your background and where you're based and stuff that you've done?

  • Yeah.

  • So I don't have it so that apparently I don't have to introduce.

  • You know, people are saying your audio is low.

  • All right?

  • So let's let's just it's not what you did.

  • And I just let me.

  • Well, what?

  • I think this is the best place to adjust it.

  • So let me first turn my life but talking 12345 Is that okay?

  • Wait, I don't know.

  • I turned.

  • I think I turned know that should be yourself off.

  • I don't know which was which.

  • This Let's e I turned mine off.

  • Yeah, you're all right.

  • All right.

  • Cool.

  • So All right, let's Let's get it up.

  • So now I'm talking.

  • It's a level 40.

  • If I scream a little, then it distort like, but this should be fine scene with.

  • Street says, Yeah, it's, uh it's It's this is level 40 as 40.

  • Okay, let's that sound good to me.

  • The thing is, this is what this is what I hate about life's treating.

  • I love everything about you.

  • Is that Bill idea?

  • What point?

  • Yeah, that is.

  • That is why I thought it was said 40.

  • So I figured that you said 41 Level four.

  • That now we're seeing better.

  • Yeah.

  • Um, yeah.

  • So it seems like in today's voices coming through dense of Microsoft, right?

  • That's right.

  • Now, that's impossible.

  • Oh, sweet Macha.

  • Who does a video editing says Can't watch right now.

  • It's very important that the same.

  • Oh, yeah, This is probably true.

  • I think his laugh like is a sound good.

  • I was saying Great.

  • Now, the funny thing is, my know how we're gonna move to 50.

  • Yep.

  • So, uh, no, not 50.

  • You're at 40.

  • Yeah.

  • So I'm gonna move mine to 30.

  • So mine, like, is now at 30 and we're gonna just Let's just count to 10.

  • 123456789 tattoo.

  • How is that?

  • So counting to 10.

  • How is that?

  • Everybody we have now we have to wait three seconds.

  • Six.

  • This is great.

  • It's like, this is good practice for me because I want to do way more live streaming.

  • Finally, this It actually works really well for me.

  • I really like the higher energy that the life semen is less like the interactivity with people and the like, Uh, yeah, Colonel Mike.

  • Six.

  • Awesome.

  • Sounds good.

  • So good.

  • All right.

  • I think we've done it.

  • Yeah, we're talking about You were going to completely disregard adventurous advice that they should be at the same level.

  • Yes, but the same level of, uh, like here.

  • The thing is like, this what's actually going into the computer is one thing, all right?

  • I was aren't being treated separately.

  • They're only being treated separately here because I have a very, like, non sophisticated.

  • It's actually just going through.

  • This is like a left and right channel, which I mixed down tomorrow because our mikes are also different distance.

  • Yes.

  • Oh, that might actually be the whole thing.

  • Yeah, different.

  • Mike's, too.

  • Whatever.

  • Like, uh, too loud, but we're talking.

  • It's what people are saying.

  • It's good.

  • I'm gonna check.

  • So I have.

  • There's two chats going on here.

  • One is, um the YouTube shot.

  • This is a slack channel for patron.

  • Sounded good from here.

  • All right, all right.

  • So we're gonna trust that this is fine.

  • And you know what?

  • Working it will come into this another day.

  • This trip will do it.

  • Don't do this again this many times.

  • Oh, yes, I think.

  • OK, so we were back.

  • Thio.

  • I asked M e j to introduce himself a little background, so I originally actually from a theater background.

  • Okay, Sort of me, too.

  • Yeah.

  • Really?

  • Yeah.

  • I don't know.

  • What counts is on actual for background did.

  • But I did a lot of memories theater, like my teenage years, and I then I went to college or no college would high school.

  • The thing is, 99 to 19 year 9 to 12 in school this week on and then alert programming on started e commerce business run that for a couple of years, tank.

  • That then started doing consulting on dhe eventually ended up its part.

  • If I worked there for five years, and during that time I, like, progressed a lot from working on, Spent a lot of time writing for posts.

  • And that is how I like my Howard, gain my Internet fame, which I had translated to Twitter and then eventually, somewhere on that started YouTube Jellicle function function.

  • And that's sort of where I am right now.

  • And at present, you are actually doing fun, fun function, as you're kind of like, full time.

  • Yes, exactly.

  • Yeah.

  • That's amazing.

  • Yeah, it's great.

  • But it's also a dreadful do not have your own boss.

  • Yeah, like a kind of employed a Boston in David so he can realize the person.

  • It's like, No, you have to send the invoice like that.

  • So I'm out of the corner of my eye like tech checking the There's a lot of, like disagreement about.

  • All right, check here.

  • Uh, yeah.

  • Everybody.

  • I think we're gonna be fine.

  • Yeah, So try, I suppose, unless something goes horribly awry, maybe now we can turn the chat from talking about something other than the audio.

  • It is a big apologies for the echoing.

  • Any sound quality, by the way, is completely my fault.

  • Yeah, so yes, to give you an idea here, like I come into this room and it's like, there's a lot of echo in this room and you know where there's a lot of echo I'm gonna show you while there's a lot of echo because these sound perfect Patsy just lying around on the floor where they're not, like, doing anything like they should, like.

  • You have.

  • It's nice, but I put them up, man.

  • But what if I just, like, start over here and held Would Yeah, that would help, I think, actually, but they should, like, should I don't know.

  • All right, so we don't.

  • So, as usual, I have done no preparation for this because we actually met earlier today to, like, potentially prepare.

  • But then I just talked about all sorts of jobs, and so we didn't prepare.

  • Yeah, but we weren't there, but we're both extremely talkative people.

  • Well, it's like Yeah, well, yes.

  • The intentions were good.

  • Yeah.

  • So what?

  • It's the intentions who are actually bad.

  • Our attention was Do not prepare.

  • Oh, right.

  • I was like we discussed like, should we prepare no knowledge?

  • Yes.

  • WeII, let'sjust.

  • Wait, That's true.

  • That's true, huh?

  • You like that?

  • Yes.

  • So what we thought we would try.

  • And, you know we'll be here.

  • It's for some amount of time between 30 minutes.

  • Two hours, I think probably less than two hours.

  • People think we've I thought that what would be interesting to try would be for me to teach the wrong word advised stand in.

  • Texas introduced the fire P J s to N J.

  • Who has maybe never used No, never, never any flea looked at processing because that's it.

  • Yeah, like this.

  • A lot of people from my audience coming in here.

  • Right.

  • So perhaps we should talk a little bit about you.

  • Are you okay?

  • Perfect.

  • Yes.

  • Oh, great.

  • So let me first, let me try to explain this in a couple different ways.

  • Number one is there is a tool called processing, which is a Java based programming environment which was developed at the M I T Media Lab by Casey.

  • Recent.

  • Ben Fry started the project.

  • Excuse me.

  • Started in 2001 so that's, like, some amount of years ago, greater than 15.

  • And so that's actually in many ways, how I got introduced to programming was through that program.

  • I done some before, but That's really where I started to get involved in programming in open source and that type of stuff.

  • There was a point to what I'm saying.

  • Yeah, OK, so so I know where we are right now.

  • Where the two of us are standing is on the ninth floor of the Tisch School of the Arts, which is art school at New York University, Film school, dance program photography and a place called TP.

  • It's where, which is a two year master's program.

  • That's where I discovered housing as a student.

  • Different workshops were given in processing when I was learning.

  • I would like to just love to make an interjection insanely cool.

  • This floor, like us walk in here and there's like tons of people doing all kinds of physical computing stuff with like, three D printers and thinks blinking and like when you walk in, there's a wood mirror, like with the little wooden blips that is controlled by a connect.

  • So you walk in front of it, and it's like flips all the little wooden boards to create, like a shape of you, like a mirror image of yourself.

  • I would just like all kinds of stuff like it's such a wonderful in mind walk into years feel like, oh, excited.

  • But I want to make sure, yeah, and if your buddy if you're looking for that project, it's called the Wooden Mirror.

  • And it's by an artist named Dani Rosen, who also teaches the 90.

  • And there's lots of videos and things online.

  • I'm sure you could find it comes that, actually, amazingly, that project was first created, I believe in 1999 which is way before processing Arduino wanted to use.

  • It was just a playing webcam.

  • Oh, so it was a mapping of the brightness of each pixel to the angle of each piece of wood with when light is reflecting on it.

  • If it turns up, it's brighter if it turns down, its darker.

  • So the effect is much stronger with the Connect is able to do this for background removal.

  • So I think before the connected usually was like a black curtain or something, that would be that you would be able to see the silhouette.

  • Um, okay, so yeah, so that's why I teach now full time, fast forward a whole bunch of years later and also work on something called the Processing Foundation, which is actually a US nonprofit charity that maintains a few different open source platforms for education.

  • Creative coding.

  • Art processing, processing dot pie, which is like a Python version of processing and then, most recently, a Project P five GS, which was created by Lauren McCarthy.

  • And there's the P five, just Web editor that Cassie Tear Occasion made.

  • And so P five is probably the job script library that I used the most on my channel to do quick tutorials about the basics of programming and also a lot of, like, make a simple, like game or do like Recently I did this visualization of Mr Principi Triangle, which is a fractal.

  • Oh, the camel it off on then.

  • This is a thing I also do, which is every 30 thing about.

  • It's really useful because we know that 30 minutes has passed.

  • Oh, that section of the Lifestream because we probably that was like 10 minutes beforehand.

  • People are say system print topic, please.

  • So, uh, s so I never have the chat right here in front of my face, which is kind of toys in the corner of my eye.

  • Rambling overflow Alright, Fine.

  • Okay.

  • So what's interesting to me about this is P five gs is job script Leiber that's designed not for this scenario, in a way, because, of course, it can work in this scenario, but it's really Maur designed for a scenario where somebody totally new to program enters and maybe somebody who's interested in art, graphics and animation, Whereas I think we're in a situation.

  • You were obviously new to programming and in fact, have done almost like you have a different set of knowledge and background in front programming than I do.

  • I don't really have that professional software development experience.

  • So was it mean for a library?

  • That skier, too, for beginners, for a software developer to come from that.

  • Yeah.

  • So, like, I come come into this a little bit from a background where my brother is an artist.

  • Yeah, s like a proper one like that.

  • He does that full time.

  • And I've been thinking about what we have been talking about, like hit me teaching him programming, and you hear some kind of project together, and then processing, like, immediately comes up because it's ah, it's a language is very popular.

  • Morning artists on it.

  • So I've been, like, going like, yeah, probably during this month.

  • I never get around to Yeah, so this is, like, the best opportunity to do so on the way like that.

  • I've done a couple of these pair programming brings on my channel.

  • And the way we usually set it up is that one person is the driver and one person.

  • That's the navigator.

  • The driver is the person that is doing the actual coating on the navigator is the person who keeps tabs on where we are going.

  • And, like, the kind of, like, more overarching aspect of the the task on in our particular situation, we have been good that the driver doesn't know crap about the subject.

  • And the navigator is like a little bit more knowledgeable.

  • But the navigator is not allowed to type anything.

  • Yes, yes, the driver that is doing it So that Zach So, uh, maybe I don't know what?

  • The first thing, a try.

  • Maybe you should try to make a P five sketch without me telling you anything and see what happens.

  • Yeah.

  • Okay.

  • So let's yet that's you, like, Okay, p five lib.

  • Uh, let's just do that.

  • See what happens if we found the website.

  • You're uninterested page of the Web sites.

  • It's not actually the home page.

  • Yeah, okay.

  • Like C s P five is a library itself.

  • What you found is like the page about libraries to use the, uh you know, they're in the right place.

  • Yeah.

  • You know what?

  • That's actually know How easy it.

  • So this is interesting.

  • So the way that I have always shown people the way that I used the five is by not it's purely a client side library.

  • Yeah, but not like doing this magic and PM thing.

  • I mean, I know I do like magic.

  • NPM things sometimes, but I only ever do them.

  • If I'm doing some server side to me like that, it's like, really project management.

  • Yeah.

  • Like, to me like that, it's a non magic thing.

  • Yes, Like script tax and stuff like that.

  • I don't even know how I don't remember way.

  • Should try making your first p five sketch through module.

  • Yeah, module stuff late.

  • Let's I mean, let's let's try this.

  • Uh, you know, I'm gonna just create an integrated terminal, and yes, because Okay, so we're doing is we're standing in front of that terminal.

  • Okay, Perhaps we should switch our subs to the browser and flick was over.

  • Okay, we could do that.

  • Let's go.

  • That is more like they dio.

  • Or what if we switch the browser to this side?

  • Yeah, or what?

  • If you do that, I do have the capability of capital take more time.

  • And also, I don't know, maybe this is gonna be fine later, but, um, that is yet.

  • Yeah, pretty small.

  • Okay.

  • All right.

  • So the thing is like a question for the audience here because this is something like normally when I I'm coding.

  • I just tend to use create, react up Because even if I'm not used to it because because if such a fast way to get on auto reloading environment up and I could use like http Dutch server here, which is great, MPM I'll do it, but yeah, but it doesn't give you all to reduce life server.

  • Awesome.

  • Let's do it So mpm dash g install life, sir.

  • Stole live server.

  • Perfect.

  • I've been looking for this.

  • Okay, I haven't been spending.

  • I've been thinking about this several times.

  • Everybody always tells me Just use the like, blah, blah, blah plug individual studio itself.

  • But, uh oh, this again.

  • All right, So you just do that?

  • Yeah.

  • All right, you are.

  • It's right behind us.

  • Here.

  • See, I I'm appointing too.

  • OK, so if I type something here and say this as, like, index dot html and we do that well, yeah, and I said, Does it update just typing in the chat?

  • Yeah.

  • How do I get it?

  • You know Oh, uh, you just change the thing in the code.

  • Yeah, but it doesn't update.

  • I have to refresh.

  • You know, that's the whole point of life service.

  • Don't refresh.

  • So how should I get it to a friend?

  • Just only do it for like that.

  • Does it not refresh you safe?

  • It should refresh on Matthew safe.

  • It does?

  • No, but how would it like it?

  • Would have to inject some kind of job.

  • Skips here for it to work.

  • I mean, when I do it.

  • But perhaps perhaps I have to actually have, like, HTML or something.

  • Otherwise I won't know where to inject stuff.

  • The chat will probably solve this for us eventually.

  • See, this is this is the message Dance.

  • Still does not know about the live server V s code.

  • Turn off cash in the browser.

  • Someone is saying.

  • All right, you do that somewhere.

  • Network sources What is actually under settings.

  • Yeah.

  • There you go.

  • You're good now, Another network?

  • No, no, it's called a disabled cash this say about disabled cash.

  • They want All right.

  • Okay, let's see.

  • 02 hours later.

  • But I think this is why we like to do a lab.

  • We know it works.

  • Not work.

  • Interesting.

  • Yes, it was the cash, But you don't even have the death tolls open.

  • No.

  • So it probably wasn't It was the HTML.

  • I think it was nothing.

  • Okay, So great step.

  • Because now it injects the smell or just stay here.

  • Yeah, I needed that.

  • I needed a body type to inject.

  • Yes.

  • All right.

  • Cool.

  • So p five, um, you know what?

  • And this now, now we are gonna do it with the script tags because we no longer have Create reactive.

  • This can create, react out to use the modules.

  • No, but you need to something that we're all bundles like.

  • You're like Web pack would be this.

  • Yeah.

  • So like that.

  • Like what?

  • Have you got a week?

  • It will be interesting to try it with Recreate, react.

  • You know what?

  • Let's do that.

  • Uh, so, uh, I don't By the way, I know almost nothing about react.

  • So this would this could be our next collaboration.

  • I'll be the driver and traveler re.

  • Absolutely.

  • I mean, I tried I kind of specifically don't wantto react because I don't wanna have to answer any react questions, but I know it would be great to learn about.

  • Yeah, it's pretty good.

  • And, uh, all right.

  • So insulted package.

  • It might take Oz in the chat rights.

  • You need the html attack.

  • So everybody's again.

  • They're giving us the solution 30 seconds later, by the way, everyone should check out Oz.

  • Rameau's his work on hands free browsing dot Js and the chat Hi, Oz.

  • Love to be alone.

  • I work is amusing, but what's that?

  • He's working on a project called Hands Free.

  • I might be getting apologies.

  • I'm probably getting the name of it wrong, but it's using tensorflow Js and different machine learning and pose net different things too.

  • To help people who cannot use.

  • Maybe the mouse or keyboard to browse and use their computer through gesture and face and gays all.

  • You're kidding me.

  • That is so cool.

  • How do you find it helps our hands free dot jazz dot orig.

  • All right, we'll come back to that little cools.

  • Okay, So let's see, uh, CD, fun, fun, fun train.

  • And then we're gonna open opened that folder and said if we instead yet all right, so, you know, pulled this scrap over.

  • This is a mess there.

  • This is the one we don't want so amazing to see how everybody, like, uses their computer in, like, different, unique, weird ways.

  • Yeah, actually, Or maybe it's just me who uses my computer completely nonsensical Way over everybody else is like, yeah, like everybody has nobody.

  • I think it's a kind of like a fingerprint.

  • Um, all right.

  • So, source, we're gonna have to so many weird problems, I think pretty p five.

  • Yeah, but it's gonna be great.

  • Fine.

  • Okay.

  • So let's yes, uh, let's do this.

  • So all of a sudden you have, like, 18,000 different files.

  • Yep.

  • That's that's your biscuit development.

  • Martin jumps get more fun.

  • Music, batter.

  • Right, Because my example There's index elation, Mel and their sketched a Js That's it.

  • I mean, that that is clean.

  • I'll give you that.

  • But then when I have to get it into an actual like it's super annoying, like I'd rather just have a nap from Start.

  • And this is the thing is like, Yeah, it's a little bit much, but I know exactly what this and they are really good at keeping its stable.

  • That's what's so nice about react that they are like they don't change things around as much anymore.

  • Like I don't I've learned I learned this like, What is it like a year and 1/2 ago?

  • And it's kind of still the same thing I don't have to relearn, but today was your first day learning to program.

  • Maybe this would be too much.

  • You think so?

  • Like I didn't tell you the clerk afterward.

  • It's I used like I don't know when you start learning program.

  • But when I started learning programming like, uh, when angular and stuff that's popular like that, I never got so much stuff like the setup and you had, like these elaborate like scaffolding blue like create react up is like, comparatively like very small people, like, give grief about it like a Web packing stuff.

  • But like, I think it's like, extremely weak compared to what I used to be.

  • So the from the sort of creative coding arts angle of bringing new people in the goal is actually in a lot of projects, like processing.

  • And P five is to have the least amount of set up stuff possible so that basically all you're doing is writing a single line of code and seeing a shape on the screen anyway.

  • Okay.

  • All right.

  • So so do you have?

  • Yeah.

  • So now we have a development server.

  • Yeah, well, you add p five to this.

  • All right, So I already run now in PMS stole p five.

  • So I should just be able to import be five from.

  • And so these important things is that yes.

  • 876 something.

  • You know, Theis next.

  • I remember like, but it does it have to be It will like, does this have to be compiled down into something or it actually like the browser with it?

  • Supports the whatever.

  • Yes, it needs.

  • The support can just read this itself.

  • Good thing good.

  • A good question.

  • I don't know what brought us to support the risk for you import statements yet.

  • Okay, It certainly doesn't support and Padma Jewels, But, uh, I think that Mormon Ambrose's actually can do important right mints natively now, But it's a very good looking at in here.

  • Everything is gets bundled into apthe J.

  • Yeah, yeah, exactly.

  • Yes.

  • Let me just clear this out.

  • And then we get like, Oh, so that's where you put like your HTML because react component is like It's like a thing that's on the page.

  • Yeah, and you could have multiple versions of them so you could potentially have a P five sketch inside of one component.

  • Yes, precisely.

  • So it's like a reasonable So one thing I should warn you about is P five in the way that it's designed for beginners to use.

  • It does all sorts of things that probably a proper Java script developer would really like.

  • Think it's like horrifically bad guys like everything is in the global name space.

  • Yeah, but well, I don't know if that's gonna cause problems inside of components or something, but your is a way to do a piece five names.

  • Face like with instance.

  • Motive.

  • Various things.

  • So we'll see where we get to you.

  • But I think a good goal would be like, Can we just make a p five canvas inside of you?

  • So I guess the click baby title of this stream is gonna be like you just using p five would react like that.

  • Uh, I don't know.

  • Um, just figure out okay?

  • And let me just draw it.

  • Trust.

  • I want to draw something.

  • Okay?

  • It's just like, how would you draw, sir?

  • So nothing is p five is looking for you.

  • Can't just You can't act like you won't be alone.

  • Well, I'm confused already, because this is, like job script, and there's html in here.

  • Think of this as the HTML.

  • You wouldn't put anything.

  • All right?

  • Yeah.

  • You what?

  • You would have a p five looks for when the p five library lows.

  • It looks for a global function called.

  • Okay.

  • What?

  • Wow.

  • Whoa.

  • All right.

  • But that was hard from you.

  • I think I do.

  • There's another way you could do it.

  • I wouldn't even be Oh, my instance.

  • Yeah, all right.

  • I might have.

  • Look, I don't have that I have looked at you.

  • I know.

  • I know it loosely.

  • I have video about it.

  • Yeah, but you could do You probably have to do p five instance mode, I'm guessing, all right.

  • And you create like a new P five object of love.

  • But I feel like being difficult.

  • Can we do that?

  • Because it's it's come like the thing is like, I part of me wants to like No, no, no.

  • Yes, you just just do a global and start using it.

  • But frankly, this is what I would start looking at.

  • What I mean, This this live stream is not, I think, what's perfect about this live stream.

  • What we're doing is this is for an audience to learn about how p five could actually work.

  • You have in the ecosystem of actual Web application.

  • I am curious, though, just to see if the global thing even works.

  • Let's start.

  • Let's start.

  • Let's start with the global going on, Then move.

  • So you need to just write a function called Setup.

  • Yeah, so I doubt that this will actually end up in the global name space.

  • It's definitely a security violation of that.

  • I think you, actually.

  • Okay.

  • So, country.

  • And then what you would say is a create canvas would create the canvas created campus element.

  • There's only, like, five create.

  • No, you just say creativeness.

  • Good.

  • Okay.

  • Uh, and then you give it to arguments like the size of the width and height of your campus.

  • How is that?

  • Where did that come from?

  • Yeah, I don't know.

  • I have a vicious studio, and Pam and Craig react up like our amazing.

  • That's amazing.

  • I didn't like about that.

  • So nice.

  • Eso, like 300 times 300 is actively.

  • And now is there any chance there's a canvas?

  • Great Thomas, It's not defined.

  • So it doesn't It's not?

  • No, because it's not in the global name space.

  • But now that that would work.

  • So, I mean, what is the campus?

  • Actually, you could take p five dot back ground zero, and that will make the background black.

  • So we'd be able to see it right now.

  • It's by default.

  • Transparent.

  • Did say pete dot background and then zero, like zero.

  • The color is our color.

  • All right, so I don't think it's finding set up p five because we could Look, we could inspire if there's a canvas global dot set up people set up something like that.

  • Great.

  • Cameras is not a function.

  • What happens if you don't do p five dot anymore?

  • See?

  • Yeah.

  • All right.

  • This is what it is.

  • Okay.

  • All right.

  • So to do instance, boat, We're gonna now watch a 44 and 1/2 hour video about instance mode.

  • I mean, let me pull this up here myself.

  • Basically, what you want to do is create a function that gets an argument called, like, sketch or something in it.

  • Yeah, You could probably do this.

  • Let me just show you.

  • Yeah, so, I mean, basically, basically, like, let me just show you.

  • I mean, maybe it makes it three to pull this up on your screen.

  • Yeah, but the idea is this is like, people What?

  • You can't see what I'm showing.

  • Let's actually, it's on the Whitney p five wicky.

  • Uh, p five wicky.

  • I just googled.

  • Instance.

  • Mode P five came up.

  • That's it.

  • That's exactly it.

  • So this is what I get.

  • Scroll it up.

  • So it's above us.

  • So this this is what you all know?

  • You can do it.

  • That connects if I have to look this way.

  • This is what, uh, house being called are like Americans.

  • All this is this is what a regular kind of a plane p five sketch that would just be in the global name space that would get loaded automatically.

  • Script.

  • This now is kind of creating a function wrapper that has all the p five stuff in it on.

  • And then you just create a new school.

  • It's up to create a new P five instance.

  • Okay, so this is presumably what we need to do.

  • I'm gonna open this perfect, because Java script developer.

  • Okay, Um okay, so they took Crisis s okay.

  • And this sketch, and then it's gonna create the poor shifted instance.

  • Yes.

  • Eso what we're doing here.

  • This is a function.

  • Yes, on in the function takes the sketch, and then it does.

  • So this is kind of like a setup function.

  • Yes, it's like a I think the term for this is like closure.

  • Well, like, you know, it's just a function on way past the solution too.

  • So, like this because functions in course, because conference in your script are yes, yes, values.

  • So this is like we stayed up and, like, I mean, the thing is, this a P five was made a few years ago now, and it is Everything is written with the S E I.

  • So they would make more sense now if p five were updated for you.

  • Feel ready, class?

  • Yeah, right.

  • Sure it was.

  • Yeah, you could do it.

  • You're getting rid of yourself.

  • Cold e.

  • I have a sticker on my mind machine here, but it says like, semicolon scan.

  • It's a video.

  • That's my whole life is based around like that.

  • Saving.

  • Oh, this freaks out people on my street.

  • So I ended up doing an entire video on, uh why semi colons and Joe skipped are optional.

  • They are fun.

  • All right, we're gonna move on, do some deep breathing over here in meditation, but oh, that's not my colon is like, uh, uh, one of the primary coating train characters just deleted.

  • Cody, Trade sent Michael.

  • That's amazing.

  • Anybody in the chat have a semi colon like icon?

  • Yes.

  • There we go there.

  • Oh, so this fancy thing that fancy think custom emojis with global dot create campus would probably work says, Anyway, we've moved on.

  • Yeah, all those like those.

  • Like your member.

  • Yes.

  • So I have way should talk more about this later, because I'm trying to figure all this out, but I use both patriotic and YouTube members.

  • Oh, yeah, That sounds really yes.

  • It's very works really well, but And so if they have a special icon here, there Jasmine asked what about unifying Js without semi colons?

  • It works Fine.

  • Like yes gonna say that.

  • Um Okay, so wait.

  • We should see if this works.

  • Oh, yeah.

  • This trip.

  • We're doing alright.

  • Identify.

  • Setup has already been playing.

  • Oh, that makes sense.

  • Uh, yes.

  • Oh, yeah.

  • That was our old Yeah.

  • Let's let me comment that out for you with your fancy slashed are All right, way, people sketch.

  • Now, how would you put that?

  • Doesn't do we care.

  • Like, do we need to put that inside the component?

  • Yeah, let's do that.

  • Actually, um, I would Let's actually I mean, this doesn't need to be in a variable.

  • We're using once again the police that we just put it in there.

  • Exactly.

  • And then you can use the arrow.

  • Fun chances.

  • So fun.

  • Yeah, do that There.

  • We go.

  • There we go cleaning this up a little bit on my P five.

  • What?

  • We're gonna call this instance.

  • Drawing like what?

  • It what?

  • It will the term in p five, as you call it a P five sketch.

  • Okay.

  • And in a way, I wonder if it makes more sense for this to be like pee?

  • Yeah.

  • And then, except for that, people are gonna snicker the chat all the time when I say ppp, but I still think it could work.

  • Look at that.

  • Re factoring Cool.

  • Yeah, like that.

  • So it's like that.

  • That's the sketch.

  • And what's interesting about doing it this way is we could have multiple P five sketches on the page.

  • So let's actually do this.

  • And I think we can do it in the constructor here.

  • Well, something like that.

  • We have to say this.

  • That sketch?

  • Yeah, exactly.

  • I don't know.

  • I have this ridiculous down board that plays very sound effects that I forgot to pick up that Can we need to call superbly.

  • There we go.

  • There we go.

  • Now we got no rocket.

  • Now we're rocking.

  • Ok, OK, Yeah.

  • We have a P five sketch back behind me inside of a reactive component.

  • Cool.

  • What do we do that?

  • I don't know.

  • So where is this drawing this like?

  • It's just throwing it in.

  • Like so what?

  • The way that p five works, is it?

  • It actually adds to the documents body a canvas automatically assumed, as you say.

  • In fact, I mean, theory create campus, you would think does that.

  • But I'm pretty sure that even if you took this out, I can use your keyboards.

  • Swedish.

  • The lords are They're still gonna be a canvas there.

  • Okay, so what it actually does, because in theory, you can actually use P five without even calling the creek.

  • Now, if you didn't want that camera's there, you would have to call campus.

  • Okay.

  • Now, why you wouldn't want that is unclear at this moment, because the whole point is drawing to a well liked but create canvas will then basically delete the default campus or resize it.

  • Could I get this to draw like, let's say I have a like a chem element.

  • Yes.

  • I could get this to draw inside of a target.

  • Target, Target target.

  • So So explain to me maybe first.

  • What?

  • You mean without the technical speak.

  • So like, No, that was that text.

  • But, like, do you mean, like, years there subtext.

  • And you're drawing over it?

  • Yeah.

  • No, I mean, if I use this, if I was building a computer, I would probably already have a nap.

  • And, like, have, like, let's say that, you know, whatever.

  • And there was a space inside of the Wayne innovation.

  • Yeah.

  • Then the create track created the law.

  • REAC open would have to have a, like a render targets like a target, like a dead for where, Like, this is where I want you to stuff that process it yet.

  • So you could use this.

  • You could Well, you could use a doc parent and pass it, and I d Is that what you're trying to do?

  • Yeah, that would work.

  • That roar.

  • You might have to have the p five dom library also.

  • Good, but let's try.

  • So in other words, if there was a div with an I d.

  • Yeah, sure.

  • Let's just call this like, um, you can You can You can parent it with yet?

  • Yeah.

  • Uh, now the chat will have to help me with how you get access to these things.

  • These references.

  • I mean, I could just see it, but right now, like if you put this back, I think you put that back.

  • Yeah, and then if you do, you could chain it, or you can put it into a variable.

  • You could do dot parents.

  • And then just as our dignity of fun pick, like, exactly the argument to that function would be I forgot Render target with in a string with the HASHTAG.

  • Okay, so we're, like, pretend Jake quer selector?

  • Yes, That's part of the P $5 library.

  • Okay, let's see if this works.

  • You'll need the I think I think you need the No.

  • Maybe it worked.

  • I think it worked.

  • Yeah, I guess I know why I thought you needed We're going to make it even bigger.

  • Yeah, um, so, like that.

  • That was what you were looking to do?

  • Yeah, I think so.

  • Ah, look, yeah, it seems to be rendering inside of the render, Tori, like I wanted out.

  • Perfect.

  • By the way, you could just use you could do the same thing This has Actually.

  • This canvas is a dom element in the native campus element.

  • It was actually a P five elements, and the native canvas element is inside the dot lt property.

  • So you could also use any other javascript library magic stuff bringing.

  • Yeah.

  • So I think that some people pointing out in react like the correct ways to use refs here instead off.

  • But, uh, we're gonna We're gonna stay here because I don't remember off the top of my head how to use reps.

  • Okay, so I guess we should wait.

  • They're actually linking it to you reps and the dome.

  • Ah, so let's we're looking at the age where I'm gonna go Rex as the dog.

  • Uh, there we go.

  • Blah, blah, blah, blah, blah, blah, blah, blah, blah.

  • I don't know what people write a lot of stuff in the documentation, because I always just scroll down to the code like, Okay, this equals my ref equals great react, ref.

  • And then they do that, and then you kind off.

  • Okay, this gets you The node can actually give the parents like a node.

  • What is it like?

  • Yes, I actually come.

  • So this is how you do it?

  • I think Well, I came with the documentation for the P five Dom library.

  • Just like showed up there.

  • That was insane.

  • Yeah, like it's really cool.

  • I don't know if it's create reactive or what.

  • It's Torto.

  • Somebody probably knows.

  • React, not create rough.

  • Uh, and then we excuse like down this dot my ref dot current.

  • By the way, people are saying it's something you can say, whatever that is this my Okay, so So it's kind of like a place like key object.

  • So render Renda, ref.

  • It's called that.

  • Then that and then we can go.

  • Not here.

  • This is rendered after.

  • Yeah, So we should do this dot ren draft dot currents.

  • I think this is gonna be a little weird.

  • There's a problem.

  • I think it's gonna be fine.

  • See of current on Define this might be Let's let's actually allow this to render This is not super good.

  • But, Peter, I think I have my suspicions that p five doesn't know what this not render after current.

  • Is this that render it?

  • No, no, no.

  • That's not the problem.

  • Because this the grand ref doesn't get that far, is he can't process current of undefined s.

  • Oh, no, no, no, no, no.

  • It's because of this.

  • It's not We need to do so.

  • I think this is gone.

  • I don't know, but Oh, no, no.

  • This is not saying that this is a problem.

  • I think this is this.

  • Basically, this dream is like, how do you take as long as possible to get a P five scheduled?

  • A true, like you could.

  • Also, instead of this we couldn't we use the arrow thing.

  • Magic syntax somehow?

  • Yes, we could, But you can't do that outside of a class.

  • No, I don't.

  • Yes, you can.

  • You know you have to be here, right?

  • No.

  • Oh, yeah.

  • Actually,

all right.

Subtitles and vocabulary

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