Really? He drives me insane, all I can think is that Meth is a horrible drug when I watch this guy, I like the Tutorials I just wish he would STFU for two seconds. IDK to each his own I guess, whatever makes ya happy for you and him.
Tooooo many extra curricular spasms in relation to his coding spawn. Lots of 'branch' words with no real goal established. He seems amazing....amazed with himself more so. Teach is like code...both require a plan to better results.
@@dannywest749 "extra curricular spasms" Where? Sure he talks a lot, and brings up heaps stuff. But it is all relevant information, dont go watching a programming video and than when someone brings up a concept call it extra curricular, he is simply teaching us all the concepts involved.
I found a coding train video on the suggestions bar when I was watching some other programming video and thought "Why not?". Ever since I've been watching your vids. Just BECAUSE.
I made a similar thing after your first Video about fractal trees. But I just stored the angle of the branch. I then recueisvely added a left/right branch with the parents angle -/+ some constant. Saves you a lot of work with vectors, in my opinion. But this approach clearly works just as well. Great video as always.
i would love to have you as a teacher at our local university, because you are such a congenially person (: keep up the good work! the quality of your videos is amazing!!!!!
Excellent video. I created this tree with growing branches with random angles and put the entire tree rendering into 1 object. Now i can create multiple trees at once and let them growing. I didn't use p5 but vanilla javascript and html canvas.
Quite surprising how simple this is, in the sense that you can create really realistic trees with this method, because trees are nothing other than branches branching into more branches
Managed to make it change color with each click! Might be easy, but its not when you have no idea about codding. Thanks alot for this videos, well explained and fun to watch, perfect for summer nights.
I created a single tweaked branch function instead of two branch functions it works pretty well here is the code: this.branch = function(a) { var dir = p5.Vector.sub(this.end, this.begin); dir.rotate(a); dir.mult(0.67); var newEnd = p5.Vector.add(this.end, dir); var right = new Branch(this.end, newEnd); return right; } and is used like so: tree[1] = root.branch(PI/4); tree[2] = root.branch(-PI/4);
Wow! I'm only beginning to learn to code now, but through your videos I've found awesome inspiration to put all the maths I've learned at school into use while coding. Fantastic work, keep it up!
That's genius! Accidental lines of code just created a surprising and touching art! I am quite enjoying your work and it inspires me a lot. A Big Thank you! And I think it's safe to jump out of the loop after checking it's true, because you loop reversely and previous item must be set to true already.
Another way to go about storing the branches is to have the branches stored inside of its parent branch, so a branch object would have childBranches, or branchA and branchB, depending on how you want to store the branches, then the branches show() function can call show() on its children
i actually made in python a function that draws an oval and gives ir a random color between brown orange red and pink and a rondom angle wich makes the tree look supper realistic
Thanks for the videos! I've been binge watching and reading the Nature of Code. In this video you told us to remind you to do a video on "string forces" so you can pull objects and have them spring back - did you ever make that video? Sounds super interesting!
You may be able to integrate the Edwards Lorenz attractor thing you did in an early video.the one where it drew two intersecting ellipses in color and 3d. During that demo, you vectored the result and a strange "shimmering effect happened. Perhaps you could apply THat to the leaves to give the impression of wind, and then cycle through 3 or 4 different lorenz arrays to make it more random.
Would be interesting with a coding challenge where you took fractal trees into your landscape generate code. And with rules planeted the trees related to reality where trees doesnt grow over a certain height.
Oh, its an Teamspeak and a Forum in one. You can create a Server where you can create Text channels with different topics and voice channels too. Many Twitch Streamer (Gamer) you this, but I think it would work for your channel too. Its for free to create a server, so definitely check that out.
(18.24) Do a video where we take this tree and actually attach spring forces to all of it, so you can sort of pull on it and it just goes "blrvwvrvwvmnvm"
You should do a video so we could get to know you .. cause I have a few questions you should answer Love your channel btw I'm just getting into computer science I would also like you to do tutoring I need help on the basics but I prefer to learn from you... you have the energy
I have questions! 1. why does prccessing works well while using var in iterating loop? I thought in javascript there is always problem using var in loop statement, so it is encouraged to use let. 2. when you use jitter method, why do not entire branches goes off uncontinuosly? Shouldn't it appear like bunch of segmented sets of branches since we are only moving the end points??
Any resources to start what you talk about at the end? Really like the idea of playing with the realistic nature effects but am not that experienced of a programmer, thanks Dan!
Heh, I didn't even watch the video, I challenged myself to come up with the ideas, and at 15:00 I did it exactly the same way, but that was quite a spontaneous thought, I had no idea how to do that previously
I really can't stop watching it , and I want to try it ,but which program do you use ?? and which language do you use ? is it java ?? because I try to make it with visual studio but it didn't work and I don't know why
hey, i'm fairly new to all this drawing; thanks for your work! how would you write a loop for count, that the leaves are added not only the first five counts, but every five counts?
So I will often make sketches that need to have a dynamic canvas. Meaning, there is some content that moves around and needs to be centered on the screen, or in this case, the canvas needs to dynamically resize as the tree gets larger and larger. Is there a recommended method for doing this? I have found some methods that work, but there is some performance impact
How can I stop the tree from growing past a certain count, say 6 mouse clicks? Currently it just keeps growing until it crashes, and I want to constrain this function.
what do you mean when you say that all those branches store their location dynamically? i've tried to do the same with processing but the when i try to jitter the branches they go where they want without staying attached to each other because their position is not updated.
I know this is a little bit late, but how do you adjust your lines like this? When you write for example (a,b) and then you press something and that turns it to (a, b). It also works perfectly with For-loops. I am missing this in my Text-editor and don't know how to find it by googling. Is it called reformation?
i dont get how that jitter works. if you move all the end positions how does the next branch now to update its start position? the only function being called every frame is the draw and jitter and the jitter only changes the end position not the start?? can someone explain sorry for my shitty english
Javascript is a bit tricky in its memory management. Because the vector is an Object if you assign it to a variable it will not copy that Object but instead reference it. So the begin vector is just referencing the end vector of the previous branch. If this is not the behavior you want p5.Vector has a copy() function which creates a copy of that vector. I hope this makes it clear.
Hi, I think that your coding challenges are wonderful! Could you remind me of how I could get started with coding on my mac? What program should I use to be able to run and modify the code in this particular video and where could I find the code? Thank you a lot :)
You can get started here: p5js.org. I'm using a text editor ("atom") in this video and following this methodology: ua-cam.com/video/UCHzlUiDD10/v-deo.html
i dont under stand how those branches are staying conneceted if we are randomizing the only the end of the lines. there is no code connecting the all the branches that tell each other that their previous branch end point is what the begin point of current point.
Is there a Processing Java version of this? I've managed to get everything up to the push() function in mousePressed() {} and this push() function seems unique to p5-- unless judging by how the loop starts from the end, it kind of resembles a stack?
Hey, I tried impementing this in python using PIL , specifically Image and ImageDraw (with numpy vectors for ease of vector operators) and was mostly successful. The people who created the library said it's not particularly good at making lines look better and was wondering if you know any better ways of implementing this. The lines have jagged edges that aren't in your image, and I just put it through an anti-aliasing filter in GIMP which did help a bit but I think it needs to be fixed when it's drawn. Part of me wants to join you using Processing but I don't know any java or javascript.
Hi, I am using pygame in python to do the same code. It is more difficult and challenging because I have to implement function which doesn't exist in pygame like map, translate, Createvector etc. This time I have learnt something new and never thought about. Using a class function to create a new class object and using a for loop in reverse order to avoid infinite loop :D
you'll be surprised how similar Python and JavaScript are. I have a python background too but I actually learned all of JS that you see in these coding challenges in a week from the tutorial playlists on this channel.
Why store the main tree object, can't each branch have an array of 2 vectors and then the data is not stored in one place, but each branch object has details of it's sub branches...?
That would be a binary tree. Binary tree's are wonderful data structures and definitely something to learn about but this video was more aimed towards using an object oriented approach so it's the basics. Thus I can imagine Daniel wanted to keep it basic. But binary trees are definitely the way I would have gone about when creating a fractal tree.
So a vector has some functionality that you might expect from "vectors" like the one dan used in the class , the add and sub functionality whereas in case of array you don't have that kind of comfort
Hi, first time I used P5.js. Somehow I noticed that these build-in event functions do not work for me :( . I have been following your tutorial exactly but it does not recognize the function mousePressed(){}. Any idea ?
Falsy in JavaScript includes null, undefined, and 0 function logIfExists(val) { if (val) { console.log('This line never gets logged') } } let falsyVal = null logIfExists(falsyVal) falsyVal = undefined logIfExists(falsyVal) falsyVal = 0 logIfExists(falsyVal)
Yes it's good to know I think it looks cleaner although you might need to think of the cases. Empty string is also falsy but empty array and empty object are truthy
Dude this guy makes me so happy.
Really? He drives me insane, all I can think is that Meth is a horrible drug when I watch this guy, I like the Tutorials I just wish he would STFU for two seconds. IDK to each his own I guess, whatever makes ya happy for you and him.
me too his energy is contagious. He is obviously a wonderful human being,
Tooooo many extra curricular spasms in relation to his coding spawn. Lots of 'branch' words with no real goal established. He seems amazing....amazed with himself more so. Teach is like code...both require a plan to better results.
@@dannywest749 "extra curricular spasms" Where? Sure he talks a lot, and brings up heaps stuff. But it is all relevant information, dont go watching a programming video and than when someone brings up a concept call it extra curricular, he is simply teaching us all the concepts involved.
@@seditt5146 I dont think meth heads know how to code, keep a train of thought and explain what they are doing clearly all at the same time.
Criminally underrated channel imo. Really glad that I found this, loving the videos so far.
Keep it up!
thank you for watching!
thank you for making
I found a coding train video on the suggestions bar when I was watching some other programming video and thought "Why not?". Ever since I've been watching your vids. Just BECAUSE.
Only sad thing is that he mostly does js and not other languages. Would be nice to see this in c#, java, c++, etc.
@@louisrobitaille5810 code can be adapted. I m doing some of these in gamemaker's studio, which is a game engine with its own language. 😁
Just subscribed. I don't code. Honestly not even interested in doing any coding. All these videos are just so fascinating and make me happy.
@- RedBlazerFlame - DUDE, downloading terraria isnt coding.
@R09 Gabee De Vera With chunk loading?
And why did you choose python?
Dude im a beginner in the code universe and your vids are simply awesome cant stop watching! Thank for giving us this content
Thanks for the nice feedback!
I made a similar thing after your first Video about fractal trees. But I just stored the angle of the branch. I then recueisvely added a left/right branch with the parents angle -/+ some constant. Saves you a lot of work with vectors, in my opinion. But this approach clearly works just as well. Great video as always.
I've been trying to read the book "algorithmic beauty of plants" and this so far is the best source for understanding , thank you so much :)
i would love to have you as a teacher at our local university, because you are such a congenially person (: keep up the good work! the quality of your videos is amazing!!!!!
Very cool man!
I have no experience with javascript and I really enjoyed it!
Thanks
As a beginner of javascript, I really really appreciate your inspiring contents!! You made coding so much fun!
You have made watching coding fun. That is pure talent!
Thanks for watching!
Excellent video. I created this tree with growing branches with random angles and put the entire tree rendering into 1 object. Now i can create multiple trees at once and let them growing. I didn't use p5 but vanilla javascript and html canvas.
Sounds awesome. I practically did the exact same thing also by using vanilla JS.
Quite surprising how simple this is, in the sense that you can create really realistic trees with this method, because trees are nothing other than branches branching into more branches
Managed to make it change color with each click! Might be easy, but its not when you have no idea about codding.
Thanks alot for this videos, well explained and fun to watch, perfect for summer nights.
Hey it's been almost two years so here is your reminder to come back to this and add physics to the tree !
Oy, thank you! I might need another reminder this summer 🙏
@@TheCodingTrain soo.. did you do it?
@@TheCodingTrain reminder to add physics to the tree
@@TheCodingTrain and I'm remembering the rememberer.
The Coding Train REMINDER FOR PHYSICS :D
It is 2017! Attach spring forces! Great videos! Just learning p5/JavaScript thanks to you! Really great content!
I created a single tweaked branch function instead of two branch functions it works pretty well here is the code:
this.branch = function(a) {
var dir = p5.Vector.sub(this.end, this.begin);
dir.rotate(a);
dir.mult(0.67);
var newEnd = p5.Vector.add(this.end, dir);
var right = new Branch(this.end, newEnd);
return right;
}
and is used like so:
tree[1] = root.branch(PI/4);
tree[2] = root.branch(-PI/4);
Wow! I'm only beginning to learn to code now, but through your videos I've found awesome inspiration to put all the maths I've learned at school into use while coding. Fantastic work, keep it up!
That was hands down the most awesome programming video I've ever seen.
Where in the heck were you when I first started my comp sci career..
That's genius! Accidental lines of code just created a surprising and touching art!
I am quite enjoying your work and it inspires me a lot. A Big Thank you!
And I think it's safe to jump out of the loop after checking it's true, because you loop reversely and previous item must be set to true already.
You are a genius. Thanks for all!
I purchased one of your books. It is brilliant.
Thanks, thanks, thanks.
Thank you for the support!
Another way to go about storing the branches is to have the branches stored inside of its parent branch, so a branch object would have childBranches, or branchA and branchB, depending on how you want to store the branches, then the branches show() function can call show() on its children
i actually made in python a function that draws an oval and gives ir a random color between brown orange red and pink and a rondom angle wich makes the tree look supper realistic
Thanks for the videos! I've been binge watching and reading the Nature of Code. In this video you told us to remind you to do a video on "string forces" so you can pull objects and have them spring back - did you ever make that video? Sounds super interesting!
hahahaha you're extremely funny, and smart. so, would you guys suggest to use p5 with processing rather then just processing?
+Fadingbeat I use them both. Depends on what I'm doing!
Thank you!!!! You are such a great professor, very useful tutorial!
5 year reminder. Do the jitter with spring forces . You asked @ 18:33 ;)
You may be able to integrate the Edwards Lorenz attractor thing you did in an early video.the one where it drew two intersecting ellipses in color and 3d. During that demo, you vectored the result and a strange "shimmering effect happened. Perhaps you could apply THat to the leaves to give the impression of wind, and then cycle through 3 or 4 different lorenz arrays to make it more random.
Great idea!
Fractal trees + forward kinematics = infinite fun
Would be interesting with a coding challenge where you took fractal trees into your landscape generate code. And with rules planeted the trees related to reality where trees doesnt grow over a certain height.
Branch to the right! Branch to the left!
I absolutely love your videos!!!
You are so insightful. Thank you so much.
Do you have a discord? If not maybe you should do one. I think it is a great platform where people can help each other with coding
+Joo friii what's discord?
Oh, its an Teamspeak and a Forum in one. You can create a Server where you can create Text channels with different topics and voice channels too. Many Twitch Streamer (Gamer) you this, but I think it would work for your channel too. Its for free to create a server, so definitely check that out.
It's a voice and text chat app that is free. You just create a channel (or channels), share them, and people show up and chat. discordapp.com/
Reminding you to add springs to this array!!!
This guy is awesome
(18.24) Do a video where we take this tree and actually attach spring forces to all of it, so you can sort of pull on it and it just goes "blrvwvrvwvmnvm"
I wonder if, 8 years later, OOP is still the best approach to draw the tree. I find the vector part unnecessarily complicated.
You should do a video so we could get to know you .. cause I have a few questions you should answer Love your channel btw I'm just getting into computer science I would also like you to do tutoring I need help on the basics but I prefer to learn from you... you have the energy
Hi coding train, you can do a challenge like a paint, but in javascript, you will can draw with mouse, erase like a rubber, etc
He does that in the coding train series he does.
I thougth about this in school
and i CAME to the same thing
I m proud of myself
I have questions!
1. why does prccessing works well while using var in iterating loop? I thought in javascript there is always problem using var in loop statement, so it is encouraged to use let.
2. when you use jitter method, why do not entire branches goes off uncontinuosly? Shouldn't it appear like bunch of segmented sets of branches since we are only moving the end points??
That's a nice tree ! :)
Thank you!
16:56 I might be wrong but shouldn't you put "tree[i].finished = true" inside of the "if" statement. Cause after you add branches it is finished!?
Any resources to start what you talk about at the end? Really like the idea of playing with the realistic nature effects but am not that experienced of a programmer, thanks Dan!
this just blew my mind!!!
Please, could you make an pythagorean Tree, I would love to see one
that's a happy coding chalenge XD
keep it up...
The beginning is the end. The end is the beginning. Everything is connected. 😂😂
would have been so cool if you had done it with three.js
Thank you so much Sir! I find out your channel is amazing! You gain a new subscriber here :D
Really cool video! is there a way to mantain the tree structure so that the branch knows which his parents are??
Was literally worked on this for 2 hrs and then i found his video.. lol
Heh, I didn't even watch the video, I challenged myself to come up with the ideas, and at 15:00 I did it exactly the same way, but that was quite a spontaneous thought, I had no idea how to do that previously
Ok, the reverse for-loop is quite clever. I firstly calculated that the number of branches _b_ based on the order of the branches _o_ : _b(o)=2^n-1_
And then, when I started with random generation, I just did it, until the order was 8
Ok, he calls order count, if anyone is confused
I really can't stop watching it , and I want to try it ,but which program do you use ?? and which language do you use ? is it java ?? because I try to make it with visual studio but it didn't work and I don't know why
hey, i'm fairly new to all this drawing; thanks for your work!
how would you write a loop for count, that the leaves are added not only the first five counts, but every five counts?
So I will often make sketches that need to have a dynamic canvas. Meaning, there is some content that moves around and needs to be centered on the screen, or in this case, the canvas needs to dynamically resize as the tree gets larger and larger. Is there a recommended method for doing this? I have found some methods that work, but there is some performance impact
Writing function objects in Atom, those were the times...
How can I stop the tree from growing past a certain count, say 6 mouse clicks? Currently it just keeps growing until it crashes, and I want to constrain this function.
what do you mean when you say that all those branches store their location dynamically? i've tried to do the same with processing but the when i try to jitter the branches they go where they want without staying attached to each other because their position is not updated.
I know this is a little bit late, but how do you adjust your lines like this? When you write for example (a,b) and then you press something and that turns it to (a, b). It also works perfectly with For-loops. I am missing this in my Text-editor and don't know how to find it by googling. Is it called reformation?
"I hear voices!" \0/
If i wanted wind to be affected by the tree, how could i do that. And can you please make a video on that.
Time to make the spring forces? ahahah
I would love to see that.
Did you ever do the springy tree video?
i dont get how that jitter works. if you move all the end positions how does the next branch now to update its start position? the only function being called every frame is the draw and jitter and the jitter only changes the end position not the start?? can someone explain sorry for my shitty english
is it a pointer? or am i just missing something
Javascript is a bit tricky in its memory management. Because the vector is an Object if you assign it to a variable it will not copy that Object but instead reference it.
So the begin vector is just referencing the end vector of the previous branch.
If this is not the behavior you want p5.Vector has a copy() function which creates a copy of that vector.
I hope this makes it clear.
+yoshivb Thanks for explaining
Hi, I think that your coding challenges are wonderful! Could you remind me of how I could get started with coding on my mac? What program should I use to be able to run and modify the code in this particular video and where could I find the code? Thank you a lot :)
You can get started here: p5js.org. I'm using a text editor ("atom") in this video and following this methodology: ua-cam.com/video/UCHzlUiDD10/v-deo.html
i dont under stand how those branches are staying conneceted if we are randomizing the only the end of the lines.
there is no code connecting the all the branches that tell each other that their previous branch end point is what the begin point of current point.
Very nice video. Thanks
Does enyone know something similar to thse videos, but in C#? It would be awesome! Thanks.
By the way, love this videos, man!
Keep up the good job!
Is it right that branch drow himself?I think in oop you cant write some function like drow in class.Am i right?
Working with references in JS is quite error-prone through its implicicy (is that a word)?
Is there a Processing Java version of this? I've managed to get everything up to the push() function in mousePressed() {} and this push() function seems unique to p5-- unless judging by how the loop starts from the end, it kind of resembles a stack?
Nevermind, I got it! I used an ArrayList
in java it is add and push is javascript not p5
to multiply the tree , where do you write the loop
It was so beautiful....I love it!!
thank you!
The Coding Train oh my god thank you sir for replying me.....😭😭😭😭😭💜
Hm, swaying with perlin noise? I just sway with sin and a random coefficient
Please tell us how do all these things. We like to understand it.
Could have just only called the branch methods on the last item in the array. tree[tree.length - 1].branches();
Hey, I tried impementing this in python using PIL , specifically Image and ImageDraw (with numpy vectors for ease of vector operators) and was mostly successful. The people who created the library said it's not particularly good at making lines look better and was wondering if you know any better ways of implementing this. The lines have jagged edges that aren't in your image, and I just put it through an anti-aliasing filter in GIMP which did help a bit but I think it needs to be fixed when it's drawn. Part of me wants to join you using Processing but I don't know any java or javascript.
Hi, I am using pygame in python to do the same code. It is more difficult and challenging because I have to implement function which doesn't exist in pygame like map, translate, Createvector etc.
This time I have learnt something new and never thought about.
Using a class function to create a new class object and using a for loop in reverse order to avoid infinite loop :D
you'll be surprised how similar Python and JavaScript are. I have a python background too but I actually learned all of JS that you see in these coding challenges in a week from the tutorial playlists on this channel.
Awesome!
You've created neature.
Hello, could anyone explain to me how to have your right tab view to access libraries? I manage to download atom, install and open the file already.
just you are amazing
thanks man
well I think I have ideas for the leaves :3
Smart man
Why store the main tree object, can't each branch have an array of 2 vectors and then the data is not stored in one place, but each branch object has details of it's sub branches...?
kranser wouldn't that be too complicated?
Exactly what I was thinking. No need for the global tree array. Kinda takes away the recursion
TheMonkFilm this isn't recursion on purpose. it's a different technique
That would be a binary tree. Binary tree's are wonderful data structures and definitely something to learn about but this video was more aimed towards using an object oriented approach so it's the basics. Thus I can imagine Daniel wanted to keep it basic. But binary trees are definitely the way I would have gone about when creating a fractal tree.
Uhhhhhhhhhh......yes?
What's the difference between
_var a = createVector(42, 24)_
and
_var a = [42, 24]_
?
nothin
So a vector has some functionality that you might expect from "vectors" like the one dan used in the class , the add and sub functionality whereas in case of array you don't have that kind of comfort
Hi, first time I used P5.js. Somehow I noticed that these build-in event functions do not work for me :( . I have been following your tutorial exactly but it does not recognize the function mousePressed(){}. Any idea ?
Can you post your code and question to forum.processing.org?
Hey Dan, Im trying to recreate this code in openFrameworks. Could you explain why you use "this.x" ?
Cheers!
Basically it's saying that anything can use the x function
this. is like self. in a lot of other languages.
I hate recursive trees. This is much better.
10:28 just wondering, does the "other" side of the pen do anything special ?
It's the worn out side, I suppose. :P
Why this series is in spanish but the others not?
i am going to use for a school project where I will animate cancer cell mitose
and also make some custom factors that could be proteins failing
no words to say. u really rock. If i got an army or superpower , i would make all people in world subscribe and vaporise all those who disliked .
Is there a way to do this in Porcessing?
ThanX
you're welcome!
la poo es fantastica
why not say if(currentBranch) instead of if(currentBranch == null)? This checks if currentBranch is truthy
Timur Uzel yeah but that would check if it's true or false not if it's null
Falsy in JavaScript includes null, undefined, and 0
function logIfExists(val) {
if (val) {
console.log('This line never gets logged')
}
}
let falsyVal = null
logIfExists(falsyVal)
falsyVal = undefined
logIfExists(falsyVal)
falsyVal = 0
logIfExists(falsyVal)
Thanks for the enlightenment
Yes it's good to know I think it looks cleaner although you might need to think of the cases. Empty string is also falsy but empty array and empty object are truthy