title
Coding Challenge #16: L-System Fractal Trees
description
In this third installment of my series on algorithmic botany, I discuss L-systems and how they can be used to generate trees and other fractal patterns in p5.js. Code: https://thecodingtrain.com/challenges/16-l-system-fractal-trees
đšī¸ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/QmTx-Y_UP
đĨ Previous video: https://youtu.be/fcdNSZ9IzJM?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ Next video: https://youtu.be/kKT0v3qhIQY?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
References:
đ L-systems: https://en.wikipedia.org/wiki/L-system
đŋ 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=5420s
Related Coding Challenges:
đ #14 Recursive Fractal Trees: https://youtu.be/0jjeOYMjmDU
đ #123 Chaos Game: https://youtu.be/7gNzMtYo9n4
đ #174 AppleSoft Basic Fractal Tree: https://youtu.be/UNkHditYGls
Timestamps:
0:00 Introducing today's topic: L-systems
0:57 The elements of an L-system
4:12 Let's Code!
4:42 Add rules
6:22 Write a generate function
8:46 Create a button
12:32 Use a particular L-system
13:32 Read the text and draw to the screen
14:19 Write a turtle function
18:08 Translate to the bottom, middle of the screen
20:08 Add an angle variable
21:11 Add some alpha
21:30 Conclusion and suggestions for your own version
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
#fractaltrees #lsystem #javascript #p5js #processing
detail
{'title': 'Coding Challenge #16: L-System Fractal Trees', 'heatmap': [{'end': 769.439, 'start': 750.167, 'weight': 1}], 'summary': 'Explores l-systems, covering javascript implementation, sentence generation, p5 dom integration, turtle graphics, and drawing lines, aiming to create complex graphical patterns and promote experimentation in coding.', 'chapters': [{'end': 329.319, 'segs': [{'end': 46.163, 'src': 'embed', 'start': 17.456, 'weight': 3, 'content': [{'end': 23.399, 'text': 'I want to define what an L system is, look at how the algorithm works and then build the code for rendering an L system from scratch.', 'start': 17.456, 'duration': 5.943}, {'end': 26.383, 'text': 'Okay, so what is an L system?', 'start': 24.099, 'duration': 2.284}, {'end': 35.956, 'text': 'The L stands for Lindenmeier, for Aristide Lindenmeier, a Hungarian botanist who developed this algorithm for modeling cellular growth.', 'start': 27.124, 'duration': 8.832}, {'end': 41.041, 'text': 'So how, what is, You can read more about L systems.', 'start': 36.337, 'duration': 4.704}, {'end': 46.163, 'text': "I've got the sort of Wikipedia page here as a reference, But what I'm going to do is just kind of define for you the guts of it.", 'start': 41.102, 'duration': 5.061}], 'summary': 'Defining l system, algorithm, and coding for rendering. l stands for lindenmeier, developed by hungarian botanist aristide lindenmeier.', 'duration': 28.707, 'max_score': 17.456, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E1B4UoSQMFw/pics/E1B4UoSQMFw17456.jpg'}, {'end': 149.871, 'src': 'embed', 'start': 111.666, 'weight': 0, 'content': [{'end': 120.511, 'text': 'so an L system is a recursive way of generating sentences over and over again using string replacement.', 'start': 111.666, 'duration': 8.845}, {'end': 132.217, 'text': 'So this is the set of elements in the L system and we start with the axiom A and this is generation 0 and in generation 1 we apply these rules to it.', 'start': 120.991, 'duration': 11.226}, {'end': 134.338, 'text': 'A becomes AB.', 'start': 133.297, 'duration': 1.041}, {'end': 136.519, 'text': 'A becomes AB.', 'start': 135.218, 'duration': 1.301}, {'end': 139.62, 'text': 'And now we do this again.', 'start': 137.499, 'duration': 2.121}, {'end': 140.661, 'text': 'I have generation 2.', 'start': 139.64, 'duration': 1.021}, {'end': 149.871, 'text': 'AB A becomes AB, B becomes A.', 'start': 140.661, 'duration': 9.21}], 'summary': 'L system generates sentences using string replacement. axiom a, 2 generations: ab a becomes ab, b becomes a.', 'duration': 38.205, 'max_score': 111.666, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E1B4UoSQMFw/pics/E1B4UoSQMFw111666.jpg'}, {'end': 222.317, 'src': 'embed', 'start': 193.639, 'weight': 2, 'content': [{'end': 197.142, 'text': 'What do I do with the sentence? It could be you read it as poetry.', 'start': 193.639, 'duration': 3.503}, {'end': 198.203, 'text': 'A, B, A, A, B.', 'start': 197.162, 'duration': 1.041}, {'end': 211.044, 'text': 'or perhaps you use it to be a song A, B, A, A, B or with rhythm, or you tie it to graphics.', 'start': 201.551, 'duration': 9.493}, {'end': 216.131, 'text': 'you know this means a dot, this means a square and you draw a pattern on the screen.', 'start': 211.044, 'duration': 5.087}, {'end': 222.317, 'text': "So you could imagine there's a lot of ways you could interpret the L system, and what I'm going to do is, first,", 'start': 216.551, 'duration': 5.766}], 'summary': 'The l system can be interpreted in various ways, such as poetry, song, rhythm, or graphics, offering a multitude of creative possibilities.', 'duration': 28.678, 'max_score': 193.639, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E1B4UoSQMFw/pics/E1B4UoSQMFw193639.jpg'}], 'start': 0.689, 'title': 'L systems in javascript', 'summary': 'Explores l systems, explaining their concept, algorithm, and application to generate graphical patterns using text-based string replacement, with specific examples and a plan to implement the system in javascript using p5.js framework.', 'chapters': [{'end': 329.319, 'start': 0.689, 'title': 'Coding challenge: l systems in javascript', 'summary': 'Explores l systems, explaining their concept, algorithm, and application to generate graphical patterns using text-based string replacement, with specific examples and a plan to implement the system in javascript using p5.js framework.', 'duration': 328.63, 'highlights': ['L system explained as a text-based way of generating sentences using string replacement, with a defined alphabet, axiom, and set of rules. Provides a clear definition of L systems and their components for generating sentences using string replacement.', 'Demonstration of string replacement process in L system, showing the iterative generation of sentences based on defined rules. Illustrates the iterative process of generating sentences in L system through string replacement.', 'Discussion on the diverse interpretations of L system-generated sentences, including poetry, songs, rhythm, and graphics. Highlights the various ways to interpret L system-generated sentences, such as poetry, songs, and graphics.', 'Initiating the plan to implement an L system in JavaScript using p5.js framework, including defining axiom and rules. Outlines the initial steps to implement an L system in JavaScript using the p5.js framework.']}], 'duration': 328.63, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E1B4UoSQMFw/pics/E1B4UoSQMFw689.jpg', 'highlights': ['Demonstration of string replacement process in L system, showing the iterative generation of sentences based on defined rules. Illustrates the iterative process of generating sentences in L system through string replacement.', 'L system explained as a text-based way of generating sentences using string replacement, with a defined alphabet, axiom, and set of rules. Provides a clear definition of L systems and their components for generating sentences using string replacement.', 'Discussion on the diverse interpretations of L system-generated sentences, including poetry, songs, rhythm, and graphics. Highlights the various ways to interpret L system-generated sentences, such as poetry, songs, and graphics.', 'Initiating the plan to implement an L system in JavaScript using p5.js framework, including defining axiom and rules. Outlines the initial steps to implement an L system in JavaScript using the p5.js framework.']}, {'end': 502.421, 'segs': [{'end': 388.973, 'src': 'embed', 'start': 358.813, 'weight': 0, 'content': [{'end': 361.595, 'text': "And I'm going to run this now in the browser over here.", 'start': 358.813, 'duration': 2.782}, {'end': 365.657, 'text': 'And we can see, there we go, I have the letter A appearing.', 'start': 361.615, 'duration': 4.042}, {'end': 368.178, 'text': 'So my first axiom has appeared.', 'start': 365.737, 'duration': 2.441}, {'end': 379.525, 'text': 'So now what I need to do in generate is what I want to say is I need to look at every letter in the current sentence and substitute using the rules.', 'start': 368.639, 'duration': 10.886}, {'end': 388.973, 'text': "So I'm going to say for int i equals 0, i is less than axiom.length i++.", 'start': 380.045, 'duration': 8.928}], 'summary': 'Running code in browser displays letter a for the first axiom; iterating through current sentence letters for substitution.', 'duration': 30.16, 'max_score': 358.813, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E1B4UoSQMFw/pics/E1B4UoSQMFw358813.jpg'}, {'end': 502.421, 'src': 'embed', 'start': 438.463, 'weight': 1, 'content': [{'end': 448.851, 'text': 'If current equals the a part of a rule, then next sentence should get b.', 'start': 438.463, 'duration': 10.388}, {'end': 452.194, 'text': 'So if it equals a, substitute b in.', 'start': 448.851, 'duration': 3.343}, {'end': 466.805, 'text': 'Else, if current equals rule one B, next sentence plus equal rule two A.', 'start': 454.52, 'duration': 12.285}, {'end': 470.707, 'text': 'If it matches A from rule one, substitute in B from rule one.', 'start': 466.805, 'duration': 3.902}, {'end': 474.308, 'text': 'If it matches A from rule two, substitute in B from rule two.', 'start': 470.927, 'duration': 3.381}, {'end': 484.087, 'text': "Otherwise, Just keep, so there are cases where you have a character and it doesn't match any of the rules.", 'start': 475.989, 'duration': 8.098}, {'end': 487.229, 'text': 'In that case, you just keep that same character.', 'start': 484.627, 'duration': 2.602}, {'end': 491.252, 'text': 'So keep current in.', 'start': 489.431, 'duration': 1.821}, {'end': 496.917, 'text': "So if current is A, is rule one's A, put in rule one's B.", 'start': 491.573, 'duration': 5.344}, {'end': 499.659, 'text': "If current is rule two's A, put in rule two's B.", 'start': 496.917, 'duration': 2.742}, {'end': 502.421, 'text': "If it's not any of the rules, just keep current.", 'start': 499.659, 'duration': 2.762}], 'summary': "If current equals a, substitute b. if it's not in the rules, keep current.", 'duration': 63.958, 'max_score': 438.463, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E1B4UoSQMFw/pics/E1B4UoSQMFw438463.jpg'}], 'start': 329.319, 'title': 'Generating sentences with javascript', 'summary': "Explains the process of generating sentences using javascript's p5 function createp and substitution rules, iterating through characters to build the next sentence.", 'chapters': [{'end': 502.421, 'start': 329.319, 'title': 'Generating sentences with javascript', 'summary': "Explains the process of generating sentences using javascript's p5 function createp and substitution rules, iterating through characters to build the next sentence.", 'duration': 173.102, 'highlights': ['The process involves using the p5 function createP to display the letter A, and then iterating through the characters in the current sentence to substitute using specific rules.', "It demonstrates the use of conditional statements to determine the substitution of characters based on predefined rules, such as replacing 'a' with 'b' and vice versa.", 'The chapter also emphasizes the concept of keeping the current character unchanged when it does not match any of the predefined rules.']}], 'duration': 173.102, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E1B4UoSQMFw/pics/E1B4UoSQMFw329319.jpg', 'highlights': ['The process involves using the p5 function createP to display the letter A, and then iterating through the characters in the current sentence to substitute using specific rules.', "It demonstrates the use of conditional statements to determine the substitution of characters based on predefined rules, such as replacing 'a' with 'b' and vice versa.", 'The chapter also emphasizes the concept of keeping the current character unchanged when it does not match any of the predefined rules.']}, {'end': 809.855, 'segs': [{'end': 561.005, 'src': 'embed', 'start': 503.291, 'weight': 2, 'content': [{'end': 511.594, 'text': 'And then at the end of this, the sentence should be now, the actual current sentence is now the next sentence.', 'start': 503.291, 'duration': 8.303}, {'end': 518.677, 'text': "So I'm going to, then I'm going to say create P sentence.", 'start': 512.955, 'duration': 5.722}, {'end': 522.719, 'text': "So now, and then so when do I generate? So let's make a button.", 'start': 519.157, 'duration': 3.562}, {'end': 528.881, 'text': 'Var button equals create button generate.', 'start': 524.819, 'duration': 4.062}, {'end': 535.696, 'text': "So createButton is a function that's in the P5 DOM library and I can attach an event to it.", 'start': 530.834, 'duration': 4.862}, {'end': 539.318, 'text': 'And that event is generate.', 'start': 537.357, 'duration': 1.961}, {'end': 544.721, 'text': 'So whenever I press the mouse on that button, I want to call that generate function.', 'start': 540.819, 'duration': 3.902}, {'end': 547.842, 'text': 'I just want to go somewhere and remove some of this unnecessary styling.', 'start': 544.741, 'duration': 3.101}, {'end': 550.844, 'text': "And now I'm going to refresh this page.", 'start': 547.862, 'duration': 2.982}, {'end': 554.446, 'text': 'So sketch.js line 20, I have some sort of error.', 'start': 551.224, 'duration': 3.222}, {'end': 556.643, 'text': 'I used int.', 'start': 556.042, 'duration': 0.601}, {'end': 559.684, 'text': "it should be var, and I've got okay.", 'start': 556.643, 'duration': 3.041}, {'end': 561.005, 'text': 'so now you can see here.', 'start': 559.684, 'duration': 1.321}], 'summary': 'Create p5 dom button to trigger generate function', 'duration': 57.714, 'max_score': 503.291, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E1B4UoSQMFw/pics/E1B4UoSQMFw503291.jpg'}, {'end': 749.707, 'src': 'embed', 'start': 721.861, 'weight': 3, 'content': [{'end': 724.522, 'text': "to make sure the C's continue through there which they do.", 'start': 721.861, 'duration': 2.661}, {'end': 726.062, 'text': 'So you can see this is still working.', 'start': 724.742, 'duration': 1.32}, {'end': 732.084, 'text': 'So now I have a bit more of a flexible system by which I could just create an array of rules.', 'start': 726.362, 'duration': 5.722}, {'end': 733.964, 'text': "It doesn't matter how many rules, it'll still work.", 'start': 732.104, 'duration': 1.86}, {'end': 738.305, 'text': "Okay, now we've got the basic mechanics of the L system down.", 'start': 734.504, 'duration': 3.801}, {'end': 744.564, 'text': 'The next thing I need to do is do something more to draw from it.', 'start': 738.725, 'duration': 5.839}, {'end': 749.707, 'text': 'So what I want to show you is I want to now use this particular L system.', 'start': 744.604, 'duration': 5.103}], 'summary': 'Created flexible system with array of rules, adaptable to any number of rules.', 'duration': 27.846, 'max_score': 721.861, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E1B4UoSQMFw/pics/E1B4UoSQMFw721861.jpg'}, {'end': 778.641, 'src': 'heatmap', 'start': 750.167, 'weight': 1, 'content': [{'end': 753.629, 'text': 'So these are the letters of the alphabet for this L system.', 'start': 750.167, 'duration': 3.462}, {'end': 756.911, 'text': 'F plus minus open bracket close bracket.', 'start': 753.91, 'duration': 3.001}, {'end': 759.233, 'text': 'We start with F and this is the rule.', 'start': 757.111, 'duration': 2.122}, {'end': 763.295, 'text': "It seems like a crazy rule but it's actually going to do something quite interesting.", 'start': 759.413, 'duration': 3.882}, {'end': 766.257, 'text': 'So what I want to do is here I want to start with F.', 'start': 763.775, 'duration': 2.482}, {'end': 769.439, 'text': 'And actually, I only have one rule.', 'start': 767.679, 'duration': 1.76}, {'end': 773.74, 'text': 'So this is actually a much simpler scenario, which f becomes this.', 'start': 769.799, 'duration': 3.941}, {'end': 778.641, 'text': 'And now I should be able to run this.', 'start': 777.281, 'duration': 1.36}], 'summary': 'Using the l system with one rule, f becomes f+-[] for alphabet letters.', 'duration': 28.474, 'max_score': 750.167, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E1B4UoSQMFw/pics/E1B4UoSQMFw750167.jpg'}, {'end': 816.5, 'src': 'embed', 'start': 791.304, 'weight': 0, 'content': [{'end': 796.845, 'text': 'These are entire instructions for growing this elaborately complex plant-like shape.', 'start': 791.304, 'duration': 5.541}, {'end': 802.049, 'text': 'And this is really magic, and you can get the computational beauty of nature or the algorithm beauty of plants.', 'start': 797.625, 'duration': 4.424}, {'end': 806.492, 'text': "There's all these books and resources where you can find countless numbers of these kinds of L systems,", 'start': 802.229, 'duration': 4.263}, {'end': 808.314, 'text': 'or you can invent your own to create these patterns.', 'start': 806.492, 'duration': 1.822}, {'end': 809.855, 'text': "But let's make this one happen.", 'start': 808.534, 'duration': 1.321}, {'end': 816.5, 'text': "So all that we've done so far is we've only made a program that renders the text to the screen.", 'start': 810.215, 'duration': 6.285}], 'summary': 'Instructions for creating complex plant-like shapes using l systems and rendering them to the screen.', 'duration': 25.196, 'max_score': 791.304, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E1B4UoSQMFw/pics/E1B4UoSQMFw791304.jpg'}], 'start': 503.291, 'title': 'P5 dom and l-system algorithm', 'summary': 'Covers creating a button event in p5 dom and optimizing an l-system algorithm to generate complex patterns, including practical application and error resolution.', 'chapters': [{'end': 561.005, 'start': 503.291, 'title': 'Creating button event in p5 dom', 'summary': 'Discusses creating a button event in p5 dom, including defining the button, attaching an event to it, and resolving an error in the code.', 'duration': 57.714, 'highlights': ['Defining a button using the createButton function from the P5 DOM library and attaching an event to it', "Resolving an error in the code by changing 'int' to 'var' at line 20 in sketch.js"]}, {'end': 809.855, 'start': 561.005, 'title': 'L-system algorithm and pattern generation', 'summary': "Illustrates the process of creating an algorithm for generating patterns using an l-system, optimizing the algorithm's efficiency by using arrays, and demonstrating the practical application of the l-system by generating a complex plant-like shape.", 'duration': 248.85, 'highlights': ['The L-system algorithm is created by defining an axiom, a set of rules, and implementing string replacement, ensuring the flexibility to handle multiple rules and optimize efficiency through the use of arrays for rule storage.', "Demonstration of the practical application of the L-system by generating a complex plant-like shape using a single rule, showcasing the computational beauty of nature and the algorithm's potential to create intricate patterns.", 'The ability to utilize L-systems for creating various patterns and shapes, highlighting the versatility and adaptability of the algorithm for generating diverse visual outputs.']}], 'duration': 306.564, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E1B4UoSQMFw/pics/E1B4UoSQMFw503291.jpg', 'highlights': ["Demonstration of the practical application of the L-system by generating a complex plant-like shape using a single rule, showcasing the computational beauty of nature and the algorithm's potential to create intricate patterns.", 'The ability to utilize L-systems for creating various patterns and shapes, highlighting the versatility and adaptability of the algorithm for generating diverse visual outputs.', 'Defining a button using the createButton function from the P5 DOM library and attaching an event to it', 'The L-system algorithm is created by defining an axiom, a set of rules, and implementing string replacement, ensuring the flexibility to handle multiple rules and optimize efficiency through the use of arrays for rule storage.', "Resolving an error in the code by changing 'int' to 'var' at line 20 in sketch.js"]}, {'end': 1019.63, 'segs': [{'end': 882.956, 'src': 'embed', 'start': 858.86, 'weight': 0, 'content': [{'end': 866.446, 'text': "So I'm calling it turtle is because I am going to interpret this particular text like a turtle graphics engine.", 'start': 858.86, 'duration': 7.586}, {'end': 868.307, 'text': 'What is turtle graphics?', 'start': 867.227, 'duration': 1.08}, {'end': 871.729, 'text': 'So the concept of a turtle comes from an old programming language called Logo,', 'start': 868.347, 'duration': 3.382}, {'end': 876.212, 'text': 'where you could write code to instruct a turtle how to move around the screen.', 'start': 871.729, 'duration': 4.483}, {'end': 879.814, 'text': 'And as the turtle is moving around the screen, the turtle is drawing lines.', 'start': 876.232, 'duration': 3.582}, {'end': 882.956, 'text': 'So you could say things like F means move forward.', 'start': 880.094, 'duration': 2.862}], 'summary': 'Interpreting text as turtle graphics engine for movement and line drawing.', 'duration': 24.096, 'max_score': 858.86, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E1B4UoSQMFw/pics/E1B4UoSQMFw858860.jpg'}, {'end': 929.773, 'src': 'embed', 'start': 899.507, 'weight': 1, 'content': [{'end': 908.132, 'text': 'you could say save and you could keep moving, and then you could um, then you could say restore and go back to there and move from there,', 'start': 899.507, 'duration': 8.625}, {'end': 911.634, 'text': "and that's going to create a lot of sophisticated possibilities.", 'start': 908.132, 'duration': 3.502}, {'end': 921.829, 'text': 'so what i need now is in the code is to write a loop and just go through every single character in that sentence.', 'start': 911.634, 'duration': 10.195}, {'end': 929.773, 'text': "And I'm going to say current again equals sentence char at i.", 'start': 924.13, 'duration': 5.643}], 'summary': 'Utilizing code to save, move, restore, and create possibilities with a loop through each character in the sentence.', 'duration': 30.266, 'max_score': 899.507, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E1B4UoSQMFw/pics/E1B4UoSQMFw899507.jpg'}, {'end': 999.833, 'src': 'embed', 'start': 969.582, 'weight': 2, 'content': [{'end': 974.567, 'text': "I'm going to try pi divided by six, which I don't think is right, but I'll just start with that.", 'start': 969.582, 'duration': 4.985}, {'end': 984.085, 'text': 'Else if current equals minus Rotate pi divided by six on the negative direction.', 'start': 974.927, 'duration': 9.158}, {'end': 987.907, 'text': 'Else if current equals bracket.', 'start': 984.085, 'duration': 3.822}, {'end': 989.368, 'text': 'open bracket.', 'start': 987.907, 'duration': 1.461}, {'end': 994.73, 'text': 'Push. push is the function in p5 which is save the transformation state.', 'start': 989.368, 'duration': 5.362}, {'end': 999.833, 'text': "So I'm going to move around with translate and rotate and push is going to be saved.", 'start': 994.73, 'duration': 5.103}], 'summary': 'Using push function in p5 to save transformation state.', 'duration': 30.251, 'max_score': 969.582, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E1B4UoSQMFw/pics/E1B4UoSQMFw969582.jpg'}], 'start': 810.215, 'title': 'Turtle graphics and l system', 'summary': 'Covers creating a turtle graphics engine to interpret text as instructions for drawing lines, and implementing l system instructions to create graphic representations following specific rules in p5.', 'chapters': [{'end': 929.773, 'start': 810.215, 'title': 'Creating a turtle graphics engine', 'summary': 'Discusses creating a program to read and draw text to the window, using the concept of turtle graphics from the programming language logo and interpreting text as instructions for the turtle to draw lines on the screen.', 'duration': 119.558, 'highlights': ['The concept of turtle graphics originates from the programming language Logo, where instructions were given to a turtle to move around the screen and draw lines.', "The program aims to interpret text as instructions for the turtle to move and draw lines on the screen, utilizing commands like 'F' for move forward and '+' for turn right.", 'The implementation involves creating a loop to go through each character in the sentence and using the current character to execute corresponding actions for the turtle, enabling sophisticated possibilities through the use of brackets for saving and restoring positions.']}, {'end': 1019.63, 'start': 929.773, 'title': 'Drawing l system instructions', 'summary': 'Discusses implementing l system instructions for drawing lines, rotating angles, and utilizing push and pop functions in p5, with a starting point at (0,0) and a rotation of pi/6, to create a graphic representation following specific rules.', 'duration': 89.857, 'highlights': ['The chapter discusses implementing L system instructions for drawing lines, rotating angles, and utilizing push and pop functions in p5, with a starting point at (0,0) and a rotation of pi/6, to create a graphic representation following specific rules.', "The 'push' function in p5 is used to save the transformation state, allowing movement with translate and rotate.", "The 'pop' function is utilized to revert the transformation state, ensuring proper execution of the L system instructions."]}], 'duration': 209.415, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E1B4UoSQMFw/pics/E1B4UoSQMFw810215.jpg', 'highlights': ['The program interprets text as instructions for the turtle to move and draw lines on the screen.', 'The implementation involves creating a loop to go through each character in the sentence and using the current character to execute corresponding actions for the turtle.', 'The chapter discusses implementing L system instructions for drawing lines, rotating angles, and utilizing push and pop functions in p5.', "The 'push' function in p5 is used to save the transformation state, allowing movement with translate and rotate."]}, {'end': 1181.482, 'segs': [{'end': 1044.443, 'src': 'embed', 'start': 1019.63, 'weight': 1, 'content': [{'end': 1027.051, 'text': 'so one of the things that I have to do is, when I draw this line, I then have to translate to move to the end of the line.', 'start': 1019.63, 'duration': 7.421}, {'end': 1034.715, 'text': 'so in addition to drawing the line and we come back over here I need to say translate zero negative length.', 'start': 1027.051, 'duration': 7.664}, {'end': 1039.96, 'text': 'So I need to move to the end of the line so that I can either draw the next line or rotate from there and that sort of thing.', 'start': 1034.955, 'duration': 5.005}, {'end': 1042.082, 'text': 'And then we need this to be a variable.', 'start': 1040.4, 'duration': 1.682}, {'end': 1044.443, 'text': "I'm going to say length equals 100.", 'start': 1042.122, 'duration': 2.321}], 'summary': 'The line needs to be drawn and translated to the end, with a variable length of 100.', 'duration': 24.813, 'max_score': 1019.63, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E1B4UoSQMFw/pics/E1B4UoSQMFw1019630.jpg'}, {'end': 1105.675, 'src': 'embed', 'start': 1074.876, 'weight': 3, 'content': [{'end': 1077.8, 'text': "Okay, so let's see if we can figure this out.", 'start': 1074.876, 'duration': 2.924}, {'end': 1085.72, 'text': "Turtle, first of all, let's draw the background again, and then do stroke 255.", 'start': 1077.88, 'duration': 7.84}, {'end': 1087.121, 'text': "Oh, I know why we don't see anything.", 'start': 1085.72, 'duration': 1.401}, {'end': 1091.765, 'text': "So where is the line being drawn? It's being drawn from 0, 0 up.", 'start': 1087.561, 'duration': 4.204}, {'end': 1095.668, 'text': 'So I need to actually at the beginning make sure 0, 0 is positioned at the bottom of the window.', 'start': 1091.985, 'duration': 3.683}, {'end': 1101.913, 'text': 'So the very first thing I need to do in setup, before or any time before I call turtle, is, I need to say,', 'start': 1096.428, 'duration': 5.485}, {'end': 1105.675, 'text': 'translate to the middle of the screen and the bottom of the screen.', 'start': 1101.913, 'duration': 3.762}], 'summary': 'The script involves positioning the turtle at the bottom middle of the screen before drawing.', 'duration': 30.799, 'max_score': 1074.876, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E1B4UoSQMFw/pics/E1B4UoSQMFw1074876.jpg'}, {'end': 1146.588, 'src': 'embed', 'start': 1117.532, 'weight': 0, 'content': [{'end': 1123.075, 'text': 'And now we have f f plus save plus f minus f minus f restore, et cetera, et cetera.', 'start': 1117.532, 'duration': 5.543}, {'end': 1123.616, 'text': "Let's look at this.", 'start': 1123.095, 'duration': 0.521}, {'end': 1126.658, 'text': 'Now it went crazily off the screen.', 'start': 1124.116, 'duration': 2.542}, {'end': 1130.18, 'text': 'Now why did that happen? Something weird is going on here.', 'start': 1126.698, 'duration': 3.482}, {'end': 1132.082, 'text': "So let's investigate this.", 'start': 1130.461, 'duration': 1.621}, {'end': 1139.403, 'text': "Back after a technical problem, I added in reset matrix in this turtle function because I'm not using the draw loop.", 'start': 1133.499, 'duration': 5.904}, {'end': 1146.588, 'text': "This guarantees that I'll always start my translations and rotations over again each time I'm about to draw this L system,", 'start': 1139.443, 'duration': 7.145}], 'summary': 'Investigating technical issues and adding reset matrix to ensure accurate translations and rotations in the turtle function.', 'duration': 29.056, 'max_score': 1117.532, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E1B4UoSQMFw/pics/E1B4UoSQMFw1117532.jpg'}, {'end': 1181.482, 'src': 'embed', 'start': 1158.276, 'weight': 2, 'content': [{'end': 1171.751, 'text': "And now, when the sentence is F, F plus, save plus F, Then I'm saying go forward, go forward, turn right, save, turn right again.", 'start': 1158.276, 'duration': 13.475}, {'end': 1173.473, 'text': 'go forward, turn left.', 'start': 1171.751, 'duration': 1.722}, {'end': 1174.314, 'text': 'go forward, turn left.', 'start': 1173.473, 'duration': 0.841}, {'end': 1175.816, 'text': 'go forward, then come back, then turn left.', 'start': 1174.314, 'duration': 1.502}, {'end': 1181.002, 'text': 'So you can see, this is a great exercise for you to do Saturday afternoon outside in the park.', 'start': 1175.997, 'duration': 5.005}, {'end': 1181.482, 'text': 'you know.', 'start': 1181.002, 'duration': 0.48}], 'summary': 'A series of commands for a robotic movement exercise in a park.', 'duration': 23.206, 'max_score': 1158.276, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E1B4UoSQMFw/pics/E1B4UoSQMFw1158276.jpg'}], 'start': 1019.63, 'title': 'Turtle drawing and translation', 'summary': 'Discusses the process of drawing lines using turtle graphics, addressing issues with positioning and implementing a fix for translation and rotation, ultimately resulting in the generation of a sequence of commands for drawing lines.', 'chapters': [{'end': 1181.482, 'start': 1019.63, 'title': 'Turtle drawing and translation', 'summary': 'Discusses the process of drawing lines using turtle graphics, addressing issues with positioning, and implementing a fix for translation and rotation, ultimately resulting in the generation of a sequence of commands for drawing lines.', 'duration': 161.852, 'highlights': ['The chapter highlights the need to translate to the end of the line after drawing it, with the length of the line set as a variable, emphasizing the importance of positioning for further drawing and rotation.', 'It emphasizes the significance of calling the turtle function in setup and after generating, addressing the visibility issue and ensuring the drawing starts from the bottom of the window.', "The chapter explains the implementation of a fix using 'reset matrix' in the turtle function to guarantee the reset of translations and rotations for drawing the L system, resolving the issue of lines going off-screen.", 'It details the sequence of commands generated for different sentences, demonstrating the process of drawing lines forward, turning right and left, and saving the current position, providing insight into the complexity of the drawing process.']}], 'duration': 161.852, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E1B4UoSQMFw/pics/E1B4UoSQMFw1019630.jpg', 'highlights': ["The chapter explains the implementation of a fix using 'reset matrix' in the turtle function to guarantee the reset of translations and rotations for drawing the L system, resolving the issue of lines going off-screen.", 'The chapter highlights the need to translate to the end of the line after drawing it, with the length of the line set as a variable, emphasizing the importance of positioning for further drawing and rotation.', 'It details the sequence of commands generated for different sentences, demonstrating the process of drawing lines forward, turning right and left, and saving the current position, providing insight into the complexity of the drawing process.', 'It emphasizes the significance of calling the turtle function in setup and after generating, addressing the visibility issue and ensuring the drawing starts from the bottom of the window.']}, {'end': 1321.056, 'segs': [{'end': 1220.02, 'src': 'embed', 'start': 1195.171, 'weight': 5, 'content': [{'end': 1201.975, 'text': "One is I picked a random angle to rotate by, pi divided by six, which isn't actually the angle meant to be used with this particular L system.", 'start': 1195.171, 'duration': 6.804}, {'end': 1203.436, 'text': 'So let me first fix that.', 'start': 1202.235, 'duration': 1.201}, {'end': 1208.039, 'text': "So I'm going to go into the code and I'm going to make a variable called angle.", 'start': 1203.996, 'duration': 4.043}, {'end': 1217.118, 'text': "And in setup, I'm just going to say angle equals radians 25.", 'start': 1209.275, 'duration': 7.843}, {'end': 1220.02, 'text': 'So 25 degrees, I believe, is the angle meant to be used with this.', 'start': 1217.118, 'duration': 2.902}], 'summary': 'The angle for rotation is updated to the correct value of 25 degrees.', 'duration': 24.849, 'max_score': 1195.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E1B4UoSQMFw/pics/E1B4UoSQMFw1195171.jpg'}, {'end': 1263.673, 'src': 'embed', 'start': 1239.934, 'weight': 2, 'content': [{'end': 1246.339, 'text': "The issue is that with more and more generations, I actually want to shrink the length that I'm drawing all this stuff.", 'start': 1239.934, 'duration': 6.405}, {'end': 1255.845, 'text': 'So it would make sense here in the generate function to each time I generate, I could say length times equals 0.5.', 'start': 1246.759, 'duration': 9.086}, {'end': 1259.509, 'text': "So now you can see that's how I start, then it's next, then it's next, then it's next.", 'start': 1255.845, 'duration': 3.664}, {'end': 1260.209, 'text': 'So I had it right.', 'start': 1259.529, 'duration': 0.68}, {'end': 1262.251, 'text': 'Maybe pi divided by six was right all along.', 'start': 1260.229, 'duration': 2.022}, {'end': 1263.673, 'text': "I'm going to do one more generation.", 'start': 1262.271, 'duration': 1.402}], 'summary': 'Adjusting generation length to 0.5, aiming for better results.', 'duration': 23.739, 'max_score': 1239.934, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E1B4UoSQMFw/pics/E1B4UoSQMFw1239934.jpg'}, {'end': 1316.511, 'src': 'embed', 'start': 1284.084, 'weight': 0, 'content': [{'end': 1287.626, 'text': 'Just try to imagine drawing this through some other mechanism.', 'start': 1284.084, 'duration': 3.542}, {'end': 1290.048, 'text': 'So I encourage you to play around with this.', 'start': 1287.906, 'duration': 2.142}, {'end': 1291.149, 'text': 'Go investigate.', 'start': 1290.428, 'duration': 0.721}, {'end': 1292.55, 'text': 'Find other L systems.', 'start': 1291.229, 'duration': 1.321}, {'end': 1293.991, 'text': 'Plug them into this example.', 'start': 1292.65, 'duration': 1.341}, {'end': 1295.892, 'text': 'See what kinds of patterns you get.', 'start': 1294.451, 'duration': 1.441}, {'end': 1307.461, 'text': 'The other thing that you might think about is if you watched one of my previous videos about how Turn a fractal tree into a whole set of branch objects that you could apply physics to,', 'start': 1296.192, 'duration': 11.269}, {'end': 1310.465, 'text': 'you can also do the same thing with this particular example,', 'start': 1307.461, 'duration': 3.004}, {'end': 1316.511, 'text': 'and If people are interested at some point I could release an example that does that or make another video that converts this into that.', 'start': 1310.465, 'duration': 6.046}], 'summary': 'Encourages exploration of l systems, applying physics, and creating branch objects.', 'duration': 32.427, 'max_score': 1284.084, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E1B4UoSQMFw/pics/E1B4UoSQMFw1284084.jpg'}], 'start': 1181.482, 'title': 'Exploring l systems in coding', 'summary': 'Delves into l systems in coding, highlighting the impact of angle and length adjustments on structure complexity, while promoting experimentation and potential branch object applications.', 'chapters': [{'end': 1321.056, 'start': 1181.482, 'title': 'Exploring l systems in coding', 'summary': 'Explores the use of l systems in coding, showcasing the impact of adjusting angles and lengths on the complexity of generated structures, while encouraging experimentation and potential applications in creating branch objects.', 'duration': 139.574, 'highlights': ['The impact of adjusting angles and lengths on the complexity of generated structures, with the example demonstrating the intricate patterns and the potential for further experimentation.', 'The encouragement for experimentation and exploration by plugging in different L systems and investigating the resulting patterns and structures.', 'The potential application of converting the L system example into branch objects with physics, potentially leading to the release of an example or a dedicated video for interested individuals.', 'The correction of the angle used in the L system to radians 25, which was meant to be the appropriate angle for the specific L system.', 'The iterative reduction of the length drawn with each generation, demonstrated by multiplying the length by 0.5, leading to a visible progression in complexity and intricacy.', 'The visualization of the intricate and beautiful structure created through multiple generations in the L system example, showcasing the potential for creating complex patterns.']}], 'duration': 139.574, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/E1B4UoSQMFw/pics/E1B4UoSQMFw1181482.jpg', 'highlights': ['The impact of adjusting angles and lengths on the complexity of generated structures, with the example demonstrating the intricate patterns and the potential for further experimentation.', 'The encouragement for experimentation and exploration by plugging in different L systems and investigating the resulting patterns and structures.', 'The iterative reduction of the length drawn with each generation, demonstrated by multiplying the length by 0.5, leading to a visible progression in complexity and intricacy.', 'The visualization of the intricate and beautiful structure created through multiple generations in the L system example, showcasing the potential for creating complex patterns.', 'The potential application of converting the L system example into branch objects with physics, potentially leading to the release of an example or a dedicated video for interested individuals.', 'The correction of the angle used in the L system to radians 25, which was meant to be the appropriate angle for the specific L system.']}], 'highlights': ["Demonstration of the practical application of the L-system by generating a complex plant-like shape using a single rule, showcasing the computational beauty of nature and the algorithm's potential to create intricate patterns.", 'The ability to utilize L-systems for creating various patterns and shapes, highlighting the versatility and adaptability of the algorithm for generating diverse visual outputs.', 'The impact of adjusting angles and lengths on the complexity of generated structures, with the example demonstrating the intricate patterns and the potential for further experimentation.', 'The encouragement for experimentation and exploration by plugging in different L systems and investigating the resulting patterns and structures.', 'The iterative reduction of the length drawn with each generation, demonstrated by multiplying the length by 0.5, leading to a visible progression in complexity and intricacy.']}