Coding Train Live: Shaders and Autoencoders

[Music] do [Music] [Music] so [Music] [Music] do [Music] [Music] do [Music] [Music] test one two i should probably come up with something else to say besides test one two just checking out my new mic setup it's a different lav mic i'm wondering if you can hear me the balance with the audio music that is it's very echoey i do have these sound blankets i have sound foam i just have yet to really put them up here all right muting myself i'm gonna follow the chat and see how my audio was thank you very much [Music] do [Music] do do [Music] [Music] [Music] do [Music] [Music] so [Music] so [Music] do [Music] hello happy monday monday is that a song if not it should be one welcome to the coding train i was hearing static there towards the end playing music and i'm wondering if you hear static with my voice or is it just yeah you hear that static very loud you know we don't really need music i like to have my little sound board with the effects and the tracks and it helps keep me going here in my live streaming thing that i'm doing uh you know i can't believe i'm even here live with you in the fact that like while that music was played really like hooking up wires and putting things together the static is a music only says max all right so we'll worry about that later i can only assume it's something uh with these little cables and i could like unplug them and plug them back in and move things around oh that's going to make some crazy static and like just move this here and take this and go underneath and this is what you uh this is this is why you're here right to watch me move some cables around and unplug and plug things back in oh boy that is some loud static and here we go [Music] the static is gone and uh ruby webb dev yes this is really live i am coming to you live from the hudson valley of new york it is sunny outside gloria is my my dog if i start talking about gloria that's because she's my dog is sitting in the sun and the grass over there i'm in a garage my new setup i think every time i live stream we get it a little bit better so um welcome if this is your first time these live streams tend to be incredibly disorganized some might say kind of useless yet um there are some people who choose to watch them anyway i'm not sure why but in theory if i could ever get my act together i would be programming some interesting illuminating code examples that would inspire you to go off and make your own uh projects to express yourself creatively through code that's the idea here now i have been doing this for quite a long time it so it seems um it's that's what i seem to be talking about often given that it was recently the processing processing the processing's 20th anniversary uh that software the processing dev software is where everything kind of began for me i started to program a couple years before i discovered processing and i was working mostly in macromedia director with the lingo programming language i won't tell that whole story again but it's been a while at all of this time all of this time i have not really ever dabbled in shaders and i had the wonderful incredible uh sorry i'm looking over here uh is it monday there oh oh this is there is it monday in india i would think it is 9 p.m okay now hold on a second i am completely unprepared i have nothing up on my screen uh who's using this it's me um i am going to go to curia oh just talk amongst yourself for a second i really should have been prepared yes i think this is it ah all right actually before i go to tell you about this amazing thing that i got to participate in like two days ago where i tried to code some shaders and i'm gonna bring that here onto the coding train i first have to thank today's sponsor [Music] brilliant do you like learning do you like interactive learning do you like watching me on video talk talk talk talk talk if you don't actually i've got another way for you to learn it's a wonderful website there's an app all sorts of courses in math science there's these daily challenges you can do i love the algorithm fundamentals course i'm working through this course called beautiful geometry and instead of watching somebody describe things to you on brilliant you get to manipulate the stuff and answer questions through interactive animations and all sorts of great stuff i'll come back i'm gonna do i'm gonna continue working through the geometry the beautiful i forget what it's called now something about beautiful geometry uh later about halfway through the stream um but if this interests you you can sign up at brilliant.org codingtrain you can sign up there for free there's a lot that you can get on brilliant for free they also of course have a premium subscription to unlock all of their courses if you go through that link you will receive a 20 off you'll receive 20 off and you also let them know that you found it through me which is you know a nice thing to do if you feel like it but you know hey now on saturday thank you brilliant on saturday are we going to be looking at shader toy talk says taser cake my goal by the way i i i should try to be a little bit more organized in my thinking and just not randomly like look over the chat and go off on a different topic i'm gonna i would like to get a sh this i have a very simple goal wait no let me let me go back i was on a train on a track and i should try not to veer off the track too much on saturday i'm gonna answer that question on saturday let's see if i press this button here i had this amazing experience of visiting a twitch stream called curiously minded with eliza and alethia i hope i said their names correctly either of you are in the chat please say hello i can go here under about and read all about their story here is alefia and eliza and if i go on to stream uh look at this look at this this was me it's still here saturday october 23rd you can't trap can you travel back in time actually if you could do that please let me know i would really like to know about that i do believe that at some point the recording will become available of this live stream um but they stream mostly on saturdays they do this wonderful thing where they have like a season i aspire to this where it like begins and it comes back at a regular time with a guest every week and then it takes a break for a while and comes back again me i'm just like i think i'm gonna make it happen today it's like i wake up in the morning i take my kids to school i frantically try to like clean up and answer some of my emails i'm like yes yes yes i kind of do it today i'm gonna do it today i press some buttons i start to unplug and plug some cables so one of these days i'm gonna get onto a schedule everything's gonna work out it's going to be great ah i can't wait oh my goodness we're all it's going to be wonderful anyway i was a guest on their stream um and um they um pretty much i i think if i'm right exclusively work with shaders and each week you know i think their next guest i think i can say because they announced it is a shader expert if you don't know shar styles as work you absolutely should um but but i was i'm like the shader beginner so i had never i mean i'm almost embarrassed to admit i've never programmed a shader before in my entire life i've helped people with their shader code because why not you're coming to me with a code question i might be able to like understand it and move things around and figure out some syntax stuff i've never actually sat down to understand and learn it on my own so um i would like to take some time today [Music] i would like to take some time today to bring over the code that i worked with on their stream and see if i can get it to run in p5.js i know p5.js has some hooks into shaders i have no idea how to do this like i'm really just going to figure this out during the stream or not figure it out during the stream which will be uh probably less interesting to watch but it's what happens sometimes as we all know when you're programming you can spend an hour not getting anything to work oh and let alone an hour a day a week so much time my advice by the way if that's happened to you just time box it give the tape stop at some i mean i'm not i'm so stubborn and i do this to a false where i can't get myself to stop but if i ever could just get myself to stop and take a break and come back later usually you can figure it out just like that uh so much clapping am i clapping um so does somebody know when the edited video of this live will be online so louis that's such a good question i'm all out of sorts these days i used to have a very specific practice of long messy live streams and certain sections would get edited into uh videos it's not happening so much these days the stream is probably just gonna exist as is but it will have um time codes in it i'm trying to get back to that and i actually have the a new streaming pc this is not that interesting uh if if you'll allow me to press a few buttons for a few minutes i might be able to record to do some editing later uh yeah so um and a methornull says i have a shader question that i think would be perfect for a stream all right i will not be able to answer it but the chat i bet you will i mean little known fact actually largely known fact i'm not really very good at this i just have a lot of energy apparently i think it's because there's a camera and i happen to be a very vain person and i can see myself in this monitor and it gives me energy that's sad it's a sad truth of it all isn't it okay anyway so thank you eliza and alethia uh i hope that um when i again can get my act back together having guests that i can have them on stream to uh talk about shaders a bit uh please check out um their work uh subs i don't know if you do you subscribe subscribe and like that's what you should be doing but um tune in to curiously minded it's wonderful and let's see so that's that's item number one uh then i got to take a break and do a brilliant challenge uh then item number two even though i'm on my third finger i count in very unique ways i mean like really this is really item number zero can you say that if you say number zero it sounds wrong if i say index zero it sounds right right ah programmers and counting um i would really like to i'm teaching sorry in my nyu course that is happening in parallel i am like a gpu parallel teaching trying to make it all work together not not not going so well these days if i'm being perfectly honest i'm trying my best um i am teaching this week about generative machine learning models we're going i'm going to with my course class be using um some pre-trained gans specifically a tool called runway uh which has a lot of it has something called ml labs which lets you in the browser play around with a lot of machine learning models i've used it before i'm going to use it again on streams but um and i could open up actually runway uh um you should really uh check out if you haven't checked in recently because they are doing a lot more with ai enhanced video and in particular one of the things that i'm trying to do let's see if this works uh this is my new whiteboard shot hopefully it looks pretty good one of the things that i've been working with runway with the vast coding train team i don't have my marker is that i draw diagrams often in my videos and then jason heglund who does some animations collaborates on animations with me will take those drawings and enhance the animation and i've been we've been trying to use runway to key out i hope you can still hear me yes key out my body and put the layer of the enhanced animation behind me so there's no green screen here but runway has this ai enhanced i don't know if that's right way to say it but a rotoscoping tool essentially um and so i encourage you to check out run the thing is so i'm using runway with my students but i would like to myself have a little bit of a deeper understanding of how generative models work and be able to have my own examples of them in action even if i'm not producing the kind of results that you know style gan 8 whatever style gand number the world is on these days uh i like to be able to peel back the layers and work with the most basic version of a sort of sophisticated concept and so to me i think that is an auto-encoder of which i have not ever done before i mean i have i have i think i have some like lectures with some slides about auto coders and i kind of like go through them and i like say the bullet points so you're a bit quiet uh people are telling me i'm a little bit quiet this is easily remedied um um so let me see if i can remedy it um but let me finish my thought here which is that so i you know simon was pointing out to me today you really gonna do two topics you barely even get to one so i really got to finish by like 1 p.m my time which is an hour and 40 minutes from now i mean i really should finish about 15 minutes because i have a lot of stuff to deal with and do but i'm committed to this and um so i got to keep going with it um let me see [Music] quilas does videos on shader toy that's cool all right so i'm i'm just want to hear some confirmation in the um control plus yeah yeah so i'm trying to enlarge the font in discord so i can see my uh supporter discord chat better but i i can kind of read it are we combining shaders and auto coders on the stream that's a kind of amazing idea actually but uh no although there is a relationship interestingly between shaders and machine learning algorithms particularly neural network-based ones because both use matrix multiplication and the gpu more on that later perhaps i would like to hear from somebody in the member chat in discord if i should raise the volume of my audio it's an easy thing for me to do but i'm seeing that in the youtube chat which is you know not always the most reliable source of information yeah i appreciate you all though very very much all right let's get to can i do a shader in the web editor i don't even know all right let's let's see if i can get into codepen uh because that's where i was coding the shader oh boy shoot you're gonna have to bear with me as i log into my codepen account [Music] ah okay breaking news [Music] i've got breaking news [Music] breaking news [Music] the uh i was looking at my phone to get my password but i have a message from alethia the replay is still on twitch and will be on youtube later okay thank you for that bit of information um and uh uh louise lessel is in the chat telling me i can use in the p5 web editor hi louise i've seen all these names i recognize which i which is really fun for me maybe a monday is a good day for me to stream i usually don't stream on mondays uh i can't tell like how many people are watching this right now it's about probably about the same uh all right so wait i was trying to log into codepen so uh when i stream i don't have my like password manager kind of like stuff all going because who knows what's gonna pop up so i have to look at it on my uh cellular telephonic device so please like i said talk amongst yourselves while i try to get my code [Music] seriously that's my password [Music] if anybody wants to hack my code it's not going to be too hard um i'm going to change that password later it did not make it one i probably like five years ago at this point i upgraded to using a password manager and just over time anytime i would log into something would create a new random password and apparently never did that for codepen it has a uh not such a secure password okay um now how would i find it was shared with me yesterday i know alithea you're watching you can send me another message how do i find the coach see i don't prepare for this at all in case anyone was wondering if i secretly really do prepare to look like i did and then to say i didn't prepare no you could say i clearly do not prepare because i just thought i'd log into codepen and uh no i don't see the uh the um oh because i had the link from them well then let me switch to uh let me switch to this view here and i think i can find it probably in uh um oh i'm getting breaking news breaking news okay oh yes the pen is being sent to me this is awesome uh yes and everybody should um join let's see if this works uh discord uh that didn't work that button didn't work so somebody who's a mod if you could please post a link it's actually really easy to join discord for coding training it's discord dot gg slash coding train or the codingtrain.com discord put those links up on the screen in magic post production that's never gonna happen i don't know in the future hundreds of years from now when we were all long gone somebody will be watching this video and there'll be some way with their augmented reality helmet that's holding on to their brain to put the stuff that's just going to put the stuff that i'm saying it's going to make it happen so someday that'll happen um okay hold on sent a link okay wait okay i can get it through twitter which you can't see right now so hold on everybody i think i'm logged in to twitter which i am i'm going into my messages i see a uh gif of shaquille o'neal doing this at me you know there's a green screen version of this that i could just oh how come it's not working it's my oh no is my uh why is that not working i mean i don't really care but i was just gonna give you all the green screen version of this okay uh i don't know why my buttons on my stream deck aren't working can i please pay attention shift men okay like focus focus okay i am now okay prepare to be hypnotized wowed and hypnotized i'm going to if my buttons still work over here show you the shader yes okay so this is the shader that i ended up making i mean i say me it was in collaboration i mean i think anything that like looks wonky and weird from the shader is my addition uh to uh eliza and alethia's amazing work so i think what i would like to sort of see is if i can first just copy paste this code and see the same result in p5.js then i will double backwards and try to explain the things that i learned about shaders in a very basic way and i mean um i have dreams of doing one of my more sort of it's not really scripted isn't the right word but sequenced hopefully somewhat coherent edited uh basic video tutorials on shaders i don't i don't know that i'm the right person to do that in terms of i mean i'm certainly not in terms of any expertise but maybe there's some value that i could add of kind of like talking through my journey learning shaders i should also mention i think that you can't talk about a creative coding with shaders without mentioning the book of shaders.com i mean just the book of shaders um by patricio gonzalez vivo and jen low and uh i think oh yeah so this the ripples is the thing that i was planning a future live stream uh that has like a water theme and i was going to try to do ripples which i've done as a coding challenge but try to do that in a shader i also want to do these like i want to do all the things okay but hold on uh i'm at codepen so let me just go to the p5 by the way this is what i did on last live stream i'm just really proud of this it's a slide puzzle should i try to solve it now it's like the choo choo bot uh in p5 so watch back that stream if you want to see me code a slide puzzle let me uh close that out how are we on time 11 30. great noon i turn into a um sponsorship pumpkin and then i'm gonna move on to autocoder so i've got about a half an hour now if i'm going to try to keep on schedule uh thank you again uh curiously minded check that out reference code pen here we are book of shaders okay so let's go to uh the p5 website i'm sure some of you know and could just relay this in the chat um um i'm just looking and uh oh freya has videos on shaders ah oh interesting um so freya holmer they make wonderful wonderful wonderful youtube videos in particular the bezier i made a bezier curve video at the same time mine was not as good but it was in my own way freyjas is totally amazing so and hopefully they both complement each other um but freya i'm now being told has videos on shader so maybe i'll check those out um let's go to um where would i look here um search shader there must be like a p shader or p5 shader oh reference shader okay load shader so my under my understanding by the way is there's multiple kinds of shaders so we see this dot frag whenever i say my understanding that's my caveat of like i don't really know this stuff but i learned it a little bit from eliza and alethia and i i wanted to say that i've been like exploring it more since then but this is literally like you know that stream ended i was doing stuff all weekend and i turned stuff on today um so there's a fragment shaders fragment shaders are a kind of shader well like if you think about that a shader is going to be applied to a piece of geometry like a flat plane in the simplest sense a fragment shader is an operation to do in parallel on all the pixels of that plane and a vertex shader allows you to manipulate the geometry of that plane so i want to just do a fragment shader can i only do a fragment shader in p5 we'll find out now first of all the other thing i want to say is so let's say i want to do a fragment shader can i do create file shiftmen dot frag what are they called here a shader i guess i could just call it shader gradient i'll call it shiffman shiftman. oh it is look at this valid extensions dot frag yes p5 web editor thank you um okay so uh dot frag now the question is if i am now in sketch.js and i want to load a shader so let's say uh shh schiffer chaffer i'm trying to be clever my name i don't know what to call it i don't have any idea let's call it um beginner starter basic basic shader basic shader equals load loadshader shiffman.frag and i probably i assume i have to use webgl oh and it probably makes sense for me to also use preload although i'm sure there's a way that you could load the shader asynchronously so let's put it in preload you're all seeing what i'm doing right so oh why why why okay uh look at this the auto name for this particular sketch is longing scream i'm being told that there's a distracting dot in the middle of the screen i don't particularly see that but somebody let me know if that's something that i need to deal with okay let's just see if i get any error running this okay uh looks like load shader was expecting two arguments so it appears that maybe it requires both a vertex shader and a fragment shader did is that was that part of what we did here html js ah oh um um all right so i need to follow by the way i remember i'm getting like messages from everywhere floping or flowpine does amazing stuff with shaders on twitch also and i saw flo pine in the chat on saturday uh it's much more visible on a sorry that this oh i know you guys can't see this at all apologies apologies i know you all cannot see this um yes there is a vertex shader maybe here too so let's let's let's do this let's make a new file and call it hey um shiffman.vert and so now if uh and this is great i have i have elephant chat here giving me feeding me information oh why do i write shifting.netfin.virg okay um see if i can get this going here sorry everybody i'm i'm trying to figure this out now so if i go back to codepen there is a fragment oh this is the vertex shader so this i didn't notice this this is the vertex shader so this must be sort of like boilerplate vertex shader of like this is just a what what is position though is that like a built-in variable well let's just copy it in and is that somewhere um that i don't see but um let's go to here so let's go [Music] i can't finish the sentence can i autofor this i'm i'm sorry but you're all gonna have to bear with me as i manually write some in so this must be i'm guessing a basic simple vertex shader i'm trying to unpack what this means my understanding the vertex shader has to do with the geometry so this must just mean but what is position it chat is going um so there we go now let's see if i can run this all right no errors that's a good sign uh shader orange blue got it so i i maybe i display the shader in setup yeah you can you display the shader by calling shader i guess it's like mapping it onto so if i go here and do shader do myself in draw do i really need to do this and draw like well we're going to find out basic shader so the idea is uh and let me let me put a line break here it's not going to let me do it but i'll do it manually so the idea is i have two files a vertex shader which i am not going to explore probably today given that i'm going to do this for the next 20 minutes i should really just plan to do shaders the whole time maybe we should put off the auto encoders position is the current vertex built-in variable got it thank you so uh got it okay that makes sense but again one of the things that i'm having a lot of trouble with is my whole world the foundation of my entire world is basically built on top of two nested for loops and with a fragment shader i'm essentially writing the code for one pixel and instead of iterating through all the pixels that code essentially happens like all at once for all the pixels in parallel you know i'm not sure if the metaphor is exactly right there um but there are a lot of coding train topics that could be remade in shaders yeah so um [Music] yeah and what is the fourth dimension in this is also another interesting question if position if this is a 4d vector if position is in xyz what is one is that like the normal or something all right i'll wait for the chat or somebody to tell me ah triangles triangles triangles that make a plane everything is triangle so i'm not really making a plane it's two triangles which make a plane maybe okay so now i guess well let's just see i want to start over but i'm going to let's just copy paste this into here and then if this works then i'll start over okay yikes an error occurred compiling the vertex shader position undeclared identifier this will definitely fix it no precision the fragment shader okay hold on oh i forgot i missed part of the i missed part of the shader it looks like at the top oh my god i missed a lot of the shader got to go up to here uh go to fragment and here uh uv ray definition all right let's see all right what what what do i have missing here okay let's see here was position i know this is tiny font no find me position search i don't know how to use there's another position right there how do i use codepen search uh is it in the javascript somewhere that wouldn't really make any sense 40 is converted to 3d by dividing the xyz component by the last component so that's like a normalization i have to pass position from p5 to glsl so that must be what's happening here let's look at this basic example is that happening in here set uniform no set uniform doesn't appear to be happening here let's say what now okay ooh look at this look at this fancy shader um i'm looking in the chat i don't see anything yet all right so i have to figure this out myself uh back to what i had position is an undeclared identifier um so p5 a simple shader example basic shader examples this is different okay assets basic vert so where with these examples are they in the web editor let's see oh here let's look at this haha whoops louise was in the chat who worked on this project of course with casey at itp i remember this project uh setting up shaders in p5 shader.vert shader.frag okay uh no strokes or shaders borderless let me make this bigger so you all can see it okay here's the example in the editor so this works we know shaders work and what is in the basic vertex shader oh do i need this attribute so i need to have an attribute position and then probably um somewhere in this code is that attribute being set well let's see okay uv redefinition well maybe i made a mistake here uv i might have copy pasted this in a weird way so first of all i would actually really like to just simplify this for a second i can always come back to it so much for me saying i was going to just get this running all right let's see here uv why is that being redefined right let's take a look at this example and let's look at the basic fragment shader yes so the i'm being told through my side channel here of information is that um um in 3js auto um it is get the position is given by 3js and i'm using p5 instead yeah so look at this um i wonder if i'm just not allowed to use uv as my variable name because in this example it's not using uv so if i were to change this to in my fragment shader uh st and i think i would like to go back to oh hello [Music] hello i had multiple lines of code multiple times always something much simpler i actually would just like to use this i'm not going to resize the window right now so let's start with this as like a simpler beginning which i think i might be equipped to explain okay all right no errors hey welcome to coding with me dan shiffman where i spent 45 minutes just getting something to run that renders nothing with no errors cheers okay deep breath everybody deep breath what are we doing the idea of a fragment shader the way that i understand it and hopefully people in the chat will be correcting me um is that i want to look at all of these coordinates these x y coordinates well they can't in this canvas all at once so this little main function is pulling up the uv coordinate which is the x y of the fragment shader divided by the resolution because u v ah the uv has to be normalized between zero and one so x y i i'm assuming is like the literal pixel 100 comma 100 the resolution is 400 comma 400. so uv is 0.25.25 i think that must be what it is so the idea and then um i i have that uv and i'm just going to go over to this one because i think yeah i can just set up well i actually don't even need this i'm going to take out this line of code for a second so this main function and um i think oh yeah the unif the resolution is coming in through uniform so take that out for a second okay we're gonna go slower slower i'm going to comment some things out though like pretend it bothers me i got to take them out all right what i'm going to do here with the most basic simple simple list shader i possibly could is just set a hard-coded color gl frag color equals vect4 so a color is a four-dimensional vector that makes it sound very fancy but it just means there's four numbers a red a green a blue and an alpha and i should put the outer refresh on all right so let's see here load shader let's make this black just so okay so i think i'm still missing like in my my i think i'm still missing something about setting the position because in theory now this should give me a nice um pink color red and blue across all the pixels this is like the code for one pixel but it's applied in parallel to all of them um so i'm just sorry this chat i'm looking over here this will run for every vertex of the geometry and that's what position means yes that's what the vertex shader is for can manipulate the vertices i'm reading this from simon so um so i need to figure out how do i set the position attribute see this is good this is my process and then someday i'll make some tutorials about shadows will appear that i know what i'm talking about you can all refer back to this video to know that i really don't um so how do i get this attribute position so it's in this example so let me look position 4 yeah x y so somehow gl position equals yeah somehow this a position attribute is set somewhere index.html no sketch.js set uniform i don't see it anywhere where is it do i need oh i need to draw some geometry otherwise there's nothing to apply it to maybe that's the issue i mean i still think i have the other issue because the shader is being applied to the geometry that comes next hmm okay what else am i missing i could probably just read the tutorial and it will explain it it's built in oh am i so what am i missing here luis is saying it's built in sorry louise is saying it's built in um so shiffman frag i feel like what's wrong with this shiftman vert so what am i missing index i don't need the sound library let's just play it again sam i will need to draw something that to you cannot change its name and the attribute is read so it's so i'm i'm missing a very important crucial piece here which is that this is built in and the name for attributes have to start there we go i see something amazing okay wait now interestingly this rectangle is drawn so i need to think about i think there's something to do here with the orientation so in other words what just happened i just drew um i created a shader this is my diagram of a shader makes no sense i created a shader and then i drew it a rectangle but the rectangle i drew it at 0 0 oh because uh of course of course so i'm in opengl of webgl mode in p5 which means that 0 0 is in the center and y points up so i suppose i don't know what the proper way to do this i could start to adjust that position in itself in the shader or i could just adjust it in in p5 let's do um let me go back to here let's do the following um i'm going to say rect mode center and then oh but is the shader actually manipulating the position of this rectangle let's take this out for a second right that gives me that rectangle if i take out wrecked mode center oh and it's oh the shader is really manipulating the view of the scene uh i by the way tasercake just made the nicest comment anybody has a compliment anybody has ever made of me which says nice non-reflective whiteboard although maybe that was made in jest with irony because i've been trying really really hard to get the whiteboard to look right without reflections okay so um so again i think the proper thing for me to do here is to manipulate the geometry with the vertex shader and if i go to my cheat sheet here i'm guessing that's what this is doing taking the position multiplying it by two subtracting one which basically uh makes it i don't know what the multiplying by two does but let's let's let's try these bit by bit so if um if i go back to my shader and i say um vec4 position 4 equals this and then we say position 4 minus minus equals 1. can i do that uh minus equals zero comma uh one oh with four one zero zero zero zero yeah okay so i slid it over so let's do plus equals negative one and then y should go plus one oh oh because it's going the wrong way minus one yeah it's down there oh that's why i have to multiply it by two oh it doesn't like that position four okay oh 2.0 i by the way the best thing about shaders ever is this this stop this dots [Music] i can't remember to put the dot with the shaders either um okay hold on so what happens if i just multiply it by 2 and then minus equals there we go ah wait how did multiplying it by two oh yeah all right i'm still confused how this works but it's clearly it's correct now uh the screen coordinates range from negative one to one aha thank you juha he 64. i got it now so um if i come back over here this makes total sense now shaky white board okay this is the world of shaders negative one to one negative one oh no no it would be negative one to positive one right this is along the x-axis this is along the y-axis i don't know why i drew that in kind of a weird way so what i had was a rectangle that is here because i drew it at 0 0 i guess kind of up and to the right so if i subtract one ah subtracting one puts it to everything puts it in the center because maybe its width is like just one and then multiplying it by two expands it out so that's taking the sort of like rectangle from processing some geometry and applying this shader for the vertex shader which manipulates the geometry so that it's centered and larger and then the fragment shader does this like of all the pixels all at once this is what eliza i can't remember i have to find this video eliza explained to me that a shader the way that it operates in parallel is like i could draw like a circle like this one point at a time that would be a for loop or can you see that yes you can or if i had some kind of magic stamp i could just stamp all of those points all at once that's like what a shader does okay now um let me come back over here and read the chat um it's remapping zero to one to negative one to one yes um okay great um uh oh and nicole yes nicole vela is here and says i i remember you from the curiously minded stream who said it's like a sheet of transparency paper so i haven't gotten to that part yet i'm gonna have to come back i'm going to be wrapping up the shaders portion of the stream momentarily uh so but i'm this is i'm just dipping my toe in here well i did i put my foot full foot in on saturday now i'm coming back because i had other people helping me with my foot that sounds very weird go back and erase that but now i'm dipping in my toe um by myself so okay so now the thing is this fragment shader is just setting the color of every pixel now what if i wanted to do a random number random value like i think i could just get some like a random beautiful i don't know whoa what is this this could be a random pseudo okay i should probably you know do this a little bit more thoughtfully welcome to copying pasting code with daniel shiffman um if i were to grab this random function i saw this dot product sine function i don't know what this function frac does i'm gonna have to look that up can i get a this is a vec2 or i give it a vector i have to give it a vector co that's weird why would i do that okay well i just oh because i could give it its uv i don't want to have to give it its uv i just want random oh but i it's a i would have to do a four ah oh my brain does not compute shaders [Laughter] yes that is the way to do random in shaders it's just a super annoying okay i guess i was trying to avoid getting the uv but we need the uv and what do i mean by the uv basically in my little metaphor here of i have this stamp i want each one of the like little spots on the stamp that's rendering this all at once to know where it is where it is in the stamp so right now the little little pink brushes that are in the stance i never got to build a whole physical device here i'm trying to also avoid using the word gun because i think it's like a paint gun or something i'm like um but the stamp um all the little spots they need to know where they are so that they can render different colors at different spots right now they don't know where they are they just all know render pink so the way that i get their color at every spot is by making a vec2 called uv and if i take can i get the position here a position dot xy divided by oh and i got to get the the um so let's see how they do it in theirs i uh you you resolution oh gl frag coordinate oh yeah it's not from the uh it's not the position it's the okay so this is built in gl frag coordinate so in theory i might be able to just use that right because you know i could make up something like what happens if i do just this is that not right uv.x yeah no that's right um is it like too big oh i probably spelled that wrong yes i underscore underscore ah okay so these numbers are probably just take this out for a second right it's all right so i'm getting the x i could do something like you know divide it by 400. oh there see i know what's going on is it 200 though like the full range no oh 800 yeah you know i think that pixels even though this is like 400 by 400 i think there's something going on with my high definition display what i'm trying to show you is that the um and i think this would be well it's fine um let me just do it this way so it looks more clear so by the way in in shaders you can make a four dimensional vector or any vector with one value without having to pass it multiple times so here i'm basically just taking the x position of every x position of every one of these pixels dividing it by the width so it's normalized between 0 and 1. but i don't want to have 800 hard-coded in here so i should be able to get something from the p5 sketch and i apologize for just thank you to louise and casey who i believe wrote this example hopefully i'm right about this that i'm repurposing it what i need to do is get the resolution information from p5 and properties values variables that come from your sort of main code at least are the p5 sketch so i want to make this interactive with the mouse that's kind of a something i could do those come in via something called a uniform so if i create this uniform called u resolution whoops and i put it in this random i can come i put it in here and then in p5 in the p5 sketch itself you can call set uniform so would i do that does that happen in draw happens in draw so in draw i'm going to do this with mouse x before i go basic shader set uniform and i guess because it's a vector i give it an array so width and height so this is me and um can i if i move this over you can still basically see the code but i have more room okay so the idea here is i'm saying hey you shader you've got a variably thingy like thing in you called u resolution set it to a vector with width and height that way if i go back to here i can say the uv is the frag is the xy coordinate divided by the u resolution x y is that right do i say x y there or just u resolution yeah this says dot x y so that makes sense why why do i need that dot x y like i sort of understood this to be like an object that has an x y in it but u resolution is the vector itself but i guess not i guess getting both out as one as one is the x y well anyway let's see if this works okay that worked now once again i've got this weird issue where i think the resolution i'm getting is 400 but because i'm on a high definition a retina display basically like the amount of pixels of the rectangle is actually double so this is a little wonky um thing i think if i just did like this here i believe that's correct i mean i can't be certain but i believe the full white is here and the gray is in the middle i mean i kind of liked how it looked but let's just go back now if i were to change this to the color being set not by the x but by the y then we have it going from bottom to top you could leave it without the x y it's probably just for explicitness so let's see if that's true and what about the um this so not this though so i guess this is just kind of like for clarity uh it looks very like parallel okay x y x oh paulo in the chat amazing so dot x y gives you a vector so the frac hornet could potentially have like you know i could make a vec4 with these four values or something so it's making a vect two out of what is just a vector so i i need a vector out of the frag coordinate so so yeah so this is good i can see that i'm working with evec2 because i say dot x y i should just admit that the auto let's put up a little poll not that i ever follow the pole but um after because i got to take a break i'm putting up a little poll should be in the youtube chat now it should say after the i'm going to take like a five minute break uh might be a little bit longer because i'm going to do this i'm going to continue the um beautiful geometry course on brilliant um and i i'm after i come back i'm just sort of seeing the pull if i should um continue with shaders or sort of getting taking the temperature of the audience here all right let me keep going here by the way i should really work on learning with shaders the processing too all right so i'm getting somewhere now i believe there's a distance function if i'm right so that would just be a float can i get the distance between [Music] can i make a vec 2 that's like center would it be 0 0 and then get a distance or is it length between center and uv and then have the frag color be that distance yeah oh okay 0 0 is the bottom oh because is this my 800 no is it 0.5.5 is that how i've done things and then if i said uh d you know the brightness is one minus the distance oh [Music] there we go okay so now what i'm doing is there's a dis is it dist or distance there's a distance function so i made the center a point considering a point in the center and i am sorry i'm thinking here i'm considering a point in the center and then i'm looking at the distance between every pixel and that point and uh if it's closer and then take it saying one minus that so the distance mass between zero and one uh one minus that will be brightest towards the center so my goal here with all that i have now learned and the um the poll looks pretty there's 117 votes strong winning for continuing with shaders so um that's probably what i'll do i'll have to just take out auto coders from the title um if i go back so i'm going to try to just get the mouse working i'm going to take a like a five to ten minute break and then come back and do a bit more shaders just so everybody's clear on the plan um i what am i doing here so i i think i can do this without referring to the example code now so what i would like to do is basic shader set uniform u mouse and call this say mouse x mouse y so this is me taking the mouse coordinate from p5 and sending it to a variable that i'm going to call you mouse in the shader is it proper to say variable if we're talking about a uniform can i call it a variable um so now if i go into the fragment shader and i add another uniform back to you mouse um and if i take can i just do this can i do you you underscore mouse dot x y that this should be the same thing right so if i take the mouse and divide it by the resolution oh whoa okay so my uh things are reversed here so and this is always the interesting question for me like where should i manipulate this like should i manipulate it in so the x oh weird and can i console log stuff in the shader is there a way for me to do like print that's not going to work right i mean how's it going to possibly do that use program parameter one i don't know okay um so what am i doing here so this makes sense to me that this would be reversed and the scale is off what if i were to just say see this i think i should do this pixel density one let's take out the variable of the high density display there we go so now we can see it's just the y okay so the high density display was hurting my brain but now we can just see the y is reversed so i guess i could do like i could do height minus y and now i've got it right as i move the question i think is interesting is like what is the what is the proper way to handle this should i be flipping it in p5 or should i be flipping it in the shader look how fast that is we should compare this to like like here's the thing no way i could do this for loop with like 800 by 800 pixels like okay oh we gotta we've got to demonstrate this so very very quickly let's make and then i'm gonna take i swear i'm gonna take a break um uh so i don't know why i deleted that um i'm gonna just say um load pixels so i'm doing this uh without shaders now here is the comparison for loop way uh this is my whole world this oh i'm so happy and comfortable oh it all makes sense to me now i can can write the code in the order that i want it to happen and it will happen and then i'm gonna then i'm gonna have an index which is x plus y times width then i'm gonna say pixels index uh oh then i need a distance a distance which is the distance between this x and y and the center which is width divided by no no yeah no the mouse mouse x mouse y and i can say the um then i can basically map it map the distance which goes between zero and i'm just gonna use the side as the i mean this is not exactly right 255 down to zero and then we're going to say oh float back and forth this hard okay and then i'm going to say um pixels index index plus zero equals bright so i have numerous videos going through how the pixel away works works in processing in p5 this should be 255 for no alpha um once we're seeing again a like a vec4 right but i'm setting each of the pixels individually oh and that index has to be multiplied by four um you know for um let me just look pixel array in p5 um yeah so this video from 2016 is a video where i go through how the pixel array works in p5.js probably doing something very similar to this um and i believe if i were to run this uh okay pixel density wait a one again i've got the sort of pixel density okay look even at 400 by 400 look how choppy that is and i should do the maximum distance it would be more probably um the max distance is i don't know if max is still in the chat but this this this this variable max distance max d is dedicated to you max is the distance between zero zero and width comma height let's just say that it's not exactly accurate but let's do the why did that not work oh it's dissed in processing oh you know what i actually want it to be this is so dumb but i want it to look like the the um the sketch so i wonder if i just make it like width times width if that's going to look more like no oh because do i not have the i'm so confused if it's zero it should be really bright x y mouse x mouse y what am i what what's going on here i wanna see it now i'm getting stuck on like a silly thing oh oh this is this looks the same i think i was right square root all right i mean i can just do distance between zero zero i mean this would be the correct this is actually the no no no because it could be in the corner sorry everybody for this like silly digression programming is hard okay so look at this i'm trying to do the same thing with an 800 by 800 canvas without a shader and i lost the chat because i'm looking at this um it should be just with everybody's telling me fine fine fine that would be the same okay it's so quiet all of a sudden okay yes this looks like look look how impossibly slow this is now i'm going to hit stop oh that is the most beautiful thing wow okay never before have i really like has my mind really settled on the wonderful power of shaders because i've always kind of basically said uh in my head or to people if you want to work with pixels in the browser in canvas it's just really really slow to iterate through all the pixels can't really do it effectively but this is a way of doing it now there's a lot more mental overhead here of understanding all of these bits and pieces and how the math works like i'm making a lot of assumptions of you the viewer right now that this idea of manipulating vectors is totally like you know automatic intuitive for you which is no way that it would be this is a nice alignment with my nature of code materials where we look at i look at through those tutorials 2d vectors and how to do vector math like add subtract normalize distance all that stuff but what's interesting about shaders here is in p5 or in processing when working with a p vector or p5 vector object you can't use the plus minus operators with them it doesn't know how to do that with vectors but here in a shader you actually can't so i can multiply a vector by two scaling it or i can subtract the number the value of one from each one of its components um okay so everyone the green screen is not keyed at the edge where where is the green screen not key joe just down over here oh over here it's the desk there's even a little dongle here if i wanted to plug it into something and a train whistle see there's a desk here there's a mug here and i could lower it a little bit does that make everybody feel better i don't like you seeing this secret sound board all right so um the voting is clear here um x nick is giving me an idea multiply the distance by sign angle taking the end so i'm i'm going to do more work i'm going to have some fun with this particular shader um oh no i closed that um and i wonder if i could even um i'm sorry don't talk to me um all right so hold on where am i going all right so i gotta take a short break don't go anywhere though i'm coming back with a lot more about shaders but before i go um i just want to take a minute to thank today's sponsor oh you know where it's not keyed up there what is that oh it's a light there's a light here so i don't know why i guess i could turn it slightly there that's what you're all talking about the right edge yes okay got it everybody knows how how smooth i am at these like sponsored segments i'm so good at them i'm never gonna get fired um i'm here today to thank today's sponsor uh brilliant uh do you like learning do you like interactivity brilliant is uh the place for you all the kinds of topics programming algorithms geometry graphics fractals neural networks science physics all of this stuff is just everywhere on brilliant through a series of amazing courses all with interactivity so it's a little bit small here but this is one of my favorite courses called algorithm fundamentals where you can sort of learn about this like you can see here this is a lesson about a fruit classifying algorithm and you're manipulating sort of code logic pseudo code by through an exercise by moving these blocks around kind of reminiscent of scratch or some of these other block-based programming languages um this is a wonderful um they also have an entire python programming course um one of these days when i have a totally like like a week free nothing else to do i cannot wait to go through this entire python programming course i am going to while that is playing open up the brilliant website on my laptop here and come back over to show you it myself so you can see there are um daily challenges um if i just clicked on uh courses i think scanning through um you can see the you know the huge variety of stuff i mean it's everything that i love um and honestly like when i can get back to doing more coding challenges there's so many excellent ideas of things that i could try to do here and in fact what i have been doing is taking you know obviously like when you're working through these problems there's and we can just go to it was i think beautiful geometry is the one that i'm on so i want to continue this course um i already did this one um okay i did these already i did this one i did this one i did this one okay here we are i have not done this one so um there's lots of ways to solve these problems i have a white board i have my brain i have my audience on youtube to help me understand them but one of the things that i really like to do is turn these problems into a p5.js sketch as a way of solving it now um so interestingly enough um i think there's going to be something just just scanning at this i think there's going to be something pretty different about this problem than some of the previous ones like in one of my previous uh live streams i went through this one to arrive at the answer four-fifths uh in terms of the ratio of um orange to orange to the total area of the circle but here i think just just like off the top of my head there's something pretty i mean i don't maybe i don't want to say too much what i'm gonna do is put up a poll and give you all of these choices so let me put up a poll um oh i got to end this poll first so i'm putting up a poll come on youtube um so uh infinite this is like phone a friend here we have 7 8 is one answer 8 9 is another answer 9 10 is another answer 11 12 is another answer oh no it only lets me have four okay i gotta eliminate one i'm going to eliminate nine tenths i'm pretty confident it's not nine tenths should i eliminate eight ninths that only gives me four options oh youtube giving i might be giving away the answer here by my elimination i also might be wrong but i think i have an idea what the sort of trick is okay so i did the poll go up i don't see it oh there it is so i don't see anyone answering it yet but i'm sure you will soon okay so let's work through this the limit i i would love by the way it'd be so awesome we could make this into a shader but i'm not ready for that i'm not ready for fractal shaders oh um xdja is asking for a link to the um shader sketch so i i will happily take like a quick break i somebody can hopefully just like snapshot this and a mod can copy paste in the chat i will come and do that in a second um let me go back to here okay so i want to start a new sketch and let's read over this algorithm start with a blue square then make two red squares each half the length of the original square arrange them diagonally so this is a problem that should be able to be solved by recursion i'm going to write a function called draw square and when you get an x y and a width and a height i guess i guess we know it's a square so an x y and i'll just use w for width we're going to fill a color maybe i should um i should use like a boolean like is red let's try that so if is oh my god a bird is in here again okay it flew out i'm in a garage with the garage door open and a bird just flew in okay is red phil a rectangle at x y or width and i can actually just use the p5 square function so now in draw and i'm going to put no loop what i would like to do is say draw square 0 0 400 true let's run this sketch okay now i'm sorry that um i'm covering up some of the code so now the idea of recursion is that um the idea of recursion i'm looking at the i'm looking at the voting um which is interesting i think people are thinking the same lines as i did the idea of recursion is this function that drew this large red square can now draw two smaller blue squares inside of itself so i want to call and i'm going to uncheck the auto refresh just because this is going to create an infinite loop with without an exit condition i'm going to say draw a square at x y if i look at this picture it's this square oh blue can i make the first one blue oh no it has to be red because the blue is the one that gets smaller and smaller weird oh no oh i'm so confused yeah no with each no i can do it the any way i want oh it's fine i can handle this the oh i start with a blue square awesome even better if is red else so much easier else um fill uh 0 0 255. so for blue what's wrong here oh yeah and then now draw so let's just make sure this is blue what do i have wrong here oh an extra okay okay great now what i want to do is say draw a square draw the next square at x plus i think there might be a flaw with this but let's just write width divided by 2 the same y and then um with half the width and then not is red so this i'm just saying the next square be the opposite color because true becomes false or false becomes true and i'm going to do this with if i think w is greater than uh let's just say like 20 pixels so i think this is the this is a reasonable exit condition given that we're going to do this keep doing this until the half of the half of the half of the half gets less than 20 and then we're done so let's see what happens if i run this right so this i don't know if i did this correctly but we can see blue square red square blue square red square now i also need to do what the one below which should be at x but y plus w divided by 2. so that's just moving it down same size change there oh okay did i do this right it looks a little different than this oh i only do it if it's if it's red wait two red squares then add four red squares oh i'm so confused what am i missing here i only do i don't do that thing for any square that is blue oh i'm so confused wait how did the oh i started with blue oh no no i'm not doing it over anymore because i started with blue okay hold on this is still going to have that problem but x y w divided by 2 that's the and then x plus w divided by 2. okay this is okay this is helping me see this but i do it only for the blue squares oh so i need to do if i'm only doing it for the blue squares i need to like for example only if w and not is red so i guess i need to draw four blue squares to start alternating the corners for the shading yeah like because then when i do it oh then when i do oh my goodness oh i see so i need to keep track of a count oh this is much harder than i thought this is ash is saying this is the same problem as adding an infinite sum by the way the answer is one i was trying to but this is much harder to program if you draw only one starting blue square and then only paint red squares on top of that one blue square yeah why don't i start with red and then i'm getting some kind of delivery by the way i don't know what that is but i'll just go back and get it i'm still talking about shaders not just the last squares is blue you're adding uh you start with blue then add red then oh yes so i can only add red so i could do this in an object oriented way which is take the square and chop it up into four i think actually what makes sense this is a little bit weird what if i did this i know this is kind of it's weird but what if i then when i started with blue all right started with blue and then what if i did over there and then over here ah there we go no no that's not right that's kind of interesting though this is the same i want to get the same result though with this this is the same result but it's just um i think it's like spaced out differently like the blue is in a different place right isn't this the same it's like the same but i didn't i'm not alternating the way i'm drawing so like these should be um so if i had like a count could i create a count i think i have an idea what if i created a count and then count i think i might be this might be a redundant variable uh count and then i'm going to just say count plus one count plus one count plus one count plus one and then oh and then i'm going to say if if count modulus 2 if it's i want to know if it's odd or even let's just flip is red one more time just for the even ones or maybe just for the odd ones there we go [Music] i did it so uh simon i think said it's the it's the alternating right so oh this is really cool it's the alternating like it's like look at this this is what i was missing um and i'm sure there's a more efficient way to do this and i don't need the boolean and the it's red but okay so red red goes goes top left bottom right then the next time there's a blue circle it goes top right bottom left then the next time there's a blue circle goes the other way around so i just need to count whoops count through and i should say no stroke i would love to draw this with a can i use a generator function to animate this assignment um no what do i want to say no stroke and let's have i can put on auto refresh now because i'm pretty confident i don't have an infinite loop and then where is my if i say w is 50 oh you know really it's nice having the stroke in there um so let's have the stroke but um well what could i do um hold on i have an idea uh i want to just see this iterate so i'm going to i'm going to use count i'm going to use count as my exit condition so i'm going to say if count if count is less than two right if count is less than three there we go and i'm going to put the stroke back because it was actually nice to see that i'll just make stroke weight 0.5 just so it's a little thinner i'm going to take out the no loop and then i'm going to say let iteration equal zero and if count is less than iteration so now we have just the blue square and if i add a mouse pressed and say iteration plus plus okay ready here we go oh i've got probably to run again so now this should do iteration one iteration two iteration three iteration four five six seven eight and i would love to make this much bigger let's pick some like nice slightly nicer colors coding train no there's a coding drain colors website i don't know why it's not coming up what is it cj made it colors coding train cj coding garden i don't know is this gonna work no no no how come i don't have this like coming up automatically in my uh um coming up automatically in my feed let's see uh ah somebody must know where the coding train colors are you can use double is red as a count and then use module to determine if blue or not yes so i'm going to leave that as an exercise to the viewer i want somebody to like feed me the oh when i move my arms there's a high-pitched noise just this arm i think i think i'm having some interference with this lav mic i had this problem before i switched lav mics now i switched back um hopefully it's okay i just want to finish this off with the coding trade colors where is that website okay maybe it's on um it's in the github issues here parts colors no clothes we're about closed color color no is it in this is like so silly that i'm like stuck on this i like how i said i was gonna come back after the break and do more shaders i haven't even taken the break yet uh colors i can't believe that no one in the chat has found this before me um i need a does this get there oh the discord bot i got there just the codingtrain.com colors okay thank god okay blue um is this is our blue and red this is our red this is definitely the most important thing that i'm going to do today is make sure that the colors are branded properly this is our red that's lovely and then i think i could use like maybe the yellow for the stroke um yellow for the stroke and where's that ah stroke okay and let's do um oh i should do well let's just do 800 by 800 and we will now i there was a question here i was oh okay wait uh with okay here we go everybody oh it's so lovely so there we go we can see this beautiful fractal sketch nicole says i feel ignored maybe you've been saying all these wonderful things in the chat and i've totally missed them i'm sorry can you invert the red and the blue i absolutely could if i could figure out how to zoom back out i think that's a nice idea um oh my goodness i and we're gonna run this again inverting the two okay so um wonderfully beautiful uh little exploration here now now that i have made this pattern one could i make this with shaders and then oh you know would be cool it's like zoom into it and then have it like infinitely repeating someday someday uh now oops now let's return to the question so the the the look to the thing to me here is this looks unlike the previous questions this looks much more like an infinite series where the that size of the blue in this case it's not inverted the blue square is approaching zero so uh the the um essentially the it's the same as like an infinite series what was it that's like one plus one half plus like this is one [Music] plus one half plus one quarter something like that right plus one eighth it's going to go to infinity in which case the area should be 1. what is the infinite series though that this maps to because you can see you can see this here is like well this is 0 i see zero plus one half plus um one half plus this is this is one quarter of one quarter but this is one half of one quarter which would be one eighth but another one eighth is one fourth so i think it is one plus one-fourth plus one-eighth plus one-sixteenth is that the infinite series making that with shaders is giving me a nightmare says nicole yes i'm gonna have nightmares about this tonight anyway i'm gonna hit submit we got it correct let's look at the explanation which is always super helpful oh oh look at this the pattern first puts two squares in the upper left so it's showing that's the same as this one which is what i coded originally and one-half one-fourth one-eighths with 16th and the technical term here is that the limit converges to zero as this sequence goes to infinity amazing so this is what again this is what i love about working with brilliant um it has these amazing courses with one beautiful problems in math science physics computer science neural networks etc and you can explore them on your own you can discover your own coding challenges you can learn new concepts through interactive lessons um sign up for free today i'm going to take just like a literally like a one or two minute break what do you want to do and then return back to shaders if you have nothing to do in those 60 seconds sign up for free there brilliant.org coding train if you want to unlock all of the premium content all of their courses um if you do that through that link the first 200 people to do so will get a 20 um discount off it's also a great gift so it's giving seasons not yet but coming up soon if you already have it you can gift it to somebody else a subscription and here oh you are posting the link to the coding train color website but your messages didn't get through okay so i'm just going to take a um try to take the shortest break possible so i can come back and do a little bit more on shaders so don't go anywhere but i'm not going to be here for that much longer maybe 15 20 minutes i want to get a little further with the shader think about what you would like me to do with the shaders um post that post your ideas in the chat i'll be peering through it i also have to go you just have to take i need a break everybody needs a break you need a break you should get up and stretch i'm standing so i don't need to get up and stretch because this is all stretching for me but i will be back in just a minute or two [Music] don't have a button for the intermission animation so i got to just manually click it over here there we go [Music] [Music] so [Music] so [Music] [Music] [Music] [Music] [Music] do [Music] all right i have returned um i would love to uh hear yeah mark boots everybody's posting me the link to the um the um uh thank you brilliant uh for the sponsorship um mark boots is posting um the link to the uh color palette and uh probably nicole if you're posting links into the youtube chat youtube doesn't let you post the link unless you've got like certain privileges which i would be happy to add for you potentially but um yeah actually speaking of which i'm pretty sure that we're things are very much in flux for me right now and i know that i'm always saying that but i'm looking to expand um um the moderation team so folks who and some of these are volunteer positions um although i'm trying to figure out how to do this more equitable equitably um but um expand the discord and youtube moderation um team and um so if that's something that interests you feel free to reach out join the discord i don't think this button's gonna work no it doesn't um codingtrain.comcodingtrain.com discord okay um yeah so lost search resourcer is saying if posting urls is an issue in the chat that might be why links to the discord button don't work no because i'm supposed to be able to post links to the chat me i have all the power i am the one the only me with the admin thing in the youtube gloria i know gloria gloria's wagging her tail over there running in circles she's very happy being up here in the country but she's like hello you said you're only i mean i don't know if she really she's not really talking she's a dog but if she were to speak she'd say hello you said you're gonna stream for two hours i would like some lunch i would like you to take me for a walk also you have a lot of emails to answer i saw some names of some of my nyu students in the chat i've got lots of work responsibilities to do you know this is all kind of the same big larger project that i'm doing it's all the same universe processing foundation coding train nyu but i do have to get some out of that stuff um great nicole definitely be in touch nicole um and all right so i do want to have a little bit more time today i'm trying to limit myself to two hour streams um you know again a whole different world is coming up from 20 20 20 20 22 20 20 20 20 20 20 22 i can't say it 20 22. um okay so let's this this was a lot of fun and i would like to oh so oh you don't see what i'm seeing good perfect you know what i'm going to do just give me a moment here it's going to take me a minute i'm opening up the discord to share with you the links of things that i'm working on what's funny is i've got some old like it's summer is over and i have these um what do you call it floaties basically like little round tube things that are blown up for my kids to go swimming and i have them here in the garage and i was deflating them so they're deflated and sitting on the glorious over there like scratching i'm trying to make it into a bed for herself i really need a dog cam i'm gonna have to get that set up at some point so right now i just have to like discard describe gloria's activities to you all what was i doing discord yes just bear with me come on discord where are you there you are coding train uh links special fancy secret command okay so i am now about to show you the coding train discord which is here oh it's so large it's larger in charge uh last time i bothered to post anything here was when i made the processing happy birthday cake but um this channel here is a channel where i will post links to things that i'm doing in the live stream if i remember this scheduling channel is if you choose if you're in the discord and you sign up for the notifications role it's very hard to see this i think it's just uh the command is we have a new new bot uh which is another whole other topic i need to i think if maybe it's still the old command but anyway somebody will help you the most important thing is when you join the discord uh read the readme react with an emoji it will unlock all the channels for you um and then you can go here into uh and and and it's a wonderful community there's so many discords you know join the p5 one i don't know if there's a curiously minded one but uh come and spend some time in the coding train one if you desire i would like to we're hoping to do some more additional content and workshops so like um you know you know not to put anyone on the spot but like if any of the viewers like uh nicole wants to come in and do like a workshop on shaders in the discord i don't know you potentially could you know not making any promises here but i'm trying to but that's that's the thing um okay but ah i was just trying to post the links to the code i'm working on so first this is this infinite i'll just call this infinite area so if you want to play around with that infinite area sketch there it is uh if you want to play around with my um first shader sketch is it holly sunscreen or longing stream wasn't it longing stream yeah yeah i don't know what holly oh that was the um the nested loop one um so here is a shader sketch and i'm going to actually call this i'll just call this shader1 which i should come up with a better name i'm going to duplicate it and shader2 so whatever i do now will be in will be in this particular sketch so you can get in the discord not infinite area the area is one yes an infinite series i trying my best you know it definitely happens to me there's like a certain point in the stream where my brain starts to melt i mean in all truth it's probably about 30 seconds in if i'm being honest i'm i mean i i really get it like eliza and alethia you've got the right idea co-hosts co-hosts i should probably figure that out someday but it's just not my thing right now uh so i don't want to subject anyone to my insanity either so um but i'm starting to fade so let's see if we can get a little further with the shader code i had some ideas of things that i would try to do let me just review where i am so in case you're just tuning in um i am going to talk you through what i have done so far so what is a shader i'm working up to answering that question right now i am just dipping my toe in getting my feet wet to extend that metaphor into my shader of water ripples which is coming that's what i want to program very soon i want to do some like cool water wave shadery stuff i am loading both a vertex shader and a fragment shader the vertex shader is for handling the geometry of something that i am rendering into my scene so p5 is controlling the scene it's and i'm going to switch this back to 400 by just so we can fit more onto the screen right now but the scene is in p5 there is a rectangle that i am applying the shader to the vertex shader affects the geometry the position of the rectangle itself and its orientation the fragment shader i want to say manipulates the texture the pixels of the geometry is that accurate to say that's the way that i understand it right now i am not doing anything but creating a boilerplate um a boilerplate vertex shader meaning the um this is like sort of a global attribute variable set by p5 to explain to keep track of the position of the rectangle that i'm drawing so in order to convert this sort of rectangle to set its position in size to fill the entire canvas i need to double its size because by default it's half and the range is negative one to one and it's at zero zero so i and so it's its length is one i need it to be two and i need to slide over i think that i could probably change this to say pos four equals 2.0 times positive minus 1.0 so i think this might be a nicer way to explain it and it's the same yeah so this is um and i forget why it's a 4 a vect4 right it's an xyz but i guess maybe it's is it more like it's like um because i'm in 3d so we have a 4d vector because it's like a matrix thing i've covered this in previous videos c for for for a recording when i was hopefully thinking straight um 3d projection uh coding train this is one of my favorite videos to make um i guess i can just open it up here but because this uh i want to just like turn off welcome to a this is a video i made where i created this 3d cube um but and right now you can see it's a p3d sketch but by the end of this coding challenge i was not using any uh this is all being rendered in p2d but i was doing the actual matrix multiplication math to create the 3d perspective so this was like a thing that i did a while ago because i didn't really understand how it worked and i tried to turn it into a video it led to me doing this like 4d shape projected into 3d which is the hypercube so i encourage you to check all that stuff out um but uh i wonder if that's something that's going along going here homogeneous coordinates is what people are saying uh all right there's something else going on in the chat in thailand okay so then the fragment shader gets the x y coordinate from my p5 space essentially normalize it normalizes it oh actually no yeah normalizes it according to the resolution of that space i also want to do the same for the mouse then i'm looking at every essentially pixel's distance between and this this would make more sense for me to call this mouse i'm looking at every pixel's distance between the mouse and itself and if it's closer to the mouse it's brighter if it is uh further from the mouse it's darker so that's what i got and again my um the sort of way i'm thinking about this is this fragment shader is like the code for an individual pixel and it runs on all the pixels all at once in parallel which is how it's able to you know with the graphics hardware of this you know laptop how it's able to run super fast uh was that an ex explanation of um shaders that actually um makes sense and if someone accurate i would love to know i've got a lot of notifications on my phone rule number one of streaming don't look at the notifications on your phone while you're streaming first of all it's rude it's what i tell my children no phones at the table do we have to break those rules sometimes there's only so much we can do um but no phones at the table the streaming table which is this i really love this desk by the way okay so i don't have a lot of time because i'm overtime but i want to see this animate i think that would be something great to do next and a way that i could do that is with frame count i believe so i could set up and in uh when i was doing this when i was learning from aletheia and eliza on saturday the variable they used was time but frame count time i mean i could send it millies for time but i'm gonna frame count is a built-in variable in p5 so i'm going to make another uniform i'm going to call it u let's call it u time i know i said i wasn't going to do that and i think i can assume i can just give it just frame count so u time is frame count so the shader should as it's operating on the pixel so this is the thing i'm really confused about there's no there's a draw loop here so the draw loop is giving it um a new and uh suic that's very kind of you oh nicole said it was a great description of the shader oh it makes me so happy again the first the next thing anybody said to me which i think might have been an ironic statement i'm not sure was nice anti-reflective whiteboard the main issue with my whiteboard and i know that i'm just like completely changing the subject every two seconds is i put this together myself i am really bad at putting together furniture my wife is really good at putting together furniture and i put together this like a bed and it must have taken me like eight hours when it would take a normal person hour i had to like undo so many screws i did put this together myself it seems a little wobbly this is on wheels but i have the wheels locked i don't know somebody's i need i need to figure out the optimal whiteboard solution for myself i will pay good money for a nice new whiteboard that is anti-reflective fills this space and doesn't wobble i'm taking your recommendations but so that was the first nicest thing sony ever said to me nicole saying oh nicole nicole said that was a good explanation she had to pass millie's into your shader as a uniform i know but i don't want to okay so i bet you that's better for a variety of reasons but i kind of think that right now mentally i'm going to understand the draw loop as frame count more easily so let me try it that way your comment is taken your feedback is ingested in my ear it's not going out the other ear it's staying inside my head but i'm gonna have to just file it in the back for later let's try it with frame count so uh so maybe the what's offending um you know i could call this frames let's call it u-frames that way we don't have to be offended not saying you were offended but i can be more accurate about what it is oh and i really want to get the random thing going in here uniform back to you frames so my idea here is that what if i were to just add u frames to the brightness now immediately it should just go totally to white and i'm going to turn on the auto refresh and run it again what did i do wrong oh because no oh it's a vector not a vector uniform float so i got to be careful this is a float not a vector okay so you immediately went to white because the brightest color is one and the frame count is instantly so i think what i've seen people do is use like a sine wave would be an effective thing to do i kind of want to just see that i wanted to use modulus i could just divide it by i do want to have this be sort of a number well let's try just just because i try it one way doesn't mean i can't try it another way later so i'm going to just try dividing it i'm going to make a variable called offset equals u frames divided by um a thousand and i always forget that this dot there's no this dot it's just the dot and then let's make this offset so it's getting you can see it's getting brighter and brighter over time that circle is expanding so now what i would like to do is say bright equals modulus i think bright and 1.0 so you can see here it's going to cycle back down to zero but why why does it not come back up again oh it is oh it's just super slow okay so this is what i was trying to do it's like cycling back down to zero it's kind of interesting i mean i don't really know what i'm doing here but um so i kind of like this i think this could also be now i could think of this as like right zero one minus bright so i could kind of have different colors oh one point why why why why can't why can't it just know when i type one i mean it to be a float uh oh vec four uh one so here's red and blue again i mean this is kind of interesting now but i wanted to like have this be i want it to be a little bit more logical about what i'm doing here like if i if i make this two right it can it's still going to cycle back but later and if i make this 10 super but i wanted to see multiple cycles yeah this is what i was thinking oh no whoa that's sorry for the flashing uh no no no no one one is what i want 1.0 well let's try so this is interesting this is not doing exactly what i was kind of like looking to do i guess i could use that like clamp or something radar ping but different colors uh why does colors accept ins it's so strange um okay so here's what i want to see now let's try adding a sine of this so i'm basically turning this into [Music] um and then i think i let's take out the modulus now it should yeah there we go so this is just gonna pulse so what if i wanted it to have multiple layers so based off of the distance oh what if i did a modulus of the distance without the offset so for example if i did a modulus of the distance yeah that's what i was this is what i was hoping to sort of see um but uh so if i did and then if i did two times two points so this is i'm sorry i'm lost in my own head right now not explaining anything but i wanted to see this this is what i was hoping to do i wanted to try to use modulus to have it like fade out and then come back and fade out and come back yeah chris sorry um auto encoders is not happening today i apologize i got lost in shader land um so now i should be able to [Music] um add the offset i mean i'm basically just trying to hypnotize everybody and then also do this and i was gonna yep that's just making it slower dude this is just making it slower um but how do i make it like if i do 25 and then multiply it by four yeah okay so what if i do um factor equals four and then uh factor and then this would be 1.0 divided by factor we're probably all lost because trust me i'm just as lost as you are uh and then um maybe i don't want the sine wave anymore um and then like how how much can i get away with this like if i make the factor uh 16. yeah it's a okay cool now why is it only it's barely getting anywhere can i can i multiply this by 10 oh 10.0 oh no that's just making it well go very fast hold on yeah there we go it's like a water ripple okay yeah says g-s-l-s-l is so fun i would agree i would agree uh a hundred factor eight no i liked it with a larger factor but slower i think okay i think i have to i think i have to stop it looks like the warner brothers background it totally does you need the absolute value of sine well i don't i mean i that might help but wouldn't that let's try that but i'm fine with taking the negative oh but now this is just going to go interesting now also i probably could do like i mean there's got to be a way to like make the color different based on the angle right couldn't i do hold on let's do i'm going to stop really soon float angle is a tan of uv [Music] y u v i'm trying to get the angle of the x y relative to the center um and that should give me something between 0 and 2 pi so if i divide that by oh it probably gives me between so if i oh this is why i had pi there is no pi um close enough how do i do a constant is that right so if i were to say take angle and make that divided by pi and make the angle hey look now the green is rel is the angle but it's i think um i think i should add pi to this i think i'm probably getting yeah and then divide it by pi times two i'm sorry i'm not explaining what i'm doing and this has to be a dot i just i can't i have to stop that is not really giving me the effect that i expected hold on let's let's just look at the angle for a second ah okay a tan if i take the literal angle oh it's because it's from the bottom left so i have to say minus u resolution [Music] dot x y divided by two i'm confused um oh whoops no not there hold on i want to get this right minus u resolution dot y divided by 2. 2.0 no um how do i how do i get it to be u v o minus mouse dot y yeah oh whoops hello just use the mouse dot y thank you i don't know why i wasn't thinking that oh because i'm doing the yeah okay so we can see here that that's the color is mapped to an angle but i need to you know divide it by pi but that's only half so i want to divide it by pi times 2 oh and this should be y this has to be i just okay this is right except now i should say pi plus being my kingdom for a map function there we go so this is now the color i was doing this yesterday the color is green all the way around so i could this is pretty much what i did with eliza and alethia i'm just sort of like redoing it so if i said bright now so you can see that it's with green but there's no reason why now i can't do mod angle plus offset one there we go i don't know what the oh look at this whoa what it's like in the wrong place too which is kind of a happy accident oh because i have uv y u u v x oh this should be x there we go i kind of liked what i was doing though so i'm really hypnotizing oh and sine wave it's coming back so um can i like modulus this with a oh no but um there uh no oh no that's what i want um i can't stop oh yeah this there we go okay hold on um let's do and let's multiply it by 2. same thing let's do factor can i do that factor 1 1 divided by factor this is my new favorite weird thing to do ta-da okay oh my god okay everybody um i don't know i don't know my my colors need a little bit to be desired here leave a little bit to be desired here let's just let's just make this um let's slow this down a little bit and multiply it by 20 and now what i'm going to do is do i dare what's the chance i could get this to work if i just do window with it's going to be all askew nicole's giving me a map function yeah i could write my own map function is are can you import can you create like a utility library for a shader and import it i think i should probably make it a square no matter what but um here we go share full screen view enter full screen refresh refresh refresh use a cosign palette i can't get it to um i don't know why i can't get it to run in this mode but whoops it's much better as a square anyway okay ta-da you want to normalize the uv ah okay yes normalize the uv okay but that's that's for another day uh thank you for uh tuning in for today's live stream uh this code is available in the discord coding train discord which you can sign up for at thecodingtrain.com discord uh thank you today's sponsor brilliant you can sign up for free at brilliant.org codingtrain that tells them you found out about it from me helps out the channel it's a way of supporting the channel um and uh there also if you want to subscribe to the premium uh brilliant subscription uh that link will get you a 20 off uh coupon um i will be thank you uh um uh thank you um k weekman for posting the uh discord link in the chat um i i'm gonna go it's 1 30. i've been streaming for two and a half hours there's a chance i'll be back this friday there's a chance i'll be back next monday there's even a chance that a brand new fully edited coding challenge video will come out at the end of this week putting the finishing while putting the starting touches on it it's a really fun exciting code example of doing time displacement probably could do it with a shader can you pass an image to a shader from like the webcam it's got to be a way to do that um and i hope that you learned something about shaders today i feel like i'm getting a much better understanding of them although apparently the only thing i know how to do is make hypnotic patterns um so i've got to go i wish that i had more time today for um some um and thank you uh okay weekman for posting louise lessel's uh website oh yeah so let me let me do some thank yous so thank you to the book of shaders which i intend to fully go through at some point but i know this is the origin of many things thank you suick for your very kind um we definitely need to do this dot song for your kind super chat there thank you to uh curiously minded uh check out uh their stream travel back in time to see me on their stream thank you for introducing me to shaders i think i might never look back gotta do a lot more with this um and also thank you to um casey and louise um hopefully like if i go to the homepage of this there is um yeah thank you to casey and louise um the example this looks like the example that i was building off of today i was really pulling from their examples shader is texture wait what what can i just make it a sphere can i just say sphere instead whoa wow wow it didn't really work but kinda did okay i'll return to that later make it back to a rectangle i'll figure that out later um i will see you all on the if you invert the mouse position looks like some sort of first person so i know i know i can't stop okay here's what i would love for you to do what do we need hashtag oh gloria really wants i i'm my poor dog she's just looking at me i mean at least she's outside and there's no sun anymore she's really enjoying the sunshine but she really is looking at me like okay it's been two and a half hours need to be fed need to be walked properly anyway um the art of code channel on youtube has complex shader tutorials um so many wonderful things ah but this is what i would love for you to do if you are inspired to try making a shader from today i don't know uh tweet at me at shiffman um at the coding train um choo choo slot choo choo shader shader choo choo true shader shoe i don't know shader chew two shader choo choo shader shift shader shader shafader you figure out what the hashtag should be self organize on the internet um come back for the next live stream hopefully i'll get some new videos out also i appreciate all of you i wish i could do more and see you all soon i'm gonna um next time hopefully i'll have some time to share community contributions or answer some questions and all that kind of jazz see you next time on the coding train uh thank you to all the members who have signed up through um uh youtube you can also sign up through patreon if you uh prefer although i need to get emails out to all the new patreon subscribers um if you've received your custom train whistle with your laser etched random walk pattern on it um i should come a little bit closer to a show let's see if i can bring that right up to the camera this is uh um uh please share it with me uh i don't have light here so but hopefully you can kind of oh i'm so in the dark uh two in the light i don't know what that sound was i really just gotta go uh there we go random walk pattern uh coding train uh and uh see you all happy halloween almost whoo i don't know if we're gonna have a spooky coding train i like to do that every year but it's gonna be really hard this time goodbye as always i always forget that this stop this stock this stop this dot this stop this dot floating point this whole time there's no music because i forgot to add the audio capture to this [Music] business song [Music] the kittens kittens and kittens and kittens [Music] [Music] i feel just sort of like a nice feeling of relaxation everything's gonna be okay today dream is not broken it has not frozen this is a this is a wonderful thing okay we're gonna do it i'm really getting to something i need my sound effect [Music] what else is there unicorns and rainbows [Music] generation analysis things that i will use continuously over and over again first thing i need to do is yes [Music] yeah i just thought of something i'm not going to do it now but i could make a uniform from p5 that is the volume of the audio and make this sound responsive right i mean i'm not gonna do that now but uh you should definitely do that okay uh goodbye everybody kittens and kittens kittens and kittens and kittens and kittens kittens the kittens and kittens and kittens kittens and kittens [Music] see you all later you

Channel: The Coding Train

Views: 19,738

Keywords:

Id: kTVUvfp5og8

Length: 152min 40sec (9160 seconds)

Published: Mon Oct 25 2021