"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.
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!
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!
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
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.
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.
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.
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.
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)
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.
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!
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)
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!
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 [ ]
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.
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.
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:`
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.
Awesome and really helpful video once again, but I think, it would have been way more simple and quicker to have a single object containing all rules and then replace the key with the value. let sentence = "A"; let newSentence = ""; const rules = { A: "AB", B: "A" } for(let i = 0; i
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.
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?
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!
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!
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 }
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?
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, 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.
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
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...
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)
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.
![Shareปลาวาฬ ส่งท้าย SS1 พาเปียโน ขึ้น Ferrari ก่อนไปขาย แลก Nissan l [Nickynachat]](http://i.ytimg.com/vi/KAknGkTNIvg/mqdefault.jpg)
"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 kind of stuff tickles my brain's g-spot. It's so incredibly satisfying.
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!
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!!
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?
So glad I found this channel. This is a nice break from my ReactJS adventures!
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"
I can't believe how simple but powerful this technique is.
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! ;)
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!
DAN you are what got me into *really* coding, love your book too!!
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.
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
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.
PI/6 = 30 degrees, so a 5-degree difference might not be noticeable
indeed, good point.
I'm learning so much thanks to you Daniel, thanks a lot! I'm so curious to play around with L-systems myself now :)
3:50 simply amazing - and excellent presentation ❤
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.
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.
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.
I love your coding videos, keep making them!
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
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)
I genuinely have no idea how i'd pass my uni course without your guidance!!
Brilliant! So simple yet so beautiful
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!
this is cool!!! I think I would've had more fun with my CSE courses if you were my instructor lol
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 [ ]
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.
Check out @LSystemBot on Twitter for more sets of rules to play with.
nice one!
I wonder what happens when you apply rules randomly from a pre-defined set, just so it's not so perfectly self-similar.
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.
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:`
Thank you, thank you, yes and thank you
oh my god, this is so beautiful
Excelente video.
Claridad y calidad bastante alta.
i really really need your help... you just reawakened my curiosity
As said before, the Bob Ross of coding
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.
did the video theorized in the outro about applying physics to sets of branch objects using L systems ever get made, by chance?
Beautiful algorithm.
how would I hide the F system displayed underneath the generate button?
I got really excited at 21:00
Awesome and really helpful video once again, but I think, it would have been way more simple and quicker to have a single object containing all rules and then replace the key with the value.
let sentence = "A";
let newSentence = "";
const rules = {
A: "AB",
B: "A"
}
for(let i = 0; i
You're an amazing human being
how to use the rule where rule.a has more than one variable?
Wow!!!! This is soo cool!!!!!!!!! THANKS!!!!!!!!!!!!!!!!
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!
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?
FANTASTIC video ... can you please tell me how to apply such a concept to create a 3d plant based on the L system ?
Is there a way to combine this with mandelbrot or julia sets? Are there any papers that combine this with mandelbrot or julia sets?
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!
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!
13:12 The wordwrapping now works because '-' indicates a break, if there is none, css doesn't know where to break the word...
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..
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
}
Why isn't the tree symmetric about the axiom , I coded it and as per the rule both branches are symmetric .
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.
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, 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
Awesome! How comes you didn t mess with the variables this time? It s always fun seeing different results
Mindblowing!
thanks for watching!
Rendering letters as a tree, this is the "new kind of sexy"
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
that is awesome
You know you could've used a JavaScript object to hold the rules, right?
They would make your code a lot easier
How can i make bar code through python
How can I add this kind of programs to another programs?
great channel. keep it up!
@18:22 surely that 'translate' should be in the setup only...
"ABAAB." Daniel Shiffman 2016
PI/6 is sliiiiiightly wider than Radians(25)
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();
}
}
}
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# 😁
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...
Omg this is very creative
You could make an object-oriented tree and make the leaves be an L-System
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)
PLEASE do the animated OOP tree with springs and stuff
LOL at reading it like poetry
thanks.
Any one know the channel which do these kind of things in c++ or python
i liked the A , AB Song
very talented
This guy is bob ross of coding xD
I don't really understand the push and pop function...
Try this video! th-cam.com/video/o9sgjuh-CBM/w-d-xo.html
Is that not basically grammar of Language (look at Grammer in theoretical computer science)
20:22 , on line 51 he missed semicolon .
NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
The smallest l-system?
Axiom: t
Rule 1:
T = t
*mindblown*
good one
genius..!
Missed a semicolon at line 52 :D
Charlie Day as a programmer
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!
14:40
This is how trees on Half-Life 2, Crysis and Skyrim were created?
that's a bit similar to the conway's game of life
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.