Hello welcome to another coding challenge in this coding challenge [I] am going to build from Scratch in Javascript a fractal tree And I'm gonna do kind of you know you can see once we've made once this video is over And I've made one example of it You can see sort of variety of images here of things you might be able to make from it And you'll also see that there are [a] few different follow up videos after this one that show other techniques for generating trees in different ways
but let's just get started first by let me just draw you a diagram to sort of so that we can kind of understand what's Going on so the core idea of a fractal tree is we have a recursive definition So what is a recursive definition a recursive definition is something that's defined in terms of itself And actually [there's] a math function which is known as Factorial 4 Factorial Equals 4 times 3 times 2 times 1 you know 10 factorial equals 10 times 9 times 8 times 7 times 6 times 5 times? 4 feet I 1 now 3 factorial is equal to 3 Times 2 times 1 so you could actually say that 4 factorial is equal to 4 times 3 factorial or That any number n. Factorial is equal to itself times n minus 1 factorial and this is a recursive definition I'm defining factorial in terms of itself which seems like something you shouldn't be allowed to do but it is something you are allowed to do in fact you're encouraged to do and all even though you might send us get a Headache all Sorts of wonderful, beautiful, elegant things can arise out of recursive definitions one of which being Fractal Trees [ok] back over here that was completely unnecessary, but I did it anyway, [so] what is the recursive depth? This is like some math stuff and some numbers [look], what does it mean to have something that's visual defined recursively. [well] we have this idea of a branch So I'm going to say a branch is a beginning and end point and it is defined as having two branches attached You probably can't read [that] doesn't really matter this says branch is defined as a line that has two branches attached Like this, so let me draw that over here. This is a branch and as two branches attached Oh, but these are also branches, so they have two branches attached [oh], and these are all also branches, so they have two branches attached [oh], oh, and these are all also branches and they have to rent ETc, ETc, Etc So a branch is defined as something that has two branches and those have branches This is known as recursion now one thing you might be thinking about is where does this end so in the Theoretical magical world of fantasy this would go on forever and these branches are getting shorter and shorter and they would get infinitely small but in the world of pixels and programming We have to stop somehow so we need an exit condition and actually that's built into this up here I just didn't explicitly state it whenever you get to one you stop counting down in this multiplication for a factorial and the same thing is true here we could say [continued] branching each branch has two branches attached to it until it is less than some number of pixels long So this is the idea and the way that this ends up happening in code is if you have a function Whoops that's not how you spell function? in code if you write a function, and you call it something [like] branch a Recursive function in code is defined according to itself meaning somewhere in that function You're going [to] actually call itself. So you're calling the function you're defining from within the function and it results in this word loop [I'm] gonna call Branch which calls branch which calls branch which calls branch and eventually stops at some point So this is the idea of recursion and how it's implemented in code let's go and actually write this code now dare I say I'm a little bit afraid to do this, but let's see what happens [okay], so Okay, so what I have here is a p5.js sketch. P5.js is a Javascript framework Links in the video description of where you can get it and get started with it and the only thing that's going on right now Is that HTML5 Canvas has been created? And I'm drawing a gray background there, so I just want you to be able to see that I'm going to go back [to] over here where I'm running it and you can see what? You can see there's my 400 by 400 pixel background So I [won't] have the trunk of the tree to start with so just to kind of get that going let's draw a line that [goes] from the Center 200 and the bottom two To the center and the bottom [minus] some length So I'm going to make a length variable which starts at A 100 and now and this line I want it to be white and So now if I run this again, you can see okay. [I've] got a lines about so I have the trunk so what I want to do now is Actually put that code That's drawing the trunk into a function so I want to call branch and branch is actually going to draw that line So let's do that. So the next thing. I'm going to do is rake this a function and One thing I want to do with this function is I want to give this function an argument and that argument is How long to draw that branch so I'm actually going to put that variable here in the function, [and] then I'm going to say line 200 height to 100 height minus length so ups So now here. I actually want and I'll just say stroke 255 here now what I want to do is say Branch [I] forgot what I was doing 100 So you can see here that the idea here Same same result is that now I'm calling this function Branch, and I'm giving it the value 100 now. Here's the thing The way that this is going to work is I don't actually want to only come over here, so I want I want to do is actually instead [of] drawing the the trees starting at this bottom location which is 200 comma height I want to move the origin which is here all the way down to here I always want to be drawing the branches relative to the origin by using the Translate P5 function which sort of moves that [zero] zero point around and Once we start doing a little bit [more] of this you'll see why that makes a lot of sense So let me come back over to the code and what I'm going to do is right here. I'm going to say translate to 200 comma [hight] Branch 100 and now this becomes draw a line from 0 a 0 to 0 comma negative length So now if I run this program same exact result so we [have] a very simple beginning We are translating to the bottom. We are drawing a branch from the bottom straight up So what do I want to do next? [I] have drawn a branch from the bottom straight up will guess what I want to do I want to rotate and draw a branch to the right So what I want to do is now, say let me rotate by like I don't know 45 degrees let's start with 45 degrees is Pi divided by 4 and Then let me draw another branch 0 0 0 negative length, [oh] You know what [I] [also] need to translate [ah] so before I write. I I'm down here and I drew The branch like this and now I want to start drawing from here, so after I [finish] drawing the branch I need to translate back up to here Ok so before. I rotate now. I need to translate up 0 comma negative length, so we're drawing that bottom line, we're translating up to the top We're rotating and drawing another line. Let's see what that looks like there we go second Branch now I Want that second branch to be a little bit shorter. So maybe I'll make it 2/3 of its size so multiply it by 0.67 So you can see now. It's a little bit shorter, but have I done anything recursive here yet So am I really going to go and draw every single line of the tree is a separate line function No, what do I actually want to do? I just want to call branch again and what I want to call branch with a slightly shorter Branch now. I'm tempted to run this and I could run this but if I run this I browser is going to crash [most] [likely] let's just try it danger danger. Let's live dangerously [I'm] going to run this So you can see I would we got an error Maxximum call stack size exceeded. So what happened here You can see it started doing it, but it's just like decided it couldn't do it anymore What happened? It's calling branch from within Branch and that's an infinite loop branch calls Branch calls Branch calls Branch Cross Branch So I need to say at some point don't call branch anymore. What every time I call branch length is Shrinking so I could actually just say something like only if length is greater than like four pixels should [I] actually bother calling branch again. So now You can see here I'm drawing the first line And then I'm calling branch again and rotating calling branch again and rotating so and we could see here I could Continuously, I could I could make that angle of rotation a variable so I said it was Pi divided by [four] and I could rotate by I'm going to call that angle actually by an Angle and One thing I could do just so you see is I can I can make a slider. Let's just do this really quickly Slut but there is a P5 in the P5 dom library I can make things like a slider And I want to have a slider from [zero] to 2PI Oops, I can't spell [spell] [2pi], and I [want] [it] to start it. Maybe pi divided by four and then [what] [I] want to do is say in draw angle equals slider dot value so what I what I'm doing Now is if I run this Yep, ah so create slider is not defined probably because I need to actually reference the Dom library in the Index file so now [you] can see Whew oh look at this, so one thing by the way It's working but notice how the slider it can only move up by units of one So one thing that I forgot is there's an argument [there's] an there's a fourth argument Which is the step size for the slider? So [I] want to move it up by like lower increments, and you can see here now I can sort of play with that angle and I can turn What that angle of rotate is for this tree thing, but I've only branched to the right now. There's a couple issues One is this butter if this pie is not defined error on sketch line one. You know what Sort of strange as [looks]? [looks] is that actually this is sort of a Little weird thing but pie is a built-in variable part of the P5 Dom library of the P5 library not the Dom Library and the P5 Library none of its stuff is available in [setup]. Just yet But it doesn't really matter because I'm getting it from the slider So let's change that to zero so I can go back and we can see okay So now I have this tree that [I] can change the angle with this slider You can see all the way from [zero] to 2PI And I probably actually just want to make it from zero to Pi divided by two or whatever But we can change that range later now That's only branching to the right so what if after [I] branch to the right I? also, then rotate by negative Angle and Branch to the left Now really what I want to do is actually have this if statement around all of that So the idea [here] is [that] for every branch. Here's the recursive definition of a branch? draw a line and Then as long as it's still long rotate to the right and draw another line rotate to the left and draw another line and do That for every single branch let's run this it's not going to work, and we'll figure out why It did something kind of interesting and crazy look at this crazy thing now. Do you see what's happening? Everything is connected everything is connected. It's like this What did I do I went like this? like [this] pen [I] went like this and then I branched to the right and then I branched to the left and then I branched to the Right of that until I don't know what I did But [I've] always going whatever that recursive order is I'm always going from where I left off But actually what I want to do is I want to go to here and branch to the right and then they need to come Back here before [I] branch to the left and then this branch is to the right and then come [back] here before [I] branch to The left so the way that I can come back is by using the push and pop functions in P5 Because push is a function that says save the transformation state, so if I move from I translate from here to there And then I say push I save I can draw this to the right then I can say pop to restore and then draw this to the left So if I come back to the code you will see that all I need to do is add a push Right here before I rotate and branch and then also [Anna] pop right after and also around here so the idea here is that for every single branch every single branch is defined as a line and Then when you get to the end of that line you save where you are and branch off to the right restore Where you were and branch off to the left now the way the order of things happen is not Exactly that because once you call branch you're then into the next [one] and then you're the next one then you start popping back all the way I encourage you to try to like do some sort of Acted out physical demonstration or drawing like try to be the computer following all the pushes and pops but you'll see now if I run this I believe it will work and You can see now we have this lovely fractal tree, and I can sort of like change the angle now You know this is only so this is really finished. I've only really scratched the surface here There's a bunch of things that I might encourage you to think about doing number one is can you keep track of? Which level your of the tree you're on and draw the branch with a different thickness using stroke weight, so that's an interesting problem I'd be happy to demonstrate a solution at some point to that you might think [about] well What if the angle isn't the same with all of those branches? What if there is a variable of branches instead of always - always with equal angles Angles and you can see that in this? Google image search for a fractal tree You'll see that you can you know with various other ways of kind of doing this you might be able to get to start to Get different types of more chaotic or out in Some ways organic looking qualities rather than than this very exact perfectly symmetrical Fractal so this concludes this part of just doing this basic fractal tree I'm going to do this again in the next video in another video, but instead of using push and pop and translate I'm actually going to use sine and cosine of some math And you'll see what doing it that way allows you to do something a little bit different which might interest you Based on how you could then modify the tree at a later point, okay? Thanks for watching and I'll see you in another video [maybe] or maybe not Good bye
Very interesting.
Thank you for sharing.
I'll have to check this guys videos out.
That was pretty cool!
I recently began a sales career in SaaS from outside the tech industry - and I'm in love with this video. This turned coding into a very creative and digestible process that I can understand (up to the actual coding part). Thanks for putting out fantastic content.
His tutorials are great, definitely my favorite programming channel . He has a talent for making things easy and understandable
what text editor is he using?