Procedural Plant Generation with L-Systems
ฝัง
- เผยแพร่เมื่อ 15 พ.ค. 2024
- Learn to generate procedural plants with an l-system implementation.
In this project I used l-systems, or Lindenmayer systems, to generate a variety of procedural plants and trees.
I made a few versions, including a beginner version with just the basics, and a more complex one with some experimental additions I tried out. Give it a look, see what you think.
Full source code for the project is available, so if you're interested in fiddling with the code, screwing around with it, or improving it.
Github: github.com/simondevyoutube/
Algorithmic Beauty of Plants: algorithmicbotany.org/papers/#... - วิทยาศาสตร์และเทคโนโลยี
Like & Subscribe, thanks!
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!
Thanks, I thought this was going to be way over my head but it made a lot of sense when you broke it down!
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!
Hi Simon, great videos you have here on the channel! Super chill and informative. Keep it up ❤️
Thanks! Let me know if you have anything you want me to cover.
What always blows my mind is the fact you're doing this with HTML and JavaScript
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.
@@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 :)
Thanks a lot for this video. It is a very nice intro on L system. The examples are really simple and easy to understand. 👑
cheers for this nice introduction! i´m very excited learning from your code! :) all the best, matty
Thanks Matty, glad you're enjoying it :)
This channel is just perfect
Thanks for this amazing video! 🍀🍀🍀
This is just incredible.
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!
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!
@@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
@@FedericoFavaro Oh sweet, portals, yeah that's totally doable. Adding it to my queue :)
Fantastic stuff man. Keep it up.
Thanks, will do!
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!
Awesome! Are you able to navigate the source? Let me know if you have any issues.
@@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!
Very well put together :)
Thanks Joonas, glad you enjoyed it :)
Great video, thanks!
Glad you liked it!
This is really cool
Thx
thank you
Beautiful, could make some really cool animations with this
If you do, show me!
@@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.
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.
I just bought that book because of this video
Damn, should have made it an amazon link.
any video about goap
i actually ended up using this algo in houdiny
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.
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.
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!!
May I ask how to judge whether a string is a leaf or a branch
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.
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 -
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.
Watching all of your videos very closely
Cool, lemme know if you have suggestions for future vids too.
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!
I want to implement this in c++ please help me with that please
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
exactly what i was thinking
Очень полезно. Жаль, что в тренды попадают тиктоки.
Благодаря!
I want to generate plants
frFr