Coding Challenge #16: L-System Fractal Trees

[@semitangent]

"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.

[@TheCodingTrain]

+Wojciech Morawiec haha I love this comment!

[@finnaginfrost6297]

Exactly the same here

[@Mattify0777]

Highfive mate

[@abinadiswapp7637]

haha yeah that's me too!!

[@ryanmatthews5771]

Couldn't have said it better myself. You really are the Bob Ross of coding.

[@camelcase9225]

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.

[@tanmayagarwal8513]

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!!

[@amber1862]

This kind of stuff tickles my brain's g-spot. It's so incredibly satisfying.

[@AryehAmitz]

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.

[@TheCodingTrain]

+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!

[@grumpyparsnip]

I can't believe how simple but powerful this technique is.

[@sofialpaca2563]

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!

[@smonman2873]

F -> F+[F-F]-F[+F] This combination looks beautiful! It creates real leafs!

[@Megasterik]

What's the axiom and angle? I used 'F' and 45 degrees and it creates a plant/weed but not real leafs.

[@rukna3775]

@@Megasterik is it creating marijuana?

[@pelayne79]

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.

[@BeatsByVossy]

So glad I found this channel. This is a nice break from my ReactJS adventures!

[@CJThomps]

3:50 simply amazing - and excellent presentation ❤

[@eyewarsx]

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"

[@Zooey105]

DAN you are what got me into *really* coding, love your book too!!

[@spongebobseyelashes8548]

I remember using grammars and lexers/parsers in Ocaml last year for college, was great to see it visualized like this!

[@CristiNeagu]

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.

[@iamstickfigure]

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.

[@renatokuurstra5957]

You channel is simply fantastic! Please continue to give us this wonderful material! ;)

[@darthtorus9341]

PI/6 = 30 degrees, so a 5-degree difference might not be noticeable

[@TheCodingTrain]

indeed, good point.

[@alvisez.6453]

I'm learning so much thanks to you Daniel, thanks a lot! I'm so curious to play around with L-systems myself now :)

[@lachlancatto9716]

I love your coding videos, keep making them!

[@matthewniles2817]

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)

[@SpencerYonce]

this is wonderful

[@baldebaldemord9588]

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.

[@Ixion125]

Now, that's ABSOLUTELY GENIOUS

[@t-h787]

I genuinely have no idea how i'd pass my uni course without your guidance!!

[@michalbotor]

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.

[@RainFlyAnimation]

Brilliant! So simple yet so beautiful

[@Gridfen]

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.

[@glenneric1]

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

[@creeperave3768]

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!

[@ajthemagi2913]

CreepeRave those are Conway's look and say numbers. It's a cute little sequence.

[@Texplanations]

121 1331

[@matthewniles2817]

I believe it's called the look-and-say sequence (or something like that) by some famous mathematician.

[@evanparsons123]

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)

[@hairnetart]

oh my god, this is so beautiful

[@xnick_uy]

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.

[@markusnilssen5240]

You're an amazing human being

[@annmariebartholomew2591]

Thank you, thank you, yes and thank you

[@odddiabetic]

I got really excited at 21:00

[@alejandraecheverrygiraldo9282]

Excelente video. Claridad y calidad bastante alta.

[@cwlindWX]

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.

[@stefanvanderheijden4496]

As said before, the Bob Ross of coding

[@DodaGarcia]

Wow I hadn't seen LOGO in almost 30 years 🥲 This was remarkable

[@dorpeled4768]

Beautiful algorithm.

[@beyondcatastrophe_]

13:12 The wordwrapping now works because '-' indicates a break, if there is none, css doesn't know where to break the word...

[@isabelmorel2225]

Wow!!!! This is soo cool!!!!!!!!! THANKS!!!!!!!!!!!!!!!!

[@michaeldere2892]

this is cool!!! I think I would've had more fun with my CSE courses if you were my instructor lol

[@dimashishkov2909]

Mindblowing!

[@TheCodingTrain]

thanks for watching!

[@1anya7d]

Beautiful video! I wonder if that popular game "no man's sky" used that thing to generate planets (or plants)

[@iaincarson6293]

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!

[@cheesiestmaster879]

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:`

[@kevnar]

I wonder what happens when you apply rules randomly from a pre-defined set, just so it's not so perfectly self-similar.

[@sukhresswarun]

20:22 , on line 51 he missed semicolon .

[@TheCodingTrain]

NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO

[@lealemtaye]

i really really need your help... you just reawakened my curiosity

[@carolinepace5511]

FANTASTIC video ... can you please tell me how to apply such a concept to create a 3d plant based on the L system ?

[@beaverjoe9171]

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

[@blasttrash]

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?

[@DilanDeSilva]

great channel. keep it up!

[@Holobrine]

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.

[@TheCodingTrain]

Thanks for the tip!

[@kamoroso94]

The generate function kind of reminds me of a Turing Machine. It has an alphabet (Σ), a set of rules (δ), and an axiom (q₀).

[@TheCodingTrain]

indeed!

[@Dong_Harvey]

it reminded me of "Godel, Escher, Bach" by Douglas Hofstatdler. an amazing book for computer scientists..

[@jdyerjdyer]

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(); }

[@robgrainger5314]

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.

[@erdemozverenn]

Rendering letters as a tree, this is the "new kind of sexy"

[@ajnovember]

did the video theorized in the outro about applying physics to sets of branch objects using L systems ever get made, by chance?

[@ifinit5428]

Omg this is very creative

[@Armageddonas7]

Awesome! How comes you didn t mess with the variables this time? It s always fun seeing different results

[@mishikookropiridze]

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 [ ]

[@gespinozpaerez]

that is awesome

[@iOverThoughtThis]

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!

[@TheCodingTrain]

thanks for the suggestions!

[@katiehannah1483]

how would I hide the F system displayed underneath the generate button?

[@majesteit2762]

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.

[@xnick_uy]

We're gonna be rich!

[@majesteit2762]

:D

[@janknoblich4129]

NiP Supermeat Thats what the card in Hearthstone which is Shown on his picture says when played

[@mishikookropiridze]

p5

[@RupertBruce]

@18:22 surely that 'translate' should be in the setup only...

[@OOO-CM-Saiteja]

how to use the rule where rule.a has more than one variable?

[@blasttrash]

Is there a way to combine this with mandelbrot or julia sets? Are there any papers that combine this with mandelbrot or julia sets?

[@FredoCorleone]

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 }

[@Tin98Tin]

PLEASE do the animated OOP tree with springs and stuff

[@ryanadytia498]

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

[@kim15742]

You could make an object-oriented tree and make the leaves be an L-System

[@keitaidrissa312]

good one

[@rostislav_rus]

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(); } } }

[@jesus.castaneda]

How can I add this kind of programs to another programs?

[@florijanratz520]

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?

[@Gridfen]

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.

[@danielhetrick677]

"ABAAB." Daniel Shiffman 2016

[@Klarpimier]

You know you could've used a JavaScript object to hold the rules, right? They would make your code a lot easier

[@hamids4550]

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!

[@ashishmaurya3246]

How can i make bar code through python

[@varunmalik7109]

Why isn't the tree symmetric about the axiom , I coded it and as per the rule both branches are symmetric .

[@The_Foreman]

PI/6 is sliiiiiightly wider than Radians(25)

[@framegrace1]

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)

[@TheCodingTrain]

thanks for this tip!

[@xnick_uy]

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...

[@Diego612010pd]

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.

[@qualle987123]

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

[@mango_water169]

This guy is bob ross of coding xD

[@AryehAmitz]

thanks.

[@sethbracken]

Check out @LSystemBot on Twitter for more sets of rules to play with.

[@TheCodingTrain]

nice one!

[@peterumdog]

LOL at reading it like poetry

[@Das_Mojo]

i liked the A , AB Song

[@Das_Mojo]

very talented

[@Kapthos]

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....

[@ismaelcebrianmarco7288]

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)

[@MichaelDavydoff]

This is how trees on Half-Life 2, Crysis and Skyrim were created?

[@CRBarchager]

How come this even worked since you're missing a simicolon at line 51 like the entire time, when current == "-"?

[@TheCodingTrain]

JavaScript is quite flexible and often doesn't mind a missing semi-colon.

[@CRBarchager]

+Daniel Shiffman okay. Thanks for clearing that up. They should implement that i c, c++ and c# 😁

[@ngodingnyantai6930]

genius..!

[@molesox]

I don't really understand the push and pop function...

[@TheCodingTrain]

Try this video! kzbin.info/www/bejne/pWrWmJ2rnZJ2eK8

[@amitojsinghahuja4330]

Any one know the channel which do these kind of things in c++ or python

[@mtgmage924]

Missed a semicolon at line 52 :D

[@meysam.mousavi]

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.

[@TheCodingTrain]

send me your e-mail shiffman.net/about/ and i'll add you

[@meysam.mousavi]

Thanks. You're awesome!

[@yesveryprofesionalnameyes6055]

The smallest l-system? Axiom: t Rule 1: T = t *mindblown*

[@deadroxis1907]

What is the easiest language to learn?

[@komolunanole8697]

Esperanto...

[@blacklistnr1]

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.

[@komolunanole8697]

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.

[@deadroxis1907]

blacklistnr1 Thank you!

[@TheCodingTrain]

i agree!

[@theodorep.5501]

wow!

[@TheCodingTrain]

thanks for watching!

[@sl4yd]

Charlie Day as a programmer

[@xBDCFF]

that's a bit similar to the conway's game of life

[@thisisloop]

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.