Guest: Fun Fun Train with MPJ from Fun Fun Function

all right oh I've so I've just been afraid okay yeah but I in theory that would be better to get that working and I should have you able to do that okay we're gonna start streaming you're probably already streaming right now hello I was gonna say good Friday afternoon is it yeah no because a good Monday morning is your thing oh it's Good Friday but good Friday is like a holiday so it sounds a little weird anyway choo choo I don't have by the way I don't have any like opening things or closing things I was watching captain disillusioned who says like you know so captain captain is Lucia's a YouTube youtuber oh he makes videos about how other people fake videos fake videos yes well he's like a visual effects artist and shows how other people made like a fake trickshot video that's actually anyway he says love with your heart use your head for everything else you say good Monday morning somebody else Oh like gibreel I've never watched a realist videos he's another youtuber he says always feed your curiosity okay wait I should say hello hello everyone hi my name is Dan yes that does not a health hazard I don't mind well that's actually Jesus yeah I would really like to get coding trained Brandon train whistles that's like a thing so we're here for a very special Friday livestream I'm just gonna I've got two laptops going I'm gonna just check nobody is saying anything like the audio is not working the sound is not working people are saying what's this so welcome my name is Dan this is mpj from fun fun function hello if you're not familiar with the Fun Fun Fun Fun Fun in function channel and also there's a you have like sort of two channels is that right yeah exactly so we have right yes kind of it's yours is 600,000 subscribers I fun function it's 180 mm I've been running it for like 3 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 yeah having fun with programming and like accepting that it's horrible everything goes horribly awry all the time dem tips is kind of the same thing we took it over a year ago home from Travis Nielson right running it for many years it was called dev tips for designers initially and it's a lot more front and focused than functional right so it's it's yeah it's basically more tooling and more for people who are just getting into development from other other supply designers and your a based I'm so in case people aren't familiar you are can you just tell a little bit about yourself and your background and where you're based and stuff that you've done yeah so so then apparently I don't have to introduce you know people are saying your audio is love alright so let's let's just it's not muted let me well what I think this is the best place to adjust it so let me first turn my talking 1 2 3 4 5 is that okay wait I don't know I turned I think I turned no way that should be like yourself oh I don't know which was which I turned mine off yeah alright cool so alright let's let's get it up so now I'm talking it's at level 40 if I scream a little then it distort like but this should be fine see what the street says and yeah yes it's it's this is level 40 as 40 okay that sound good to me at what point yeah that is why I that is why I said 40 sorry but you said before you have 40 new ones at level 4 yeah yeah so since like in PJs boys it's coming through dance at Microsoft that's right now that's impossible oh wait Matt sure who does a video editing says can't watch right now it's very important they're at the same audio oh yeah this is probably true no now we're gonna move to 50 yeah so oh no not 50 you're at 40 yeah so I'm gonna move mine to 30 so my mic is now at 30 and we're gonna just let's just count to 10 1 2 3 4 5 6 7 8 9 tantor how is that so counting to 10 how is that everybody we have now we have to wait 30 seconds this is great it's like this is good practice for me because I want to do way more live streaming right yeah I find that this it actually works really well for me I really like the higher energy of the live stream and it's less like the interactivity with people and you're like yeah turn on your mic 6 level yes but the same level of like hearing the thing is like this what's actually going into the computer is one thing all right us aren't being treated separately they're only being treated separately here because I have a very like non-sophisticated said yeah it's actually just going through this is like a left and right channel which I've mixed down tomorrow yeah because our mics are also a different distance yes oh that might actually be the whole thing yeah I have different mics to whatever like too loud soon though but we've are talking yeah it's so people are saying it's good I'm gonna check so I have there's two chats going on here one is the YouTube chat this is a slack channel for patrons sounded good from here right all right so we're gonna trust that this is fine yeah and you know what we're good we'll come on to this another day that's true we'll do this together that's true many times oh yes I think for sure okay so we were back to I asked mej to introduce himself a little bit AHA's background oh yeah that's her so I originally actually from a theatre background okay I sort of me too yeah really yeah I don't know what counts as an actual floor background yeah did but yeah I did a lot of amateur theater like my teenage years and I then went to Terry College yes not in college but High School the thing is nine nine to ninety year nine to twelve in school and then I learned programming and started an e-commerce business ran that for a couple of years tank that then started doing consulting and eventually on ended up at Spotify I worked there for what was it five years oh well and during that time I like procrastinate a lot from working on it spend a lot of time writing Cora posts and that is how I like my how I gained my internet fame which are then translated to Twitter and then eventually somewhere on that start a YouTube channel called fun fun 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 fun it's also dreadful to not have your own boss yeah like I kind of employed a boss in David so he can realize it's the person thing it's like no you have to send the invoice like so out of the corner of my eye I'm like tech checking the there's a lot of like disagreement about this to check here yeah everybody every I think we're gonna be fine yeah so uh try I suppose unless something goes like horribly awry maybe now we can turn the chat from talking about something other than the audio yeah it is a big rap ologies for the echoing any sound quality by the way is completely my fault just to be clear about that yeah so just to give you an idea here like I come into this room and it's like there's a lot of echo in this group and you know why there's a lot of echo I'm gonna show there's a lot of echo like because these soundproofing pads are just lying around on the floor where they're not like doing anything like they should like you have these nice mic put them up okay what if I just like stood over here and held one yeah that would help my tank actually but they should like you should pass them up you know 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 and so we didn't prepare yeah but we were both extremely talkative people well looks like it yeah yeah well yes the intentions were good yeah so the intentions who are actually bad like what our attention was do not prepare all right I was like we discussed like should we prepare know the relation yes way let's just wait that's true it's true huh so I don't 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 to I think probably less than two hours and we'll see we I thought that what would be interesting to try would be for me to teach up the wrong word advised and introduce there's higher p5.js to mpj who has maybe never used it before no never never I briefly looked at processing because that's it that's yeah like there's a lot of people from my audience coming in here right so perhaps we should talk a little bit okay you are yeah okay perfect yes oh great I couldn't have it 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 MIT Media Lab by Casey Reese and 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 environment I've done some before but that's really where I started to get involved in programming and open source and that type of stuff there was a point to what I was saying yeah okay so um so I did 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 there's a film school dance program photography and a place called ITP 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 just love to make an interjection of you how 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 3d printers and things blinking and like when you walk in there's a wood mirror like with a little wooden flips that is controlled by a Kinect so you walk in front of it and it like flips all the little wooden boards to create like a shape of you like a mirror image of yourself important just like all kinds of stuff like that it's such a wonderful and - to walk into you just feel like ah excited about I want to make yeah and if you're by the way if you're looking for that project it's called the wooden mirror and it's by an artist named Danny Rosen who also teaches in ITP and there's lots of videos and things online I'm sure you could find comments that actually amazingly that project was first created I believe in 1999 which is way before processing Arduino what did you use it was just a plain webcam oh so it was a mapping of the brightness of each pixel to the angle of each piece of wood with when when the light is reflecting on it if it turns up it's brighter if it turns down it's darker oh so the effect is much stronger with the Kinect because it's able to do this sort of background removal so I think before the connector usually was like a black curtain or something that would be there so you would be able to see the silhouette okay so yeah so that's how I teach now full time is fast-forward a whole bunch of years later and also work on something called the processing foundation which is actually a u.s. nonprofit charity that maintained a few different open-source platforms for education creative coding and art processing processing dot Pi which is like a Python version of processing and then most recently a project called p5 GS which was created by Lauren McCarthy there's the p5 just web editor that caste Tarek Asian made and so p5 is probably the JavaScript library that I use 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 the sierpinski triangle which is a fractal oh really I can pull it off and then this is the thing I also do which is every 30 but the thing about it's really useful because we know that 30 minutes is passed oh that section for the live stream because we probably that was like 10 minutes beforehand people are saying system print topic please so I'm sorry 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 I know ok so what's interesting to me about this yeah is p5.js is javascript library that's designed not for this scenario in a way because of course it can work in this scenario but it's really more designed for a scenario where somebody totally new to programming yeah enters and maybe somebody who's interested in art and graphics and information whereas I think we're in a situation here we're obviously not new to programming and in fact I've done almost like you have a different set of knowledge and background of Brunt programming than I do cuz I don't really have that professional software development experience yeah so what does it mean for a library that's geared to for beginners for a software developer to create from that angle we're gonna yeah so like I come come into this a little bit from a background where my brother is an artist yeah so he's like a proper one like that he does that full time and I've been thinking about we have been talking about like here a me teaching him programming and do you have some kind of project together and then processing like immediately comes up because it's a it's a language that is very popular among artists and so I've been like going like yeah I should probably do this but I never get around to yeah so this is like the best opportunity to do so and the way like that I've done a couple of these pair programming links 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 coding and the navigator is the person who keeps tab where we where we are going and like the kind of like more overarching aspect of the task and in our particular situation we it have been good that the driver doesn't know crap about the subject and the Navigator is a little bit more knowledgeable but the navigator is not allowed to type anything like it's just the driver that is doing it yeah so that's all that's that's so uh maybe I don't know what the first thing I tried maybe you should try to make a p5 sketch without me telling them anything and see what happens yeah okay so let's yeah that's you like okay p5 Lib let's just do that see what happens thank you we found the website you're on a an interesting page of the website because it's not actually the home page yeah okay likes yes because p5 is a library itself what you found is like the page about the libraries to use it like yeah like you know they're in the right place yeah like you know what that's actually not how I use it so this is interesting so the way that I've always shown people in the way that I use p5 yeah is by not it's a it's purely a client-side library yeah but by not like doing this magic NPM thing I mean I know I do is like magic NPM thing a lot of times but I only ever do them if I'm doing some server-side to to me like this like really project management yeah like I to me like it's a non magic thing yes like script tags and stuff like that's I don't even know how I don't remember how that maybe we should try making your first p5 sketch through module yeah module is stuff let's I mean let's let's try this you know I'm gonna just create an integrated terminal and yes because okay here's the one thing is we're standing in front of that terminal okay and perhaps we should switch our substitute a browser and flip us over okay we can do that that's cuz that is more like they do or what if we switch the browser to this side yeah or what if you do that I do have the capability of doing that but it will take more time yeah okay all right all right and also I don't maybe this is going to be fine later but that is yeah yeah pretty small cool okay all right so the thing is like a question for the audience here because this is something like normally I just when I I'm coding I just tend to use create react app because even if I'm not you know yeah because because it's such a fast way to get an auto reloading environment up and I could use like HTTP - server here which is a great NPM modules but yeah but it doesn't give you auto reducing live server it is Oh a server awesome let's do it so NPM - gee install live server ah yeah install live server perfect I've been looking for this okay okay I haven't been spending I've been thinking about this several times and I everybody always tells me just use the like blah blah blah plug individual studio itself but oh oh this is wrong in all right so yes do that yeah all right you all it's right behind us here so yeah I'm pointing to okay so if I type something here and save this as like index dot HTML and we do that oh yeah and I said does it update that's just typing you the chat by the way yeah how do I get it out though oh you just changed the link in the code yeah but it doesn't update yeah I have to refresh no that's the whole point of life server yeah don't refresh so how should I get it to refresh only do it for like that does it not refresh oh yes it's safe it should refresh on a map and safe does not but how would it like it would have to inject some kind of JavaScript here it for it to work yeah I mean I do it but caps perhaps I have to actually have like HTML or something otherwise it won't know where to inject stuff the chat will probably solve this for us eventually see this this is the message dance still does not know about the live server via scope engine turn off cache in the browser someone is saying all right do that someone a network so this is well it's actually under settings yeah there you go you're good yeah under network no no wonder it's cold disable cache disabled disabled cache they want it all right okay let's do this two hours later but this is why we like to do elapsing we as well know it works it's not works yeah interesting okay so maybe what's the caching but you don't even have the dev tools open no so it probably wasn't it was the HTML so I think it was the HTML thing okay so great step one because now it injects this little job here yeah I needed that yeah I needed a body tag to inject it yes all right cool so p5 you know what and this now now we are gonna do it with the script tags because we no longer have create react that this doesn't happen you have to create react app to use the modules no but you need to something that browse your browser bundle say my god you're like web pack would be the set exactly yeah so like create react app has like I have you got we could be interesting to try it with recreate I react app you know what let's do that so I don't I by the way I know almost nothing about react so this would this could be our next collaboration and I'll be the driver and traveler Maria absolutely I mean I'm not sure I kind of a specifically don't cuz I don't want to have to answer any react quite but no I it would be great to learn about it yeah like so it's pretty good and all right so in solo package it might take essence ah in the chat rightz you need the HTML tag so everybody's again they're giving us the solution 30 seconds later but by the way everyone should check out Oz ray Moses work on hands-free browsing KS in the chat hi honest would love to be blown work is amazing no what's that um he's working on a project called hands-free I I might begin apologies I'm probably getting the name of it wrong yeah but it's using tensorflow Jas and different machine learning and posing at different things too but to help people who cannot use maybe the mouse or keyboard to browse and use their computer through gesture and face and case are you kidding me that is so cool how do you find that oh hey sorry Hannah's free J org alright we'll come back to that way oh cool okay so let's see see the fun fun fun training Adam and then we're gonna open open that folder instead if we can't see it yet all right so I'm gonna pull this crap over this is a mess there this is the one we don't want it so amazing to see how everybody like uses their computer in like a different unique weird ways yeah actually or maybe it's just me who uses my computer a completely nonsensical way and everybody else is like the yeah yeah like everybody has nobody I think it's a kind of a like a fingerprint yeah alright so swords we're gonna have to so many weird problems I think pretty p5k yeah but it's gonna be great fine okay so let's yes let's do this so all of a sudden we have like 18,000 different files yep that's that's JavaScript development Martin jobs gonna and more fun nice ink pad and write because my there's index.html and there's sketched at j/s that's it I mean I I mean that that is clean I'll give you that but and then when I have to get it into an actual app you like it's super annoying like I'd rather just have a napkin start and this is the thing it's like yeah it's a little bit much but I know exactly what it is and they they are really good at keeping it stable that is 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 a half ago and it's kind of still the same thing I don't have to relearn but if today was your first day learning to program maybe this would be too much you think so like I don't know if you're the third it's uh I use like I don't know when you start learning programming but when I started learning programming like when when angular and stuff is popular like so much stuff like the set up and you had like these elaborate like scaffolding blue like Creek react app is like comparatively like very small people like give grief about it like a web pack and stuff but like I think it's like extremely sweet compared to what I used to be yes so the from the sort of creative coding arts angle of bringing new people in but goal is actually in a lot of projects like processing mp5 is to have the least amount of setup stuff yeah so ball so that basically all you're doing is writing a single line of code and seeing a shape on the screen yeah well anyway okay all right let's all go moving so do you have yeah so now we have a development server okay we have you add P five to this all right so I already run now npm install P 5 so I should just be able to import P 5 from and so these import things yeah is that yes eight seven six something like you know yes next I don't remember like but it's it does it you have to be it will like does this have to be compiled down into something or it actually like the browser with if it supports the whatever yes adhesive support can just read this itself good thing good a good question I don't know what browser support there is for your statements yet okay it certainly doesn't support NPM modules right but I think that the more modern browsers actually can do import incitements natively now but it's very looking at in here everything is gets bundled into app dot J yes yeah somehow yeah exactly yes let me just clear this out and then we like get like on so that's where you put like your HTML because a react component is like a yeah is p5 in the way that it's designed for beginners to use it does all sorts of things that probably a proper JavaScript developer would really like think is like horrific ly bad it's like everything is in the global namespace yeah well I don't know if that's gonna cause problems inside of components or something but your is a way to do a p5 means face like with instance mode of various things so we'll see where we get to yeah but I think a good goal would be like can we just make a p5 canvas inside yeah so I guess if the clickbait the title of the stream is gonna be like you using p5 would react like that I don't know just figure out okay and let me just draw it this choice I want to draw something okay it's just like how would you draw a sir so one thing is p5 is looking for you can't just you can't add like you won't be able to well I'm confused already because this is like JavaScript and there's HTML in here yeah but yes they think of this as the HTML okay so you wouldn't all right oh yeah you what you would have a p5 looks for when the p5 library loads it looks for a global function called set up okay what wow whoa all right oh that was hard for me dude there's another way you can do it I wouldn't even know how to do my life instance yeah all right I might have a look I don't have that I have to look that up I know I know it loosely I have a video about it yeah but you could do people you probably have to do p5 instance mode I'm guessing all right you create like a new p5 object and blah blah blah blah but no I feel like being difficult can we do that because it's it's kind of like the thing is like I part of me wants to like no no yes you just just do a global and 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 p5 could actually work yet in the ecosystem of actual web application yeah I am curious though just to see if I doubt that this will actually end up in the global namespace well it's definitely a security violation effect yeah actually okay so function yes and then what you would say is a create canvas you would create the canvas I'm gonna create a canvas element there's something like purified autocrat no you just say create canvas okay and then you give it two arguments like the size of the width and height of your canvas whoa how is that where did that come from yeah I don't know it's a vicious studio and NPM and create reactive like or amazing that's amazing I didn't like wow it's so nice so like at a 310 300 really and now is there any chance there's a canvas great camera it's not defined yeah so it doesn't it's not no because it's not in the global namespace but now that that would work so I know cameras actually do you can type e v dot background zero and that'll make the ground black so we'd be able to see it right now it's by default transparent did you say peanut background and then zero like zero and the color is our Nagin color alright so I don't think it's finding setup p5 because it we could look we could inspire know if there's a canvas global dot setup equal set up something like that crate canvas is not a function what happens if you don't do p v dot anymore alright this is what it is okay alright so to do instance mode we're gonna now watch a four-and-a-half-hour video that I made about it by accent no instance mode I mean you should let me pull this up here myself alright cool basically what you want to do is create a function that gets an argument called like sketch or something in it yeah and you could probably do this in let me just show you yeah so I mean um basically basically like let me just show you I mean maybe it makes sense for you to pull this up on your screen yeah but the idea is this is like a pee what you can't see what I'm showing and let's hang on let's actually do that so it's on the Whitney pp5 wiki a p5 wiki I mean I just googled instance mode p5 and it came up but that's it that's exactly it so this is what I guess scroll it up so it's above us so this this is what now you all know you can do it yeah I can do it except I have to look this way now this is what it helps being the hall are like Americans all it this is this is what a regular kind of plane p5 sketch that would just be in the global namespace that would get loaded automatically 9 script tag yeah this now is kind of writing a function wrapper that has all the p5 stuff in it and then you just create a new sorry I'm just roll this up to create a new p5 instance ok so this is a probably what we need to do I'm just gonna copy this perfect because I'm JavaScript developer okay okay so the crisis s okay and this sketch and then it's gonna create the Porsche for instance yes so what we're doing here this is a function yes and in the function takes the sketch and then it does so this is kind of a like a setup function yes it's like a I think the term for this is like closure well like no it's a function and we pass the duration to so like this so because function seems oh yeah yeah of course because functions in JavaScript are yes yes yes yes so this is like we set up and like I mean the thing is this p5 was made a few years ago now and it is is everything is written with es yeah I've so they would make more sense now if p5 were updated for you to be I'll write a class yeah right sure it was uh yeah you can do it you know I have a snicker on my machine here that it says it's like semicolons cannot say no that's not my whole life is based around the semicolon saving oh this freaks out people on my screen so I haven't ended up doing an entire video on why semicolons and JavaScript are optional and they are fine all right we're gonna do some deep breathing over here in meditation but no that's not semicolon is like one of the primary coding trained characters just deleted the coding traits that I call it that's amazing I love that anybody in the chat have the semicolon like icon yes there we go there oh so this is a fancy thing this is a fancy thing custom emojis with oh I love it with a mobile dot create canvas would probably work certainly I am its anyway we moved on yeah all those like those like your member yes so I have this we should talk for about this later because I'm trying to figure all this out but I use both patreon and YouTube memberships oh yeah that sounds very elegant it's very works really well but and so if they have a special icon here there are you see yeah Chevonne asks what about minifying jeaious without semicolons it works fine like yes gonna say okay so wait we should see if this works oh yeah this room we're doing alright identify setup has already been declared oh that makes sense I'm just oh yeah that was our bold yeah let me just comment that I would with your fancy splash star alright oh my god there we go p5 sketch yeah how would you put that does it do we care like do we need to put that inside the components yeah let's do that actually I would let's actually yeah do that there we go there we go cleaning this up a little bit and my p5 what are we gonna call this instance drawing like what it well the term in p5 is you call it a p5 sketch okay and in a way I wonder if it makes more sense for this to be like P yeah and then except for that people are gonna snicker in the chat all the time when I say PPP ah but I still think it could work look at that refactoring man cool yeah sounds 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 p5 sketches all right on the page so let's actually do this and in the consumer can do it in the constructor here oh well something like that we have to say this job scheduling I don't have my why do I have this ridiculous down bored that plays very sound effects that I forgot to hook up but that's ok ok post we need to call super I believe there we go there we go now we're good no now we're rocking now we're rocking ok ok yeah we have a p5 sketch back behind me inside of a react component cool what do we do that don't know so where is this drawing this like it's just drawing it didn't like so what the way that p5 works is it it actually adds to the documents body a canvas automatically yes and as you say in fact I mean Theory create canvas you would think does that but I'm pretty sure that even if you took this out I don't know I can use your keyboards Swedish people are like there's still gonna be a canvas there oh ok so what it actually does because in theory you can actually use p5 without even calling the crea canvas phone yeah now if you didn't want that canvas there you would have to call no canvas ok now why you wouldn't want that as unclear at this moment because the whole point is drawn to a cam well like but create canvas will then basically delete the default canvas or resize it or whatever could I get this to draw like let's say I have a date like an HTML element yes I could have get this to draw inside of a target target target target socket so so explain to me maybe first what you mean without the technical speaks so like yeah but like do you mean like yours their subtext and your drawing over it yeah no I mean if I use this if I was building a we act composer I would probably already have an app and you like have like let's say that you know whatever and there was a space inside of the yeah we're having animation yeah then the create track would create the the low react component would have to have a like a render target like a target like a div or yeah we're like this is where I want you to get stuff the processing yet up so you could use you this you can well you could use a dot parent and pass it an ID is that what you're trying to do yeah that would work that works you might have to have the p5 Dom library also okay let's try so in other words if there was a div with an ID yeah sure let's just call this like you can you can you can parent it with yeah yeah now the the chat will have to help me with how you get access to these things these references I mean I could just it's right but right now like if you put this back yeah I think you put that back yeah and then if you do you can chain it or you can put it into a variable yeah you can do dot parent and then just as the or not be a fun pic like exactly the argument to that function would be I forgot render target within in as a string with the hash table okay so like pretend jQuery oh yeah it's a query selector yes that's part of the p5 Dom library okay let's see if this works you'll need that I think I think you need the know maybe it worked I think it worked yeah I guess I don't know why I thought you needed to make it this even bigger yeah so I thought that was what you're looking to do yeah I think so look yeah it seems to be rendering inside of the render tall right like I wanted Oh perfect by the way you could just use you do the same thing this is actually this canvas yeah is a Dom element yeah in the native canvas element it's I mean it's actually a p5 element yeah and the native canvas element is inside the dot alt property so you could also use any other JavaScript library magic stuff brilliant yeah so I think that it's some people pointing out in react like the correct ways to use refs here instead all but yeah we're gonna we're gonna stay here okay 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 can you I hope you know reps and Dom so like we're looking at the I'm gonna go Rex as Dom 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 craic react ref and then they do that and then you kind of okay this gets you the node can I actually give the parents like a node what is it like yes I actually can so this is how you do it I think well I came from the documentation for the p5 Dom library just like showed up there that was insane yeah like it's really cool I don't know if it's create react up or what video actually idea yeah somebody probably knows react not create ref and then we just use like down this got my ref current by the way people are saying is something you can say whatever that is this my raft okay so I see and so it's kind of like a place like a key object so render render app it's called that and then that and then we can go dot here list of render F dot yeah so we should do this dot render F dot currents I think this is going to be a little weird this is probably it I think it's gonna be fine for now see of current of undefined this might be let's let's actually move all of this to render this is not super good but P dot Creek I think I'm my suspicious that p5 doesn't know what this not render F dot current is this stop render it no no no that's not the problem because they stock render F dot it doesn't get that far you see you cannot process current of undefined oh yeah so no no no no it's because this is not we need to do so yeah this is gone I don't know but no this is the problem this is this basically this dreamers like how to take as long as possible to get a p5 schedule ready true like you could also instead of this we couldn't we use the arrow thing magic syntax somehow yes we could but I mean you can't do that math out of a class on yes though you can oh no it have to be here right no oh yeah actually we could we can actually use it inside fast but we that it works to do here this would solve it yes and then we do this yes there we go there we go okay yeah for you that are not familiar with arrow functions and the difference between functions arrow function is that in arrow functions has a slightly different behavior radius which makes you makes and bind this to what this was at the time you created the function right I'm pretty sure I learned arrow functions from your video on arrow functions no you didn't because I haven't talked about this but that I do have a video on that arrow functions all right cool okay all right so now I think so so to me what would almost be interesting here I think yeah is I mean we could go number of different ways one way we could go is just like let's make an interesting animation and you'll learn and try more p5 drawing functions yeah how colors and use different shapes but to me what feels unique about this is the fact that it's inside of a react app so what I guess I'm curious is could there be would this be a react app kind of thing to do where you have some other component there's like interface stuff yeah and that interface controls what's in the canvas yeah we've gotta change to the color you start and stop something moving I don't know yeah like probably we would we would do it like for now I think we should do like the interfaces in the same in command in this component you can have in sure absolutely happy okay but then we're talking about like then we have to like start thinking about oh how do we manage them safe and stuff um we're going to redux territory and that's not like I guess what I yes so I guess what's that other than every components but more about making p5 do it p5 react does work I think it would be great if we had some kind of button doing something with p5 okay that would be a in reactor I think that would be a great thing to do okay so perhaps like okay so looking at this thing it we draw we draw a bright background here now we do fill it and we create a rectangle yes so why don't we create a text field that constantly updates a position or director okay and I mean yes gonna like start coding this and see where we go okay great perhaps like I'll take you to a lot of other suggestions in the chat yeah who might think about it interesting interface ideas I will keep an eye on them while you're yeah while you're starting to code so I figure that we just do an input here and I'm gonna do this now ref thing that I just learned or we learned ref dot input ref wouldn't you use react that GUI I don't know how Roo burn wouldn't I um I don't know I don't know what that is yeah well so that GUI people aren't I don't know what react at GUI is but give me as I can you know what that goo that GUI is like a quick prototyping tool to create like an interface to control a bunch of parameters so that would be interesting but there's no to me like I kind of want to make well I guess it's called react uh I want to I want to I'm there's this sort of tension or be it about b5 I'm going to learn about react so anyway let's keep going that's a great suggestion we'll take it under advisement all right so there's a yeah so I'm gonna we don't need this ref I think actually I do we're gonna do this I'm gonna do like on change okay and this are gonna give this like this input changed and when when that is changed I'm gonna update the state of the rack components so that can you explain briefly this concept of state and react because I hear yes all the time and I think I know what it means cuz I I kind of get what the idea of the state is can we switch yeah yes I we all do this well you need a minute because I gonna ignore it all right I've been doing I would want to do this like wall says I need to so first I need to do this setup is so cool and then I guess I need to erase you like do you know yep thank you but now there's one in two will change back and forth alright and I'm going to erase this you can now hear and yeah now I'm like it's so like this it's so amazing then I want to set up one to give you a marker which I should have somewhere this is like this is the kind of preparation that actually is good to do yeah before you start which is like looking for the marker yeah that's that's quality screen material wait I was using a marker this morning well stream do you know where we can find a mark I would be really great O'Hare's full Marcus Oh breath and probably don't work okay well just go through them one by one until we find it more girly okay so okay so so in react you think we'd react is that it's it's a declarative programming framework right we we have the dome okay we have the dome [Laughter] magic fake negative this is the top yeah it's like to whiteboard fingers all right so let's say we have a dog and lit some buttons in the dorm and stuff here's a button and perhaps like this ously the standard reactor sample is that you have a counter right it's like numb and it's sis 5 and say that the number the button is increasing its gonna increase this this number it's going to count up so we press that button that will update the state so it won't the button won't like architectural e it won't go and mess with this number it's going to update something that it's a state here which is like the state is kind of like this abstract representation of the data that the application uses so in this case it might be like count and it has 5 so this will actually always refer to count in the state so this will like refer to this and so button won't update this button will update this so perhaps this is a better way of thinking about is the state global across components or there's a state for each component at stake for each component got it and when you're using Redux they you could kind of like you say like a big tree that is corresponding to the components but it's like in this different ways of madness manageable save and react Redux what's read up yeah actually I'm gonna stop myself like it advanced safe management Wednesday becomes state is problematic but it's simple like the the core idea is that whenever state changes react updates immediately so you don't have to you will always like the nice part about coding in react is that you you won't have to keep tabs on when to update what because everything is always updated you just update the state and whoop everything is always always correct and the way that the the innovation that we react brings us because it's very expensive to use constantly re-render the entire gone all the time and that is why react has this clever diff mechanism that Allah that figures out the minimum minimal change to make to the Dom when updating things so I there's one I think so that makes sense to me there's an interesting side question here which is p5 and out you're aware of this you know how there was the set up and draw function the draw function is actually looping continuously oh behind the scenes that's doing requestanimationframe or it up yeah so is there so this I think will be an interesting thing that we're going to encounter does is there some something we need to worry about in terms of like how the canvas is updated related to how the state updates and blah blah blah like to be honest it's possible that there's absolutely no benefit to using react in this this situation at all right like the probably the only reason why we wanna use react here is to get P Phi into an existing application right in a sensible way at notification use that VM that users react like right so like the Dom definitely like because it probably you doesn't use the Dom and it's in that way like it's constantly does the updating all the time well only for the canvas okay there's other p5 can interact with the Dom outside of the canvas and you can also tell it to stop updating the canvas I must be on camera you can also tell it I this is very weird cuz we're like talking this direction I noticed it's like that's why I was watching you this way cuz which I should probably like we could gonna like fake it pretend we're talking that that's so well you anyway oh you can you can control you can say call no loop which stops the drawers you can call redraw which triggers a redraw there's all sorts of custom stuff we could do yeah so alright so we're back here yeah maybe we could so the idea here is you want to try to move that ready handle whenever alright so I'm gonna let you keep going yeah so we're gonna do this input change thing and if we guess I need to declare that somewhere let's do that input change it to me it feels like maybe there's an issue with having all of the the sketch in the render function but render just happens once no render happens all the time always gonna remake the p5 ski yeah so we really don't want that no let's say we're gonna head like what we're gonna try yeah like what's figured I'll figure it out figure out and because they're there is different life cycles yes and I just did this point so input changed then we want to grab the value from from the valley it's a distal input curve we have not represent that yet so we need to do that input graph equals creating a react or create right there we go and then we go this dot input rare yeah but current I suppose and then how do you get the values now you know that that's just CF I'm just gonna console.log that out because I'm not horrible to see oh yeah we actually have to okay this is gonna be hard there we go now I'm changing this field okay it failed excellent excellent oh this is so tiny also nobody can see it not that anyway necessary no no temporarily no I can I can I can I cannot wait which direction is it oh that yeah mirror okay cannot read properly input ref of undefined on line 12 yeah of course it's because we are referenced referencing this and I forgot to bind it this there this seems like a lot of this is the object model in JavaScript okay no no it works now we're getting input events down here and we're getting the idea behind my back actually alright awesome awesome yeah you should it kind of need a cameraman your streams I got somebody I would like to somebody that watch your shot and then like switch cameras and highlighted stuff for me like perhaps like in a little in my ear okay okay okay so now we get this I should probably now I should theoretically be able to set the location to that so this dot state dot no first of all we need to update the state sketch are actually the state of the so we're gonna instead of using these we're gonna be using nested state why okay so that works now it works now all we need to do is to its to update the state and this should work so I'm gonna get rid of that so this this start state that x equals that and then I'm going to be there stop you have to use a function called set state oh because otherwise you won't be able to detect the different to change and then you you just give it the property in the valve I think this should work now so if I do like whoa what happened I think it's freaking out because it's remaking the whole canvas okay so yeah so we can't do that but we could if that is an in render yeah so perhaps we could just do this complete there is a function in this video in the constructor no because these things don't exist yet but there's a component did mount that happens after the real components are added to the Dom so let's let's try that it's a composite component and dead mount is this it I guess we're at like four hours now we're still nowhere at four o'clock I was just checking we're on it we're only at an hour all right so cool let's do this let's do this and then I go that so what does hmm-hmm it does something is there an error message in the console yeah let's see okay this is the worst place to put the console can i how do I change this there first that's that's probably horrible - yeah it's the longer like we forgot with perhaps uh yeah let's no there's no error message and but like it's like wait I'm thinking about this and when is this unchurched when does this happen component did not component did man happens after the you know what like instead of instead of using this input change I'm gonna try is there's three there's no there is because I think I think that the fact that I'm reverie rendering oh wait somebody's pointing out that the Y value gets missing is that true I'm not sure that I don't think so because we're just not we're not changing a y-value but should still be a hundred yeah if you don't have to reset why here yeah because the thing is when I try to type here it's just nothing is happening I think it's I think that the rerender is just messing up my you know like for simplicity sake I'm gonna like not use a form because reactant forms is like a little bit tricky sometimes so I mean what about like a slider would that be that's the same problem yeah let's just but yes just eat the button add one yeah exactly I didn't leave it a new random I'm actually there's a nice p5 random function be curious to see if there's a way okay I'm gonna go is right clicked I'm gonna create a button I'm gonna create a button that when it's when it's clicked it's gonna move the thingy to the right it's gonna read like I'm do x equals this dot state dot X plus five we're saying you did not set up two way binding correctly I don't know what that means but value an input should be this dot state value oh that's yes that's probably true let's try that actually oh it's hard-coded is 40 yeah yes that's what you works and that's probably true okay let's know this let's say dot X there we go what about you yes oh thank you I mean there's probably a lot of people there's a lot of people yeah there was a lot of people so it's so hard to keep tabs on chapters yeah um how do you do that I don't do that you don't I don't oh no you do this is actually we caught this error much quicker than I would have I was here by myself yeah um wait can you see I'm a little bit lost though screw because we we thought we had a problem that wasn't a problem yeah so this is actually exactly what we had that can go away yeah and then what I want to see is this mobile few thing is making me a little bit crazy all right maybe it doesn't matter nah that's true let's get rid of that there we go um so now that that's oh yeah can i yes there you go that's what I was there we go okay so now what I want to watch is I want I want you to change that number and see if doesn't look like the canvas so the canvas is not reading remade the Dom Bella no still just sitting there and the values being update exactly and that is because what is happening here is that how does this even work no but see here's the thing if you try put in setup right P no loop oh yeah because in P dot no it has to be in the setup function oh okay so no loop yeah oh you can't miss number of the canvas oh it's okay no exactly and with a capital L no no all right I understand pregnancy's is a function all right cool what about that you're young and you understand what all right yeah not good enough date no that's true can we trigger the new well we can we can say redraw oh then we can do that in render so can we do that already how do we get a reference to that oh you would say where can you say this dot sketch redraw so then we can actually make use of the state dipping algorithms of react like that cannot I mean look we have to look at the p5 never do it good processing it to redraw I thought there was a redraw yeah redraw mommy yeah but is it on the sketch it's a global function this does does anybody know this and so I mean I know what I could do I could like do like this super dirty thing and let go this dot redraw function and store it away but I would like something nicer yeah that not work well I have to go back to the instance mode thing yeah like this and then I would cause do this but not work B now that didn't work either can't wait probably redraw find oh it's because I'm doing this this no still not working hold on it's not function perhaps it's we groan so not I mean in the reference it is not the question is what we're using instance mode how do you how would you because it says it but that song oh no hang on I'm doing this too late hang on it's if this start redraw fine because it's not gonna exist on the first render I think oh but then we should be able to do that also if this yeah no and what now it works we should we'll do with if this sketch sketch that we oh that's true so I can't yester dis dot sketch dot we draw but only if this stuff sketch exists yeah oh by the way this apparently exists so in the chat a bunch of you I've mentioned there's a react p5 rapper yeah but I mean I think that this fine to move to that after you have feel wrong with this yesterd like how the model works but I tend to I tend to avoid to worry that I myself is not able to write I mean you should you should use a tool because you don't want to write it not because he can't because otherwise you're so screwed when it's also its last publish was 2 years ago sure yeah not a great sign but this works great like this is fast yeah so nice so but of course with the typical use of p5 you wouldn't actually do this like stop the rendering and you manually tell it to re-render now would let it animate and and yeah change things I don't know what a good next step is here I mean the one hand alright we made a yeah we've got but I you know we haven't really made use of like in a way like I have not introduced p5 to you but you've barely scratched the surface of any of it exactly so can we do something what does 3/5 have Kenny does it have something like physics or something like that that it would be hard to do and so p5 doesn't I mean doesn't have like a native physics stuff built into it yeah but you can do basic stuff easily just with but the main thing that would have now would be to draw I mean the main thing it is is a big set of drawing functions yeah so there's lots of other shapes there's ways of set a color you can algorithmically do whatever you can have a bunch of variables that are changing as things move around yeah I don't know man like I guess we could think I mean so for example like the you know one idea would be like what's you know so like what some of the things that I've done that are like more popular than like the snake game so three to four thousand time you verdict sound yes so what there's a couple ideas one is go and grab an existing sort of more comp let me be interesting to write the flocking example from scratch but we would be here that was like I subscribe for another day yeah no that's like a topic unto itself like that kind of a like so but we could take an existing example and then like build others like so flocking actually what's interesting about the flocking example is that it is a system where agents like flock with each other around a canvas and there are a few different rules that play there's separation alignment and cohesion and interesting things can be revealed as you interact with those different rules so those those the like changing the rules could be something you do with us or react interface II stuff alright and then the people I would just be rendering the results of that yeah but we wouldn't be here but but I but we know I have that as a p5 example okay good all right could be just copy paste the code in oh but then then and then control it well I could've but that I like I kind of like the idea of having something grow yes yes like it's like it seems like a super interesting no but dub this isn't a to canvases interacting would be a useful thing to do because this is not something that you can easily do at all p5 by itself because of the way it's global mode oh it would I mean so we don't have like a great desktop spaced yeah this right we could make this smaller sir yeah but to have two cameras side by side that's without not begging from a single state okay but still that doesn't really teach me that so you can this side-by-side throwing so well we don't when something leaves one canvas it enters the other one okay that's actually pretty good yeah that's a good react p5 math problem all right let's do it we can do that in the next 45 minutes no problem I think we can I think we can I think we can I think we can fail let's do that like a lung like failure is to be expected this is not a tutorial this is not real life not really yeah let's do it I like it I like the first thing we need to do is well one thing is we could get rid of the form the text box only want me go and leave it there for historical reasons I might make use of it but it's basically just duplicate exactly this in another component lets or do you want me to do you want to work on getting this to animate and let's actually animate a lot because I think that we have spent a lot of time as react now yes so my part of the audience is probably a little bit bored and what I'd like to see you some animation okay so you want to just try to guess how you would animate that I'll give you a clue this is no loop is gonna cause you a major problem yeah it's true so let's actually just get rid of the no loop I'm gonna just comment it out for now oh yes and I'm all I'm actually confused because typically you wouldn't you would have the variables that are controlling the location of the rectangle not part of this state yeah we just be this dot X or Y or var X or whatever yeah but I mean we won't we will have access to them down the state okay it's just inside the only point with state winning is yeah that the hole detection of render right state I changed right and you can use it across different well well it's um it's contained in the component but what we're gonna do it to do this it's a container component okay needs to and then they that will occur we're gonna get to it but let's say let's animate this okay so the way this works is that it seems to have a draw function which to me seems like in games like basically des your mom's on every frame yes is that correct yes so perhaps I mean I I could yes I mean I could you have updated update to this if I thinking in react terms I could just gradually update the the exposition and yeah just have it yes redraw all it that the p5 way to do it would actually so some of some game animation frameworks will have a separate like draw function and a separate like update function we're like the math happens in update and draws right especially if you're like in OpenGL where you have like this whole like rendering pipeline thing that becomes more important yeah here you could actually just say like this type state that X plus plus now do you be done I don't yeah sure so yeah yeah okay so is that is that the people that's the p5 way I mean they normally wouldn't have this guy you have a state you just have the X variable sure what I mean okay so that's like do it that way now that might cause us problems later if we have this whole extinct and two different things you know like that needs to be restored yes I have the other thing I have the exact same problem another hit is that like it's not we add it that way yeah I have new cameras again that won't have the problem I'm so happy anyway do you know what I'm gonna do like convert that to the react way and just update it's actually I'm excited so let's see let's see let's see so actually like this is already this is we're not going to need to update the the p5 code at all because it is already mapping that x and y position to the state exactly so all we need to do now is to figure out how to update the state so which we can do and we put my weight which I should get rid of that redraw function thing right is that like yeah let's just clean up more minutes here oh yeah oh that was just crass and let's get rid of this we're no longer using this so I'm going to do a lead a bit or let's just do this somebody is I'll tell you there is a comment from the chat I don't know if this is true canvas and set state is a bad idea because canvas updates much faster than slow and async set state it is possible just don't use says state everywhere Oh interesting so canvas by the way by default is running 60 frames per second yeah the drum and set status yeah which makes sense buddy my mom you know from I'm like a whatever works kind of kind of person yeah but no I think that they are they are absolutely correct I think it depends on what you animate like do you need that update frequency perhaps like if there's a game you probably do yes but in the in the case of in the cactus moving things around and like moving some simple visualization perhaps the set state is just fine but either way like this is more of an example to see you like wafers play around with it and like I just want to get my head around processing let's kind of like this yes yes of course and let's see set timeout function I'm just gonna do something that instead of creating a button I'm gonna I just have some runs after one second and then we're gonna do this we're gonna do a set interval oh you're going to put set interval inside of set timeout pop it off it's not really necessary but I said to and oh these needs to be out of functions otherwise this is kind of it be messed up cool there we go I don't need to do it bad and then we're going to this dot set state this is the crazy it's so bizarre everywhere it's like what are these guys doing whatever we want this is like X plus plus no no I don't that's that timeout set interval this set state and an object I'm having like I'm having satellite I having so much fun though I no I don't think this is a bad thing ah okay so plus one so and you know okay everything failed wait well you need a interval time oh yeah yeah that's true so something like ten but is that the right place for then don't you need another like end parenthesis or something yeah no okay wait wait wait yeah no you need to you need don't you need I don't I feel like you needs curly brackets I need nine do ya know you don't need the curly brackets know what I mean no so I can't no curly well you don't need need them but okay this I thought you only didn't put curly brackets as it was one line it was like in line yeah but these are one line it just it just happens to be like line breaks it yeah because my perfect okay let's actually it's but the initial state ought to be like see over here so that it okay so look at this now okay welcome to react like this we don't even have to think about that I'm gonna do that again like let's turn us okay oh and it started second laters yeah that's axe right now now did you did you sort of like in the back of your mind you know to have it start a second later because there's gonna be some kind of like a loading issue or you just wanted to see it wait a sec yeah I would just want to see it away that's if you commented that it would just sort of melee yeah okay I believe you yeah it's just to believe you I said I kind of first I thought about having like a button that started in lit sins I'm like I'm too lazy to make a button well solar liner says that you killed oh I got my character 200 such a good place something help me are they in the same place on earth yes captain disillusion did not create I'm sorry I don't like it a little bit obsessed with Captain disillusion I probably need to stop talking about captain illusion okay so this is cool yeah so now the idea would be to add a second one and have it enter the other one exactly so what we need to do is to this position of of the box yeah it has to we need to expose that yes through that component so so I did Oh to another it's exposed in that it's in the state yeah I'd like to expose it to another component state exactly so controlling from our parent container yeah state that has two components let's switch to this one again there so that week oh that's it's gonna be off by the way but I'll turn it on all right so so or not technical problem all right so ever have any technical problems like this when another person is of all we have technical problems all right there we go there we go so what we are gonna do where's the thing yes gonna love having a whiteboard so it's fun right so fun also good to stand up like it's just so much energy yes oh can I make it too right we have no I no time for a tirade but I don't know for it you talk to the camera though yeah so so so they're in I read this amazing book that is called spark which talks about the relationship between exercise on the brain and it turns out that the reason why we have brains in the first place is to plan movement so there's actually beings in the deep sea that they have a brain when they are born and then they find a place to root themselves and once they have that they become a plant and then they dislodge the brain because it's just a waste of energy so there's a research of kids that have exercise in school like facade in the morning and they do much better after that on purely intellectual exercises like like math and stuff and it turns out that this is not because you get more blood to the brain or oxygen or anything like that it's because the brain is active doing planning of movements so different activities do are of different impact to the to the brain so for instance like things like racquet sports are better at activating your brain than running for instance because your brain has to do much more complicated movement and is there an aspect of this too that's not just about like if I'm doing some sort of physical activity and like within the next 15 minutes I try to do a mental task I do better but also like this as a growth of the brain overall is like through like child development I would imagine that there is it's we're definitely not territorial yeah yeah but it's like so when you when you're standing around thinking at your computer after a while your brain actually starts shutting down because the brain is going oh I'm not being used it goes into sleep mode so that is why it's so effective here for us to constantly be walking around because it means that we are our brains are active especially when you have to walk around each other alright anyway anyway back to this we're gonna have and this is the page this is our reactor app and the Act app is going to have two components the and inside of these components are like these this game thing like the the boxes and the outer app is going to come these are going to expose the exposition so the outer up here it's not gonna know anything about what what's inside of these things it's not gonna know that they are using processing they're not gonna use anything it's just gonna know that it has an X and this thing it's going to roll the exposition and once the exposition has reached a certain point here it's going to like update start updating the exposition here it's going to do like a coordination between the two cards so that's what you're going to do so but right now we need to extract this thing out so that we have like this little I don't know what we're gonna call them game box or something great all right so let's do this okay I'm gonna create a new class I'm gonna call this like class a game box extends components no not composition the fact that you called the first component app is somewhat is meaningless just a convention yeah it's just there like the default of salt yeah so if you look at I'm gonna show you how it's being rendered so if we jump to index J s okay you can see here like that it imports the app God and then you just react render the app component to inside oh yeah so that's all it does by the way a little aside here it's the p5 web editor that I've been using most recently is built entirely with the reactor I don't know well it's built on top of it's built with react okay a counter will overflow soon what really bothered by the fact that it just keeps going yeah it's like far away then okay so I'm going to only want to win let's get all of this out so we begin with a render function and in the render function we need a render target target it's trying to learn English I liked RJ better tache gonna call it like something Wow lots of scrolling here now sorry and we're gonna call this game a game box and then we're gonna have your end should have a chain statement yeah we need to return this and then we're going to have a constructor and the constructor is gonna have that that's where we're gonna do the render if we didn't do that before but this is proper way of doing everything you react dot is this the this is going to be the individual component with a canvas not the parent execute code exactly so like what I'm trying to do now is create it like this super dumb component that is just basically just rendering like whatever profit class as X so this is no longer gonna like we can actually this component no longer actually needs state they can just use the proper e so a way to do this where we use one p5 sketch that gets duplicated but they each have their own their rendering sort differently or we're gonna actually create a second p5 now I think that it's gonna be the two sketches I mean we'd be probably caught that's a version 7.8 yes okay so I'm gonna do that and then we need to do that steal this entire component didn't mount thing I see and I'm gonna get rid of this set timeout interval thing right and it's gonna do this dot I think it is it this dot prop chat what's wrong it's it's the same thing a state it's but it's the stuff that it's passed upwards like you can think of it as HTML attributes okay but what's passed like they might like color it's gonna be the parent couple guys also is that's not gonna work yet no not this is broken at this point working in a bit too few months to too many steps at this point but the why yes four oh hang on we're gonna use this broth so I'm saying props but I don't know if that's true props oh that's probably true yes actually now not just one person is thanks oh thanks excellent I want your shot they're very fast yes this not props dot X yeah I'm keeping this around for now yes because but um no I think we can actually like comment rate up all this no because the app is gonna be the parents say yeah so I'm gonna lose this here it's fancy ice so I'm gonna do something night and then you put the other component there yeah so it's gonna use game I bow alert line 11 I don't know if that's still relevant but alright to see Gabe a box wow that could have been of worst I've ever Gabe Gabe Gabe is outside my box this stuff render and what is happening here construct now perhaps I'm what is happening here quantum read rights I did what you did make are making in five minutes in angular yes well wow you can try doing that without we're not trying to do something quickly here by now we are exploring it's a thought experiment I know P 5mp jános rehabbed p5 and react come together to save the universe well like that guy destroyed the Lazarus or just waste a couple hours that waste see here oh yeah and also we're missing a few semicolons okay let's see what what if they've been happening here I mean it I do first someone saying call super know what yeah I did and now oh it's working there's too why are there two forums oh wait wait hang on I actually need to pass the yeah yeah let's get rid of this let's get you rid of this one two input boxes and yeah that's true what's that buying thing do we still have input change okay that's better yeah no because I think as we need to also also pass the X here this that state x and y i think this will work oh and that makes it a prop yeah okay whoa no whoa okay we're gone okay guys let's just do this ah there we go oh but that's just if you couldn't have those be could you say x equals this not State on X like / - whoa that's cool map oh god that was extremely risky to do a high-five on stream because it's like 99% of all my high-fives ever failed miserably like it's just like this decline oh this person has never done sports wall all right cool so now we just need to figure out how to do the thing where we hmm so so now we can control this oh do you know what we have an idea yeah well so since they're vertically yeah change it to moving along yeah yeah yeah let's do that that's wait I have an idea that's gonna do this you know like a really ridiculous sort of way so something like this and we need to okay let's get our way we can use I think mod modulo the modulo operator is going to o translate of course oh it's actually an easier way to do this oh no no no I can't [Music] there we go yeah all right I don't I'm gonna put that somewhere here well what has happened why isn't what why that surprised me no wait it's because I'm dividing this by where did it go wait what I'm confused what is why doesn't this well wait this is the why 200 or the X 200 is off the screen oh I pick the hole the window is just to everybody yeah sorry actually 100 Oh might as well add just four oh it doesn't matter I have to say we can change the req mode to send ever all right so now all you need to do is say Y minus 200 in the second one all right I think what are you kidding I don't think like here minus 200 [Laughter] I love it I love it okay okay okay okay and then what you could do is in the p5 sketch when y is greater than 400 you can set it back to - you know - it's a zero or whatever uh hang on then get quite get that what so I don't know if it makes sense to do that in this set probably make sense to do it in this 70 so cheating by the way it's all cheating yes there's no sir the whole point of this is cheating we're creating the illusion of things happening on it can I talk about my absolute favorite thing in whenever I think about like you're doing some kind of hack or something like this doesn't feel elegant this feels like it shouldn't be may like then I have this amazing Twitter quote that is like a computer is a set a CPU is essentially a rock that we are fooled into thinking and I want to oversimplify this we also had to put lightning inside of it to work so this is cinco eliminate corruption do you know about it it's when you have these when you have a lake it's like there's big pockets of carbon dioxide collecting under the legs and this is a normal phenomenon and they sometimes like just bubble up to the surface and that's fine but sometimes they become huge and then a small earthquake let's like yes this launches this enormous pocket of several metric tons of carbon dioxide exactly at the same time as you just got group which has seen somewhat bizarre and horrible an interesting side effect that oxygen levels like around like a several kilometer radius around the lake drops so low that any life-form that is dependent on oxygen died no so you just walking around like this has killed villages and it's a very rare phenomenon but it's like a very very weird type of natural disaster so you're like this just walking around and then just due to random things you just die and I like this this story makes me sorry happy for some reason because it reminds me that the universe owes you absolutely nothing if something works like the fact that we have autocomplete here that is because like there are so many layers of human effort to create like this yeah elegant yeah like the universe does not is not here to please us yes anyway there's no elegance at top of the universe the internet is just built up the duct tape of cobwebs and gum yeah that's my tie right about that alright okay so we're gonna let's let's change it so at least it repeats yeah so they're what you'll need is probably when you change the Y to check when it gets to a certain value to reset it back to zero yeah so I guess they're not you can use modulus for that yeah I'm saying so I always get this wrong I think the operator itself is called module oh yeah I want to get is a is or using a modulus of a specified number congruent by yeah on the modulo operation so have you ever seen this operation 2 % yeah it gives you the remainder of division so if you yeah I know this but I don't understand how it would be applicable so uh so if you said modulo 400 yeah why is this state dot y plus 1 yeah Oh 400 when it gets to 400 when it becomes 401 yeah it will become 1 400 1 modulo 400 is 1 ok 400 2 modulo 400 is okay by the way we're doing a sort of not such a great thing here where we're just hard coding those sort of like limits of the edges yeah those should be in like the state or the it means p5 stores that in a global variable called with oh wait we could we can have we can access that here know what I mean we we could just passes as props actually let's just call like this game box and we're just gonna call it give it like with equals how big are they they were 200 pics 200 and then height 200 so then when you call create canvas you'd want to use those props exactly but they could be different oh my guess is so crazy you know I guess it could be yeah but let's see the bed that's not right and let's see let's see so it's it's you're increasing this dot props props thank you chat I don't have the chat up right now let's go where and this desktop hi people are suggesting making a pong game which we won't do we're finished I think we're like within the wrapping up stage yes yes yes but that would be an X if we went to here for the next you know a couple hours then yes ok so I completely destroyed this by having well we have to offset the X based on that change okay that's of arbitrary ya know what's for simplicity's sake are artists leave it doesn't matter but but listen it's the thing that is the the arrangement of this is not we could eyeball it it's yeah and I get to shift it over probably half the size of my guest but yet oh yeah you've somehow take the right number oh and it probably should be like this I'm not saying do this but it would be some type of function of the width of each canvas yeah but anyway yeah okay so now we now we can add the modulus thing in which you could just do where you're saying this dot state dot y plus one I think all right so how do I do this you have to put that all in parenthesis I believe all right just to apply okay maybe I'm same modulo some would I say modulo or modulus all right so modular and then you know this tower ops dot height or whatever oh hi times two because it's got to get through both of them not height times two yeah I mean there's definitely she's here because oh because you want that it really is the height of one plus the height of the other so but this that's fine this is gonna work I think you need that you should type this because I am no I'm like no idea where we're going we're here but is why don't we get an odd a number here cuz it doesn't know what the height height is this prop stuck high does it know that in component it does it it does so in other words if I were to do this backs it safe yeah luckily it's working yeah so why would this not work it immediately went to okay so hold on let me just type in 400 yeah oh oh no no here then it's rasmussen points out there error there are no props in the up composer okay yeah because we're in the parent component or the parent component so that's the state yeah exactly this dot state dot height yeah but we don't have that I'm it's no no so if you check like where we like these numbers here you need to put them as like properties like Oh put them in the state for now actually oh you mean so they would go and I have actually drive access to this yes but no you don't like but that's my intent oh so yes press I mean put the width and the height oh I say oh oh but I could make I could just do I could make it up call it something else yeah Widow I could just say 200 but this is bad because we have the heart we'd have to we want some sort of globe some variable to tie all these things but well I mean like I actually want it to be the total oh yeah here which is 800 and actually we I mean I don't we're not gonna worry about this but and then because then now I can say this oh I say this they say Delta HR age oh wait oh nope good loops it did but my math is off yes yeah so you can know this oh it's because they're 200 huh yeah I like doubled it twice I'm not exercising enough that my brain is shutting down it's 400 each of these I teach of these is 200 I thought they were each 400 supposed to be pointy over here that's 200 that's 200 the total height is 400 so this is right it bothers me it really bothered two things bothered me about this and I probably shouldn't try to fix ya one is that we're not accounting for the space in between there yeah and I kind of want to yeah the way that I would do that is I would say like oh by the way where did annoys me a little bit that we know that these are now we have state values Vedas but they're hard-coded so can we use the state so this is this dot state dot with ya or W yeah and this is this dot state dot H divided by two because I made it totally yeah or I could have and then now we don't want to move it over anymore if only I had semicolons all right so now this is coming through all right so the one thing that I think I could say is - oh we don't have the we also should probably have the width and height of this rectangle which is 5050 in a variable somewhere yeah but just but before we do that we should say I'm just curious if I say like - like 25 oh wait no I want to account for the pixels in between so it should like did that do it's hard to see oh solanine airplanes out that we're still hard-coded in the first component yeah oh that's yes so that's a counter for it but it's like it's really just a little however many pixels are in there like I just don't want it - shouldn't when it reaches the bottom immediately up here there yeah it should feel like that blank space I'll fix it for you so load on you and then yeah we got the other thing I want to fix whoa no what are they doing Oh / - no yeah sorry and then the other thing so that feels close I mean I feel like it's a little bit I'm like really like a lunatic here it feels like a little bit's a few more pixels okay yeah we should measure that thing up anyway actually now that feels yes but okay then the other thing I want to do is it should in the shouldn't like this is the thing this is gonna be very hard to do when it's when it's go boy when it's getting to the bottom I need to get rid of this module modulo thing because this once it's going into the bottom we should see it like appearing at the top what what I mean okay so I should point over here so in other words right now it's way off because I had those extra pixels so in other words it should orchard fully leave the bottom and then appear right now it's fully what it was doing before I added this another extra thing is this is really in the weeds here and I like obsessed about these things it was leaving the bottom and then immediately appearing back at camera so it should actually start at negative v negative 50 yeah so what its original value the Y value it's over here and it should at least first over there I know cuz now it's entering then it's gonna go there then when it gets to the bottom let's at least make it I'm gonna I'm gonna forget about modulo because while that's kind of a nice elegant solution how would I put I would I guess I would just say what were you saying we're saying oh I have to use some kind of like okay hold on I could just do this right I could say new y equals new y equals y plus y plus 1 yes and then if new Y is greater than it's greater than the properties height thing this stock props that H plus 50 then it equals negative 50 and then Y is new Y what then it what's negative 50 so new y equals negative 50 okay okay can I not like make a new variable there um oh it doesn't dis not staked out why yeah what's that why there oh no why no huh no I think you could do this as a ternary operator yes yes so I please save me from my cell something like this oh this is a plus one minus 800 plus 500 no every operator is definitely what I want is it this I think it's kind of like yes I think it might be the inverse this dot props this no will forget about new why yeah y plus plus y right like what y increments itself 1y and then return the new value but can you a Y plus 1 yes you're setting it equal to y plus 1 yes yeah okay I'm not sure this is a ternary syntax but I'm not sure if like I'm not quite following your logic okay so Y increases by 1 if that value is greater than the end yeah plus 50 oh okay and it then it goes back to negative 50 yeah actually negative 50 otherwise it's just Y possible so it's the inverse inverse yeah but you have an extra yeah there you go y is not defined Y is why not - fine oh yeah exactly this top state the Y yeah and then it's this dot state of Y ah okay didn't get set to negative 50 you know again using profs on that state state that each okay this is super awesome I'm so happy all right I mean this is the kind of a ridiculous way of doing this and it is I mean I sort of but not that we're say that a lot of people would not to call this a quit while we're wave ein snow quickly but like we're still like functional Olympia so because what I really want this to do somebody somebody will do this is well this is slowly exiting you also see it venturing at the top but you know you know yeah oh I'm super happy about this I think that this I feel like I've successfully like gotten a better view about what processing is yeah we should at least add like a color to it or something so that you see that there's some more and then we then I think we can maybe answer one or two questions and wrap up yeah was that a color I don't know what I'm saying sure I just felt like the I I felt that what what ended up happening is that we focused much more unreacted very little on p5 Joey that's sort of a yeah that's fine and we'll have to come back for OC you even knew how to do that today yeah like it's an intuitive API yeah there we go okay all right well I think yeah I don't like this now I like to be honest I think that a lot of the processing tutorials yes all kind of focus of like yeah now like do this and yeah and I'm like yeah but how do I get it into my application right like this is kind of like got me started your that way like following the tutorials yes it's not gonna be together yes alright so I know what I often try to do is take one or two questions that people have questions that you want to ask specifically mpj from fun-fun-fun yeah like if you you can ask me questions next slides yeah like if you I probably asked a lot of questions you're an extreme that they are miss I so please just ask them again ma where can we get the Nordic Jay s 2017-2018 videos I've no idea normally they go up like last year they went up pretty fast but you know what those are oh that's a conference yeah it's a conference that I hosted in September Oh amazing is that happen every year yeah and it's working Sweden you're in Stockholm like it's it's like one of the most well organized conferences it's just amazing yeah and yeah I've been hosting at the last few years and it's been like oh so good awesome we could make him do it like a p5 session there yeah you should I like you should seminar I call proposals can you come to Brazil Jay s conference well yes tell them to invite me uh I'm not very good at traveling so in night and PJ yeah I'm meaning I will be I will be at actually I uh I haven't really like announced this officially not that this is some big thing to announce but I'm gonna be in France for a few days in January and I'm thinking of having like a meet-up it'll be in Paris oh so so that's that's coming stay tuned all announced I've never actually done any kind of in I mean I've gone to things and yet up with people but nothing that was like specifically coding train I'll also mention that I will be at now I'm just talking about myself do I look pointless but I um day-day dot processing org you can still I wonder by the way is there a so processing Community Day is a day of community worldwide January 15th to February 15 thousand New York City one there's a Los Angeles one which is this were not that main one is the wrong way but it's the like I don't know what the right term is but that's the one that I'm going to and then I know there's one in India there's one in lots to say I wonder if there's one in Europe somewhere Lee is there a Stockholm processing community today there's a map somewhere here I think if we scroll down worldwide you will see oh wow so see wait let's see if we can find the one closest to you oh there is one unstuck ok so if you click on that does it give you more information PC Dean stop January 26 2018 organizers yonas and Nordic audio visual artists there you go so you could go to your very own to a prosecuted yeah hopefully I might fear about being stuck on my item so question what made you want to collab I like I was in New York and I guess like figured out that oh - in New York and I think that we talked about doing a collab earlier it seems like a kind of natural fit to be honest we kind of like have the same attitude about around Brown development and how these things are like we were very talkative and like a motive and it's like yes it's like I just wanted to meet you really yeah it was mostly about that I put ditto I would say that for me what I mean I don't know that this was planned this way exactly but for me I'm really enjoying these types of things where somebody maybe that's like it the similar is like spirit and point of view maybe about a kind of fun relaxed live-streaming attitude but yet a kind of different set of knowledge and I think that's super interesting I also I I mean I've been watching like a bunch of your pair of programming things in there while it's fun to do the goofy and against by myself and that's kind of like what I'm doing I think there is there's a lot more that can happen and be talked about and can be revealed when two or more people are trying to like do the same thing together I noticed also like I'm there's a channel called coding garden with CJ NLF CJ is watching but yeah CJ has I think a series called newbie quest yeah something like that or new quest yeah where he tries to help somebody who's new programming figure something out I thought was like a really interesting format so I'm super interested in alternative formats this was so fun I don't see any reason why we couldn't try to do something similar that's just happening remotely yeah I especially like I'm not sure like this is something like this is an amazing sight yeah I'm a little bit concerned about I mean know what's complaining about our sound but I've been like out of the court of my eye I see these going red quite a bit yeah we'll see I mean this works people watched it enjoyed it so there actually wasn't a disaster I do think it'll be interesting I'll talk to Matt Chia who does newbie Tuesday's Kate week - yeah matcha Blanchette who does a lot of video editing for me since I have no skills in that area but we'll discuss it see if it makes sense because I think there's probably like a 30-minute version of this that might be interesting for people yeah we'll see we can maybe make something like that and release it on a Monday yeah all right one will Christian part yes there's one that could be interesting it's been it's been a sabbatical at your school oh yeah but like then it wouldn't do me like was a sabbatical yet it's true like it's like basically make a video and the like yeah actually they could be super great to come back here and you like film some like with like physical computing stuff yes because that's so Mitchell and I love that environment so I guess if I'm like oh I want to come back here and like do something more so I think it feels like a natural fit yes hey anytime you're in New York you know that you are welcome here we could try this again we could try doing something more crude not was a more creative no I'm just different different format but certainly I would also very much like to go to Stockholm yes I think you will you live somewhere different than Stockholm yeah for my tongue I'm gonna be moving back there I didn't mean to just contain Sweden Woodstock no no no it's pretty much it yes it's yeah you should definitely come I will move to Stockholm and then in january/february sh so like we should definitely do something that so let me let's wrap up so first of all if people have questions further questions you can find mpj on twitter at mpj me MP Jamie you can find em PJ's YouTube channel fun fun function or just that appears in the search on youtube so and especially I would say like I mean certainly if you're like a viewer of the coding train and you want to find videos that have more software development practice themed like things I mean there's a ton of content on your channel so it's certainly a big more of a variety than just that yeah but that's actually that's kind of like what I use it for so in terms of like what's the new feature in JavaScript that I don't know about things like that that I feel like are there today to my audience the thing that I would like to push specifically for and Daniels channel is the machine learning material because that is so so so so so pissed so next clip ball for what there's so many different ideas but another thing we could do is teach MGM PJ which is or we just built on top of tension Florida so this is a project that I've talked about ad nauseam on this channel but this is a library that we're doing in collaboration with some folks at Google who are work on the 10th floor yet Jess team to try to meet out with these or go into the library and this actually on like p5 is written in I'll just show like a quick example here this is allow yes yes you are a Jersey a t-shirt a t-shirt a t-shirt that's pretty accurate but um yeah where's the oh there it's there usually it gets coffee cup pretty well but so this is using a anyway I have videos about this and uses a blah blah blah but this would also this is written with a Oh with this sort of like well two-fold mission to both be a place for like sort of p5 beginners but also but also computer keyboard I got it but also it supports a lot of sort of modern JavaScript conventions and some song with NPM and all that sort of stuff so anyway so this would be another subject area table I just love it like I don't fully we'll do more of that and you also uh still are you still streaming on Twitch I think that I should tell people we go look it was a while ago like you're gonna we're gonna play around with the streaming a lot and the coming here like it's gonna be streaming it's going to be a huge part of what fun fun function is yeah and exactly where we will do it it's still undecided like they're all advantages which is advantages with with YouTube YouTube is like earlier it was such a clear thing to pick twitch because I was so much better at it yes but now YouTube is actually they seem to actually be committing to the platform quite a bit so now I'm unfortunately yeah yeah super undecided well for me I mean we can talk more about this and another time and to keep this stream like never-ending but for me it's like if I were to try to use twitch now I already like to moving that over and then having two things will be tricky but it's definitely something to think about alright so thank you thank you I don't have this is the thing this is the other thing that I really want I say this ever an outro I know you don't have one I just have a I click I mean I do have this ridiculous thing okay I can teach you mind that insignia so it's so you can use your stop and then you can translate it to the train so that is it you have just watched an episode of fun fun function [Laughter] Seacrest out that reference notes like it's okay but then I have to click this stop streaming button no but then there's a there's a few more no that's not it no no we're psyched up to me I'd replace that guy in the coding traffic and so that's it you have you just watched an episode of fun fun function that's it you have just watched an episode of the coding tree uh-huh yeah do it I release these every Monday morning Oh 800 GMT I released these at random times during the week with no consistency whatsoever but you will forget that you two soups click subscribe by clicking here or watch another episode right now by clicking here but you will forget that so you should click subscribe so you don't forget or watch another episode that's over somewhere here I am mpj until next Monday morning stay curious I am I always forget ahead pronounce my name Daniel Shipman and you are watching the coding train all aboard all aboard it's like a welcome thing I need a like oh yeah what do you say everybody DD plane no that's a plane what do you say when you get off of a train oh what's embark no this is them baby there's like I know that's getting on it yeah disembark disembark oh yeah that's perfect you're not disembarking from this fan club but please stand clear all I could do the New York City thing which is please stand clear of the closing doors mind the gap

Channel: The Coding Train

Views: 29,257

Keywords: computer science, tutorial, the coding train, coding train, creative coding, live stream, code challenge, creative coding tutorials, fun fun function, funfunfunction, react app, react p5, react p5js, mpj

Id: OvpbTeAYQEU

Length: 122min 5sec (7325 seconds)

Published: Fri Nov 30 2018