Procedural Plant Generation with L-Systems

[@simondev758]

Like & Subscribe, thanks!

[@JamesJansson]

It's pretty crazy to think about how old this is yet still looks so good. I was studying this as part of my mathematics honours in 2006!

[@xomvoid_akaluchiru_987]

After learning about this and the wave function collapse algorithm, I'm getting more and more interesting in these kinds of algorithms that just create stuff. This video has sparked the urge to run a semi realistic plant simulation to see how the algorithm can make plants that will adapt to a bunch of different conditions.

[@FedericoFavaro]

Hello, I'm the dude that went and started learning canvas to understand your code, this looks great, thank you for uploading the tutorial! Subscribed and liked!

[@simondev758]

Awesome! Are you able to navigate the source? Let me know if you have any issues.

[@FedericoFavaro]

@@simondev758 Still haven't checked out the source, was making some rudimentary stuff with the canvas to better my understanding of it, gonna take a look at it later and yah, I'll let you know if there's something I don't understand, thank you very much for your time!

[@FedericoFavaro]

Been checking out the source and even tho I'm a canvas beginner I do understand most of it without too many issues at all, it's very clearly written. Also I've been checking out the other videos you posted and I'm motivated and excited to try building stuff myself, keep up the good work!

[@simondev758]

Awesome, glad to help. Let me know what isn't super clear, and I'll see what I can do in future videos to improve. Also let me know if there are any project ideas you think would be good to cover!

[@FedericoFavaro]

@@simondev758 Oh it's mostly canvas related stuff like ctx.save() and stuff like that that I have yet to explore properly so don't worry about that! Regarding project ideas, I was thinking about trying to learn some three.js and make a barebone portal clone, with just one or two levels and the portal gun mechanic. I think that would be quite cool to see, idk

[@simondev758]

@@FedericoFavaro Oh sweet, portals, yeah that's totally doable. Adding it to my queue :)

[@raysudhabindu]

Thanks a lot for this video. It is a very nice intro on L system. The examples are really simple and easy to understand. 👑

[@falxie_]

What always blows my mind is the fact you're doing this with HTML and JavaScript

[@simondev758]

It's convenient and easy. If you're more comfortable with other languages, JS is pretty simple and should be easy to convert. But if I had written this in C++, it might be more of a struggle for people to convert it.

[@arushford]

@@simondev758 I love that you considered people converting it, as opposed to packaging it, writing it in other languages, it's just what you'd expect is all :)

[@thethirdkate]

Thanks, I thought this was going to be way over my head but it made a lot of sense when you broke it down!

[@TheAwesomeDudeGuy]

Hi Simon, great videos you have here on the channel! Super chill and informative. Keep it up ❤️

[@simondev758]

Thanks! Let me know if you have anything you want me to cover.

[@MattyMasterbaker]

cheers for this nice introduction! i´m very excited learning from your code! :) all the best, matty

[@simondev758]

Thanks Matty, glad you're enjoying it :)

[@MegaCevapcic]

This channel is just perfect

[@jonathanaspeling9535]

So cool! I love your explanations :D I've been devouring this topic's content the last while - want to start thinking about making a bonsai like game in Unity. I played a indi title on Steam recently and it was amazing but a bit of an abandoned project and would like to perhaps one day iterate on it - my math's ability would need to grow quite a bit but you make it accessible thank you!

[@DommageCollateral]

any video about goap

[@SpasmFingers]

I just bought that book because of this video

[@simondev758]

Damn, should have made it an amazon link.

[@ChrisTharpArt]

Fantastic stuff man. Keep it up.

[@simondev758]

Thanks, will do!

[@aaronaaronaaron5922]

Thanks for this amazing video! 🍀🍀🍀

[@lukanicolau]

This is just incredible.

[@SpasmFingers]

This is really cool

[@simondev758]

Thx

[@Rssks]

Very well put together :)

[@simondev758]

Thanks Joonas, glad you enjoyed it :)

[@WaynesStrangeBrain]

Great video, thanks!

[@simondev758]

Glad you liked it!

[@primodernious]

there is a secret in fractals that allows you to fold the shape of the fractal in the same way a plant grow from a seed.

[@kickassss82]

Hi Simon, do you perhaps have any resources or knowledge of application of this technique in a 3D space? I have been trying to figure it out for a plant growing simulator/ gardening simulator.

[@simondev758]

Not offhand no, intention was to look into 3d after learning a bit of the basics. Figured it would be super neat to populate my procedural world with procedural plants so I'll have to look into it soon.

[@SuedeBeach]

I’m also looking for resources on this technique in 3D space- exciting stuff. Are you still looking into this @SimonDev ? Thanks for the video!!

[@christopherkarlsson4919]

Beautiful, could make some really cool animations with this

[@simondev758]

If you do, show me!

[@christopherkarlsson4919]

@@simondev758 If I had seen this video about half a year ago I probably would have suggested it to my project manager as we were doing a site for forest management company at the time. Would've been a great fit for them. I remember watching a video fo someone years ago making a 3d animation of trees like this that he had a bird fly around to display tweets from twitter. But just that this stuff can be done in JS at all is mindblowing to me. I use it every day but I'm not on this coolness level at all.

[@j.r.s8737]

Watching all of your videos very closely

[@simondev758]

Cool, lemme know if you have suggestions for future vids too.

[@DommageCollateral]

i actually ended up using this algo in houdiny

[@oominrrzslydun907]

May I ask how to judge whether a string is a leaf or a branch

[@a.994]

thank you

[@qShaun]

I have a question. How does the width falloff work? I've been trying to do it on my own but I literally just can't figure it out. Thanks!

[@octaviusvanzandt3695]

Great stuff Simon. I'm having an issue with your code though and I'm hoping you know of a simple solution -- it might just be that I'm very new with JS and local dev on a laptop. In my case, your simple.html example works great, but the complex.html example does not. When I view the complex.html with chrome dev tools it says essentially that access to complex.js has been blocked by CORS policy. Reading up on CORS tells me this is a security paradigm... some folks suggest turning this off in the browser but I'm reluctant to make my browser less secure. Is there a simple syntax change that can get around this without disabling CORS? Or -- should we be running your code in a local web server? --currently I was just trying to open the HTML file in chrome. As mentioned -- this is working in your simple.html, but not the complex.html. The main syntax difference I see between the two is that simple.html has this: , while complex.html has this: . But if I remove the type="module" then chrome complains about trying to import outside of a module. **edit update** for now I'm able to make this work if I run the chrome web server plug in, instead of just running the code from the file system and opening the html files in chrome. Perhaps I just got lucky that the simple.html version runs without using a web server and just runs directly in a browser pointed at the file system.

[@simondev758]

Hey Octavius, none of these demos are intended to work by simply loading the index.html directly in your browser without something serving the files. Here's my log when I clone the repo, run a local dev server, and then navigate to localhost:8000. Everything seems to work fine. I've never tried the web server plugin for chrome, sounds like that works? I run all my dev through python's http.server module, and I've heard other people have success just using nodejs locally. ~/Development/youtube/repos$ git clone github.com/simondevyoutube/LSystems_JavaScript.git Cloning into 'LSystems_JavaScript'... remote: Enumerating objects: 14, done. remote: Counting objects: 100% (14/14), done. remote: Compressing objects: 100% (9/9), done. remote: Total 14 (delta 4), reused 11 (delta 4), pack-reused 0 Unpacking objects: 100% (14/14), 8.29 KiB | 1.18 MiB/s, done. ~/Development/youtube/repos$ cd LSystems_JavaScript/ ~/Development/youtube/repos/LSystems_JavaScript$ python3 -m http.server Serving HTTP on 0.0.0.0 port 8000 (0.0.0.0:8000/) ... 127.0.0.1 - - [29/Jul/2020 16:22:33] "GET / HTTP/1.1" 200 - 127.0.0.1 - - [29/Jul/2020 16:22:36] "GET /complex.html HTTP/1.1" 200 - 127.0.0.1 - - [29/Jul/2020 16:22:36] "GET /base.css HTTP/1.1" 200 - 127.0.0.1 - - [29/Jul/2020 16:22:36] "GET /src/complex.js HTTP/1.1" 200 - 127.0.0.1 - - [29/Jul/2020 16:22:36] "GET /src/random.js HTTP/1.1" 200 -

[@octaviusvanzandt3695]

Thanks for the quick response. That was my issue, was just trying to run the HTML in my browser without using an actual web server -- now that I'm using a web server it all works great. My bad.

[@ياسمينالشريف-ش7ر]

I want to implement this in c++ please help me with that please

[@xeterexixxeterexix3157]

Can you implement this to the 3D world you created? to make it grow from the surface? I know nothing about programming, just dicovered your channel and binge watching your videos

[@brock7682]

exactly what i was thinking

[@leventeolearnyik2360]

I want to generate plants

[@tovarynedeli4676]

Очень полезно. Жаль, что в тренды попадают тиктоки.

[@simondev758]

Благодаря!

[@hezuikn]

frFr