Coding Challenge #16: L-System Fractal Trees
Вставка
- Опубліковано 19 чер 2024
- 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: thecodingtrain.com/challenges...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge #15: ...
🎥 Next video: • Coding Challenge #17: ...
🎥 All videos: • Coding Challenges
References:
🔗 L-systems: en.wikipedia.org/wiki/L-system
🌿 Algorithmic Botany: algorithmicbotany.org/
📕 My NOC class on Kadenze: www.kadenze.com/courses/the-n...
Videos:
🎥 Algorithmic Botany Track: thecodingtrain.com/tracks/alg...
🔴 Coding Train Live 40: • Live Stream #40: Tree...
Related Coding Challenges:
🚂 #14 Recursive Fractal Trees: • Coding Challenge #14: ...
🚂 #123 Chaos Game: • Coding Challenge #123:...
🚂 #174 AppleSoft Basic Fractal Tree: • Apple ][ Coding Challe...
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: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: / discord
💖 Membership: ua-cam.com/users/thecodingtrainjoin
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
#fractaltrees #lsystem #javascript #p5js #processing
"If you've watched one of my previous videos" - well, I may or may have not binge watched all first 16 challenges after stumbling on the Snake challenge, so all of those are now a blur of Bob Ross-esque coding awesomeness which I probably gonna have to watch again to properly parse.
+Wojciech Morawiec haha I love this comment!
Exactly the same here
Highfive mate
haha yeah that's me too!!
Couldn't have said it better myself. You really are the Bob Ross of coding.
That's the most incredible thing I've ever seen. I'm learning so many different things from your channel! Never heard of the L System before.
This is like when you ask your perants for something. "Mom can I have this?" "Go ask dad" "Dad can I have this?" "Go ask mom"
This kind of stuff tickles my brain's g-spot. It's so incredibly satisfying.
So glad I found this channel. This is a nice break from my ReactJS adventures!
I am still learning tree data structure and this guy made the real tree look like structure. OMG!!!!! That's pretty amazing!!! U r great man!!
DAN you are what got me into *really* coding, love your book too!!
I'm learning so much thanks to you Daniel, thanks a lot! I'm so curious to play around with L-systems myself now :)
After attending a class on formal languages, I stumbled upon a paper on computally generated botanicals and wanted to try to cook up something for the fun, and I thought of you... You never disappoint! I'm going to give this a try tomorrow!
I remember using grammars and lexers/parsers in Ocaml last year for college, was great to see it visualized like this!
You channel is simply fantastic! Please continue to give us this wonderful material! ;)
One thing that has helped me with learning is to download the source code for these and add comments explaining how each part works. It helps me analyze the logic, and also helps me see any holes in my understanding.
Commenting the example codes helps a lot too! Thought i would share.
+Leam J indeed great tip! I always intend to add comments before I publish but pretty much never get around to it! I welcome pull requests with comments on GitHub!
WOW! I can't believe you implemented LOGO! I used that language as a kid. Congratulations on finding a use for it along with javascript.
I love your coding videos, keep making them!
Brilliant! So simple yet so beautiful
That's so cool. I learned to code way back in middle school using LOGO. This is the first video where I've ever heard anyone mention it. I haven't met anyone else who's heard of it either.
F -> F+[F-F]-F[+F] This combination looks beautiful! It creates real leafs!
What's the axiom and angle?
I used 'F' and 45 degrees and it creates a plant/weed but not real leafs.
@@Megasterik is it creating marijuana?
Fun fact about Logo. Even though it was designed to teach kids how to program, it had some very advanced features. A very interesting one which you don't come across all that often is that it had the capability of executing the contents of variables. Like, you could define two variables x=5 and y="2*x+3" and you could interpret y and it would output 13. I used it to make a function plotter when i was a kid. You'd give it a function and it would plot it out for you.
You're an amazing human being
I can't believe how simple but powerful this technique is.
oh my god, this is so beautiful
Beautiful algorithm.
I made something so stupid with this
For every letter that is in the P, i transform it to its phonetic pronunciation
Ex: "XD" becomes "ECKS DEE", which then becomes "EE SEE KAY ESS DEE EE EE" and so on
(I'm sorry, planet)
this is wonderful
You Could use this for cryptograpy if you reverse this example. PEE AY ESS ESS WEE OH AR DEE is Password (W is a bit wierd in english). If you do this like 3 to four times with random rules you have a great crypograthy.
Now, that's ABSOLUTELY GENIOUS
Excelente video.
Claridad y calidad bastante alta.
I genuinely have no idea how i'd pass my uni course without your guidance!!
It's a little wordy if you don't use the map/dictionary to your advantage. Here it is in python.
result = 'A'
Lsystem = {'A':'AB','B':'A'}
for loop in range(5):
newresult = ''
for char in result:
newresult += Lsystem[char]
print(newresult)
result = newresult
PI/6 = 30 degrees, so a 5-degree difference might not be noticeable
indeed, good point.
i really really need your help... you just reawakened my curiosity
just a suggestion, but a code seems to become a lot more concise and clear (at least to my eyes) if one defines a function rule accepting a letter as an input with a switch statement inside to make it respond accordingly. no need for conditionals in the generate function then.
anyways, i love the idea of l-systems, i find them to be genius and intriguing, and i'm grateful to you dan for introducing them to me in such a simple, clear and exciting way.
i'm looking forward to creating lots and lots of interesting and somewhat unpredictable, surprising, unexpected artwork designs using this very idea.
In js it's currently performance better to use array and then join it into string. Also for rules you could use object that describes what becomes what like { "A":"AB", "B":"A"}. That will be much easier to understand and operate.
Thank you, thank you, yes and thank you
Wow!!!! This is soo cool!!!!!!!!! THANKS!!!!!!!!!!!!!!!!
great channel. keep it up!
this is cool!!! I think I would've had more fun with my CSE courses if you were my instructor lol
that is awesome
Beautiful video! I wonder if that popular game "no man's sky" used that thing to generate planets (or plants)
It would be great if they did, but actually the plants themselves are fixed models and its only their placement which is basically random. The planets themselves appear to be generated using something more like Perlin noise mesh generation. Check out Sebastian Lague's channel on procedural planet and terrain generation!
Mindblowing!
thanks for watching!
Awesome! How comes you didn t mess with the variables this time? It s always fun seeing different results
Omg this is very creative
This is actually one of my favorite time passers!!
1
11
21
1211
111221
312211
13112221
1113213211
31131211131221
13211311123113112211
Etc....
I had never found a name for it before!
CreepeRave those are Conway's look and say numbers. It's a cute little sequence.
121
1331
I believe it's called the look-and-say sequence (or something like that) by some famous mathematician.
I didnt know this was common knowledge (which is always a good feeling when you stumble upon something like this that you thought you invented and other people are into it)
FANTASTIC video ... can you please tell me how to apply such a concept to create a 3d plant based on the L system ?
I got really excited at 21:00
I was trying yo figure out why this time the fractal tree turns out to be non symmetrical, as we see in the previous challenges. It turns out that the rule in this video is "skewed" instead of symmetric. That's because the first rotation, indicated by a +, appears before the first bracket [. We then find a - after the closing bracket ], but that - just returns the orientation to the one just before the +.
For a symmetric rule, it should read as F goes into FF+[+F-F-F]--[-F+F+F]+
Note that there appear two consecutive - in the middle and a final + at the end, because just in case we want to end up with the orientation that we started with.
did the video theorized in the outro about applying physics to sets of branch objects using L systems ever get made, by chance?
can you make L-systems code using php language ? i really confused to change your code from javascript to php
awesome video btw i loved the way you explain it, keep it up :) Thanks
thanks.
I made a python version of the L-System using 2 lists to store an arbitrary number of rules. The code that builds the next generation is `future+=(rules2[rules1.index(i)])` where i is from a for loop of `for i in current:`
I wonder what happens when you apply rules randomly from a pre-defined set, just so it's not so perfectly self-similar.
Hey I'm coding in python turtle graphics . but I found push and pop functions questionable. like I searched and I know that push adds object to array while pop is removing object from array but how it really works in your code is bit frustrating for me to understand any help ?I created code and sucessfully draw sierpenski triangle using l-system that's because those l systems doesn't use [ ]
As said before, the Bob Ross of coding
Is there a way to combine this with mandelbrot or julia sets? Are there any papers that combine this with mandelbrot or julia sets?
good one
genius..!
This is also how the X chromosome is passed down. If you invert your tree and look at it as ancestors instead of next generations, and swap X for A, and Y for B, you can see how the X chromosome is passed down. Females (X) get an X from her parents (X and Y [mother & father]). Father (Y) gets an X only from his mother (essentially, Y becomes X). etc etc.
How did you first time know the L-system can make the art tree like this. I mean how do you combine the math and coding with the final art. Thats perfect
exactly lol. first of all how did the scientist back in the day think about l-system and then how did people including dan think about using it to make fractal trees?
how would I hide the F system displayed underneath the generate button?
Hey! love your videos.
I just wanted to mention you could have clarified your rules from the beginning and avoided some complexity.
Since you're rules match characters to strings you could just have the characters as keys in a dictionary and the strings as values. Then you can use .hasOwnProperty to check if a character matches a rule and don't need to use a loop to find the matching rule. e.g.
...
var rules = {
A: 'AB',
B: 'A"
};
...
var current = sentence.charAt(i);
if (rules.hasOwnProperty(current)) {
nextSentence += rules[current];
} else {
nextSentence += current;
}
...
Thanks for the awesome videos!
thanks for the suggestions!
The generate function kind of reminds me of a Turing Machine. It has an alphabet (Σ), a set of rules (δ), and an axiom (q₀).
indeed!
it reminded me of "Godel, Escher, Bach" by Douglas Hofstatdler. an amazing book for computer scientists..
You could have one rules object with each rule as an attribute, and use the indexer to replace each letter with its rule. That way you don’t have to iterate through the rules and the program is much quicker.
Thanks for the tip!
Hello,
i am using the p5.js 3.3.6 and it is not generating anything. it only open a blank page. What is causing this problem? i have no error given in the p5.js!
Why did you use particular this rule to translate "F"?
Is it the best Rule to design a tree or could i use any other rules as long as they contain [ ] + F ?
How do I know which rules make sense?
Florijan RÄtz you either define rules and what to do with sentences created by that rules yourself or find ready rule sets and program them.
13:12 The wordwrapping now works because '-' indicates a break, if there is none, css doesn't know where to break the word...
How can I add this kind of programs to another programs?
A nice tweak adding leaves:
function turtle() {
background(51);
translate(width/2,height);
stroke(255, 100);
for (var i=0; i < sentence.length; i++) {
var current = sentence.charAt(i);
if (current == "F") {
line(0, 0, 0, -len);
translate(0, -len);
} else if (current == "+") {
rotate(angle);
} else if (current == "-") {
rotate(-angle);
} else if (current == "[") {
push();
} else if (current == "]") {
createLeaf(); //Added This Line
pop();
}
}
}
//Added These two variables
var leafW = len/10;
var leafH = 2*len/10;
//Added This Function
function createLeaf() {
fill(0,255,50);
ellipse(0,0,leafW, leafH);
noFill();
}
Lindenmeyer used a letter ('L' by convention) to represent leaves, that way they could arise naturally within the L-System itself. Similarly for flowers.
He also allowed using identifiers rather than letters, giving more readable strings.
Rendering letters as a tree, this is the "new kind of sexy"
PLEASE do the animated OOP tree with springs and stuff
Check out @LSystemBot on Twitter for more sets of rules to play with.
nice one!
LOL at reading it like poetry
wow!
thanks for watching!
You could make an object-oriented tree and make the leaves be an L-System
Hey, I think it wasn't wrapping because it sees a bunch of letters next to eachother as one word. Your other rule had special characters, which html doesn't define as a word.
That what I think atleast.
We're gonna be rich!
:D
NiP Supermeat Thats what the card in Hearthstone which is Shown on his picture says when played
p5
CHALLENGE/PROBLEM:
I was programming on Khan Acadamy and I couldn't figure out how to shear an image just using javascript and no DOM elements, CSS, or HTML. How do you manage to do this efficiently and fast? Also, how can you warp an image so that it fits in a quadrilateral fast and efficiently? Please make a tutorial on how to do this. I would appreciate it a lot.
Hey Daniel! Thank you so much for the great videos. Been a fan of your work for a long time now. By the way, seems I can't subscribe to your 'Live Stream Updates' with my new email address. I tried a few weeks back and again today with no luck. It says 'To complete the subscription process, please click the link in the email we just sent you.' but I get no confirmation email. And I just missed your last live stream.
send me your e-mail shiffman.net/about/ and i'll add you
Thanks. You're awesome!
Any one know the channel which do these kind of things in c++ or python
"ABAAB." Daniel Shiffman 2016
You know you could've used a JavaScript object to hold the rules, right?
They would make your code a lot easier
if (j==rules.length) will avoid the use of the "found" variable.
(If you are past the lenght of the rule array, is that you didn't found any)
thanks for this tip!
Also since there's a (very ugly) break after the something has been found, the if statement is not even necessary. Just make sentence += current without any if and it should come only to that point if no break has occurred. But I should advice against this sloppy coding approach...
How can i make bar code through python
aAaAaa you're the youtube
This guy is bob ross of coding xD
Why isn't the tree symmetric about the axiom , I coded it and as per the rule both branches are symmetric .
Missed a semicolon at line 52 :D
const ruleset = {
"A": "AB",
"B": "A"
}
function generate(sentence, ruleset) {
let next = ""
for (const char of sentence) {
if (ruleset.hasOwnProperty(char)) {
next += ruleset[char]
} else {
next += char
}
}
return next
}
In C#(wpf) it will be something like this:
class State
{
public double size;
public double angle;
public double x;
public double y;
public double dir;
public State Clone()
{
return (State)this.MemberwiseClone();
}
}
struct Rules
{
static internal Char[] syms;
static internal String[] to;
public Rules(Char[] symbols, String[] rules)
{
to = new String[rules.Length];
for (int i = 0; i < rules.Length; i++)
{
syms[i] = symbols[i];
to[i] = rules[i];
}
}
}
private StringBuilder Generate()
{
Rules.syms = new[] {'F'};
Rules.to = new[] {"FF+[+F-F-F]-[-F+F+F]"};
StringBuilder nextSentence = new StringBuilder();
for (int i = 0; i < sentence.Length; i++)
{
var current=sentence[i];
var found = false;
for (int j = 0; j < Rules.to.Length; j++)
{
if (current== Rules.syms[j])
{
found = true;
nextSentence.Append(Rules.to[j]);
break;
}
}
if (!found)
{
nextSentence.Append(current);
}
}
sentence = new StringBuilder();
sentence.Append(nextSentence);
txtBlc.Text = sentence.ToString();
return sentence;
}
private void GenerateImage(StringBuilder s)
{
var state = new State()
{
x = 250,
y = 500,
dir = 270,
angle = 15,
size = 15
};
for (int i = 0; i < s.Length; i++)
{
var current = s[i];
if (current=='F')
{
double newX = state.x + state.size * Math.Cos(state.dir * Math.PI / 180);
double newY = state.y + state.size * Math.Sin(state.dir * Math.PI / 180);
Line l = new Line
{
Stroke = System.Windows.Media.Brushes.Black,
X1 = state.x,
Y1 = state.y,
X2 = newX,
Y2 = newY
};
cnvs.Children.Add(l);
state.x = newX;
state.y = newY;
}
else if (current == '+')
{
state.dir += state.angle;
}
else if (current == '-')
{
state.dir -= state.angle;
}
else if (current == '[')
{
states.Push(state.Clone());
}
else if (current == ']')
{
state=states.Pop();
}
}
}
@18:22 surely that 'translate' should be in the setup only...
i liked the A , AB Song
very talented
PI/6 is sliiiiiightly wider than Radians(25)
that's a bit similar to the conway's game of life
The smallest l-system?
Axiom: t
Rule 1:
T = t
*mindblown*
You're obsessed with these things lolol
hah, indeed.
This is how trees on Half-Life 2, Crysis and Skyrim were created?
How come this even worked since you're missing a simicolon at line 51 like the entire time, when current == "-"?
JavaScript is quite flexible and often doesn't mind a missing semi-colon.
+Daniel Shiffman okay. Thanks for clearing that up. They should implement that i c, c++ and c# 😁
Charlie Day as a programmer
Please do a video where you use objects with L-Systems!!!
damn if he will apply for a job someday he can just point to his channel as a portfolio and he will get the job immediately.
What is the easiest language to learn?
Esperanto...
I assume that you're asking for the best language to start with(because objectively the easiest language would be something like hq9+):
C# or Java(both are powerful object oriented languages).
Short resume of other languages:
C/C++ - I feel like I have to do everything myself,
Javascript - lacks the structure you need when first learning a language with its "everything is an object" mindset,
Python - heard a lot of nice things about it but never tried it.
By the way once you learn an oop like C# and play with pointers in pure C, I believe that there's no practical language that you can't tackle.
blacklistnr1 I'm sure everyone has his own ideas about the "easiest" language, but I agree with your last statement. Once you learn the basics of telling computers what you want to do, its not that hard to do that in another language.
blacklistnr1 Thank you!
i agree!
I don't really understand the push and pop function...
Try this video! ua-cam.com/video/o9sgjuh-CBM/v-deo.html
That L-System rule (A becomes AB and B becomes A), the growth is the golden number, isnt it?
1,2,3,5,8,13,21....
Good catch! Actually the Fibonacci sequence appeared first in history as a maths problem enunciated with rabbits. The letters in the L-System behave exactly as the rabbits in the problem (In the problem, each pair of adult rabbits (A) have a pair of baby rabbits (B) every month (So A becomes AB) ; and baby rabbits become adults after one month (So B becomes A)
14:40
amazing content
720p tho :/