Coding Challenge #77: Recursion

hello welcome to a coding challenge this is a coding challenge about recursion recursion is a technique it is actually a concept about self reference recursive function is a function that is defined according to itself this is what I'm gonna do in this coding challenge what does that even mean but I'm the reason why I want to show you recursion is the key concept behind the fractal geometry of nature so I have here benoit mandelbrot seminal book on fractals the fractal geometry of nature I have a wonderful book I encourage you to if you're interested in this subject it's it's the beginning of everything in terms of this subject so I encourage you to take to get it for yourself or borrow it from the library and I have a lot of other videos you can chow link to them in this video's description I made fractal trees nature of code tutorials about fractals fractals being a self-similar shape a shape that's kind of made up of itself recursion is this concept of self reference a recursive function is a function defined according to itself so it's a really elegant way of creating patterns I I'm gonna do that right now I'm gonna make a really simple one it's just basically the I'm gonna build the example that's been in processing for many years or something like it from scratch and then you I've been so enamored with the previous ten print coding challenge there's just a simple bit of code and what people made from it so I'm hoping that the same thing is gonna happen I don't know what the hash tag should be hash tag coding trained recursion some people come up with something better ten pretty I would say recursion but that's no just recruit I don't know the point is share all those things you make on Twitter and also in the readme file that'll be on github link from this video's description so let's get started so I'm gonna start with some really simple code I have a sketch which makes a canvas that's 600 by 400 I am just going to draw in the middle of the canvas an ellipse and it's going to be at 300 comma 200 and it's going to be 300 pixels wide and 300 CIL's high I always forget this but with ellipse if the width and height are equal I can just use one argument and there it is ah now one thing I want to do about this is I want to say stroke 255 and no fill so let's say for the sake of argument what I want now is to repeat this pattern I want this ellipse then another ellipse then another ellipse then another lips and they're shrinking as they move off to the right well the typical way that I would do that is with a loop structure a while loop or a for loop this is a control structure that allows you to repeat code like drawing ellipse and change what's happening each cycle through the repeat but I'm gonna do it in a different way recursion is much recursion a recursive function executes with a loop unto itself but in a slightly different way so let me keep going with this and I'm gonna say what if I wrote a function almost absurdly just called draw circle and that function I just put this ellipse in it and what I said is let me give it an X a Y in a diameter and so I'm gonna draw the ellipse of XY damnit diameter and then I'm gonna set call say draw a circle at 300 200 300 so this is like a totally like absurd thing that I've done the code runs exactly the same right this is the same what I've done is basically redefined the ellipse function and give it a different name and then call that so this seems kind of ridiculous but there's a reason why I'm doing that what would happen now just bear with me for a second what would happen if right in here I said hey draw another circle at X plus I don't know 20 Y D so this is now this idea of recursion I'm defining draw a circle according to itself so when I execute draw a circle it draws an ellipse then calls itself so it draws an ellipse then calls itself so it draws an ellipse then calls itself so it draws an lips and calls itself I'm gonna stop this eventually drops calls itself this could result in an infinite loop so I need some way just like with a for loop or a while loop I need to make sure I have an exit condition so if this function is going to recursively and you know this probably looks like something you're not supposed to do right you can't call the function from inside the function but in fact is a technique that happens in many algorithms require this kind of recursive thinking what I'm doing right now does not require this cursive recursive thinking I could probably do this more easily in a for loop but in a moment I'm gonna do something else that a for loop wouldn't really work as well for so here we go I'm gonna give myself an exile weirdly let's just see what happens do I crash my browser yeah you know what so what happened is I got this error fortunately the browser was like smart enough to say like yeah yep hey hey there buddy you are calling yourself way too much stop so it's a maximum call stack size exceeded in blah blah blah like draw circle circles wrong oh this is bad so it stopped but you can see I did have this result of it doing itself over and over again so I could add an exit condition and say well only actually only actually call yourself if X is less than width so if X is changing right so keep going until you get to the edge and now I could do this again and there's it stopped right but this is not what I want to do actually what I want to do I want to move but I also want to shrink the diameter so with each new ellipse I want the diameter to shrink so we can see that's happening here the diameter shrinks by half and I also want to do something where I move it according to half of the diameter so so now I'm moving each ellipse over according to the radius and shrinking which is half the diameter it's turning it by half so there we go oh and I got the so I got the call thing so now I need to use as long keep doing this as long as D is greater than 2 whoops as long as D is greater than 2 not less than so there we go so now we see I have this ellipse that's moving to the right that's moving to the right that's moving to the right now let's think about this for a second so what I have remember what I have is an ellipse with a smaller one and a smaller one and smaller one and a smaller one that's what I have now you might think well what if I want to also have the ellipses going to the left so I could pretty easily do that I could have two for loops or one for loop that kind of grows and shrinks but what if what I really want is to say this is not an ellipse a circle with circles to the right and the left what it means to be a circle is to have a circle to the right and the left so this circle also needs a circle to the right and the left but then this one needs one to the right and left oh and this one needs to the right and left and this one needs to the right to the left right and left right and left oh but this one's right up this goes on forever this is this idea of recursion a fractal a self-similar shape if i zoom in on any given portion it's going to and look like the whole the whole shape itself this is a perfectly self similar fractal where every piece of it is exactly the same but one thing you think about you could build a little randomness into here and that's actually referred to as cystic a stick fractal and something like lightning would be that if you look at lightning right it's kind of all this like or blood vessels or trees but not every piece of it is exactly the same but the kind of idea of it is the same so map a little tangent there let's actually make I wanted this to make this happen so let me come back in here so now right this is what I have and so now what I can do right is I can say hey why don't you not only draw a circle to the right and to the left now I I died i double-dog dare you with the cherry on top and some non-dairy whipped cream low-fat not a low-fat you got supposed to do low-fat anymore anyway I dare you to try to recreate what I'm just gonna show you right now without recursion somebody will do it and my mind bull-like explode but it's this is the this is just like one two three four five six seven lines of code that's going to do something kind of phenomenal there we go so this is the result right it's not just circles to the right and left but it's circles look at this zoom in that looks just like what I drew zoom in this looks just like right now I'm zooming using the zoom feature of the Mac I'm using a Mac but could you actually draw zoom use scale or some other kind of trickery to like do this sort of like infinite zoom into the fractal could you animate this don't draw circles use color there are so many possible things you could expand on from you know just to like keep going for another minute or two I could do them all so oh I could say hey put some circles down right y plus D times zero point five and let me make the canvas a little bit bigger and look at this now what's crazy about this is oh my god I can't believe this is happened this is actually called the sierpinski triangle which formed out of all these circles which is a triangle filled with other triangles filled with other triangles for your blood rounds that's a fractal you could try to make I mean I mean this sort of weird roundabout way by putting all these things next to each other so what if I have them go up what if I have them only go to the right and down like this is like now I'm just too curious I'm going to take out to the left so this is to the row that's kind of blue it's like the fractal thing on its side there are so many possibilities here so I want to think though like so couple things one is this is now executing over and over again but I'm not doing anything to animate it you know I could kind of like give the initial size to like Mouse X so you can see it's kind of like I'm zooming in and out in a way and interestingly enough but so so there's a there's a lot of things I could do to animate but I'm gonna add no loop right now because I also want to show you you know if I were to add just a little bit of randomness into this let me go back to the original one but for example what if I said let new D and did I use var no I didn't have I don't have any variables yes let new D equals D times random you know 0.2 to 0.8 and so now I'm gonna say plus new d divided by 2 so I could use put some randomness in here I don't know what this is gonna do this is probably a bad idea for some reason I can't think of just yet and you can see I don't know that so this was I don't love what I got came up with here but you know every time I do this it's gonna give me a slightly different version of it it's not perfectly this is a stochastic fractal the quality of how the shape is repeating itself similar and someone's telling me to do D times 0.25 in the chat Bay that's going to create a more interesting pattern but this so and again I have discovered from doing the 10:00 print coding challenge that the viewership of these videos is way more creative and has so many beautiful design ideas than I do so I really just need to stop because I don't have any of those ideas but I'm trying to show you some possibilities here so I am going to just do one other thing which is I'm going to take this and make this 0.25 which somebody in the chat was telling me to do oh yeah so that's kind of cool wait wait wait let me make the first circle bigger oh but maybe I need to oh but now I don't want to go over by / - no yeah so that's interesting well I make crazy weird recursive eyes anyway see I'm terrible at this so have fun make some parameters make some color choices make some design choices share with me on Twitter hashtag recursion Cody Trey Oh somebody I'll pin a comment what the some people come up with a good hashtag idea and I'll pin it to the top of the comments and also contribute the readme and I'll show a bunch of people's recursive designs on next week's coding train which will be next week okay talk to you soon thanks for watching [Music]

Channel: The Coding Train

Views: 82,814

Keywords: JavaScript (Programming Language), programming, daniel shiffman, creative coding, coding challenge, tutorial, coding, challenges, coding train, the coding train, challenge, javascript, p5.js, p5.js tutorial, programming challenge, p5 js, recursion, recursive, fractal, recursive fractal, mandlebrot, nature fractals, javascript recursion, algorithms

Id: jPsZwrV9ld0

Length: 12min 22sec (742 seconds)

Published: Thu Oct 05 2017