Hells bells your videos are amazing. You work so quickly that it can be hard to keep up but your diagrams really help. Thank you for your incredibly hard work and I will defo be donating. Keep up the hard work.
Actually, this is really cool. I bet you could combine this with terrain generation to simulate the way erosion creates streams, thereby making the generated terrain more realistic looking.
This was very interesting but also very difficult (at least for my poor programming skills). What about introducing a labeling system for coding challenges? Something like green for easy, yellow for intermediate, red for hard? This could maybe be useful for less expert programmers.
Cool ! I would be pleased to see the same algorithm with a light positionned somewhere in the canvas to tell the tree where to go (direction), and why not, moving, to see how it goes... Anyway, always a pleasure to watch your videos, thanks !
You can use this with multiple trunks to make a forest (looking down into it; the branches connect to one or another of the trunks, we get terminal leaves, etc.
Just a small comment: adding x unit-vectors does *not* result in a vector of length x, unless all of them are the same vector, so actually normalizing would be 'more correct' than dividing by number of vectors.
While you are stating a fact, the algorithm in the paper uses the average : "The node v' is positioned at a distance D from v, in the direction defined as the average of the normalized vectors toward all the sources s ∈ S(v)."
I post this as a possible optimization: When you definen a function for an object, you usually do it like this, = function... This is not very effective as each object you make needs to define this function separately. You should use prototypes and define functions like .prototype. = function... This may sound like a micro-optimization (and it is) but it can make a big difference if you have hundreds or thousands of objects.
Yes, this is a really good point. I have been avoiding "prototype" because of the confusion it often causes with students. I would like to do a video about "prototype" soon.
i found the issue that i had (java not p5js) in the constructor of the branch there were new vars created instead of assigning the values to the ones of the branch Derp: Branch(Branch par,PVector pos,PVector dir){ PVector position=pos; Branch parent=par; this.dir=dir; } Correct: Branch(Branch par,PVector pos,PVector dir){ this.position=pos; this.parent=par; this.dir=dir; }
I've been looking at the previous challenges, and this time the video failed to deliver. The final product looks kind of decent, but the road to get here was all messed up. For this kind of "lengthy" object oriented implementations, you should start by writing down in the whiteboard or somewhere else the classes you want to use, their main properties and methods you want for them. After you have your initial design, then you go coding and maybe later you can add more properties and methods in the written version first, then to the code. This would actually shorten the duration of the video and make the logic behind everything more clear. Also, adding some comments to the code is always welcomed.
what I don't understand is why we break the branches look in the grow function if we find a branch that is closer to the minimum distance. Ok, we ignore that branch because it's too close to the current leaf, same as we do when it's too far away, but why break the loop? Why don't we look for other branches and see if they're at an acceptable distance from the leaf?
I once made a solitaire simulator. It would shuffle the cards, deal a layout, and then play an optimal strategy for winning. The goal was to compute by brute force what the odds of winning. Wikipedia said the odds of winning were like 1 in 13. But I was running through literally five billion games and not winning once. Something was wrong. After stepping through my code for like two hours, checking the algorithm for all the move AI 200 times, I realized that I was not reshuffling the cards after every game. So if the computer lost the first deal, it would lose every deal. D'uh! It was such a stupid bug, I laughed for ten minutes, picturing the AI playing 5 billion games of solitaire against itself with the exact same deal and wondering why it wasn't winning.
Why don't you use some of the js Array functions like forEach, map, reduce, filter, etc. There are very useful and make the code so much readable. Nice vid btw.
Hi Daniel, thank you for these amazing tutorials.. please keep making them! I was wondering, how can we recognize the main set of lines and make the next gen of lines a child of the first ones? The parent allways points to the previous point in the line, but I can't find a way to make groups out of them... I would like to connect the open "dots" between them so first I need to recognize the second or third gen branches.. Thank you for your time!
Hello! Question: How can one update the branches array to reflect each direction away from the main trunk/stem?? In other words, if the leaves fall from one particular branch, could we organize the same array to remove all of the points and parents associated with that long branch?
Under the if(leaves.get(j).reached) section you can find the last addition to the branch array index. That is the index of the last point on that branch that reached the leaf. With that, you can find its parent and then use a while loop to find each parent after that until you reach the root. Got to love "indexOf()" !!!
hey I'm new to your channel I came here because I'm a highschool sophomore and next year I'm going to a community college for running start and I'm going to take a C's 101 class and I'm just getting into coding and although I just started watching your vids today I would appreciate it if u could post more things about understanding code and beginners stuff like the programs u use and how to pick a language and stuff, I plan on getting more into programming for fun too ik this is long and if you've read it so far it will mean just that much more to me but thank you I love the several vids of yours I've seen so far, I've subbed and I'm gonna keep watching them because it's informational for the parts I understand and entertaining but keep up the good work
sure thing! i recommend taking a look at my intro to Processing and p5.js videos where i discuss different languages. This playlist: th-cam.com/play/PLRqwX-V7Uu6ZYJC7L-r6rX6utt6wwJCyi.html and also: th-cam.com/video/8j0UDiN7my4/w-d-xo.html
it would be interesting if you had movable leaves and also movable leaves the branches avoid, then you could make a game of guiding the branches into some area in real time, or something (im sure thats been done by someone)
The branches are added until the 'root' reaches the leaves. The leaves in the range of the branch decide which branch is closest, and link to that branch, so more than one leaf can connect to one branch, which is how it splits. Every branch only has one parent, but that means that a parent can have multiple children, it's just that the parent doesn't know about the children, only the children know about the parent (but not each other)
It's REALLY hard to follow this with the amount of zooming... I have to pause and go frame-by-frame in order to check how your code is written to check mine for bugs : /
newer versions of the p5.js beta-editor seem to not recognize the copy() function.. unless i'm the one missing something.. edit: nvm, missing dir parameter in tree.js causes bug in branch.js
Daniel, could you please make (or point me to) a video explaining how to set up the javascript programming? (I mean what's in the libraries folder, .DS_Store and index.html
I've not well understood how branching in this algorithm works... I would aspect just one branch to move following the avarage distance of leaves. But that's just at first sight. You should remake the video and make clear all the points in order. This is the most confusing video of yours so far.
you would have less problems if you started your parent off as a seed ... then everything from that point onwards has a proper reference and you dont have to bodge the algorithm to make up for the fact that you start with a branch instead of the a seed ... Like a tree in Nature ... it doest start from a branch it starts from a seed ... the seed is then the parent of the complete tree ... and the seed is the child of the tree before it ... it's parent ... . you are starting past the start and making a bad assumption ... which will have a major faults further down because of the bodge job to fix the lack of a seed to start . (bodge job) making something that works with parts that dont actually go together well ...
24m mark the logic fault ... your min max check should be anded at the start ... if not between min max ... do the nested if's for placing branches and leaves ... and break out if false ... you are checking boundaries then rejecting those boundaries to create new ones with a record and failing every time because your record doesnt fall within the min max boundry ... so it spends its time checking there and not actually progressing
further logic fault leaves dont actually pull to themselves they push for maximum surface area of the volume ... so branches actually grow to fill in empty space with leaves .. with minimal overlap at each level of growth ... and it does this on a prime number ratio for each direction ... with one direction being one step higher than the other direction ... what you are trying to do is force chaotic behaviour into a prime sequence by factoring it down to primes essentially ... faster and less confusing to grow with primes for each layer and progress outwards then your max distance will change with the area needed to be covered and your min distance is always your lowest record and equal to the starting prime in its direction ... then scaling is always the same and growth is always random BUT following a pattern to provide maximum leaf coverage of the current volume of growth including all previous layers of growth added in ... this provides the larger trunks and branches ... to support the tree and makes for an organic growth and more natural model of a natural system ... also takes less cpu power and about 2/3rd's of the code you are currently using ... lowering overhead
"I can also just be safe about this and set closestBranch to null", he says as he types "closestBranch = true;" into the text-editor. This is the first of your videos that annoyed me with its glaring mistakes. :C
Hells bells your videos are amazing. You work so quickly that it can be hard to keep up but your diagrams really help.
Thank you for your incredibly hard work and I will defo be donating.
Keep up the hard work.
Thanks for the nice feedback!
Actually, this is really cool. I bet you could combine this with terrain generation to simulate the way erosion creates streams, thereby making the generated terrain more realistic looking.
This was very interesting but also very difficult (at least for my poor programming skills). What about introducing a labeling system for coding challenges? Something like green for easy, yellow for intermediate, red for hard? This could maybe be useful for less expert programmers.
Thats a great suggestion actually
@@prashanttiwari120sadly never heard :(
You did an amazing job! It was a pleasure to watch your thought process grow just like the fractal tree pattern :)
"It does not have to do with colonizing space, it's really about colonizing a two-dimensional space"
I enjoy following his JS tutorials in processing, good challenge there
thanks again learning so much after my stroke 10 years ago and learning Processing and Arduino and now p5 !!!
i am so thrilled to hear!
Cool ! I would be pleased to see the same algorithm with a light positionned somewhere in the canvas to tell the tree where to go (direction), and why not, moving, to see how it goes...
Anyway, always a pleasure to watch your videos, thanks !
Does p5.js come with a function that lets me draw myself a beard like yours?
BrandNewByxor nope, but u can make this function easily.
You can use this with multiple trunks to make a forest (looking down into it; the branches connect to one or another of the trunks, we get terminal leaves, etc.
Love your videos! would love to see a redo of this video though with the knowledge you have now :)
Thank you so much for this video ! I'm heaving a lot of trouble translating the algorithm to openframeworks though
Nice video ! I like the "live" part of your video.
thanks!
Building a tree by the leaves 🤯
great exposition -- Is it possible to model an agave plant using fractal geometry? the agave plant is a fractal?
Just a small comment: adding x unit-vectors does *not* result in a vector of length x, unless all of them are the same vector, so actually normalizing would be 'more correct' than dividing by number of vectors.
While you are stating a fact, the algorithm in the paper uses the average :
"The node v' is positioned at a distance D from v, in the direction defined as the average of the normalized vectors toward all the sources s ∈ S(v)."
I post this as a possible optimization: When you definen a function for an object, you usually do it like this, = function... This is not very effective as each object you make needs to define this function separately. You should use prototypes and define functions like .prototype. = function... This may sound like a micro-optimization (and it is) but it can make a big difference if you have hundreds or thousands of objects.
Yes, this is a really good point. I have been avoiding "prototype" because of the confusion it often causes with students. I would like to do a video about "prototype" soon.
what happen about the line 21 in tree.js?There is something lost at 16:53. I cannot see which part you change.
Same
i found the issue that i had (java not p5js)
in the constructor of the branch there were new vars created instead of assigning the values to the ones of the branch
Derp:
Branch(Branch par,PVector pos,PVector dir){
PVector position=pos;
Branch parent=par;
this.dir=dir;
}
Correct:
Branch(Branch par,PVector pos,PVector dir){
this.position=pos;
this.parent=par;
this.dir=dir;
}
Watching you explain this at 1/2 speed put me in a trancelike state. I'm texting from mars right now lol
Did it!!! Happy dance 😃
I've been looking at the previous challenges, and this time the video failed to deliver. The final product looks kind of decent, but the road to get here was all messed up.
For this kind of "lengthy" object oriented implementations, you should start by writing down in the whiteboard or somewhere else the classes you want to use, their main properties and methods you want for them. After you have your initial design, then you go coding and maybe later you can add more properties and methods in the written version first, then to the code. This would actually shorten the duration of the video and make the logic behind everything more clear.
Also, adding some comments to the code is always welcomed.
Thanks for this feedback, it's very helpful.
Daniel Shiffman I'm really enjoying the channel :-)
Yes! This was frustrating for me too. (at 16:50 or so)
if you add another function for things to be avoided, then you will essential have made computer slime mold.
+James Butler (Jim) heh, thanks for the tip!
quite interesting, but can use a very simple software called IFStile to create same fractals , but with not requirement for learning java
what I don't understand is why we break the branches look in the grow function if we find a branch that is closer to the minimum distance. Ok, we ignore that branch because it's too close to the current leaf, same as we do when it's too far away, but why break the loop? Why don't we look for other branches and see if they're at an acceptable distance from the leaf?
You are crazy bro
You could implement a class for dots, so they are object oriented. After the lines have been drawn point objects could be deleted.
I once made a solitaire simulator. It would shuffle the cards, deal a layout, and then play an optimal strategy for winning. The goal was to compute by brute force what the odds of winning. Wikipedia said the odds of winning were like 1 in 13. But I was running through literally five billion games and not winning once. Something was wrong.
After stepping through my code for like two hours, checking the algorithm for all the move AI 200 times, I realized that I was not reshuffling the cards after every game. So if the computer lost the first deal, it would lose every deal. D'uh!
It was such a stupid bug, I laughed for ten minutes, picturing the AI playing 5 billion games of solitaire against itself with the exact same deal and wondering why it wasn't winning.
Is there any way of seeing the Processing version of this?
¿How I can scan a fractal in the nature, like the veins in the leaves?
Why don't you use some of the js Array functions like forEach, map, reduce, filter, etc. There are very useful and make the code so much readable. Nice vid btw.
Those are ES6 concepts, the way he did it was better because it's more common (ES5)
Hey Daniel! Great series.
I was wondering how do I export a DXF or a PDF of the final result of a tree?
Hi Daniel, thank you for these amazing tutorials.. please keep making them!
I was wondering, how can we recognize the main set of lines and make the next gen of lines a child of the first ones? The parent allways points to the previous point in the line, but I can't find a way to make groups out of them... I would like to connect the open "dots" between them so first I need to recognize the second or third gen branches.. Thank you for your time!
wich programs this dude using?
that's crazy, I'm not even subbed, it's on my recommended.
🤓🤓Watching Daniel's videos I do not need to go to school 😎... so smarth guy
How do the branches split? It looked like you only ever added one branch to the end of every other branch.
this was awesome and very enjoyable!
Could you code a pendulum simulation (so it exhibits isochronism)?
Take a look: th-cam.com/video/9iaEqGOh5WM/w-d-xo.html
I thought you had done something on this topic, but couldn't find it.
Awesome!
thank you!
23:01 if {...} elsie {...} lol
love how it sounds so fuzzy.
Hello! Question: How can one update the branches array to reflect each direction away from the main trunk/stem?? In other words, if the leaves fall from one particular branch, could we organize the same array to remove all of the points and parents associated with that long branch?
Under the if(leaves.get(j).reached) section you can find the last addition to the branch array index. That is the index of the last point on that branch that reached the leaf. With that, you can find its parent and then use a while loop to find each parent after that until you reach the root. Got to love "indexOf()" !!!
how was this to do with team trees when it was uploaded in 2016
hey I'm new to your channel I came here because I'm a highschool sophomore and next year I'm going to a community college for running start and I'm going to take a C's 101 class and I'm just getting into coding and although I just started watching your vids today I would appreciate it if u could post more things about understanding code and beginners stuff like the programs u use and how to pick a language and stuff, I plan on getting more into programming for fun too ik this is long and if you've read it so far it will mean just that much more to me but thank you I love the several vids of yours I've seen so far, I've subbed and I'm gonna keep watching them because it's informational for the parts I understand and entertaining but keep up the good work
sure thing! i recommend taking a look at my intro to Processing and p5.js videos where i discuss different languages. This playlist: th-cam.com/play/PLRqwX-V7Uu6ZYJC7L-r6rX6utt6wwJCyi.html and also: th-cam.com/video/8j0UDiN7my4/w-d-xo.html
The dislike count is so low on this video! I mean, it DOES make sense because it's an amazing video
Wouldn't it better to name root, trunk?
he made it soo much more complicated than it had to be,
it would be interesting if you had movable leaves and also movable leaves the branches avoid, then you could make a game of guiding the branches into some area in real time, or something (im sure thats been done by someone)
How come you don't use the "continue" keyword in your loops? Or does JS not have that?
Sigma Reaver Thing is that most people avoid using continue. But yes it can be useful sometimes!!
eek.
I really struggled to follow along this time while trying to recreate the code in Processing.
Loving the videos Dan. Was wondering if you have a codepen account i could follow?
not yet, but maybe i should make one!
this is great! thanks
thanks for watching!
How is this working without 'this' in:
if (parent != null)
?
I have an error...
How does the tree split? You let every branch just create one children, don't you? or does it happen when more than one leave pulls on the branch?
***** I think it's what I last said, but I'm not sure
The branches are added until the 'root' reaches the leaves. The leaves in the range of the branch decide which branch is closest, and link to that branch, so more than one leaf can connect to one branch, which is how it splits. Every branch only has one parent, but that means that a parent can have multiple children, it's just that the parent doesn't know about the children, only the children know about the parent (but not each other)
reading the paper explains better than the video: algorithmicbotany.org/papers/colonization.egwnp2007.large.pdf
It's REALLY hard to follow this with the amount of zooming...
I have to pause and go frame-by-frame in order to check how your code is written to check mine for bugs : /
It's not a root, it's a trunk! 8-P
newer versions of the p5.js beta-editor seem to not recognize the copy() function..
unless i'm the one missing something..
edit: nvm, missing dir parameter in tree.js causes bug in branch.js
Add quad trees and make the biggest fractal tree ever
Dude I'm watching these for gsmedev
Can someone help? I'm always getting the error message that Tree is not definded... what do i have to do?
already figured out, I had to add it as source in the html file. Did not know that haha
dad? is this you? where have you been all this time?
you told me you were going for a couple cigars...
?
wow, fourth!
you're fucking awesome :D
Daniel, could you please make (or point me to) a video explaining how to set up the javascript programming? (I mean what's in the libraries folder, .DS_Store and index.html
github.com/CodingTrain/Rainbow-Code/tree/master/CodingChallenges/CC_17_SpaceColonizer_p5
I'm watching this for gamedev
I've not well understood how branching in this algorithm works... I would aspect just one branch to move following the avarage distance of leaves. But that's just at first sight. You should remake the video and make clear all the points in order. This is the most confusing video of yours so far.
21:56 brb
what programs you use ? or should i say :
this.question = what () {
w̶h̶a̶t̶ ̶(̶x̶)̶;̶
programs();
you(use.?)
p5.js, Processing (frameworks)
sublime text, atom, and codepen (ide)
chrome web browser
Ritoban Roy Chowdhury
Dafaq
you would have less problems if you started your parent off as a seed ... then everything from that point onwards has a proper reference and you dont have to bodge the algorithm to make up for the fact that you start with a branch instead of the a seed ... Like a tree in Nature ... it doest start from a branch it starts from a seed ... the seed is then the parent of the complete tree ... and the seed is the child of the tree before it ... it's parent ...
.
you are starting past the start and making a bad assumption ... which will have a major faults further down because of the bodge job to fix the lack of a seed to start
.
(bodge job) making something that works with parts that dont actually go together well ...
24m mark the logic fault ... your min max check should be anded at the start ... if not between min max ... do the nested if's for placing branches and leaves ... and break out if false ... you are checking boundaries then rejecting those boundaries to create new ones with a record and failing every time because your record doesnt fall within the min max boundry ... so it spends its time checking there and not actually progressing
further logic fault leaves dont actually pull to themselves they push for maximum surface area of the volume ... so branches actually grow to fill in empty space with leaves .. with minimal overlap at each level of growth ... and it does this on a prime number ratio for each direction ... with one direction being one step higher than the other direction ... what you are trying to do is force chaotic behaviour into a prime sequence by factoring it down to primes essentially ... faster and less confusing to grow with primes for each layer and progress outwards then your max distance will change with the area needed to be covered and your min distance is always your lowest record and equal to the starting prime in its direction ... then scaling is always the same and growth is always random BUT following a pattern to provide maximum leaf coverage of the current volume of growth including all previous layers of growth added in ... this provides the larger trunks and branches ... to support the tree and makes for an organic growth and more natural model of a natural system ... also takes less cpu power and about 2/3rd's of the code you are currently using ... lowering overhead
I love you but I don't understand anything.... My tree exploited :(
Please help
sry idk why i got mad if im...
Huh
Second()!
First!😂
"And in that tree..." Ohh god flashbacks...
Reply if you know what I'm talking about.
"I can also just be safe about this and set closestBranch to null", he says as he types "closestBranch = true;" into the text-editor.
This is the first of your videos that annoyed me with its glaring mistakes. :C