Video není dostupné.
Omlouváme se.
Coding Challenge 108: Barnsley Fern
Vložit
- čas přidán 5. 08. 2024
- Visualizing the Barnsley Fern fractal with Processing (Java)! Code: thecodingtrain.com/challenges...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge #107:...
🎥 Next video: • Coding Challenge #109:...
🎥 All videos: • Coding Challenges
Links Discussed:
🌐 Barnsley fern on Wikipedia: en.wikipedia.org/wiki/Barnsle...
Videos:
🎥 Algorithmic Botany Track: thecodingtrain.com/tracks/alg...
🎥 Matrix Math: • 10.6: Neural Networks:...
🔴 Livestream Archive: • Live Stream #142: Sand...
Related Coding Challenges:
🚂 #14 Recursive Fractal Trees: • Coding Challenge #14: ...
🚂 #15 Object-Oriented Fractal Trees: • Coding Challenge #15: ...
🚂 #16 Fractal Trees - L-System: • Coding Challenge #16: ...
🚂 #17 Space Colonization: • Coding Challenge #17: ...
🚂 #18 3D Fractal Trees: • Coding Challenge #18: ...
🚂 #174 AppleSoft Basic Fractal Tree: • Apple ][ Coding Challe...
Timestamps:
0:00 Introducing today's topic
0:49 Discuss the algorithm
2:23 Explanation of matrix algebra
4:20 Let's Code!
5:24 Input the transformation formula for next x and y
7:15 Remap the values to the width and height of the canvas
8:32 Add other transformation formulas for next x and y
11:12 Pick a random number to choose the transformation
12:08 Add nextPoint, drawPoint functions
13:51 Add probabilities
15:57 Update the range
16:41 Thanks for watching!
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: / discord
💖 Membership: czcams.com/users/thecodingtrainjoin
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
#fractals #algorithmicbotany #p5js #javascript
Seriously, you are becoming one of my favorite channels.
I've got it! For the past like 3 weeks I've been binge-watching your videos, Dan, and I've learned more about programming in that short amount of time than I've ever learned before. But, the thing that's been eating away at me is simply how you are such a wonderful teacher with these videos. I've been trying to figure it out, and I have, at least for my experience. It's that it's not like teaching! It's like a conversation! You make mistakes, like we all do and will, and you make silly awesome dad jokes, and most importantly when you explain concepts you use very simple analogies and clear depictions. Many have said this before me, but you a natural teacher, and I truly hope you never stop making these videos, because I know they've reignited my love of programming, and I'll never stop being happy when I see a new video of yours pop up in my subscription box! Thank you!
Thank you!
Another excellent challenge. ☺
(I love fractals)
3 hours 45 mins!! So glad I watched the edited version. Great coding challenge as always 👍🏼
amazing! that feeling when the fern appeared is so satisfying
You're giving me all kinds of motivation to do some more casual little coding challenges! Subbed, thanks for the inspiration :)
Man... I'm always amaized how simple this generations are, maths are beautiful!!
this is so freakin cool. i hope to understand this fully in a few months haha!
Huh, this is really cool! ( I played around with it for two seconds and decided to change 'stroke(255);' to 'stroke(random(255));', and it gives it a glittery effect. )
omg that outtro.. excellent video
1:18 I FEEL GOOD
nice
You're awesome mate.
You are amazing man ... BRAVO
omg thanks Dan really, i'm learning programming with your processing tutorials videos and this is helping me a lot (also to improve my english). REALLY thank you so much and greetings from Italy XD
Matteo Gugliotta ma buongiorno
Ma buonasera
mi fa piacere che ci siano anche degli italiani che guardano questi video molto interesanti.
italiano anche io
this is so cool
Thanks as always for a great tutorial Dan.
thanks for not putting 1st
:)
this is freakin awesome business!
Only when he said it was a fractal at the end did I realise. Amazing video
oh! thanks for the link to the video about matrix math!
Im really enjoying my typing and your frustration going along with the progress,
Cannot wait to attain my mechanical keyboard and make an evolutionary step Tuesday 27 August, 2018;
Thanks for all the hard work and original content,
Love it as a learning experience, thanks a lot mister. :) ♥
∞South Africa
15:08 I though he was gonna throw that stick :D
Me too 😂
Same 😂
Very cool stuff.
At 8:00 this fixed point, if you consider the 3x3 affine transformation matrix A, its actually an eigenvector with length 1!
Av = λv Av=v
(applying the affine transform A to v (Av) gives (=) back the inital vector v)
ye
Cool, thanks for the comment!
The Coding Train Thanks Daniel! Keep making inspiring videos!
joshinils I didnt see your comment yesterday, thought i was the only one who spotted this :p
is there any way to make it move kinda like how you did with the fractal tree? like you set up a slider that changes the "trunk's" position, can you do that with the stem of the leaf? and have it kind of wave at you XD
Hi! I have a question, it is not related to the video though. how can I get average color on the canvas? I tried with get() to get colors of singe pixels and than calculating the average, but it turned out VERY s l o w and I had a memory leak :/ I would really appreciate any advice! Thanks!
Awesome tutorial, idk if you’ve done this before but I would want to see some videos on how to do fluid simulations applying the physics behind it :D
I feel like I'm not nerd-y enough everytime when I watch codetrain
Going to try this todaY
Daniel I have noticed that when you draw a rectangle on the board it is always a lille bit jagged to the bottom right. Then I realised that from your perspective while you draw it, it should appear fairly rectangular.
Thank You! I'm trying to download barnsleyjava into my student IDE (i'm using IntelliJ IDEA) to do my first assignment but it doesn't work...yet (i'm getting a file not found error and Usage error: ...What types of IDEs do you recommend for Java in reference to someone who aspires working in machine learning one day? Also, is it easier to lear C language after learning Java?
I like this type of videos.
woooooooooooooooooooooooow, that fractal is beautiful..
Could you do a parabola challenge next?
This was cool. Love fractals!!
How do you find all of these neat algorithms? I'd like to research my own but I don't even know what to search for. I'd never think to look up ferns
I get many great suggestions from the community!
github.com/CodingTrain/Rainbow-Topics/issues
I agree and this one is beautiful.
Where do you find these coding challenges? I'd love to find some challenge on Wikipedia and try it on my own!
Amazing
Is there a set of equations to draw the outline only of the fern?
I LIKE YOUR VIDEOS SOOOOOOOO MUCH!!! THX FOR THE GREAT WORK!! YOU ARE AMAZING!!
Hello Dan, great video! I've gone back and watched a few of your other videos including the one on the mandelbrot set! I've since coded it myself but I was wondering, usually depictions of the mandelbrot set have a different colour gradient than just the usual grayscale, I was wondering if you could do a video on different gradient techniques and applying it to the color function and more specifically the pixel array? If anyone knows of any videos where he talks about this (which I probably have missed, sorry), please let me know! Thank you
This is a great question! Would love ideas and suggestions form the community around ways to color the mandelbrot set (and other similar challenges I've done)!
I did this as a senior project many, many years ago. If I remember correctly, a very easy way to do it is to map the grayscale value to an HSB (Hue, saturation, brightness) value. Processing allows you to set the colorMode to HSB. Set it to something like colorMode(HSB, 255), and then use stroke(pixelGrayVal, 1.0, 1.0) to set the color of the point. These would generate some *beautiful* Mandlebrot graphics. That's all you have to do. On the old graphics systems, you used to have a color pallete, instead of an RGB pixel, so you could get some basic 'animation' by a process called pallette rotation.
You could try visualizing the buddhabrot, its related to the mandelbrot set and very interesting
i have many of Dawan motif Picture to coding with p5.js, why i know the matrix transformation?
How would you add color to this?
10:05 "NO NO THIS PLUS HAS TO GO HERE!" Now I have an inside joke between me, myself, and I
Hey! Another great coding challenge (and yet another question) . May I know what API references I have to use if I am to display it in an HTML file?
Also if this is p5.js , that loop didn't work out for me (to speed up the process) , any idea why that might be?
Hey sir what computer do you use!
Excelent friend
I may be late.. but while you did this in JS - I thought to myself: I might be able to do this in Python
Well.. here we are. Mine took about twice as long to program as yours but I got it to work :)
Next on my bucketlist: do it in cpp..
how about using genetic algo to reconstruct image using different shapes??
You should try doing Recamán Sequence with processing/p5.js
Did you watch the Numberphile video from a week ago by any chance? :D
I had the exact same idea, although it wouldnt be too difficult just arrays and drawElipse pretty much
Azayles Yes
Please suggest here (or maybe it's there already?)! github.com/CodingTrain/Rainbow-Topics/issues
I'm not that familiar with processing, so I'm wondering how you keep calling the functions if they are not in a loop? What exactly is the condition that keeps drawing the points? When does is stop, and how is it defined?
Hamade Moodie void draw( ) is a built in function in processing, it loops by default.
brendon wood Thank you for the clarification!
Thanks for replying brendon!
14:58 Pure satisfaction.
Noice
I like your effort
I love coding
Please tell how to make a rainbow version of this
Can I code that in swift playground too?
👍
👌
👏👏👏
Can we do this with recursion ? I mean to repeat this pattern over again .
I think you can, declare a constant x and y, have the function compute new x and new y overwrite the constants and then call your function again, but with some end condition
I guess it would have taken way too much memory, because every recursion of the function is stored in the ram.
Ozkee Yee Yes I agree on that
There doesn't really have to be an end condition there. Dan's version keeps going forever as well.
The main difference is Dan's version is essentially an infinite loop which only covers a small space in the memory whereas the recursive version will have increasing number of function pointers in memory to keep track of where in the recursion the program is. It will run out of memory eventually (and quite fast)
Fractals
what libraries were used in this video?
This video uses Processing (which is built on top of the Java programming language). For more info, visit processing.org and also this video might help czcams.com/video/AmlAiKsiy0o/video.html.
The Farnsley bern.
Fe Tharnsley Bern
Fhe Barnsley Tern
Le Trainsly Fern.
For your next coding challenge you should try to animate Viviani's theorems using your mouse to move a point.
Please suggest here! github.com/CodingTrain/Rainbow-Topics/issues
what editor are did you use ?
Nae Bara it's called processing
it is only for Mac ?
Nae Bara no, it's for Windows too. You can find it at processing.org.
thanks .
16:58 My face when the actual fern appear
Barnsley Fern and Chaos Game
Part 1
Investigate the Barnesley Fern code above and write a report on it. You may wish to try varying the parameters (slightly) to generate your own fractals.
Part 2
The Chaos Game is an algorithm for generating a fractal:
define the 𝑛 vertices of a regular polygon;
choose an initial point, (𝑥0,𝑦0) at random within the polygon;
generate a sequence of points, starting with (𝑥0,𝑦0) , where each point is a fraction 𝑟 of the distance between the previous one and a polygon vertex chosen at random.
Write your own Python program for the above algorithm, and using NumPy and Matplotlib, explore the Chaos Game for different values of 𝑛 and 𝑟 and present your findings. how do answer that one?
I have no idea how the math works, but the result is cool!
Daniel F don't think anyone really understands why fractals produce those specific fractals, but in IFS fractals you can kinda understand how the base shapes re- iterated by shrinking and moving create the fern, as a small fern leaf is like the lager fern leaf.
You just use a triangle to represent the fern leaf. And move shrink rotate that into a smaller leaf. That's repeated randomly.
watch?v=kbKtFN71Lfs watch this numberphile video, very cool
Sup Daniel!? Greetings from Brazil!
Do you think it would be possible some tutorials about web app development with server-side javascript on glitch.com website?
Also, great content on this one (as aways)!
Thx!
yes! please suggest here: github.com/CodingTrain/Rainbow-Topics/issues
Why did you stop using p5?
I haven't stopped I just like to go back and forth.
They are almost identical, you can write absolutely the same with p5.js, Processing is just another programming language (which is by the way very similar to JS, but not really, it's statically typed so you have to implicitly write the variable types that you don't have to in JS). But it's faster because Java is a compiled language and JS is an interpreted one.
at first i thought you spotted some kind of creature/insect/spider on the wall out side our view. but it was the matrices.
Kiwi coders should like this
Can I do that in Python?
Fabulous. can I get your Code. I will try in my PC to understand vividly and descriptively.
Your challenges are really awesome.
Good going buddy.
You can grab the code here: thecodingtrain.com/CodingChallenges/108-barnsley-fern.html
I actually do C# but this is so logically the same
4:47 - quality sound
amazing dan
What about en.wikipedia.org/wiki/De_Rham_curve or en.wikipedia.org/wiki/Fractal_flame as your next challenge?
Please suggest here! github.com/CodingTrain/Rainbow-Topics/issues
i love you
i wish i could do programming just like you,
Start watching his tutorials now
i have a problem with drawing this
i have the same exact code as in the video but in my case the main core isn't drawing.
Any ideas? :(((
Would you mind asking at discourse.processing.org/! It's a better platform for Processing and p5.js related code questions. You can share code there easily! Feel free to link from here to your post.
@@TheCodingTrain Okay i have found this bug (:
in the section with the lowest probability i was multiplying by the "Y"
and i declared a variable as "y"
and that was it
fine ; it was lightning 🚘👍🤦
Which video editor u use,sir?????
Processing is not a video editor.
superlogl I am asking about Video editor used before uploading Videos on youtube. Video editor,examples like Camtasia,Adobe after effects,Filmora,Sony Vegas,etc.
It doesn't seem like he edits his videos at all except cutting out the rest of the stream
I think that's just mac OS zoom
som1 answered your question w/ processing, I was responding to that but he deleted the comment.
2:54 you went back to fix 0.85 plus x1 to 0.85 times x1 but then you still wrote a plus sign (@ 2:57) where you had just erased it lol
Thats a beard!
How the hell did these simple functions and probabilities draw this ?
Is it just me or have there been a little bit of lack of views. Not that the videos that you did release are not absolutely fascinating. Lol that was kind of a wierd comment 😂 Your awesome by the way. ;) My dream to go to NYU but I'm nowhere near old enough to go to college lol. What do you teach?
For more about the program where I teach visit itp.nyu.edu/ima/ and itp.nyu.edu
Pearson correlation coefficient based on random points. maybe an idea for the next video?
Please suggest here! github.com/CodingTrain/Rainbow-Topics/issues
Do you have udemy course, i wish i could learn with you
No but I have almost 1,000 videos on this channel and many are organized into courses, check the playlists!
when i tried it i just got a straight line... anyone got suggestions?
You can compare your code to what is here: thecodingtrain.com/CodingChallenges/108-barnsley-fern.html
My 3AM mind decided the title was ‚Gordon challenge: Ramsay fern‘
Try making a java code of x = sin(x/y).
That's some dirty Java... Cool vid tho
5th like!
This looks like evidence that plants develop using fractal geometry
They do.
They're big fans of Fibonacci too.
You should practice drawing rectangles that don’t have a sloped right corner.
Next challenge: Hello World in 15 seconds
make weed with that code :D
Now we are talking ... that's a fractal ... not the cheaty tree from some other video ...
Why not use p5?
I like to go back and forth between the environments. I'll post a p5 port of the code soon (if someone from the community doesn't get to it first!)
Oh okay. So whats the big difference between processing and p5?
JS is an interpreted language, while Java is a compiled language, they both have their pluses and cons, basically you should learn to love multiple languages.
Para cuando los subtítulos en español!?
ANGEL WİNG FORMULA,
change, permutation 2
nextX= 0.85 * x + 0.10 * y + 0;
nextY= -0.75 * x + 0.50 * y+1.6; // -0.75 , -0.50 , Angel wing, MELEK KANadı ( turkish) or -0.25, 0.50
} else if (r>=0.86 & r