Live Stream #169: Perlin Noise Loops + JS Inheritance

[Music] I'm gonna say once again coordinates [Music] coordinates [Music] and auto-tune and the internet will fix that [Music] coordinates [Music] hello and good morning I almost had that timed right I was gonna the end of that song crossfade into me my mic is on hello hello I'm trying to be somewhat more professional this morning with my opening coding train logo and some music which instead of be just here like is the is the stream starting is the stream starting oh wait okay hi so this was my to attempt let me know how it went welcome and good morning and well to the coding man shoot I was doing so well welcome made a good morning no it goes like this good morning and welcome to the coding train my name I'm your host Daniel chief bond and I am here every Wednesday 10:30 a.m. Eastern to do some coding stuff and actually I'm really excited about today I recently released a few videos about making a gif I think by the way that these videos are getting tons of views just because people want to know whether how I'm gonna pronounce the word it's like oh I feel like I really that wasn't my best work either that gift loop video I feel like I went on and on and on at the beginning and then in the end it's just a rotating square and I could have done so much better but alas people seem to be enjoying it and watching it if you go on to Twitter and go to a hashtag gift train gift train gift train because these gifts are little gifts you know hearts out into the world if you go to gift gift train you can see I'm just gonna go to latest here wait a second I'm a little bit afraid to click on this one I'm sure it's fine but you can see that people are sharing gifts that they've made and I hope to see more of these this is a pretty interesting one by the composer of the Iowa refactor this later song [Music] so please continue to share those in addition to sharing on Twitter or I suppose if I ever got around to using Instagram could share stuff with me you know I have this hi this whole thing where I was gonna switch over to using mastodons and somehow I never was able to make that really happen but maybe I'll give that another try but no no that's spoiler alert okay I also you can also share things on the coding train website itself here are for heart submissions that I will now share with you the first one I will share with you is love hearts by unrig Ezra so I guess I can click and everywhere I click it makes a heart whoo look at this and they're like oh oh it's like X tracing its contours more and more this is beautiful excellent work I love it let's look at the changing the Cassini oval to a heart by Simon a different Simon then the usual coding train viewer Simon Tiger ah look at that I love that another beating heart I'm gonna make I'm gonna make more coding challenges with like hearts and stars and rainbows and things like that but just it brings me such happiness and joy okay that's beautiful work rainbow heart excellent use of the combining of the rainbow with the heart together let's click on this this is by Ria's Lockhart laaskar here comes it's falling from the sky oh it's coming from the sides I think this one needs [Music] that's beautiful I love this I love the creative use the way people are using this sort of path of that formula the heart curve creatively and having it be the boundaries of the basically a particle system that's coming in really nice work and let's look at one more heartbeat by copper of France and here we go look at that that is really cool so this is look at this so you can see the cardioid shape and the particular heart curve there and you can see it's from beating back and forth between the two of them and this also is a wonderful this is a wonderful reference to a wonderful allusion to the circled square shape morphing coding challenge that a golden Levant presented on this channel here so you can see this is more thing between two shapes the heart shape and the cardioid shape see me sad to move away from hearts today we're gonna have to keep the heart we're gonna have to keep the heart thing going alright so thanks everyone for joining I'm gonna get I'm gonna try to not have too much exposition and just get right to the coding because I am so excited about this topic that I'm gonna do today if this happened spontaneously as if in a dream to me and yet it yet it's something that's been around for quite a while that people have been using as a technique and I I would say a pioneer of this technique is Etienne Jacob Etienne Jacob I don't know how to say the last name in French and you can see this I don't know that this was made based on the fact that I did a heart curve coding challenge I can only just be I can I can be somewhat semi confident suspicious that maybe it is somewhat and partially and a little bit inspired by my coding challenge simply by the date of February 15th given that I did the coding challenge on I think February 13th was my live stream last week because today is February 20th but what I want you to look at this and I want what I want YouTube look what I want what really blows my mind about this it might not be immediately apparent to you is this is not a processing sketch a p5 sketch running presumably it might have been created with one of those things but it is in fact a gift there is a little bit of it what's amazing about this is there's a lot of randomness and randomness of this in this gift it seems chaotic and random and yet somehow it loops seamlessly although now that I look at it I see this like slight moment of a jump but we can look more and more at Etsy ons Twitter feed let's look at this one similar idea but this is a gift it is looping over and over again how I talked about in my gift looping challenge that the end point of a gift the last frame of a gif if it matches with the first frame it will appear seamless but how do you have something that's so random and chaotic and yet somehow accidentally or by design and with a frame at the end that matches the one from the beginning and this is exactly what I will present to you today in a coding challenge about creating a Perlin noise loop so before I keep going and talk too much about this let me there so this is another reference this is I think even more salient here like this is particularly like how in the world is this looping how is that looping now the answer to this is if you read at tiens article here all about Perlin noise functions and this particular technique for how to animate noisy stuff with a nice trick so I'm gonna present to you my own way of doing this which I suspect is exactly what's in there considering about this I think I read this article probably in 2017 when it came out and then somehow yesterday in the middle of class at ITP I was like this new idea and then I was I messaged goal 11 about it I was like did this new idea he's like uh-huh yeah by the way this is my p5.js sketch that I made I suspect you like but year ago or six months ago that does exactly that so clearly I didn't invent that I just thought that I did I had remembered something but I'm gonna go through this with you today and it's I'm so excited about it cuz it's really gonna change for its I think it's gonna open up a lot of interesting and unique creative possibilities for you and you can make hearts and rainbows with it and of course we're gonna need polar to Cartesian coordinate transformations ah I think I did show David snipe Snyder's 4ei heart gift but let me just make sure to give this a nice highlight because this is what I love something that I absolutely love the most is when I see different bits of code and examples that I've made get combined and recombined in unique and interesting ways and here is a nice ode to Valentine's Day with the heart curve and the Fourier transform by David Schneider hashtag gift train okay and now oh no oh I wanted to keep that up let's put that here I think I'm gonna attempt to do this in the p5 web editor even though there is a somewhat significant bug that you are all aware of if you've watched my what video did I experience that in the bouncing DVD logo let's make this is that okay too big too small I'll move this over a tiny bit question is I think I would like this to be a little bit bigger and if I do wait 600 600 auto-refresh zero let's make this I know the camera went off I have a I'm on a path to fixing this camera issue don't worry everything is gonna change for the coding train in the future ah welcome new member cryptic so by the way if you like what I do there's no requirement to do this I will mention there is an opportunity to join as a YouTube member I also have a patreon I'm not so sure about the patreon try to figure out what to do about that but you will get an invite to a slack channel I will at some point you know some amount of time mail you some stickers and you will also have my so thank you to new member you get a little fancy icon so I don't know anybody in the chat who's a member I'm just curious but your icon changes your little emoji icon changes based on how long you've been as a member and I can't remember what I think the dot that this dot character is the first one and I think the rainbow is the last one maybe I've had to be a member for two years or something so I can't imagine I don't even had it for that long but I'm curious to see what those what those I set them up at one point alright so I think I think all right so is that okay this font size is that visible and think about think about all of the people around the world who are like on there on the bus or the subway on their way to work or school with their little tiny mobile device watching the coding train and they read my code all right so this is gonna be a coding challenge it's going to relate to a lot of different things so the two things that I want to mention are blobby this also relates to this and Perlin noise playlist coding train mmm what's gonna happen here okay hold on a second just give me a second here I want to be logged in as a different person one of these days I'll fix this it's fine just give me a second here everybody just just purl in yeah this is where I have a Perlin noise playlist ah there it is oh yeah okay uh-huh there we go all right so I don't know I think I'm gonna start with this what's one of them these are amazing by the way I mean look at that I don't think I should lead with this because this is misleading I'm never gonna create anything so beautiful as a TN Jacobs but I think oh yeah this this this is definitely related to what I want to do and where's the heart okay here we go alright this I can lead with I need to make sure I have a white board working white board this this this is no good I've got three markers here David in the slack channel asks Dan do you think you'll ever make a 3d version of blobby I've been trying it since I saw the blobby video and I can't figure it out oh I like this idea yes in fact we should make a three I mean you would need the spherical geometry coding challenge so the spherical geometry coding challenge combined with the blobby coding challenge is the path to do this and I would love to do that that's a great idea okay wait trying to find a marker that will do us justice haha I think I have found this is the marker which will be the marker for today how are we doing on glare let's see that's not causing the glare is it this one that's definitely the glare that's better okay let's make sure this works Oh oh that was the saddest thing ever you know you'd think somebody who has a YouTube channel is like hundreds of thousands of subscribers would bother to find a marker before going why and yet I can't seem to manage to get myself to do this fortunately for me I have a box here and this box you can't see it is full of markers we're gonna find one I need what I need is another box that's full of markers that are used up no I can tell already okay promising very promising ah there we go no this one will do the job polar noise loops this is the topic for right now by the way incidentally it's also my intention to talk about JavaScript inheritance with prototypes and es6 classes so that'll be the that's gonna be the boring stuff that comes later I mean I don't know what's boring and what's not boring but that's gonna come later okay let's make sure this camera has got a half an hour of possibilities by the way I've just decided I'm not bothering with slow-mo anymore with the chat somebody in yes it's the spherical and coordinate polar song mmm thank you okay we c'mon for that suggestion I have I I haven't remembered in recent weeks to put slowmode on in the chat and so now I'm kind of leaving it without slowmode in the hopes that the community and my my continuous presentation of hearts will keep the chat under control but plea is if it becomes unwieldy or a problem for anyone let me know in particular those of you who are in the patreon YouTube member slack group you can let me know if you need me to turn on slow mode yes I am calling this polar noise loops welcome to the Polar Express I don't know if that's a good name for it but that's what I'm calling it alright let's let's get this started time to do some coding hello okay I knew something went wrong hold on zanny dolly pee in the chat asks hey is there a fixed time when he goes live and in fact there has never historically been affixed time but there is a fixed time now and that fixed time is right now every Wednesday 10:30 a.m. Eastern Time shoot my mic clip is kind of broken hopefully this is going to hold I think it's going to be okay let's try that again tissues and I'm ready to go I think I better start treating the livestreams as actual like time on the Internet in video supposed to just like oh I'm not really because it's not part of the thing that'll edit for later but whatever hello and welcome to a coding challenge who if you can't tell about this one so I found this gift the other day by a tian jacoba at john jacob with my american pronunciation and look at it look familiar to you it looks like a heart curve that I made in a coding challenge previously now I can't say for sure whether this gift was made based on my heart curve coding challenge but I can say for sure that the work of a Tian is amazing and phenomenal and uses a special technique one that I have recently rediscovered in a dream it came to me through dream and yet it's been on the Internet at least since 2017 if not before that so what's going on here that's so fabulous and exciting is this chaotic scene this scene of randomness and smoky heart beauty beauty is actually a perfect gift loop how is it that the end matches the beginning and this is something I talked about in my previous coding challenge gift loop where we looked at okay well we can move something across the window we can rotate something and as long as the last frame matches up with the first frame it will loop but if it's all random and chaotic how do you do that and so there is a technique for doing this Golan Levin actually also has an example bit of code which describes this in more detail which I will show you later in this video but mostly what I want to do is highlight to you this blog post from necessary disorder etienne from November 15 2017 which explains this technique of creating gifts like this here's another one how could this even possibly work and so to begin this discussion I mean hopefully we're gonna get to a lot something I could probably make videos on this topic for the rest of my life but to begin this topic I'm gonna return to a previous coding challenge you may remember me from coding challenges as Kotick challenge number 36 blobby it's when I used to wear t-shirts with this other logo on them to bring my coding challenges and by the way see more gray hair there but I think it's the lighting or something cuz I once asked me if I dye my hair and I do not but maybe I should I have no idea anyways that's not important I'm probably not gonna get edited out you've no chin and yeah okay so what is the issue with blobby so I'm actually even though I could just pull up that code I'm gonna speed code blobby again you're gonna see watch this is like two coding challenges in one so I'm going to what I'm gonna do is I'm just gonna say let a equals zero a is less than 2pi I'm gonna turn off auto refresh for a second I'm working in the p5.js web editor which I think goes be a good demonstration of this and then I this is supposed to say for I got so what I'm doing here just in case you're wondering as I'm writing a little for loop and what I'm going to do is I'm going to use my polar to Cartesian coordinate song and I'm going to say let X equal R times cosine of that angle let y equal R times sine of that angle and then I'm going to I'm going to make up some value of R R is going to be 100 I'm gonna translate to the center of the window and then I am going to say begin shape I am gonna say n shape and I'm gonna set a vertex vertex at X Y and I'm gonna say and I spelled to pipe is of zero which is really complaining I mean to say a stroke to 55 and no fill and there we go look I just wrote the code for drawing a circle because this is a for loop I'm gonna go through all these different angles I'm gonna calculate I'm gonna chain I'm gonna increment the angle I'm gonna keep the radius constant and I'm gonna set all the vertices XY another circle now if R is random and this is basically what I did in blobby if I say random 50 to 100 look what we've got we've got this kind of crazy flickering thing that's almost that's kind of interesting onto itself and I could make this a little more evident by making the time step did not the time step the the delta angle the amount of angle at the amount of vertices I'm drawing fewer I could make sure it connects at the end by saying close and I could also just for right now say no loop so we only get one of them so each time I run this sketch I'm getting it a new random pattern now here's the thing this actually looks like it's a nice closed loop because it's all random it doesn't matter if the last vertex doesn't match up with the first vertex and I you know it would be somewhat smart of me to be more thoughtful about what this Delta angle is like maybe it should be something that divides perfectly into two pi or the radians equivalent of 360 degrees but again I'm not going to worry about that what I'm going to do is I'm now going to add perla noise to this now if you've never heard of Perlin noise before I will refer you to a playlist where I talk about what Perlin noise is and how it works and a whole bunch of other videos related to this so go and watch those now if you want or also link to some articles about perla noise but i'm gonna assume knowledge of Perlin noise for the purpose of this this coding challenge so right now what I'm gonna do is I'm gonna say let T equal 0 so I'm gonna use T as my offset through the one-dimensional Perlin noise space I'm gonna change that to X offset and a little bit but let's just keep it at E right now then I'm going to say R is noise of T times 100 so interestingly enough let me we get a different size circle every time I run the sketch because we're getting a new randomly seeded set of Perlin noise values and the I'm never moving through that time space so each vertex is exactly the same so what I want to do now is say in the loop T plus equal some amount of Delta so now you can see look at this the amount is changing but it doesn't match up so first of all let me clean this up a little bit by saying Matt let me use the map function which I think is it it will make things a little simpler Perlin noise always has a range between 0 and 1 and let's say I want that range to go between like 100 and 200 now so we can see look at that now there's just this little every time I run it you can see that the last Perlin noise value doesn't match the first one this is the problem this is getting at this idea of a perfect Perlin noise loop and let's also have delta T the amount way I moved through the Perlin noise space Ceri what chu Delta TB tumbleweeds can we have like a tumbleweed animation and like the crickets sound effect right that would be great alright so let me change that to this and you can see even if I move T faster and I get this kind of smooth or blobby like shape it always has this artifact the last and by the way if I took off this clothes this will be more evident why right the last vertex doesn't match up with the first one this is the problem so how are we gonna solve fruit so why why does this happen so I have my title of this video right here Perlin noise loops curly noise if we're talking about one-dimensional Perlin noise Perlin noise values in a one-dimensional space with this being the T access the time access although really I should call this like X offset because it's like the X at offset this is maybe a graph of those values and if I'm arbitrarily going from zero to some fixed end point as I get to the end of that circle whatever value I'd get here which maybe let's say if this is between leg 0 and 1 maybe this is zero point 3 and this is like zero point 6 to 1 right they don't match up if I were to take this and twist it around into a circle they don't match up there is another way to look at a space of Perlin noise values this is a way of looking at it in one dimension let's now look at it in two dimensions so instead of having a sort of one-dimensional graph of Perlin noise values i present to you a grid of Perlin noise values now if we think of this grid as fairly like low resolution and I'm gonna draw I don't know why I made those dotted lines like this is like basically a 5x5 grid right now if I if I did my drawing correctly the idea is right each one of these represents some value between 0 & 1 now in this 2 dimensional space each one of these values represents all is also a number between 0 & 1 so I might have like point 2 here point 3 here and point 3 1 here and point 2 6 here and point 1 9 here right every single space has a value now here in one dimension any number in one dimensional space is quite similar to its neighbors and it only has two neighbors a neighbor on the left and a neighbor on the right or a neighbor after a neighbor before here each value has how many neighbors 1 2 3 4 5 6 7 8 it has neighbors above and neighbors below and neighbors to the right and neighbor diagonally down so the idea here is that what if I could walk around through a 2-dimensional Perlin noise to get space to get random values and always end up back where I started and why not just walk in a circular path I mean that's kind of what I programming anyway so why not just do that what if I were to start here and get this Perlin noise value then this one then this one then this one then this one then this one then this one then this one then this one then this wasn't more than this one then this one and this one I would have 1 2 3 4 5 6 7 8 9 10 11 12 13 random numbers and the last one is going to match up with the first one if I keep going so I could get those those random numbers over and over again and if that if there's an amount of numbers there is so vast it's going to appear like it is a continuous sequence of total randomness smooth with perla noise so this is the theory so let's now go and apply this theory to this particular blobby shape sorry there is I see a siren going off alert polar noise on the whiteboard what does that mean yeah I should play the Perlin noise song I also see in the chat that temp name is saying voice and video get more and more distinct over time I don't know how to resolve that what I can tell you is that I do correct for that after the fact so everything that I do in today's lives for the full livestream ends up archived on YouTube forever I mean until the world ends and there's a lot of reasons why that might happen sooner than later but anyway that aside or it's probably more like that YouTube won't exist before the world ends but anyway I don't what this is not this is not the discussion but oh but then I also edit out chunks and those do not and and and resync the audio if necessary several people are typing I just want to know what the what the alert symbol and polar noise on the whiteboard question mark question mark if that was some sort of issue that I'm oh yes no I wrote into polar noise on purpose got it I wrote it as polar noise on purpose I mean it should say polar pearling I don't know if you can did I write that out of you mostly yes I wrote it as polar on purpose even it's a term that I made up that probably means nothing and is terribly misleading and everybody wants to complain alright I see are we all satisfied now okay poor Simon through the chat rightz poorly no ease that's actually really good why isn't it isn't it poor our pearl our maybe it's pearl our noise anyway okay alright so actually before I come back here I want to let me just open up processing real quick it's the pull just want to grab something real quick which is just give me a second here what am I looking for not pixel flow I'm looking for math basics this is another basics math Noyce 2d there we go okay interesting let me let me comment this out there we go might as well cycle the cameras while I'm here taking a short break from the actual content and now I'm coming back so coming back to the computer what I've opened up here is a processing sketch that is visualizing pearl and noise in a 2d space so this is showing you a sort of the classic visualization of exactly this idea and in that visualization each number a number between 0 & 1 is mapped to a pixel brightness so here you see [Music] let's try that again I really shouldn't put the soundboard so close to my keyboard where I switch the camera let me just go back all the way because that was alright so before I get back to the blobby code what I have here is a processing sketch that is visualizing Perlin noise in a two dimensional space so this is a pretty sort of like classic visualization of 2d perla noise as this cloudy like texture and this is literally exactly this where each number each random Perlin noise value in the two dimensional space is represented as a pixel with a brightness value between 0 and 255 and when you look at that you get this cloud like pattern because the color seamlessly smoothly moves between white to black to gray to black to gray to white so the idea here is what is what I want to do is walk around this space and pull those numeric values but map them to something else besides a pixel value and walking around in a circle is a nice way to create a loop but you don't necessarily have to have that be in a circle all right so let's go back to the blobby code now there's a little is a bit confusing about this because in addition to the walking around the Perlin noise space in a circular path I also happen to be walking around the 2d canvas and circular path to draw this circular shape so I'm kind of using the same idea but with two different points of view and hopefully that is something that makes sense to you okay so what I want to change this is I no longer want to have T what I want to have is X offset I'm gonna say I want to have an X offset and a Y offset and I want to get the Perlin noise at x offset Y offset okay now T is not T is not T is not where do I have T cell ah T is moving up let's took that up okay so this is now what I had before if the pearl if the axe offset in the Y offset right basically if what I'm doing is I'm asking for what is the Perlin noise value at this spot it's gonna give me some random value and then I'm gonna make that the radius of the circle the blob shape as it goes all the way around so I want to start moving but I actually don't want to start here I want to start over here so I have to deal with the fact that I the that I need to find this point if zero zero is in the top left because I can't have negative values in the purlins oi space so this is a little bit of a tricky piece of this but I want to use that same puller to Cartesian coordinate formula or I want to say X offset equals cosine of that angle y offset equals sine of that angle now look at this I kind of got something but it's weirdly symmetrical and the reason is this is exactly what I just alluded to I these X offset and Y offset values are going between negative 1 and 1 and so in fact I'm trying to look at Perlin noise values over here right and these this doesn't exist the Perlin noise face is all positive so there's actually a very simple solution to this which is just to add one like that and suddenly whoo yeah I think so and let me add the clothes back in and let's run this a bunch of times and we can see there we go we have this nice random blobby shape where the N matches the beginning now I want to do let's do some more stuff here all right so first of all I am where what happened to that like incrementer what happened to t plus equal point 0 1 now I have X offset and wife said why aren't I saying X offset plus equal one point one y offset plus you go on one well actually the incrementer is this it is the point 1 here it's cosine of the angle and in truth I could have a separate variable from the one that's incrementing in the loop because I could move through but but but I need to go all the way to 2 pi so that that I don't want to do I think a way for me to bury this in a more flexible way is actually to use the map function so if I map cosine of a which goes between negative 1 and 1 and then map that to a range between 0 and 2 we have and this is sine we have exactly what I had before and I can keep I can keep rewriting the sketch I'm getting a new a new version of the shape but interestingly enough what happens this is really now something that I should make a parameter so for example what if I were to say let I'm gonna make this a global variable let I'm gonna call this noise max equal to and I'm gonna put this here and watch what happens if I make this 5 versus 10 versus 28 versus 0.1 and look at this 0.3 0.5 look at this this is really kind of interesting with just a little bit of noise I have what appears almost like a perfect circle but it kind of looks like a human being like me with faults I have lots of faults drew that circle it's got some slight so Perla noise can actually use as a nice way with a little subtle perla noise of making some perfect shape like a letter form or a circle or a square have a little bit of wiggle to it that makes it seem more hand-drawn so that's a nice thing to see the other thing we could see here very quickly is like you know it would make sense for me to create a slider I'm gonna say and this I'm using the p5 Dom library to do this which is a really quick way I'm gonna create a slider which has a range between like 0.1 and 10 and I'm gonna start it at 0 actually let's make it between 0 and 10 I'm gonna start it at 0 so I have the slider here now and then I want noise max to equal noise max to equal slider value so watch this okay that didn't work create slider the range goes between zero and tenth hold on a sec let's take this out oh I have no loop in here no wonder take out the no loop and now let me slide it we need to make that so first of all I need to give myself smaller time steps when moving the slider so let's do this oh look how it kind of like unfurls because it's the same noise space I'm just stretching or shrinking it that is a really and imagine now if I isolated that like a long a sine wave I've had it super interesting and I could also make I just out of curiosity could make this go to like 100 I should make it go to 11 so happy if it goes to 11 but really it should go to like a hundred and eleven and watch this I guess it's hard to detect that subtleness but if we could animate that more slowly over time so the slider isn't the best way of demonstrating that but you'll see a lot of possibilities here another thing that I could demonstrate here and let's just put it at five just start books open oh it goes to five and then zero point one so all right so another thing that I could demonstrate to you is interesting like a always starts at zero because I'm going from zero to 2pi but if I am walking around the path of a circle there's no reason why I couldn't start over here and then go around or start over here and then go around and why not vary that that would be like the phase if you go back to my for ei trips all of this stuff it's so crazily interrelated it's amazing but if you go back to my Fourier transform videos where we created these orbiting epicycles we had this concept of phase which is where does that orbit start so let me show you another thing here okay what I'm gonna do is show you so let me make a variable called phase let me have that be zero I'm gonna have cosine of angle plus phase sine of angle plus phase what do you think's going to happen if I increment phase well it looks like the shape is rotating I mean it is rotating or it's not rotating means usually is rotating but I'm actually just starting at a different point of the no noise space interestingly enough like and if I make that much small you'll actually see that like smaller than the amount of vertices I have you start to see a wiggle between them so interest it's like I could make this point too and that's going to be even more apparent let's look at that crazy weird wiggle as those vertices adjust their spot and then I want to show you something even crazier I think like let me put it back let me sink it so this is like a nice perfect rotation what if I only apply the phase to the X offset or the y offset like different phases that is real it's kind of too fast so let me do like this like this is really weird you can sort of see it's almost like there's something crawling around the edge yeah there's so much weirdness stuff going so anyway you see the sort of like exciting possibilities of thinking about Perlin noise values as one-dimensional values that you might pull over time you know in a sort of one-dimensional fashion but actually pull them from the path of a circle in the two-dimensional Perlin noise space now what I happen to be doing in this is taking a very literal approach I'm taking those pearly noise Pat path values walking around a circle now plugging them to like the distance from the center of a circle over time as I'm drawing it so it's very like it's a very literal sort of like visualization of Perlin noise values in a circle to the edge points of a circle but if you start to think of other ways you could apply those values the creative possibilities explode and so in other words if this is what I started with I have Perlin noise at the beginning sorry i've Perlin noise values in one dimensional space but they don't loop why not take those looping values here along the path of a circle and then unfurl them back into the sort of one dimensional line and then use those to apply to any value in any visualization to make a perfect gift Luke that's the idea so I'm gonna just put that out there and putting this out into the universe I mean I didn't put down the universe lots of other people it's yin and go on and many others I'm sure I'm forgetting to reference have done this for years so give that a try in the next video I'm gonna come back and actually do that so I'm gonna see if I can take this idea and just apply it to something probably won't be that visually interesting but this will hopefully give you lots of ideas of what you might make okay so thanks for watching this coding challenge where we now have this kind of blobby thing oh wait wait wait I should really add the third dimension here and I'm trying to decide should I make the third dimension this is so weird yeah I think I will okay let's add one more thing to this I think I have I think I can this video is not too long so far alright let's add one more thing so for so let me take out this idea of phase for a second I'm just gonna comment that out and put it back to what it was which is just this so every time i run it i get a new Perlin noise space and incidentally the only reason why I'm getting a new Perlin noise space is because p5 behind the scenes will see perla noise with a random seed each time but I could actually control if I were to say you know noise seed and pick some arbitrary seed value and random number seeds is maybe a topic for another video every time I run this like I'm gonna get exactly the same shape each time so anyway just point that but there is something else there's another way I could animate this and it has to do with three-dimensional Perla noise and Perla noise can exist in any n-dimensional space in p5 and in processing I think the functions that give it to you just support one two and three dimensions but let's talk about how you might use three dimensions here so for example if this is my visualization of Perlin noise in two-dimensional space that cloudy image well I could make sort of like a cloudy set of cubes in three dimensional space but another way of thinking about it is have that third dimension be slices of an animation so I could show you the Perlin noise space and over time while incrementing a Z value as Z offset shoyu Perlin noise for at Z offset equals zero then Z offset equals point one then point two then point three and so that actually all of those will have numbers you know each one of these numbers is now has all of its neighbors o2 up and down and left and right and forward and backward are similar random values so this is actually a really easy thing for me to add I just need one more global variable called Z offset and this needs to be global because I'm not resetting it back every time through draw each time through draw an incrementing it and I can just add Z off right there to the Perlin noise function and then I can say Z off plus equal some amount like point one and you can see we get this wig I can make it point zero one and I'm gonna move through the purlin oi space much more slowly and once again we could see like there's all sorts of things I could do here like this could be zero point three and this could be point one you know there's so many parameters that you could explore here I think we've made actually a super interesting shape for like a crazy animated game version of asteroids like you could imagine having Perlin noise giggling oscillating looping noisy polar asteroids that's the thing you should make so anyway so I hope you find some variations for this and I look forward to seeing what you make and stay tuned for the next video a torus shape yes a torus shape increased resolution it's just alright I probably should have if I thought about this made the stroke wait to for it to be a bit more give it a little more pop a little more zing gotta have thing coding train sponsored by zing zing [Music] I have an idea how hard is it gonna be - can I just get the mic like I can just do this right mic equals p5 got audio in and then I can just have this B is it get level No get volume shoot v5 sound I just wanted to tie it to the sound real quick audio in it's funny there's apparently there's a video about this where I'm wearing a tinfoil hat because I really really like input my Oh Mike got to start Mike get level p5 dot audio in okay what did I miss what'd I miss p5 got audio in Mike dot start Mike get level do I not have the sound library imported this was this was meant for me to just do one thing really quickly to make this fun cuz its cannot read properties start of undefined hold on I was just there and the code p5 audio in Mike dot start Mike dot get level Mike dot start I forgot to show this but whatever Shh okay I don't know what did I have wrong they're so weird I must have something spelled wrong okay right here we go and here we go really it's not picking that up test my whole idea of taking a little break and just putting this on oh I forgot the new okay thank you everybody new p5 audio in how come oh is it it's just so quiet I should I should also have the phase going so it spins test one two test one two oh this has to test one two test one two and then hold on I don't know why I'm like trying to make something interesting out of this that's not my job I'm terrible at that let's do this it's the polar two Cartesian coordinate song [Music] and they say once again [Music] [Music] all right and we're back alright I probably should have I probably I mean it's save I probably should put this back to what it was because this is let me just do a duplicate and that will be this will be the noise loop audio in just in case I'll publish this as well and it's not like part of the coding challenge and let me just go file open and just go to this noise loop let me get rid of the audio in thing and put this back and put what is this now yeah what why not I can leave the weird little background thing in interesting sorry I can't resist playing with this stuff I'm gonna stop I gonna stop I have to stop okay can you check Twitter for generative arts I don't know what that means let me save I have to stop and now what I want to do is do this okay this is too frenetic I want something more soothing and relaxing it's too frenetic maybe Z offset is too much yeah that's nicer although should be this yes and all right I'm gonna stop doing what I'm doing and I am going to go back to this alright so I have to think about what is it that Oh what is the example that I'm gonna demonstrate now with turning this into a loop I mean I guess I can make the most and actually somebody had suggested to me a gift library now I know I wanted to use this P 5 gift library so let me see if I can find this just finding something here for a second p5 gift okay so there's this library but somebody pointed out to me a library that uses webworkers gif canvas JavaScript web workers let's see if this comes out this was in a youtube comment this is it so I'm curious to try this ad frame ad frame delay copy how do I know when it's finished how do i render okay all right so I'm curious to try this gift Jas library I do love this library that was created by my students but it had a few bugs in it and I'm sort of curious to try this probably not a good idea to try a library for the first time during a live stream but why not oh I forgot to mention this but that's fine we're back to here and we've got this alright okay do web workers work in the p5 editor I guess we're gonna find out maybe I should try this real quick if you if you will all bear with me for a second so is this hosted with a CDN I don't know maybe I need to download the library dist oh I need all this I'm so confused [Music] let's download this whoops and I assume also need this let me do duplicate let me add these files but seem to have worked [Music] let me add this here gift out worker ojs and gift out yes okay no errors so to speak let's put this back to 400 by 400 now what I need to do if this is gonna work is I can create a new gif give her this Mike it's knocking we take off Auto refresh that's gonna make it crazy let's try just doing this add frame canvas element I think I should be able to say [Music] gif add frame okay so I need to say let canvas canvas equals create canvas canvas TLT I don't want this delay let's just take that out that should do that let's just see does this give me an error no air as far as I can tell and then what I need here is unfinished and then gift render maybe I'll do render on I'll make a button button button equals create button render and then button mouse pressed gift bows a gift render so this should in theory now I'm adding frames I'm adding frames I click render I couldn't seem to work let's check the console [Music] the server responded with the status of 4/4 so maybe I can't do a web worker oh I couldn't find all right I'm gonna have to investigate this more all right everybody alvaro rights could create a circular path in Z offset so that gif is also periodic in time exactly alright so I'm gonna have to investigate this later already running okay hold on Oh cuz the workers running I don't know let's completely refresh probably shouldn't be trying this in the web editor yeah okay I'm gonna give up on this now it was good that I tried doing it that I know that this doesn't work and go back to here how come this maybe it didn't save actually all right actually hold on hold on just give me one more second I wonder if I just hit that weird saving bug this is it right no gift test no all right I'm not okay this is alright so what I'm gonna do if you don't mind humoring me for a second so I'm gonna switch to processing hello quit processing there we go and then I'm going to do desktop let me just quickly convert this code to processing same exact thing and let me simplify Lily get rid of this phase okay okay all right just check the time let's see here so the reason why I want to use processing is I also want to this is gift loop oh that's not what I'm gift pull look like I'm gonna call this polar noise blob okay and then I what I now need is I need this code a little bit and processing until I have a solid way to generate the gif in in JavaScript I'm going to use processing for making these gift loops so let me open this so that's this okay so this is the gift loop and this is the blop and this is this alright okay increment I by radians one interesting okay that's an interesting thing to try all right part two is coming up right now okay all right sorry I'm thinking I'm thinking hello and welcome to part 2 of the polar hello and welcome to part 2 of the polar Perlin noise loose I wrote polar noise loops on purpose as like a wordplay thing but people kept saying no no it's pearl annoys pearl annoys this has polar Perlin noise loops the whole point of this is I'm doing a follow-up of my previous coding challenge where I made this blobby shape which is created with a Perlin noise algorithm and the end of the shape matches up to the beginning of the shape by walking through a two-dimensional Perlin noise space in in a circle hold on I'm out this is a good time for me to show Golan's gif olan sketch if you're wondering what I'm talking about go and watch the previous video but also I forgot in the previous fed I neglected to show this particular sketch created in p5.js by goal on leaven which demonstrates this idea so the ideas I want to use Perlin noise values over time but I want the last value to match up with the first value and so if I pull those values from a circular path and in truth it doesn't have to be circular as Luz I end up where I started then I'm gonna have this perfect looping Perlin noise so why not take that perfect looping Perlin noise and apply it to my gift loop so that I can miss this in the gift loop coding challenge I just had this rotating circle it's very easy to have the and match up at the beginning but what if what I want to create with is random chaotic algorithmic scenes of beauty and an example an artist who does this is Etienne Jacob and you can read more about this work at necessary or necessary disorder wordpress com this is a blog post from November 15th 2017 you can find many more of these like amazing gifts on a Chen's Twitter account all of which I will link to in this video's description so this this video is inspired by the beautiful work and this this just is mind-blowing to me this is not this is not a sketch running over time it is a perfect loop yet it seems as if it's just a continuous random chaos so how are we gonna achieve this so I admittedly I think by the end of this video I'm going to end up creating something incredibly simple but I hope it will unlock a superpower for you which is this polar noise loops okay alright so let's go let's go back to all this stuff so what do i what do I want first I want to go and by the way I in in the in between the last video and this current one come on computer respond to me I get a perfect connection if you increment I by radians one I see I see all right in between in between the previous video and this one why is this not open why why why why come on oh stop there it is oh it's just there why it should it should switch windows when I click on this this is a bug in processing now it doesn't seem to be working is it because it's running switch no switch oh processing processing all right I'll just do this it's fine fun this is the one I want right now anyway so one thing you might have noticed is in the previous video I was working in JavaScript I have now moved over to Java using the processing development environment this is mostly because of what I want to do now is render files out that I can then repackage into a gift you can do that in JavaScript too but I haven't found like a really excellent elegant solution for doing that yet so when I'm working with rendering I generally prefer to be in processing and also I like to just show you different things so I have ported that code the exact same code but I'm in processing now and so what I want to do is first let me get rid of so to speak this this visualization entirely I should really start yeah actually let me not get rid of a visualization entirely right let me get rid of this visualization entirely first so I don't really care about this our thing right now and I do I do care about this hold on sorry I'm getting confused here what am i doing and I'm typing let just give me a second here I know what I want to say I know what I want to say different so let me get rid of the fact that there is a loop in draw to start and what I actually want is for and I want to get rid of this big in shape and shape and what and what I want is for that angle variable that's to be a that a variable to be a global variable so I'm gonna say float a equals zero and I'm going to here just increment a by some arbitrary amount over time and this that I'm gonna have to be more thoughtful about this but let me just change that and then let me also then say ellipse at X Y a 16 16 so what is happening here right now that is moving super fast so let's say point zero one so what I'm doing now is I'm actually having that circle - I'm having an ellipse trace along that path that was previously that strange shape so I don't I don't really care about mapping the noise value right now I just want to be able to see it so let's just say R equals 100 just to see it okay so I have this oh I don't like what I'm doing look just give me another shot at this give me another shot at this because what I want to do I can you know the shot this me I am so be there is a gift library for p5 go and look at the one that I just referenced I'll send it to you it just needs a little help I don't think it's ready for prime time but it actually is quite there's many things about it that are awesome ok use circle you circle thank you okay alright well so let me start adjusting this code to get the Perlin noise values from walking around the perimeter of that circle so all of the stuff that I'm drawing here with this blobby thing is kind of irrelevant at this point and in fact I don't need to have a loop inside draw anymore so I'm gonna take out that loop I'm gonna take out all the drawing stuff I'm gonna take out begin shape take all the drawing stuff this translate and what I am what I need now what I'm left with and I don't need this x and y either what I'm left with is the fact that this angle this a value needs to be a global variable so this now is let's I'm just gonna I'm gonna just change this this is now right here all I'm doing see is increasing in draw increasing the angle over time and asking for the noise value and I don't I'm gonna take out map even I'm just trying to simplify this really really simplify it the idea here is that I'm saying okay I just want to have and why is it giving complaining to me about what art because I'm not using it I know I understand what I'm doing to out of this I really understand what I'm doing now I know you don't believe me I mean you're right to not believe me I wouldn't believe me either so let me just answer a quick question you saw gyoji bow in the chat asked if this is java how is it possible to use functions outside of a class so this is processing and processing is is a programming development environment with its own set of functions that is built on top of java and it actually obscures the main class for you so you can actually just write kind of procedural code just in a simple text editor without all the java java mumbo-jumbo but it also does support the java mumbo jumbo if you like the java mumble java all right here we go all right here we go here we go so now I'm going to start with this code but I'm basically I'm gonna remove almost all of it because what I want ultimately is I just want a single noise value over time walking along the perimeter of a circle so the idea of looping inside draw is no longer relevant so I can take that out the idea of drawing anything is no longer relevant so I can take that out I don't need this translate what I do need is this idea of calling the noise function in two-dimensional space based on an angle that's incrementing over time around the perimeter of a circle so now that angle has to be a global variable that angle every time through draw gets incremented by some amount and I'm gonna when I want to make a gift loop I'm going to change that to the percentage thing because I want to go from zero all the way to two pi and that's the end of the gift loop that closes the loop but but for now just incrementing it by an arbitrary amount is fine and if I were to say print line R let's watch this go so if I run this what we're seeing is the noise values now this is looping you can't tell but I'm getting the same noise values over to Gavin except not really because point one isn't perfectly divisible by two pi but I'm not going to worry about that David Schneider actually pointed out that if I use the radiance functions like 360 divides into one perfectly so I could say like or it divides into ten even so I can say plus equal radians of one this will actually now give me a perfect loop thank you for that suggestion so now what I need to do is map those noise values to something so I'm just I could do color I could do position I could do size let's have it let's have it do position I think that's kind of a very literal way of looking at it so I'm going to now say x equals map R which has a range between 0 and 1 to 0 and width I'm gonna use the circle function because it's my favorite function X comma height divided by 2 100 and now I'm gonna do this and we can see this looks like randomness right this looks like randomness this looks like smooth randomness Perlin noise but I it is a repeating pattern hard to see that repeating pattern but it is there so now what I want to do if I go back to my gift loop code and this is from a previous coding challenges they're all kind of interconnected at this point what I want to do now is take this idea so I need this global variable a to come over here I need to take all of this which is in previously in draw and it goes in to render my render I'm gonna paste it in here and then a the difference is a doesn't increment a is based on the percentage so a equals the percentage times 2 pi because if you recall from this video this video was designed this code example was designed to render frame by frame some looping pattern from 0 percent up to a hundred percent and now that I know that my Perlin noise values will loop as I go from 0 to 2 pi I can take the percentage of how far am i through to pi so let me run this now and we can see there we go now I believe this will be a perfect loop I can't tell can you tell that this is a perfect loop I can I could increase the number of frames to slow it down I could change the noise I there's a bunch of things I could do but let me leave it like that and now I am going to turn on recording I'm gonna say record equals true this is the system I set up before if I say record equals true it's gonna save out to a folder a whole bunch of frames let me make sure there's nothing in that folder right now no so I'm gonna do this it's gonna quit when it's done and now all and now if I go to the folder and output we can see I have oh there's a bit of a problem that was weird the first frame it draws it at the center and then jumps is that was that a coincidence or is that actually right I think it's I think it should be fine all right I think I got it right let's let's turn that into a gif and see if it loops take time out for a second so before I use that easy gift thing so I'm going to tell me that maybe now I should use a command line tool like ffmpeg how do make gifs with fm MPEG mm-hm does anybody know off the top of their head what the command for so frugal do I have ffmpeg installed okay so this Oh run away from ffmpeg I just like I really kind of hated bringing up easy gift calm I mean it was fine for that video but since I have in the video there's no reason why I couldn't show another another solution like a command-line utility gifts a Cole let's look at this on github yeah June 1st 2018 that's almost less than a year ago so Alvaro hasn't could we make an animation in which periodicity is more obvious yet the the ffmpeg - I something-something output dot gif hamelot dot IO how to ffmpeg PNG files - gif how to ffmpeg PNG files is that like the search I want to do Oh so this where where % 0 3d is the frame ID in three digits it's interesting gif cycle is good at recommended ok people are telling me gifs achill is recommended a world gif gift merge how do I install it I don't want to install with macports homebrew macports no do I have brew installed yeah apparently I do well let's try it brew what do I do it I like brew install gift cycle how do you spell gift cycle totally worked oh what a world we live in welcome to 2019 everybody can't create update lock-in okay sure why not that looks reasonable permission denied no I did that okay this okay Oh promising okay gif sickle give cyclists pail gif sickle is a terminal okay so probably something like this delay equals 10 - - loop star dot gif okay so my guess is gif sickle - - loop star dot PNG test gif file is not in gif format that didn't work yeah I know it's why it's in PNG it's in PNG so I have to say let's check the chat shouldn't we use mp4 the html5 instead of gifts on the web already probably probably probably probably needs to be in a gif format gifs achill only allows a gift for mounting back to ffmpeg do I have ffmpeg installed ffmpeg well I'm not even going to get to the inheritance stuff today am i I'm going to I can make it happen alright let's try there any other documentation here so install ffmpeg Mac let's just try to find the official source here okay oh look install install documentation documentation download download look at this all right oh just a static builds for Mac OS ok whoa let's try this release snapshot let's get the release oh uh oh my god this is terrifying yes Simon I see the I see what you're putting there in terms of the millisecond stuff oops well this install for now let's try this Here I am just installing ffmpeg it gives me literally gives me the actual I can put it's up to me to put it in like user local bin on my own I guess I could install it with let's just install it with brew I'm afraid of brew but this is oh why not alright this will do ok alright Jared Ola check is giving me a nice command could somebody who is watching can someone to paste that command into the slack channel because it's gonna scroll past too fast for me to remember it all right all right so we've got ffmpeg all right that's promising so there was a command let's get rid of this okay so now ffmpeg - F what's image - why do I have image - there why image - I guess that's like convert image - like convert - frame rate one okay - I gif - % D PNG and then test dot gif is my file name let's try this in the range 0 through 4 so I think this isn't right because do I have to do this like something like that no so what would it be let's just try this just curious ok so that worked but I've been feeling it only used it only probably use the first 10 frames right but let's see if it actually made something oops oh it's nice and slow I love that yeah it's only the first 10 frames and why does it but such a big jump in the first one - app image - so zero 3d okay ah 3ds 3d okay thank you that makes sense percent 3d okay let's try that no no famous last words percent 3d % 0 3 let's try that no can I just do like star dot PNG I just do this No percent zero 3d because there's zero padded no the docs could help no I don't have to look at the docs that's why I have a live chat going to look up for the docs for me and give me the correct answer the problem is you're like 30 seconds behind so that's not gonna work I mean I could write them out without it being zero all right I don't even remember where I was oh what if I do this I have an idea I have an idea won't it just work for me to do this can't I just do that No wrong directory directory uh I've been in the wrong directory the whole time why did that happen how did that happen [Music] hold on oh so sad there we go yes over right so I think this is a bad example because it is - it's moving too quickly but it does work I do like this as a new technique though so hold on so let me go back now that I know that this works the question is how can I make this a more illustrative example would just doing this no that's would having more frames no oh I don't want to record right now how could I make this example more illustrative of the idea that I'm trying to demonstrate yes so this slowing it down would help so maybe that's just what I want to do okay ffmpeg can do frame interpolation that's a cool idea make it go in a circle without noise so it's clear it's looping oh like add in all right so this is a good idea let's add in I have an idea okay okay thank you that's a good idea do the same has gold on yeah okay hold on a sec so actually let me stop for a second because let me stop for a second because this example I think isn't very illustrative of the point that I'm trying to make first of all it's moving so quickly that you could probably fake the idea of it looping pretty easily even without a perfect loop so let me see if I can demonstrate this more clearly number one is let me also in addition to drawing that circle let me draw something moving in a circular pattern so I'm gonna translate to the middle I'm gonna give myself a radius of 100 pixels and then I'm just gonna draw a line from zero zero to radius actually let me let me give it let me calculate an x and y again x equals radius times cosine of that angle y equals radius times sine of that angle and I'm gonna do I'm just gonna make these other names x1 y1 I'm gonna draw that line and then draw a point draw another little circle another circle at x1 y1 that's smaller so let me run this for a second so this should all right and let me say a stroke let me also add a stroke 255 and I kind of wanted to go the other way around but whatever so and then let me make this circle have a bit of color to it Phil let me just actually let me just give it a little bit of alpha okay so the idea here now is that this is definitely a perfect loop in the sense that that circle is rotating perfectly now can I make this thing that's moving randomly also loop I think one way to demonstrate this idea is just to really slow down its movement so if I change the noise max to one and probably also I think what would be helpful is let me make it much wider so that and I'm so that it's kind of moving and with more with more variation left and right so now it's my my argument that this is a perfect noise loop I'm seeing the exact circular loop and just just so this is visually a bit more clear let me also make the stroke wait for so you can see these a bit more easily so the circular loop is looping perfectly as a circle but the Perlin noise value is also looping which is mapped to its XY to the x position of that other circle okay let's render this now so I'm gonna switch this to true as I was about to do before and I'm going to render it out so we're gonna run this when it finishes its loop it stops I'm gonna look in now look in the output I'm gonna look at the first one which we can see the circle is though that's weird why is there no stroke around that circle I think that might have some kind of weird error with the first frame that is so weird why why what's going on if render percent if record output Y is the first one not like a fully finished version of this so weird there's like a weird bug going on here we delete the output again why why why why why oh I why is the first frame oh no oh I don't have the stroke here hi everybody sorry sorry there's just a weird little silly bud which is not that important which is that I have the stroke set after drawing that first circle that was just a mistake so that's why it wasn't appearing in the first frame I can run this again so it also gave me a nice suggestion which is to put this to put this circle actually also at the same Y position which is kind of interesting let's try this just really briefly yeah so this is kind of in will oh yeah but it's offset okay hold on everybody everything's gonna be fine let me make this a little nicer let me move let me translate everything let me calculate all the values before I draw everything and then also I want this to be I have an idea oh this is gonna be so much better now now I want this the x value to be mapped between negative width and width times two which is going to put it all over the place okay so now you're gonna see this rocket so there we go so that looks like it's moving chaotically which it is we do this one more time sort of entering in moving around left okay that was too extreme I guess I shouldn't like give it such an extreme let me just do negative with divided by two and let me do like let me do like point oh just negative width and width would be fine I don't know what I'm doing there sorry that was my range was weird let me give it that range now okay one more time let's just see it's luke go Oh goodbye go back in whoo that was weird oh okay hold on let me back up for a second let me just do this for a second kind of put my finger on where it started yeah that's fine that was what I was saying the same I've you've been recording the whole time no no I know everyone's sorry this is going off the rails a little bit let me back up I'm a I'm just gonna like back up so that to where I had that stroke bug so that there's not meatless like constant stopping and starting okay this was the problem yeah no I did I want negative with so I know I was gonna try to expand the range because Perlin noise like keeps around the center so much which is why I was saying I know that the correct range is negative it's far between and so that's what I'm gonna do all right all right this weird little bug why is there no outline in the first frame is just because I missed something quite obvious in my code which is that I have the stroke drawn right here so I actually want to let me fix this up a little bit because I kind of drew this thing in this very weird way let me actually draw everything relative to the center let me put stroke and stroke weight right at the beginning and then the angle is always the percentage times 2 pi I'm gonna get this noise value and then what I'm gonna do is I am I'm gonna I'm gonna get these I'm gonna get this is like X 1 this is like X 2 y 2 and what I'm going to do and I'm have this raise I'm just gonna draw everything relative to the center now so and this I'm gonna change this to n 4 noise just so R isn't confusing so I'm drawing both a circle that is moving horizontally with Perlin noise as well as a perfectly orbiting line and little dot so and then because everything is being drawn relative to the center I've got to change my range to negative width divided by 2 width divided by 2 and this should be X 1 and this is X 2 okay so now we see this now one thing I could do that that someone suggested to make this a little bit more visually compelling let me just increase the stroke weight even more and let me draw the first circle also at that's the Y the Y height of that orbiting thing so this is going to look like something of a somewhat chaotic scene but it should if I did it correctly be a perfect gift loop so let me go here let me look in the output I see that's the first frame right this is here and this is here the last frame is that there and that bear matches up and guess what so in my previous gift loop coding challenge I used a web service easy gift calm there's another thing you could use called ffmpeg let me pull up the ffmpeg website ffmpeg is a complete cross-platform solution to record convert dream audio and video now I've already installed ffmpeg on this computer it's a command-line utility so how to do that it's something I'd be happy to come back and do in another video but what I can do now is if I am in my console and I am in the directory I mean that output directory I can say I have this in the chat here ffmpeg the format is image - I want a framerate of like 30 frames per second and my I want to make it a gif no no this is my file name and this % 3d is indicating that I have all my filenames are named if you look at them they're all named gift - then three digits PNG so I can say percent 3d dot gif this is thank all of those files convert them from a image to a gif and then I just give it the file name of the gif I want so I'm gonna say a noise loop dot gif and I'ma hit enter it's gonna do oh darn I got an error what did I not what did I not do correctly here [Music] okay what I did incorrectly there is the files are named PNG I'm saving pngs out of processing converting them to a gif now I'm going to hit enter I'm gonna say a little gift prayer and it seemed to have worked and I'm gonna go now and look into that folder and all the way at the bottom or at the top or no where we're going to put it boys loop gift oh whoa whoa I mean like temporary land hold on a second huh hold on yeah there it is I don't know why it was I was it was I don't know what I deleted the folder ah delete of the folder and terminal put me into there okay sorry all right let me do that one more time okay so the files are named gif - 0 0 0 dot PNG because they're PNG files I want to load the PNG files and turn them into a gift so now if I just need to change this to dot PNG noise loop gif hit enter uh-huh I did this already so that's for everyone over feet we are going to fake making this seem like I never made a mistake but I did make a mistake but I'm correcting a mistake ok here we go alright so the files that I saved from processing are not gifts they're pngs I'm taking the PA cheese and turning them into a gift so here we go PNG now I'm going to turn that it's a noise loop gift I'm gonna hit enter it's doing it a fitting it yeah it seems like it worked then I'm gonna go back to the finder into this folder I'm gonna go down and there it is noise loop gift and now we say our little noise loop prayer and watch the gift loop I it's a perfect loop I don't know this is like not the most illustrative example again because that y-value is kind of a yeah trick but anyway I don't like the fact that I gave it the Y position because then it makes it feel like it's moving in a circle it's like well it's so funny how it's like actually following the RO team that's just a coincidence right right if I do this again yeah see I don't want it to follow it I want that let me oh I got like a bad coincidence okay hold on noise we're gonna do I'll do this whole thing again oh wait of course start on the other side start far away this might be good huh no don't follow it you're too much following it I'm gonna find the perfect there we go there we go that was a good one okay okay okay okay all right one more one more time 42 is the answer lurk the why how can I make this more illustrative like giving it the Y value seems silly I could say like height - why no no I - height divided by 2 minus y so what I mean no well I could say negative Y yeah I wanted to start further away so let's do draw line from start to finish from the circle leave trailing ghosts behind the big circle but if I leave the trailing ghosts then the loo visual the loop won't visually match lerp the dirt needs more explosions that's a good suggestion all right hold on okay all right okay last try Here I am I kind of I'm good at we just like the cameras got to go off any second now change the color at the beginning of the end that's kind of a good idea that's a really good idea the brightness right I mean really I'm on a kind of a warpath here to trouble it point all right this oh yeah I'm back I'm not ready to render my gift yet I'm on a mission here which is try to really illustrate this point and so I did it I made a couple more changes one is I now I drawing this circle that's moving chaotically at negative Y value so at least it's reversed I don't want it to piers if it's following that circle and then I also extended the range of Perlin noise to a little bit more so it's moving a little bit more wildly I also added a noise seed so that I know every time I run it it's gonna run exactly the same thing now I got a great suggestion from the chat which is maybe to try adding color so another thing I can do here with this first circle maybe is have the brightness itself maybe the Alpha be up beat that noise value so I'm gonna take the noise value and a map it which is goes between 0 & 1 2 between 0 and 255 so we can also and I need one more parenthesis here so we can also see that the color of that circle is shifting right the kind that's not very extreme I'm really torturing myself here let's try making an RGB yeah all right so it's a subtle color change but the color change Luke's perfectly okay all right I have to just give up I have to render this gift you as people who make beautiful interesting things with lots of creative ideas in your heads will really take this and run with it okay so I'm gonna now up here from record equals false to record equals true I'm gonna hit run and I'm gonna let this run it is going to do oh people are telling me sighs people are talking sighs okay one more thing one more thing let's change the size let's also change the size which map that noise I of 0 1 2 between like 50 and 500 we're gonna make that kind of extreme and you know what I can do ooh you know what we could do ooh this is exciting I could actually have oh I have a really crazy idea this is I'm really making this a mess but I don't care I am going to get other noise values for the size you can't stop me I'm gonna just get X offset Y offset - I'm gonna make the noise max much bigger for that so that's going to be more chaotic and then I'm gonna get noise - I'm gonna get another noise value I shouldn't be allowed to do this anymore someone should just get bring the thing that hope they takes me off a mess a noise - so uh and then that's so this noise - value is gonna give me the size of this circle and so right so it's gonna do this and it's way too big so I do believe 10 and 100 so that's gonna give it kind of this chaotic quality but it's gonna loop perfectly okay this is it I rendered it and now I have all these frames I can check and see that the first frame it looks like this what does the last frame look like by doing 200 it looks like that that's perfect you can see that's right before it so let's see if this loops perfectly now the way I'm going to create my gift which is a little bit new is I'm going to use a tool called ffmpeg ffmpeg is a complete cross-platform solution to record convert and stream audio and video how you install ffmpeg would be a topic for another video but I have it installed on this on my computer and you can see that I can just type in term all commands to do things like convert this video file to this other format and I can type in some commands for a gif which is I have them written over here on my invisible computer ffmpeg - F image - I'm going to convert this image - I want a frame rate of 30 and then I need to give it the file names which is gif all my filenames are named gift - number number number dot PNG gif - and I can say there's going to be three digits percent 3d dot PNG and I want to turn that into my noise loop gif then I say my gift prayer gif gif gif gif I don't know I don't I'm like a gif atheist so whatever how's the prophetic prayer it's been like I've been streaming live streaming for like hours now okay we run this looks like it did some stuff so I can go back into my finder and look there's a noise loop gift and I can watch please PLEASE loop please loop just like loop ah it's seamless so this is so visually not that creative but I think now you can hopefully take this and understand something new about Perlin noise and how to make Perlin noise loop and make some more perfectly looping gifts that you could share you could give them as gifts to the Internet hashtag gift train gift reign train gift no no no gift train whatever I'll see you later in a future video thank you for watching all the code and all the links to things relate that I talked about in this video are all linked in the description ma see you soon okay that that is all all right is 12 let me just all right hold on I'm gonna I need I need a like a few minutes to sort of see like how I'm doing on time so we're gonna take a short break and I will be back in a few minutes hopefully to do a little bit about [Music] [Music] [Music] I'm gonna do this this stock this dot this star this stock song never forget the Vince dot but somebody composed that song for me [Music] just give me I've been another Sigma hi four minutes I'm gonna go get some water [Music] are these coordinates [Music] and auto-tune and the internet will fix that for me [Music] coordinates [Music] it's the four to Cartesian coordinates it's coordinates [Music] [Music] [Music] [Applause] [Music] here's the water fun coding a square as the water here is the water it's actually quite far away walk all around okay alright so let's see here it's 12:45 I really want to get to this I really want to get to this other topic but it's gonna take me a minute to get there let's save all this stuff stop save so if you're wondering what I'm about to do I'm gonna do something very ill-advised and prototype JavaScript coding train okay that's perfect and the question is prototype do I have the code that I left off with here is it on is it here somewhere mmm would it be under tutorials p5.js like 16 No yeah 10 no where what is this video number 9 prototypes in JavaScript would it be here in nine that makes no sense oh yeah here it is oh look [Music] by the way somebody sent me a clip that was like four seconds long it was a Google Drive link that was a auto-tuned puller to Cartesian thing but was like five seconds long wasn't this full song that is by I should I forgot to give credit to this song is from Yeol accion SoundCloud SoundCloud yo Lexie polar alright let me just go to soundcloud.com /eo lakh see so this is where this particular song comes from and this is here so the people were talking about gift is and I distracted me for a second oops no no no no no don't do that so uh this is what I want I want this code that I had before perfect and let me go I'm gonna do this not in the what the video I'm gonna do this not in [Music] so let me do the following I think does this is this the way I used to do this prototype gosh I think I need to be do this fresh oh I shouldn't do this now oh no its prototype g /b I'm just getting ready to do a tutorial that is ill-advised but I kind of wanted to do it this week wait where's that code they lose already I'm saying here we go lots of room here there we go and oh it's broke something's broken here okay whatever that's fine I don't really care and I need the CDN treasure just get from here and okay all right everybody so you might be wondering what's about to happen I'm not really entirely sure so what I want to do is two or three video tutorials about object oriented programming inheritance as it relates to maybe particles particle system or physics simulation design and I was going down this road apparently in almost exactly two years ago Wow two years ago to this day and I was doing it with es5 and like the prototype syntax directly and so I think what I would like to do is complete this with a little follow up video but really go into but really go into inheritance with es6 classes ok d t6 in the YouTube chat sends this link of their work so let me quickly go to twitter.com slash arts generative I think I'm gonna have just go to the ah lovely oh look some nice times table stuff is this the one I was supposed to look at 109 8 to 769 109 no this one this is this is really nice stuff it's beautiful thank you for sharing my in Visio is a bit physical thank you ok can I manage to do this I said I was gonna do it I want to back out of that but now that I said I didn't do I'm starting to feel like the need for lunch it's one o'clock I mean three hours is month two hours should be my limit three hours is my absolute limit so let me see if I can manage to power through a little bit longer the hearts the hearts where the hearts all right so the other thing that I need to do this is really unfortunate is recreate so I just wanted I want to find like what did I sort of like end up with on the whiteboard here okay okay all right I need to somewhat [Music] first image in the ten videos and photos oh this one oh yeah I saw this one oh yeah this is amazing I'm sorry this is a beautiful heart image I saw this the other day and it's so lovely and my brain is melting like like this heart is melting into beautiful rainbow colors maybe there's a way you could apply Perlin noise and make this animated loop sorry for like being dense and not being able to find that thank you for sharing that that is beautiful why doesn't it show up here that's so weird like oh whoa whoa and here it is animating Oh lovely wow look at all these so oh wow whoa okay okay okay uh-huh thank you so much to arts generative on Twitter for sharing these with me sorry for being kind of dense and not noticing oh wait wait wait wait wait [Music] that might be too loud long sound effect there is breaking news was just submitted to the website repo I'm being told if I go to the coding training calm under coding challenges under bouncing DVD logo bounce no no I don't see it I don't see it is it not merged yet is it not merged how am I supposed to find it if it's not merged let's go to website pull requests bouncing DVD logo this must be it this must be it bouncing video on how to create a bouncing DVD logo video here's the URL I guess this will get merged soon enough let's go to full view my work here is done I mean I didn't make this but thank you thank you to Orville chopper this is really quite we have to wait now so much for that job I mean I could talk about JavaScript prototypes any time come on maybe needs like a drum oh that was kind of the corner was it that was the corner [Music] it's really bouncing I think we're getting further away we're just getting further away now [Music] it never hits the corner she says round corners it says Anthony I feel like we're gonna get a nice Barry okay oh yeah that's close enough all right we're hitting the DVD corner you win a bell and a train whistle we'll see you next time where the prizes will be like a cup of water all right back to prototypes all right here's the here's the bad news everybody I need to somehow recreate this diet this stuff because I like in in theory on is this is this my good pen so I don't need to redraw all of this but I'm gonna say p1 X Y prototype okay p1 X Y proto tight and then that goes to particle dot prototype which has a show function particle dot prototype which has a show function and then it has this weird underscore proto and that goes to object dot prototype which has like object dot prototype not even know if this is right I really made this two years ago I've been doing this for that long this is crazy I mean I've been through just for much longer than that but that's YouTube video nonsense prototype that links down to here is that right yeah and this has other things like I think I was talking to has owned property so continuing this video from two years ago and then we could have like P 2 which has x and y and prototype okay so this is basically the diagram I had before all right so now what I need now what I need refresh this this video by the way has it a 6,000 views which is totally insane this got to have oh yeah this is this is a lot of thumbs down a lot of thumbs down a lot of thumbs out on that one whoop alright so now I just need I need a little cheat sheet here I need a little cheat sheet which is my old olden days where - where would I have one of my historical inheritance with prototype examples well I think I've converted everything like what I'm I hold on javascript prototype inheritance let me just see yeah yeah yeah this looking on my invisible computer for the way I used to do this I guess well I should look for it on this computer hold on I have an idea oh I know how I could do this nature of code okay I know exactly what to do so I'm looking for this and then I want to go to like here and then I have this inheritance example and if I look at it it's using extends but if I go into the history of this file yes six updates es6 inheritance so probably if I go to this version of the file yeah now how do i browse the file view file no no not that one view file yeah here we go so this is my ol okay great except there's this shouldn't be here but that's fine okay this is what I need I think I can actually remember this but it'll be my reference just in case okay all right I think I'm ready for this great with this very bad idea on this no good very bad terrible idea day the problem with me doing this is I really should only be doing this if I'm also going to do the es6 ones but such is life it'll have to wait till next week because I got obsessed with the noise loop thing the water is gone I've got 24 minutes before I turn into a pumpkin and here we are okay hi everyone I am doing something very ill-advised I think in this video but I were trying a completionist and I'm returning to something I made a video apparently almost today's February 20th 2019 and I made this video February 22nd 2017 almost to the day two years ago about prototypes in JavaScript because I was on this path towards explaining a concept known as inheritance and also another concept known as polymorphism now I do have videos about object-oriented programming inheritance and polymorphism in Java with the processing development environment you could go and watch those and I also intend that my what I really should be doing with my time right now is making a video about inheritance with es6 classes in JavaScript and that's coming and that's the video you should go and watch but I I just I can't let this go I at the very end of this video I said and then I'll make a follow-up one about inheritance using prototypes of JavaScript and I never did and perhaps perhaps there's a kernel of value here in that yes six classes is really just what's referred to as like syntactic sugar and I do have a sweet tooth over you truly everything javascript is still a prototype based object language so understanding how these prototypes work and how this concept i've inherited applies to them is perhaps useful so if you're still with me i'm gonna try to explore inheritance with prototypes in javascript as a follow-up to this video 9.19 from two years ago so if you watch they've maybe just maybe literally just watched that video and somehow ended up here which would be kind of amazing if you did you might have seen it that I had this diagram and the idea this diagram is I was trying to explain that I want to I'm programming a particle system and there's going to be particles moving around my canvas and I have multiple particle objects each of those particle objects has its own XY position p1 as an X Y P 2 as an X Y but the functionality is tied to particle dot prototype so I've added a show function that draws the particle as part of the prototype and there is this idea of a prototype chain meaning that everything descends from object dot prototype so if we call a function or look at a property of an object we first see if it's that object's own property or is it somewhere up the prototype chain so what would it mean now if what I want to do is create a new kind of object I think in my nature of code book I call it confetti which is kind of like a random weird thing but I just use that for this cuz I can't think of anything else right now if I were to create an object something called confetti and a new prototype a class again es6 classes the way I do this now is with es6 classes I don't do this anymore but I'm just exploring it cuz I can't help myself confetti dot prototype what I want is I want confetti dot prototype to inherit everything from particle dot prototype but maybe have its own additional function I don't know like maybe it has a function called burst so it gets show somehow it's going to get you I don't have to rewrite the show function it's a special kind of particle that somehow inherits that so let's let's see how would we do that ok so coming back to the code I don't really know this a try don't worry I have my cheat sheet over here of my actual example from the nature of code book if I need to refer to it alright so let's go to the code the idea here is okay I am going to write a new class called confetti but it's not a class I'm this is an old old way of doing stuff with this idea of a constructor function because the idea here is I want to say now I'm gonna have it okay I was even using var so I'll keep music var because I'm living in the past today C and C is a new confetti I want to be able to say like C dot show for example I want to be able to call that function so right now if I were to run this code I have this loaded here see dot show is not a function okay so how do I have confetti inherit everything from particle so I think what I do is I can say particle I wrote I don't even remember I hope to look at my cheat sheet particles I thought I was right I was right Park hold I call particles I call they knew that's what it was I'm gonna type so okay so the first thing that I'm gonna do is in the constructor function I'm gonna say particle dot call this oh this is so weird but what the I oh I don't like this at all but what this is doing is it's basically saying execute the constructor function of particle just do what I do when I am a particle so let's take a look let's not do C dot show but let's console log p and console dot log C so we're gonna look at the particle object and the confetti object now hit refresh so look at this both particle and confetti both have an X and a y at 99 you can see they have those properties they both descend from object and if we go into here we see that particle has its own show function and then it gets a whole bunch of other things from object but confetti up it doesn't have the show function it just has all the things from object okay so how do I linked it to well one way to link the two is by saying confetti by saying confetti dot prototype I have to look it up ever date anything I'm gonna edit out to be looking it up right that's what I thought oh yeah yeah object I create ah aha oh yeah yeah okay okay okay so one way to link the two would be to say okay you know what confetti dot prototype should be the same as particles prototype so I want to set the confetti prototype to particles prototype now this is not a good idea I don't think but let's just for the sake of our unit let's put that in our code and let me let me refresh this we can see okay oh look the show function showed up there fascinating amazing well maybe we're done we inherited the show function great oh and look the constructor is even the particle constructor perfect all this is great done finished I'm out of here wait I think there's a problem so this is a bad idea because we actually don't want to set it equal this could cause us problems and what we actually want to do all the I the idea of prototype is to base an object off of other objects and it would it and in order to do this properly we need to say object create particle dot prototype we want to make sure we make a new object that is based on the particles prototype itself and that's what we're actually pointing to not directly to the prototype okay so let me just add that in and I'm gonna hit refresh again wait no here we are here we are and great why do I have to do that do I really have to do that hold on I don't actually know about this stuff can we just forget that prototypical inheritance exists oh I see that David also made like this really cool looping gif yes I would follow these classes over the tapes don't do this wait why do you need could someone explain to me why I needed to do that I'm looking at this like where is this gonna cause a problem like what if on to see yeah I guess I could just I think I shouldn't make this video if someone could explain me why I'm supposed to do that that would be great yeah okay I see if you do ah thank you thank you that's why thank you me I am so me wow that's totally it okay thank you okay okay thank you so let me go back while this looks right I am now have a confetti object that inherits sho from particle because I've tied the prototypes together this is a terrible idea so I'm gonna show you in a minute why this is a terrible idea but let's leave it this way just for a little bit longer why am I doing this in the first place the idea is that you like the idea here is that this particle prototype this particle object it's good night in if you if you're looking at some my other examples has a lot of stuff to it maybe it has this whole like set of physics algorithms built into it and I want to just create a new kind of object that includes all of that physics stuff but I can just draw it in a different way so let's just try to like simulate that for a little bit by what I'm gonna do is I'm gonna add now another function to particle called update and what I'm going to do in that function is I'm going to say this dot X plus equal and I'm using p5 so I can use random negative I'm going to I'm just going to move the X and the y around randomly so imagine this is like a really elaborate physics simulation that I've worked out for how this particle should move really I'm just moving it randomly so now what I want to do is I am going to now add the draw function the draw function will loop and I can say P dot update P dot show C dot update a C dot show and what I'll have now Animus a background 0 and I'm gonna just make sure I can really see this by saying stroke 255 and stroke weight 8 so I should see if I go back to here two little dots dancing around what is the particle object one is the confetti object the wonderful thing here is my confetti object which sorry I am going to now which is now C so I have C a confetti object I have P a particle object this links to confetti dot prototype but confetti dot prototype and particle dot prototype right now are equal they're the same thing so it's actually as if this is linking directly to particles not prototype so the show function it's getting is right here and there's also now an update function okay so my confetti object has both an updated to show function and its own X&Y the particle has its own X&Y and an update in to show function so what I want to do is I want my confetti object to inherit this update function but I wanted to have its own show function I want to have its own show function I want it to draw itself in a different way maybe as a square with some color or something like that so let's go back here and what I'm gonna do is say okay no problem what I want to do now is say that confetti dot prototype I can type I could type okay that's a copy-paste that dot prototype dot show equals function and I'm gonna just do something totally different I'm going to give it us I'm gonna say stroke 255 0 255 I'm gonna say Phil no Phil and I'm gonna draw this as a square with a side length of 50 and now I'm gonna hit enter and what's going on why why why why isn't the confetti calling it's show function the reason why it's not well okay well okay well maybe I need to do this after after I do this confetti dot prototype equals particle dye prototype ha wait now they're both showing like confetti either both I want them to do the same update function but I want them to do different show functions so why is that not working it's because I can't actually the way that the prototypical inheritance chain thing works is I can't set confetti prototype equal to this I basically overwritten it so it's as if there aren't two separate ones I want to base this on that not overwrite it and the way to do that it's what kind of ridiculous and this is why the es6 classes methodology that you should just turn this video off and go use instead is I have to say right here object dot create particle prototype it's basically making a new prototype based on the particles prototype but I can modify it so once I've done that and I hit enter now you can see I have both of them are using the same update function but one has its own show function and let me show you we're gonna see this in the console in a way that hopefully will bring this all together in a way that makes sense so look at this they each have their own XY that's good because that XY property is added in the constructor function which both the particle constructor function and the confetti constructor function call the particle object has a show and an update function as part of itself but look at this now the confetti object has its own show function but oops sorry but it's update function is down here because it points to the particle so this is the chain confetti particle is kind of has its own show and update confetti as an X Y its own show but it also has a show and update which it copied from particle now the reason why it doesn't call this one is it always looks for the first instance of something up that prototype chain so this is wildly confusing and convoluted hopefully this gives you a little background its sense of how this works but there's one other missing piece of this I believe which sorry there's one other missing piece of this I believe which relates to this here the confetti the confetti object doesn't actually have its own control sure really it should so for example if I wanted to do something like I'm just gonna add right here like I want to do something else like console.log hello this is confetti like in addition to initializing this object the way a particle does I want to do something else actually maybe what I want to do is give it a color this dot color equals a new color that is pink and then actually what I'm doing is I'm calling that under stroke I'm referencing the confetti has a color like the the particle gets in X&Y the confetti gets in X&Y and a color let's see what happens here Oh weird weirdly that worked so I thought I needed this other step which is this confetti prototype constructor equals confetti so is this really unnecessary can we just put that in here all right because if I go back to here the constructor is pointing to particle if i refresh now it has the constructor the confetti constructor which is what I want huh well I mean that seems like important but it worked anyway hmm where you be I am so be is typing [Laughter] what is disaster the 1:30 yet that's when I'm leaving I think constructor let's use type of correctly so that's the that's the issue or you could inherit from it interesting so the real CR for XY is recommending some other YouTube video to watch we took probably should have done before I started on this bad so maybe it's just the type of thing okay it's a minor detail but let's try that C type of particle no wait how do I use type of oh it returns it not a boolean sorry thank you very much that's not oh no no no those are functions ah it's of the variable yeah no this is right type of C object oh thanks that's really great thank you very much I mean maybe it's just it makes it a cleaner but there's how do I get the class name get it's still prince2 instance of thank you that's what I'm looking for maybe that's what C P instance of particle true instance of confetti false okay see instance of particle true confetti also true it's useless unless I didn't reload it well let me take that out maybe I didn't reload it true particle true P instance of confetti false no everything is working the way it should let's put this in I think this is actually completely useless see instance of confetti true particle true it's the same false particle true it looks like it's a bi MCB rights which I agree with it looks like it's somewhat of a standard with no actual meaning useful for if you're constructing types dynamically but not useful otherwise okay so anyway I'm going to mention it but but so interestingly enough this worked anyway I thought I needed this other step in order for it to call the confetti constructor properly here if I'm saying new particle versus new confetti it looks like it works anyway but I'm going to show you what this step is really one thing one thing that's kind of missing here is that in if I look in the prototype here the particles constructor is pointed to this particle function and if I go here into the confetti you can see like oh there is no constructor it's getting it from the prototype chain which is incorrect the confetti object should have its own constructor and so a way to do that is to say I think it's to say actually I have this line of code here in mind from my example I'm just gonna copy it in that's what it is to say this confetti dot prototype constructor equals the confetti function right I want to like specifically assign it that and it seems to me that this is just a convention to kind of clean things up I can't actually find a place where I need that in order to write code to run correctly but I'm gonna leave it in there and so now I'm gonna hit refresh and we can see here that a confetti object inherits everything from particle including it gets its own X&Y and it gets a show function sorry sorry and it gets a show and an update function it has its own constructor and its own show function because I wanted to modify the confetti show function from the particle show oh don't worry if none of this made any sense to you that's okay um this is confusing and weird but this is underneath the hood how all of this stuff is linked together in the implementation of the JavaScript programming language itself this is the prototype inheritance chain I can basically create a new object with its own function calling the other objects constructor function and then attaching its prototype to a new object based on another object's prototype it's really weird and kind of awful but this is how I used to make my examples but don't worry oh there's a new way I make these examples well you don't have to worry about this anymore you can skip to I haven't made it yet but soon enough within the next week or two I will be uploading and publishing a video all about inheritance in JavaScript using es6 classes and in those videos I really talk about the theory behind inheritance why it's useful and how to put it into practice in JavaScript so if you actually made it through watching this video thank you hopefully this helped add a little something to your day and I'll see you maybe in those es6 classes videos thanks good bye alright alright it's 1:30 I have to go I don't know if I should release this video without having made the other ones we'll see Nico is asking can you please put the full live online as well for this one so the whole live stream will stay archived as soon as I hit stop streaming so you don't have to worry about that and then also edited versions will be uploaded separately so I always leave everything online unless you know I guess I reserve the right to take it down if there was some big problem but I haven't not yet to date taking a live stream down and apparently this is like live stream number 160 something so let me just check for any thank yous here so we had looks like we had new member cryptic who also super chatted with a comment try a coding train try a coding train with Perlin noise looping smoke who interesting that would be like - Luke the the z-axis in a way like to do a tourist basically or a sphere or something like that to loop the Z value around back to the beginning I've been live streaming for 3 hours I don't think I'll be able to get to that today but I do love that idea and would like to try it so thank you to everyone who joined today I appreciate it I appreciate you maybe I could go back to a slightly happier place and just open this and this is where I'm going to finish why did it not work by the way when I go to full let's try this I go to full test test test it is why is it not getting the audio in there's no error in the console it's so strange what if I do present hello test test really weird but if I go to sketch oops sketches and hit play gets the audio how weird all right so thank you everyone I'll be back next Wednesday let me check my calendar next Wednesday 10:30 and Eastern I gotta work on this date and API that's coming next week look at my calendar I see nothing see nothing telling me that next February 27th there's no reason why I wouldn't be here so next Wednesday I mean if I could sneak in some time I would love to come back and do the es6 classes inheritance stuff tomorrow or Friday or Monday or Tuesday pretty unlikely that's gonna happen but I certainly will come back to it next week and George has Dan will you answer questions today well I I would be happy to answer a few questions if they appear in the chat you need to interact with the page before we can use the audio or mic I think I think that's true that is true so how do I so what if I have an idea let's put this in mousepressed so I won't start the mic until mousepressed and but I think I could do this so that it's not null let's try this hello No okay so hold ah what if I do this and just say if Mike I know the camera just went off so if I do this and then I click it starts and Eitan asks do you work at a company so my full-time job is teaching at a program called ITP and also ima ITP as the graduate program ima is the undergraduate program and to School of the Arts in New York University and that's actually where I am I'm in the Tisch building the closet where I thought up some cameras and I do this alright let's try this No so weird the I know that that's there's like a weird chrome thing all right I'm not gonna worry about this it's so sort of silly oops sketches I guess I just was like I don't know why I was I was gonna try to put this on the screen all right this is my goodbye song for reference what time is it now 138 p.m. by the way when I went to get water was snowing it inside of you I wonder if it still is according to Web Audio API pop privacy policy in Chrome Safari and Firefox usually I do audio context 8 equals resume after the direction try the embed version not the full one yeah these are all good suggestions alright goodbye everybody thank you so much I will see you next Wednesday I'm fading myself out whoops no I'm using my microphone and I will hit stop streaming in a minute or two [Music] just coming back to say hi to you Lexi hi Alexi thank you for the Florida Cartesian coordinates on did you call somebody share to be a short clip of the Google Drive link I know what it was it was very similar but you hey but it wasn't you what did you make up earlier versions like a short clip they by everybody [Music]

Channel: The Coding Train

Views: 45,554

Keywords: daniel shiffman, coding, the coding train, coding challenge, creative coding, code challenge, javascript (programming language), programming challenge, coding tutorial, gif loop, creative coding tutorials, creative coding art, noise loop, perlin noise loop, polar perlin noise, perlin loop, perlin noise, 2d perlin noise, p5js noise, p5js perlin noise, gif loops, ffmpeg, ffmpeg images, ffmpeg gif loop, ffmpeg gif

Id: 7k-iJyHq7-k

Length: 192min 15sec (11535 seconds)

Published: Wed Feb 20 2019