title
Coding Challenge #14: Fractal Trees - Recursive

description
In this coding challenge, I'm implement fractal trees with recursion in p5.js. This is the first part of a series on algorithmic botany. Code: https://thecodingtrain.com/challenges/14-fractal-trees-recursive 🕹ī¸ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/xTjmYXU3q đŸŽĨ Previous video: https://youtu.be/BV9ny785UNc?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH đŸŽĨ Next video: https://youtu.be/fcdNSZ9IzJM?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH đŸŽĨ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH References: đŸŒŋ Algorithmic Botany: http://algorithmicbotany.org/ 📕 My NOC class on Kadenze: https://www.kadenze.com/courses/the-nature-of-code/info Videos: đŸŽĨ Algorithmic Botany Track: https://thecodingtrain.com/tracks/algorithmic-botany 🔴 Coding Train Live 40: https://youtu.be/MwLyeEWnMCY?t=1838s Related Coding Challenges: 🚂 #15 Object-Oriented Fractal Trees: https://youtu.be/fcdNSZ9IzJM 🚂 #174 AppleSoft Basic Fractal Tree: https://youtu.be/UNkHditYGls Timestamps: 0:00 Introducing today's topic 0:39 Recursion 2:51 Exit condition 3:53 Let's Code! 5:03 Branch function 10:06 Add slider 13:25 Push and pop functions 14:42 Conclusion and next steps Editing by Mathieu Blanchette Animations by Jason Heglund Music from Epidemic Sound 🚂 Website: http://thecodingtrain.com/ 👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide 🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box 💡 GitHub: https://github.com/CodingTrain đŸ’Ŧ Discord: https://discord.gg/hPuGy2g 💖 Membership: http://youtube.com/thecodingtrain/join 🛒 Store: https://standard.tv/codingtrain 🖋ī¸ Twitter: https://twitter.com/thecodingtrain 📸 Instagram: https://www.instagram.com/the.coding.train/ đŸŽĨ Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH đŸŽĨ Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA 🔗 p5.js: https://p5js.org 🔗 p5.js Web Editor: https://editor.p5js.org/ 🔗 Processing: https://processing.org 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new #fractals #generativeart #p5js #javascript

detail
{'title': 'Coding Challenge #14: Fractal Trees - Recursive', 'heatmap': [{'end': 877.599, 'start': 853.089, 'weight': 0.703}], 'summary': 'Demonstrates constructing a fractal tree in javascript using recursive functions and math concepts, delving into recursion in code using p5.js, implementing recursive tree drawing, and discussing branch length adjustments, angle variations, and use of push and pop functions in the p5 library.', 'chapters': [{'end': 147.077, 'segs': [{'end': 35.104, 'src': 'embed', 'start': 0.469, 'weight': 0, 'content': [{'end': 2.57, 'text': 'Hello Welcome to another coding challenge.', 'start': 0.469, 'duration': 2.101}, {'end': 7.432, 'text': 'In this coding challenge, I am going to build from scratch in JavaScript a fractal tree.', 'start': 2.61, 'duration': 4.822}, {'end': 9.072, 'text': "And I'm going to do kind of.", 'start': 7.752, 'duration': 1.32}, {'end': 13.834, 'text': "you know, you can see once we've made, once this video is over and I've made one example of it.", 'start': 9.072, 'duration': 4.762}, {'end': 17.375, 'text': 'you can see sort of a variety of images here of things you might be able to make from it.', 'start': 13.834, 'duration': 3.541}, {'end': 24.038, 'text': "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.", 'start': 17.596, 'duration': 6.442}, {'end': 25.619, 'text': "But let's just get started.", 'start': 24.358, 'duration': 1.261}, {'end': 29.741, 'text': "First, let me just draw you a diagram so that we can kind of understand what's going on.", 'start': 25.819, 'duration': 3.922}, {'end': 35.104, 'text': 'So the core idea of a fractal tree is we have a recursive definition.', 'start': 30.001, 'duration': 5.103}], 'summary': 'Coding challenge to build a fractal tree in javascript with follow-up videos on tree generation techniques.', 'duration': 34.635, 'max_score': 0.469, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0jjeOYMjmDU/pics/0jjeOYMjmDU469.jpg'}, {'end': 161.075, 'src': 'embed', 'start': 130.564, 'weight': 1, 'content': [{'end': 132.685, 'text': 'This is a branch, and it has two branches attached.', 'start': 130.564, 'duration': 2.121}, {'end': 136.088, 'text': 'Oh, but these are also branches, so they have two branches attached.', 'start': 133.106, 'duration': 2.982}, {'end': 139.471, 'text': 'Oh, and these are all also branches, so they have two branches attached.', 'start': 136.569, 'duration': 2.902}, {'end': 143.775, 'text': 'Oh, oh, and these are all also branches, and they have two branches, et cetera, et cetera, et cetera.', 'start': 139.771, 'duration': 4.004}, {'end': 147.077, 'text': 'So a branch is defined as something that has two branches, and those have branches.', 'start': 143.975, 'duration': 3.102}, {'end': 148.418, 'text': 'This is known as recursion.', 'start': 147.258, 'duration': 1.16}, {'end': 157.494, 'text': '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.', 'start': 149.352, 'duration': 8.142}, {'end': 161.075, 'text': 'And these branches are getting shorter and shorter, and they would get infinitely small.', 'start': 157.794, 'duration': 3.281}], 'summary': 'Branches with two branches attached exhibit recursive behavior, potentially leading to infinite subdivision.', 'duration': 30.511, 'max_score': 130.564, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0jjeOYMjmDU/pics/0jjeOYMjmDU130564.jpg'}], 'start': 0.469, 'title': 'Constructing a fractal tree in javascript', 'summary': 'Explains the recursive definition of a fractal tree in javascript and its relationship to math functions like factorial, with a demonstration of branch visualization.', 'chapters': [{'end': 147.077, 'start': 0.469, 'title': 'Fractal tree in javascript', 'summary': 'Covers the construction of a fractal tree in javascript, explaining the recursive definition and its relationship to math functions like factorial, with a demonstration of how branches are defined and visualized.', 'duration': 146.608, 'highlights': ['The chapter covers the construction of a fractal tree in JavaScript The main focus of the chapter is on building a fractal tree using JavaScript.', "Explaining the recursive definition and its relationship to math functions like factorial The chapter explains the concept of a recursive definition and its relevance to math functions like factorial, showcasing how it's defined in terms of itself.", 'Demonstration of how branches are defined and visualized The chapter visually demonstrates the definition of branches in a fractal tree, showing how each branch is defined as having two branches attached.']}], 'duration': 146.608, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0jjeOYMjmDU/pics/0jjeOYMjmDU469.jpg', 'highlights': ['The chapter covers the construction of a fractal tree in JavaScript.', 'Explaining the recursive definition and its relationship to math functions like factorial.', 'Demonstration of how branches are defined and visualized.']}, {'end': 473.124, 'segs': [{'end': 274.9, 'src': 'embed', 'start': 228.599, 'weight': 1, 'content': [{'end': 232.002, 'text': "Dare I say, I'm a little bit afraid to do this, but let's see what happens.", 'start': 228.599, 'duration': 3.403}, {'end': 237.067, 'text': 'Okay, so what I have here is a p5.js sketch.', 'start': 232.122, 'duration': 4.945}, {'end': 239.088, 'text': 'p5.js is a JavaScript framework.', 'start': 237.087, 'duration': 2.001}, {'end': 242.912, 'text': 'Links in the video description of where you can get it and get started with it.', 'start': 239.649, 'duration': 3.263}, {'end': 248.577, 'text': "And the only thing that's going on right now is that an HTML5 canvas has been created, and I'm drawing a gray background there.", 'start': 243.212, 'duration': 5.365}, {'end': 250.019, 'text': 'So I just want you to be able to see that.', 'start': 248.778, 'duration': 1.241}, {'end': 252.701, 'text': "I'm going to go back to over here where I'm running it, and you can see, whoop.", 'start': 250.279, 'duration': 2.422}, {'end': 256.264, 'text': "You can see there's my 400x400 pixel background.", 'start': 253.762, 'duration': 2.502}, {'end': 259.887, 'text': 'So I want to have the trunk of the tree to start with.', 'start': 256.545, 'duration': 3.342}, {'end': 274.9, 'text': "So just to kind of get that going, let's draw a line that goes from the center, 200, and the bottom to the center and the bottom minus some length.", 'start': 260.148, 'duration': 14.752}], 'summary': 'Demonstrating p5.js sketch on 400x400 pixel canvas.', 'duration': 46.301, 'max_score': 228.599, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0jjeOYMjmDU/pics/0jjeOYMjmDU228599.jpg'}, {'end': 339.121, 'src': 'embed', 'start': 305.88, 'weight': 3, 'content': [{'end': 308.082, 'text': "So the next thing I'm going to do is rate this a function.", 'start': 305.88, 'duration': 2.202}, {'end': 314.133, 'text': 'And one thing I want to do with this function is I want to give this function an argument.', 'start': 309.992, 'duration': 4.141}, {'end': 317.574, 'text': 'And that argument is how long to draw that branch.', 'start': 314.433, 'duration': 3.141}, {'end': 321.415, 'text': "So I'm actually going to put that variable here in the function.", 'start': 317.914, 'duration': 3.501}, {'end': 326.736, 'text': "And then I'm going to say line 200 height, 200 height minus length.", 'start': 321.715, 'duration': 5.021}, {'end': 339.121, 'text': "So now here, I'll just say stroke 255 here.", 'start': 334.338, 'duration': 4.783}], 'summary': 'Creating a function to draw branches with a specified length.', 'duration': 33.241, 'max_score': 305.88, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0jjeOYMjmDU/pics/0jjeOYMjmDU305880.jpg'}, {'end': 418.574, 'src': 'embed', 'start': 385.416, 'weight': 0, 'content': [{'end': 388.757, 'text': "And once we start doing a little bit more of this, you'll see why that makes a lot of sense.", 'start': 385.416, 'duration': 3.341}, {'end': 390.618, 'text': 'So let me come back over to the code.', 'start': 389.017, 'duration': 1.601}, {'end': 396.36, 'text': "And what I'm going to do is right here, I'm going to say translate to 200 comma height.", 'start': 391.258, 'duration': 5.102}, {'end': 407.109, 'text': 'Branch 100, and now this becomes draw a line from zero to zero comma negative length.', 'start': 398.661, 'duration': 8.448}, {'end': 416.232, 'text': 'So now if I run this program, same exact result.', 'start': 412.509, 'duration': 3.723}, {'end': 418.574, 'text': 'So we have a very simple beginning.', 'start': 416.593, 'duration': 1.981}], 'summary': 'Demonstrating code to translate and draw lines, achieving simple results.', 'duration': 33.158, 'max_score': 385.416, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0jjeOYMjmDU/pics/0jjeOYMjmDU385416.jpg'}], 'start': 147.258, 'title': 'Recursion and drawing tree branches in code', 'summary': 'Delves into recursion in code, stressing the importance of an exit condition and showcasing its implementation with a recursive function in p5.js. it also covers drawing tree branches through function definition, translate, rotate functions, and line length specification, with an emphasis on visualizing tree structures and angles.', 'chapters': [{'end': 248.577, 'start': 147.258, 'title': 'Recursion in code', 'summary': 'Explains the concept of recursion in code, emphasizing the need for an exit condition, and discusses its implementation using a recursive function with an example in p5.js.', 'duration': 101.319, 'highlights': ['Recursion is explained as the concept of a function calling itself, resulting in a loop that continues until an exit condition is met. The chapter emphasizes the concept of recursion as a function calling itself until an exit condition is met, ensuring the termination of the loop.', 'The importance of an exit condition in recursion is highlighted, with the example of stopping the multiplication for a factorial when it reaches 1. The need for an exit condition in recursion is illustrated through the example of stopping the multiplication for a factorial when it reaches 1, emphasizing the practical application of termination in recursive processes.', 'The implementation of recursion in code is discussed, emphasizing the usage of a recursive function that calls itself within the function. The implementation of recursion in code is explained, stressing the usage of a recursive function that calls itself within the function, resulting in a loop that terminates when a specific condition is met.', 'The example of implementing recursion in p5.js, a JavaScript framework, is provided, showcasing the creation of an HTML5 canvas and drawing a gray background. An example of implementing recursion in p5.js, a JavaScript framework, is presented, demonstrating the creation of an HTML5 canvas and drawing a gray background as a practical application of recursion in code.']}, {'end': 473.124, 'start': 248.778, 'title': 'Drawing tree branches using code', 'summary': 'Illustrates the process of drawing tree branches by defining functions, utilizing translate and rotate functions, and specifying line lengths in a coding environment, with a focus on visualizing the tree structure and angles.', 'duration': 224.346, 'highlights': ['The code demonstrates drawing a line to represent the trunk of the tree, starting at the center and bottom, with a length variable set at 100, resulting in a visible trunk. A line is drawn from the center, 200, and the bottom to the center and the bottom minus a length of 100, representing the trunk of the tree.', "The function 'branch' is introduced to encapsulate the code responsible for drawing the trunk, and an argument specifying the length of the branch is incorporated into the function. The code for drawing the trunk is encapsulated in a function named 'branch', with an argument for the length of the branch, enabling reusability and customization of branch length.", "The concept of translating the origin using the 'translate' function to draw branches relative to a different starting point is explained, emphasizing the use of the 'translate' function for positioning. The origin is translated to 200, height, allowing the drawing of branches relative to this new origin position, showcasing the importance of using the 'translate' function for positioning.", 'The process of rotating and drawing a branch to the right after drawing a branch upwards is demonstrated, involving the use of rotation and translation in conjunction with drawing functions. After drawing a branch from the bottom upwards, the rotation by 45 degrees is applied to draw another branch to the right, showcasing the use of rotation and translation to create the tree structure.']}], 'duration': 325.866, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0jjeOYMjmDU/pics/0jjeOYMjmDU147258.jpg', 'highlights': ['The implementation of recursion in code is explained, stressing the usage of a recursive function that calls itself within the function, resulting in a loop that terminates when a specific condition is met.', 'The importance of an exit condition in recursion is highlighted, with the example of stopping the multiplication for a factorial when it reaches 1, emphasizing the practical application of termination in recursive processes.', "The concept of translating the origin using the 'translate' function to draw branches relative to a different starting point is explained, emphasizing the use of the 'translate' function for positioning.", 'The process of rotating and drawing a branch to the right after drawing a branch upwards is demonstrated, involving the use of rotation and translation in conjunction with drawing functions.']}, {'end': 952.275, 'segs': [{'end': 738.995, 'src': 'embed', 'start': 710.654, 'weight': 1, 'content': [{'end': 713.696, 'text': "Now, that's only branching to the right.", 'start': 710.654, 'duration': 3.042}, {'end': 727.744, 'text': 'So what if, after I branch to the right, I also then rotate by negative angle and branch to the left?', 'start': 714.236, 'duration': 13.508}, {'end': 733.168, 'text': 'Now, really, what I want to do is actually have this if statement around all of that.', 'start': 729.304, 'duration': 3.864}, {'end': 738.995, 'text': "So the idea here is that for every branch, here's the recursive definition of a branch.", 'start': 733.789, 'duration': 5.206}], 'summary': 'Recursive branch definition with right and left rotation.', 'duration': 28.341, 'max_score': 710.654, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0jjeOYMjmDU/pics/0jjeOYMjmDU710654.jpg'}, {'end': 815.937, 'src': 'embed', 'start': 787.942, 'weight': 0, 'content': [{'end': 794.786, 'text': 'But actually what I want to do is I want to go to here and branch to the right, and then I need to come back here before I branch to the left.', 'start': 787.942, 'duration': 6.844}, {'end': 798.468, 'text': 'And then this branches to the right, and then come back here before I branch to the left.', 'start': 795.126, 'duration': 3.342}, {'end': 808.953, 'text': '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.', 'start': 799.128, 'duration': 9.825}, {'end': 815.937, 'text': 'So if I translate from here to there and then I say push, I save, I can draw this to the right.', 'start': 809.293, 'duration': 6.644}], 'summary': 'Describing a branching process using push and pop functions in p5.', 'duration': 27.995, 'max_score': 787.942, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0jjeOYMjmDU/pics/0jjeOYMjmDU787942.jpg'}, {'end': 887.063, 'src': 'heatmap', 'start': 853.089, 'weight': 3, 'content': [{'end': 860.155, 'text': 'I encourage you to try to do some sort of acted out physical demonstration or drawing, like try to be the computer following all the pushes and pops.', 'start': 853.089, 'duration': 7.066}, {'end': 862.618, 'text': "But you'll see now if I run this, I believe it will work.", 'start': 860.436, 'duration': 2.182}, {'end': 869.355, 'text': 'And you can see now we have this lovely fractal tree and I can sort of like change the angle.', 'start': 864.113, 'duration': 5.242}, {'end': 872.837, 'text': 'Now, you know, so this is really finished.', 'start': 870.136, 'duration': 2.701}, {'end': 874.738, 'text': "I've only really scratched the surface here.", 'start': 872.857, 'duration': 1.881}, {'end': 877.599, 'text': "There's a bunch of things that I might encourage you to think about doing.", 'start': 875.038, 'duration': 2.561}, {'end': 885.942, 'text': "Number one is can you keep track of which level of the tree you're on and draw the branch with a different thickness using stroke weight.", 'start': 877.639, 'duration': 8.303}, {'end': 887.063, 'text': "So that's an interesting problem.", 'start': 885.982, 'duration': 1.081}], 'summary': 'Encourages physical demos, demos fractal tree, suggests tracking tree levels, and varying branch thickness.', 'duration': 33.974, 'max_score': 853.089, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0jjeOYMjmDU/pics/0jjeOYMjmDU853089.jpg'}], 'start': 473.525, 'title': 'Drawing recursive and fractal trees', 'summary': 'Covers the process of drawing recursive trees and fractal trees, discussing branch length adjustments, infinite loops, angle variations, branching to the right and left, and the use of push and pop functions in the p5 library.', 'chapters': [{'end': 562.982, 'start': 473.525, 'title': 'Recursive tree drawing', 'summary': 'Demonstrates the process of drawing a recursive tree, adjusting branch lengths and discussing the concept of infinite loops while running the code.', 'duration': 89.457, 'highlights': ['The chapter discusses the process of drawing a recursive tree and adjusting the branch length by multiplying it by 0.67. Demonstrates the adjustment of branch length by multiplying it by 0.67.', "The chapter explains the concept of infinite loops resulting from calling a function within itself, leading to a maximum call stack size exceeded error. Discusses the concept of infinite loops and the error message 'Maximum call stack size exceeded.'", 'The chapter emphasizes the need to set a condition to stop the recursive function calls, such as checking if the length is greater than four pixels. Emphasizes the importance of setting a condition to stop recursive function calls, e.g., checking if the length is greater than four pixels.']}, {'end': 952.275, 'start': 563.383, 'title': 'Fractal tree drawing', 'summary': 'Demonstrates drawing a fractal tree in the p5 library, allowing the user to vary the angle of rotation and explore branching to the right and left, with the use of push and pop functions to manage the recursive branching.', 'duration': 388.892, 'highlights': ['Drawing a fractal tree by rotating and branching, with the ability to vary the angle of rotation using a slider and exploring branching to the right and left.', 'Utilizing the push and pop functions to manage the recursive branching and maintain the structure of the fractal tree.', 'Discussing potential further explorations, such as implementing different stroke weights for branches at varying levels and experimenting with variable numbers of branches and angles.']}], 'duration': 478.75, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0jjeOYMjmDU/pics/0jjeOYMjmDU473525.jpg', 'highlights': ['Covers the process of drawing recursive trees and fractal trees, discussing branch length adjustments, infinite loops, angle variations, branching to the right and left, and the use of push and pop functions in the p5 library.', 'The chapter emphasizes the need to set a condition to stop the recursive function calls, such as checking if the length is greater than four pixels.', 'Utilizing the push and pop functions to manage the recursive branching and maintain the structure of the fractal tree.', 'Drawing a fractal tree by rotating and branching, with the ability to vary the angle of rotation using a slider and exploring branching to the right and left.', 'The chapter discusses the process of drawing a recursive tree and adjusting the branch length by multiplying it by 0.67.']}], 'highlights': ['Covers the process of drawing recursive trees and fractal trees, discussing branch length adjustments, infinite loops, angle variations, branching to the right and left, and the use of push and pop functions in the p5 library.', 'The chapter emphasizes the need to set a condition to stop the recursive function calls, such as checking if the length is greater than four pixels.', 'The implementation of recursion in code is explained, stressing the usage of a recursive function that calls itself within the function, resulting in a loop that terminates when a specific condition is met.', "The concept of translating the origin using the 'translate' function to draw branches relative to a different starting point is explained, emphasizing the use of the 'translate' function for positioning.", 'Drawing a fractal tree by rotating and branching, with the ability to vary the angle of rotation using a slider and exploring branching to the right and left.']}