Coding Challenge #15: Fractal Trees - Object Oriented

Coding Challenge #15: Fractal Trees – Object Oriented



Views:165518|Rating:4.96|View Time:22:59Minutes|Likes:2711|Dislikes:22
In this Coding Challenge, I continue the topic of algorithmic botany with another way of generating a tree. With this method, every part of the tree will be an object, so that we can apply forces and attributes to each element

Support this channel on Patreon:

Send me your questions and coding challenges!

Contact:

Links discussed in this video:
Nature of Code class on Kadenze:
Algorithmic Botany:

Source Code for the Video Lessons:

p5.js:
Processing:

For More Algorithmic Botany Videos:

For More Coding Challenges:

Help us caption & translate this video!

📄 Code of Conduct:

Hello welcome to another coding challenge this one is a follow up on a Previous the previous fractal tree coding challenge one of the first things that people often ask me when they first see a fractal tree is oh I want it to grow from the bottom so how do you have it grow from the bottom this is also the same question as Oh, I want to put leaves on it, and then have the leaves fall So while the fractal demonstration I did in the previous video is a good demonstration and a useful technique you might need a different way of creating the tree to be able to do more types of animation like things with it and that the way of doing that is [to] Rather than draw the tree all at once in a recursive function is to actually build the tree out of objects so what I need In the tree [that's] over here. I'll just use this as my reference is I want to create an object That's a branch object and the branch object only needs two things It needs a start point and an end point and a display function that just draws itself there So let's look and I'm going to build from the previous code and I'm going to just from scratch take the previous code which draws This fractal tree and change it into something that uses an object object branch objects and an array okay, so let me go back to the code and Here we are and the one of the first things. I'm going to do actually is just create a new Javascript file I'm using the atom editor with the p5.js Javascript framework, but there's lots of different ways you could program this And I'm going to say new file, and I'm going to call this new file Branch Dot [J/S]. And then I'm going to go into Index dot html and make sure I include a reference to Branch [J/S]. So now I have two Javascript files I can work with and what I'm going to do in branch is is I'm going to write a constructor function Called Branch, and what Branch needs is when you create a branch. It needs a start and an end There's actually different ways of doing this which we'll see later And I'm just going to call on I'm going to say this dot start equals start and this dot end equals end So the first thing I need to do now start so one of the things that often happens which one of these is colored weirdly Start is so it looks like start is maybe a coding in Javascript for something else It shouldn't really here, but I'm just going to call this then beginning Begin and end just to kind of get get away from that okay So that's the branch a branch object, and I know I could use like a some you were like watching this doing [oh], maybe you should use a [javascript] object literal and I could do that, too But I'm kind of using this constructor function because I'm going to add more to it. You'll see hopefully later well that's kind of a what another way of doing it that could be useful [so] I'm going to go back to the code and right here when I first call this branch function What happened in the in the first program is I translate to the bottom call the branch function which draws a line, but instead? What I want to do is say I'm going to make a I'm going to make something called or I'm going to make a variable [called] root Which is the root of the tree and I'm going to say it's a new branch which goes from where? the center of the screen with divided by two to Where like the width divided by two height? [oh], so? So I'm doing stuff and just programming and like I got lost in my thoughts for a second. You know what I really need is Interestingly enough let's go back and look at this I said oh, there's just two things involved in this branch a beginning and an end but what are those things the beginning and the end those things are points with an x and a [y] and One way that [I] can store a point in A in P5.js is using a vector Object a P5 vector object which is an object that has its own x and a y So what I'm actually going to do is I'm going to say I'm going to be very long-winded About this just to be quite explicit and say a equals create vector, and I'm going to make a vector That's at the bottom of the window With divided by 2 comma height and then I'm going to say B Is a vector that? is also in the middle but not at the bottom it's at the bottom [minus] this length, or [100-100] and then I'm going to make a branch Which is goes from a to b? And then what I want to do actually don't need this whole recursive function anymore And oh this should be in [setup] by the way, and I'm going to I'm going to get rid of this slider We can come using a slider later Because I'm starting from scratch and in draw. I'm Gonna say root Dot show what I want to do is take that. Oh, and this should [this] needs to be a global variable So what I'm trying to demonstrate right now is I can make a single branch object which is just the root of the tree and I can display that root and so I need a function called show and So I'm going to add a function called show and all that show does is stroke 255 draw a line from this stop beginning dot x this stuff beginning dot y to this end x This N Dot y, so you're going to see here that a branch Sorry a branch is just an object that has a beginning and an end point And it's displayed as a line between those two points so now if I come back to [here] and run this again You can see there's our first print. So we kind of double back. We're doing the same thing We did before but in a different way, [okay]? So let's think about now now. Here's the thing what I need is For every Branch to spawn two branch objects attached to it hmm How are we going to do that so one thing? I need actually is I going to have more than one branch So I need an array so I can what what the tree essentially is I? Don't need this root anymore. I'm going to say I'm going to make a variable [called] tree and tree is just an Array, so it's an empty array, and then this root is the first thing that goes in the tree and then And I know that camera just went off while in the middle of my typing. I'm going to put it back on in the middle of what I'm going to do is then draw All of the trees so now my structure is I have an empty array. I create the root of the tree I Put the root in the array, and then I display the array and once again. Oh, but by missing a curly bracket Once again, [I] still have that one root now Now comes the time where I can attach to that root two more branches, so how can I do that? Well one way that I could do that would be to add a function this branch object What is this branch object how to function within itself that would new where its end is and new how to spawn two more? Branches from that end so let's look at that, so I'm going to go back to this branch object And I'm going to write a function called And I'm actually just going to call it a branch [I] Don't know if I have a naming conflict anywhere I'm going to write a function called Branch and what that function is going to do is it is going to create? two additional branch objects attached to this branch object so how do I do that so So I'm going to call it the right branch is a new branch I hear voices [somebody] might be coming Who knows? There's something there. [I] don't know I lost my I started think about west side story one of my favorite musicals Simply people here hurt and I lost my train of thought okay. I need to make a branch ah so where does the Let's think about. I need a diagram. Let me come over here okay, so if I erase this diagram How am I doing this I have? This branch this is begin This is end. Now. I need a new branch, so this new Branch [its] begin point is the previous end point and Now and then I need to calculate. Where is it new? [where] is its new end point and the way that I might do [that] is by? Rotating this line, so I'm going to need to use some trigonometry in math for that, okay. We're going to get there We're gonna get there boy. This is hard to do without having just done it You know like just to do this from scratch on the fly okay, [okay]? So let's see new Branch so what I want to do is the new branch is going to start at the previous branches end and Now I need to fill in where it ends. So how can I do that? well one thing I can do is I can make [a] vector that [is] the direction of This particular branch right? I need it. What if I have a vector that? points From here to there a vector being an arrow That points from here to there and the way that I can make that vector is by taking this point and subtracting this point So I want to create a direction vector and say [P5] dot vector. Dot subtract. I want to subtract the [end] from the beginning so now I have a vector that points from the bottom to the top of that branch and One of the nice things about vectors is they actually have a rotate function built it to them So what if I were to [rotate] that vector by some angle like? 45 Degrees or Pi Divided by 4 and Then what if I were to? create a new Endpoint new end, and I would say the new end point is where it is add the Endpoint of the Previous vector with the Direction So in other words what I'm saying is we come back over here again [is] I? Now have this vector wrong wrong side of this pen [I] now have this vector ok and then what I want to do is take this vector and rotate it By 45 degrees and then I want to add this vector here So this is the new [endpoint], so this is the beginning and this is the [endpoint] and that's my branch so now I Can say the new Branch goes from this dot end to the new end. That's to the right? Okay, so let's see how this works, so let me now go back to the main program, and I'm going [to] say I'm going [to] say a new branch equals root, Branch [oh] What am I I need to do something? So once I have that? new Branch [I] need to return [it], so [I] need to return [it] so that I can get it and And then what I can do is say tree index 1 equals New Branch so the zero index of the array is the root and then the next spot in the array is this new Branch that came out of the root Perfect look now. I have both of those now. I could probably cleverly Create both of them in this function, and then return both of them as an array and then add both of them But I'm actually just going to do. I'm just going to call this function branch a I'm gonna do something kind of lazy and just make a function Branch B And rotate the other direction, and you know I'm just going to call this v or b this is to the right and This is to the left, so I'm just going to have to again. You know good programming exercise for you It is like how can you combine this into one function? Maybe you just pass in the angle, but just to be lazy and explicit for a second I'm just going to have these duplicate functions the only thing is different is one is rotating to the right one is rotating to the [left] and I can go back. Sorry I can go back to the main program and I can say branch a and I'm actually just going to combine this a tree index one is branch a and Tree Index 2 is Root Branch B So now you can see this particular branch has two branches attached to it. Okay things are going well now Now one thing that I want to do is remember. I want to shrink the branches each time they're attached So let's go back into this function here this Direction vector should also be multiplied by 0.67 in Order to Shrink it a little bit And now you can see that it is now Shrunk So what I have now [is] I create a single branch object and it spawns to other branches I need a mechanism for then having those two other branches spawn two more branches and two more branches And maybe what I'll do is every time [I] click the mouse I add two more branches, so let's figure out how we would do that So let me go to sketch, and I'm going to take this out, and I'm just going to say Function mousepressed global and and put this here so in mouse press them and add those two branches So now two branches click the mouse [o] root is not defined So I'm going to say tree the thing that's global is the array Tree Index 0 tree index 0 so I'm going to add those two branches And now I'm Gonna Click the mouse Two branches there we go [ok] so I'm getting somewhere. I'm getting somewhere now I have this ability to take an existing element of the array and add to it So what I really want to do is not do it manually like this, but what I want to say is hey Anything that's in [the] array There are some number of branches in the array What I want to do for everything that's in the array I want to tree at so one way to add something to raise with the push function. I want to add Tree Index Index I branch a and Tree Index I branch B. So this is now an automatic way of saying whatever is in the array currently go through everything in the array and add to the array with branches from the Things that are the [Iraq] now there are some problems here problem number one is If [I'm] trying to loop through an array like I'm looping here So here's the beginning of the right here's the event end of the array and I'm looping through it And I'm adding things to it so as I'm going through the array the array is growing I'm never going to get to the end so one way to solve this would be to say to actually start from the end of the array and go down to 0 This way I can add things to the like I'm going backwards through the array and new things can get added to the end that Will then get ignored so this should actually work and I'm going to run this you can see I can click and then I can click and then I can click and then I can click so that's Actually happening now each time I click Everything that's in the array gets two extra branches, but one thing that you might not be noticing here is that This particular [root] has been there every single cycle So every time I go through that or [right] it gets to new branches So there are multiple multiple new branches being added over and over again in the same spot Which is very unnecessary [so] one thing that I [think] would be useful to do is in the branch object I? Could add a variable like I'm Gonna call it grown or finish I'll just call it finished, and it's going to finish it's going to be false [and] In the branched function you know let's say. I'm just [going] to say this dot finished equals true, so whenever And you know maybe I'm going to actually I since I have this branch a and Branch B I'm just going to do it out [here], so I'm going to say a tree index. I dot finished equals true So [what] I'm going to do is every time a tree? Branches I'm going to say finished is true, and then I want to make [sure] if it's if tree index [I've] finished Only if tree Index the tree is not finished Should I actually add those branches so now? You can see every time [I] click the mouse. I'm adding branches now this might [not] seem very exciting to you Because ultimately [all] [I] have here is exactly what I had before But [the] difference is I actually have an array of objects and all of those objects Store their location dynamically where they are so there's no reason why I couldn't do weird things like In the branch function in in in branch. I could say I'm going to write a function called Jitter and I'm going to say this dot n. Dot x plus equal Random Negative 1 1 this n. Dot y plus equal random negative 1 one one so one thing I'm going to do is I'm going to add this jitter function in Draw and I'm going to say tree show and Tree Index eye jitter So now if I run this you can see look at this. It's animating and as I click Those are all animating and shaking and doing weird random things, so I'm not suggesting. This is like a great result Because I don't know what I have here. I have this random shaking weird tree But you could imagine what if you did something a bit more thoughtful? You were changing colors based on some logic, or maybe you were swaying with perlin noise Or you applied some spring forces or a physics based system to the tree boy? I really wanted somebody remind me [someday] To do a video where we take this tree and actually attach spring forces to all of it So it can you could sort of like pull on it and just goes blue You know all [Springy] back into place or something that's always a nice [demonstration] So this opens up a lot of possibilities it also opens up one last possibility that I want to show you in this particular video So I'm going to turn off the jittering and what I'm going to do is I am going to say I'm going to keep track of a counter and I'm going to just every time I'm Going to say a count plus plus and what I want to do is say if count Equals equals five so if I've generated five generations of the tree what I want to do is say for Var I equals zero I is less than tree length I plus plus What I want to do is I'm going to make a I'm going to make leaf objects, so I want to create an array called leaves and then what I'm going to do is say for all of those last branches if The and when I get to five any branch that hasn't branches at the end what I want to do is Make a leaf Where do I want to make that leaf? [I] want to make the leaf at that [branch's] end? point [and] You know what? I don't even need to say create vector because it is a vector tree index. I dot and Dot copy so I want to go and grab that end point of that branch and make a copy of it And then [I'm] going to say leaves dot push that leaf So now in draw I can also Loop through all [of] the leaves and I can say now I could make [loot]. I should make the leafs an object the leaves the [leat]. I'm going to make some purplish leaves And I'm going to just make them circles. You can be more creative [Top] y So we should get now let's run this Everyone to like zero [weight] one two three four five so you see [like] So let's do a couple things One is let's make that angle where did I decide what the angle is the [angle] is right here? It's kind of like hard-coded in so this by the way would be nice to make a variable Maybe it could be slightly random that could be the thing that's changing, but oh and I did something interesting so I for some reason I'm going a different angle to each side which is kind of nice and Let's go in sketch. Let's actually go up to six levels and let's Let's say no stroke for the leaves and give it some alpha also So you can see I now have little leaves at the end of the tree and what's exciting about This is they aren't just circles on the screen those are all vector objects and what I could actually do if you go look at Any of my other nature of code tutorials? I could treat those as particles that would fall with the wind or something like that and just to sort of show very very briefly What I could do right now Is I could move all the leaves by some random amount in the Y-Direction So once I get up to six you can see they're falling now again I have made a really trivial Whoops this is a trivial result You know I don't I don't like necessarily that that That doesn't look like a very nice Glowing beautiful physics movement, but you in thinking about color and thinking about motion all sorts of possibilities You could have the branches be swaying you could have a gust of wind some of the leaves fall some don't what if you have? A program where you shake the tree and the leaves fall off And they don't all fall off at the same time all The possibilities are now open to you because the the fractal wasn't drawn through a single recursive function But rather was drawn as a set of objects with position vectors so all of those things could be manipulated after the fact Thanks for watching this video. If you make something with this, please let me know and I'll [see] you in the next one

22 Replies to “Coding Challenge #15: Fractal Trees – Object Oriented”

  1. Moz

    Hey, inspired by your fractal tree videos I have made a fractal forest… video can be seen here: https://www.youtube.com/watch?v=2HItvAEO29c and the code is on GitHub (link in description of video) Added in a natural disaster to reset the forest occasionally. Some bugs which could be looked at and plenty more that could be done but thought it was pretty cool so thought worth sharing 🙂 All done in processing.

  2. Making Tech Friendly

    I am unsure what's wrong with my code but enabling jitter or adding leaves adds extra branches/leaves to the previous branch too

  3. Saad el harchi

    i actually made in python a function that draws an oval and gives ir a random color between brown orange red and pink and a rondom angle wich makes the tree look supper realistic

  4. swaraj adhikary

    i dont under stand how those branches are staying conneceted if we are randomizing the only the end of the lines.
    there is no code connecting the all the branches that tell each other that their previous branch end point is what the begin point of current point.

  5. K1naku5ana3R1ka

    Why does this video have custom-typed Spanish subtitles, while English speakers only get the useless auto-generated subtitles? Now if you couldn’t offer any subtitles other than the auto-captions, that would be fine, but the presence of Spanish ones is really odd.

  6. Matteo Barberis

    what do you mean when you say that all those branches store their location dynamically? i've tried to do the same with processing but the when i try to jitter the branches they go where they want without staying attached to each other because their position is not updated.

  7. Tonchete

    Managed to make it change color with each click! Might be easy, but its not when you have no idea about codding.
    Thanks alot for this videos, well explained and fun to watch, perfect for summer nights.

  8. Vladimir Egay

    16:56 I might be wrong but shouldn't you put "tree[i].finished = true" inside of the "if" statement. Cause after you add branches it is finished!?

Leave a Reply

Your email address will not be published. Required fields are marked *