Coding Challenge #21: Mandelbrot Set with p5.js
VloĆŸit
- Äas pĆidĂĄn 5. 08. 2024
- In this coding challenge, I program from scratch the Mandelbrot set with p5.js Code: thecodingtrain.com/challenges...
đčïž p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
đ„ Previous video: âą Coding Challenge #20: ...
đ„ Next video: âą Coding Challenge #22: ...
đ„ All videos: âą Coding Challenges
References:
đ Wikipedia on Mandelbrot Set: en.wikipedia.org/wiki/Mandelb...
đŸ Mandelbrot Set Explorer: meiamso.me/old/mandelbrot/man...
Related Coding Challenges:
đ #22 Julia Set in Processing: âą Coding Challenge #22: ...
đ #140 Leibniz Formula for Pi: âą Coding Challenge #140:...
đ #168 The Mandelbulb: âą Coding Challenge 168: ...
Timestamps:
0:00 Introducing today's coding challenge: the Mandelbrot set
1:22 What is a complex number?
6:06 Multiplying two complex numbers
7:51 The Mandelbrot set is all of the complex numbers that stay bounded
8:40 The initial sketch sets every pixel to gray
12:00 Calculate the real and complex components for the next generation
13:03 What does it mean to be bounded?
14:58 Set the brightness based on number of iterations
16:46 Store the original values of a and b
20:05 Set the brightness by mapping to maxIterations
21:50 Add sliders to add ability to zoom in on the Mandelbrot set
24:58 Conclusion and suggestions for variations
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...
#mandelbrot #fractal #complexnumber #imaginarynumber #p5js #javascript
I love this guy's positive energy. It just screams: "I consider espresso a food group...no, the WHOLE food pyramid!" And...I approve.
Dude this is amazing... let me list everything that happened right there:
-you were doing a live with people interacting with you by chat, but sill made a perfectly senseful podcast
-you explained very well and in a small amount of time what the problem is like, defined the complex numbers according to the problem and explained exactly what needed to be explained.
-you coded the Mandelbrot set. Just this.
-without taking any notes of your code, you still had a perfect knowledge of your code.
-you made very clear what each part of your code was doing.
In a livestream, explaining and coding the mandelbrot set with no taking notes and be able to understand and explain everything clearly. And then post this video as if it was not a live.
This _is_ amazing.
thank you!
@@TheCodingTrain you also told the haters to go outside and play frisbee.
this is called at least 160iq with very good memory. Usual people are unable to learn such skill even in 200 years, it is impossible for today. I dont know what that dude doing on youtube, while he clearly could work for google ai programs and earn millions of doll hairs without eye blink. He could start his own company and do even more. Instead he spend his time doing grate but useless videos
@@antares-the-one Woah dude. Woah woah woah my inferior 69iq cannot comprehend what you just said. Okay, after about a month of studying your text I finally understood what you meant. I have took another month to come up with a response. No, people can learn to do this kind of stuff, as did I after watching this video and thoroughly examining the method that is used to create this fractal. It isn't as if he came up with the idea of this fractal by himself.
@@antares-the-one I mean yeah he's wicked smart and the Bob Ross of programming but it doesn't take a genius to become this fluent in coding. It takes discipline and dedication to slam your head into a wall enough times.
What does the B stand for in Benoit B. Mandelbrot?
Benoit B. Mandelbrot
That's recursion for you.
My name is
Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit Benoit
"Unhandled Exception was thrown"
Benoit *B* Mandelbrot
It's a joke he himself thought out
đ ±ïženoit đ ±ïž. Mandelđ ±ïžrot
I really love how you still scroll through comments of a 2 year old video and 'heart' comments you like.
I love your passion and dedication to educating and helping people work on their future.
I, and many people I've spoken with, find you to be a big genius. But I've come to realise your heart is even bigger.
My appreciation of you is immense.
I really love how you still scroll through comments of a 3 year old video and 'heart' comments you like.
I love your passion and dedication to educating and helping people work on their future.
I, and many people I've spoken with, find you to be a big genius. But I've come to realise your heart is even bigger.
My appreciation of you is immense.
pls give me heart i need some love
@@mikael1891 RIP
MikaelK F in the chat
First, I was able to make a fractal tree with Dan's videos, and today 30th of October 2023, I made my own Mandelbrot Set with this video, two of the most beautiful and best things I've achieved while being a programmer. (FYI I'm in 6th grade so this idea of Complex numbers, Imaginary numbers and fractals is new to me and I've yet not learned it to their fullest potential.) Next I'm going to try to make a Julia set in p5.js, I'll notify you when I get there.
abs(a + b) > 16 as your iteration break rule is one way to colour the points that aren't in the set, but if you want those smooth contours around the set, you might use the break rule sqrt(a*a + b*b) > 2 instead.
You're correct, though this is extremely slow, using (a*a+b*b)>4 is much faster :3
Thank you ancient ones, I will put this knowledge to good use
12:45
I too like to disguise my for loops as while loops
lol
I do that..... A lot
I dont get why people use while.
Int i = 0;
While (condition)
{
code
i++
}
IMO is worse than
For(int i = 0; condition; i++)
{
Code
}
Man you are really great! I'm watching your video on p5 for 6 months and you still astonish me! You did it on my favourite part of mathematics, the Mandelbrot set! No words- Respect only!! Thank you! Keep gonna!!
You're probably my favourite youtuber now Dan. I love your energy, enthusiasm, and excitement. Keep up the great JS code challenges :)
dude i just found this chanel. Feeling super happy.
Man, you rock! never thought someone could pour so much energy on complex numbers.
Well, someone else besides Cauchy.
Hey Daniel I really love your happy attitude, good work on your videos!
Thank you for watching!
this, it's like u can really tell you truly enjoy what you're doing
i've spent so long trying to understand the mandelbrot set.
i gave up
then you explained it in 5 minutes
AND IT FINALLY MAKES SENSE
You are amazing man! Your understanding and passion for math and coding is astounding.
You have single-handedly restored my faith in CZcams.
I always come to this channel to get my math/coding fix, and these videos are so fun to watch! I donât have a programming background, but I am very eager to learn
"If you don't (want to code Mandelbrot set), you can go outside and play frisbee"
No I can't.
?
@@mrss649 Corona lockdown. The last horse crosses the finishing line
I love how excited he is about math. warms my heart.
If I had you as my teacher I'd achieve so much more. You inspire, you make difficult subjects understandable, you show how this is relevant and connects to each other. When I was in school, I spent so much time with teachers saying "you dont have the head to this..." yet I understand you and what you show here. Thank you and this channel! Keep the train going!!!
Best wishes!
Hello how do you approach this material? What's your routine? I am new to programming and want to practice more. How many video do you do per month? And do you pause the video to try before watching or just watch then try? Thank you
Right before you got your first Mandelbrot set, you had a Julia set!
You are just awesome, love your work!!
these are so interesting to program. i programmed multiple julia sets in MATLAB. It was really cool how all of the plots turned out. great vid man.
So smart yet so humble! Great video
I didn't understand too much of this video - although i get the very basic idea. I still watched it all the way through. That speaks not only of my fascination with the topic, but also your refreshing way of presentation :) thanks.
Numberphile do amazing Mandelbrot videos as well, I could watch fractal videos for hours
I'm 2 mins into this video and I already love everything about this
I'm so glad to hear!
I want to program this myself. This video is extremely helpful. THANK YOU :)
what a happy man!!!
your smile is infectious :)
you would be the perfect teacher xD love all your vids, keep up the great work :)
CakeExorcist // Cardistry Definetely
thank you for explaining your material in detail. it helps us noobies so much!. please assume i failed math in HS and need to be explained in a watered down non jargon langauge. i really enjoy your enthusiasm and over all friendliness. it makes me feel you're not judging me and that makes me comfortable and inspires me to keep learning. i subscribed!
I just found your channel. I'm going to love it here.
The coloring will become what you see and know from renderings, when you don't break iteration on abs(a+b)>16, but check a^2+b^2>N with N at least 2^2. That it also works with abs(a+b)>16 just shows the criterion for divergence vs convergence can be tested in a variety of ways.
It's mindblowing. This shape just. comes from nowhere. It's built into reality.
Ooo, I've always wondered what kind of algorithm you'd have to use to make these.
Very interesting!
Nice, even if you are not here to follow along with the code, you really learn something new :D
I'm so glad I was taught the basics of this in Grade 11 otherwise I would not have been able to understand the first part.
You explained that better than my teacher! Good Job! Now I understand it!
The imaginary number is actually a misnomer. It very much is a real number! It just doesn't fall anywhere on the number line for real numbers. It is its own branch, its own axis even! Imaginary came from the fact that the original mathematicians that were exploring this number didn't believe that it was a number at all due to it not being a number we can accurately point to on a number line. The reason, as I mentioned earlier, is because it resides on its own number line! It's pretty awesome! The mandelbrot set is a graph of imaginary to real numbers. You mentioned this a bit, but I figured I'd elaborate! It's a beautiful mathematic formula!
Thank you for this important clarification!
You can also just consider this as a 2d vector and replace the squaring of the complex number with the equivalent geometric transformation in 2d. In this case double angle and add vector. Imaginary numbers are discussed in most mandlebrot videos but it's a bit of a sidetrack imo. :)
Finally a video for dummies.
Thank you.
Does he ever not have the wrong end of this pen?
I think you mean this.pen
@@santhanam2855 đđđ
Going to play Frizbee now bb
Thanks so much! I was able to make a cool looking mandelbrot set in python!
Awesome man thank you
Yeah, Dr. Keiger said it is by definition not outside the absolute value of 2, which is a circle. So, iterating between -2 and 2 is correct. Note that if you've ever zoom out of the Mandelbrot fractal far enough, it all falls within a circle, radius of 2.
you are super cool man, this is beyond insane...
dude i get how passionate you are, and fyi i just get into c++ but i subscribed your channel anyway :)
great work on making this video and i hope that i can learn sthg useful from here :)
good luck
He makes many concepts clear, so that you can use them in any programming language :)
I love thisâ€ïž
i dont even know how to programm actually, but i really like this videos somehow, i like this channel, keep it up!
Hey!! i really liked this explanation to the mandelbrot set and when i tried to learn more about it, i learnt about mandelbrot deep zooms and different coloring algorithms (smooth coloring and histograms which i did not understand) which are used but i could not find much online about these algorithms and how exactly they work... would you please consider making a series on these topics? I think that many other people would also like to learn how it all works!!
I've never seen a person talking about complexe numbers with such dedication XD
i find it fascinating how simple operations can scale super fast. with just a 200x200 canvas and 100 iterations, thats 4 million operations every single frame.
I teach computer science in a school... the beginning of this video where you explain the Mandelbrot set is making my brain hurt in a way that my own teaching must make my students' brains hurt :) It's a fun meta-learning experience for me.
I liked how you explained everything with your clumsy smile! I felt quite comfortable despite being a stupid. :3
Damn, you are so precise to point at literally nothing
this guy's a good dude
Thanks for teaching me *:)))))*
Does the slider object have a mouse button down event or anything like that? Set the maxiterations to a low number like 100 when the slider is being adjusted, then when the mouse button is released, render again over the top with a much higher maxiterations
When he says "Thanks for watching"
I be like man thanks for this wonderful video â€ïž
dan, I do the same with variable names and when I come back to that code I couldn't understand it
Amazing. I made one with C++ and OpenGL with your help.
good teacher..
This helped me to realize a mistake I made while attempting the same thing: I was overwriting the old real component before calculating the new imaginary component.
Nice!
The craziest happiest math man ever!
Quality content
This guys energy is something we need in more elementary schools.
That circle cracked me up XD
superb
Slider ideas:
1. Label the sliders
2. Replace or add a slifer that adjusts both equally.
3. Slider for max itirations.
4. Slider to change pixel size (mabye in increments of 25 - 50?)
Cool!
Thanks for watching!
Lester Rodriguez ĂŒ
loved the frisbee comment :D :D :D . Good vibes :D
A more precise way in while n < 100: is to do while z < 2:
I have a feeling the mandelbrot set should generally be contained between -2 and 2!
Will your arbitrary values of 16 (your substitute for infinity) and 100 (max iterations) result in values being included in the set that really don't belong there? In other words, is it possible that some values for C result in values greater than 16 but do not, in fact, diverge and/or some values for C require more than 100 iterations to be shown to be divergent?
Complex numbers are expressed in the form a +bi where a is the real component and b is the coefficient of the complex number i.
I already figured out how to do this myself, but I thought it might be interesting to see how you did it and how you did it differently from me.
So glad to hear feedback like this!
drawing in the 2 nested pixcel iteration loop is very slow. is there a fast process??
please tell me đđđđ I'm stuck
if only i had a good computer you're awesome
I keep revisiting this challenge every once in a while until I understand it completely. This time I have a question, at 22:42, when the *b* variable its mapped with the slider values why does it says width instead of height and still works as intended? (At line 23, after the copy-paste)
Awesome video, I learned a lot form this and I was able to create a Java version of this mandelbrot set. But I have one question, how could I make the set moves and zoom in a specific location of the set?
Mandelbrotset: *exists
This dude: it's programming time
It's videos like these that make me thingk Daniel Shiffman was a mad scientist in a past life. I mean, who else gets so excited about insanity?
can someone explain how he colors every pixels? I I'm trying to replicate this program in processing but I can't find a way to set the brightness of each pixel
very good
I think i might have a crush on this guy he's so fun to listen to AA
Nathaniel Cole Alexander Sometimes I fantasize dating Daniel...
But that's just me
TheMairex aww lol~
When taking square roots you get both positive and negative. I.e sqrt(-1) = + i or - i.
Nice video by the way.
shouldn't you raise the zoom value to the power of the slider value, so it doesn't appear to zoom quicker the farther you zoom in? my math might be backwards, but i think you can do something like that.
I cannot tell you how many maths videos I have watched. Alot. This was incredible. Thank you. Not only did you explain the math you also explained how to CODE IT. Can I tag other math people in this? how?
Can you please be me math teacher
He's mine!!!!
you need the be English teacher
No, he can't be you math teacher
"me math teacher" is really commom in Colloquial British English, actually, you people need yo understand that English has hundreds of variations, just because you don't speak like that, doesn't mean he's wrong
English my dude
Put simply, a mandelbrot set is pretty much a closed shape with an infinitely long side. You can zoom in forever on one of the sides
Repodudeify That's any fractal. The Mandelbrot Set refers to one specific fractal.
nope.
Arrg!! Imaginary numbers are not non-existant!! They are just as real as negative numbers are!!
or as imaginary as negative numbers ! :D
mohamed oumoumad or as imaginary as numbers themselves :)
Exactly ! everything is imaginary, but somethings are more imaginary than others XD.
#complexlivesmatter
Hidan In math it is useless to talk about numbers "existing". The positive whole numbers where made to count stuff, the negative numbers made to keep track of debt and the complex numbers to solve other problems, such as factoring polynomials.
Im working in processing and the starter code (traversal fro grey scale) gives me and index out of bounds
Thanks for your effort to spreading education!!
p.s. Quaternions would be a great topic to cover ^^
love jonathan coulton!
... for "thing a week" i suppose. well, you're mastering this kind of mentality!! keep it up! (i will support you, startin to buy your book!)
I understand the math implementation part but didn't get what was those 5 lines of code at the beginning, can someone explain please? I don't know much about p5.
What do you reckon numbers divided by 0 are multiples of i
Could you explain in simple terms what you did to make the colouring system smooth? I'm a little bit stupid
Isnât a way easier to do it with geogebra? Or is Geogebranot so good for things like this?
I watched Mr robot._. And now I can't stop watching programming/coding videos! Fml
Oh, that's so fun to hear!
If I run your code up to 9:00, I get ArrayIndexOutOfBoundsException: 10000...
I'm in Processing 3.5.4, coding this in java (not js). Is that the issue? They seem so similar. Has anyone else encountered this, or can explain why it didn't happen in the video?
I have no clue what your talking about at all but i find the whole video interesting even tho i dident understand a thing. This is a reacquiring feeling i get for all you videos I suck at coding but this your videos are interesting somehow.
Sorry if this was pointed out already, but I believe there is a mistake at 10:15. When we are mapping the y-coordinate, 0 is at the top and "height" is at the bottom, so 0 should map to 2 and height should map to -2. Therefore I think the line should read "var b = map(y, 0, height, 2, -2);". Now, in the case of the Mandelbrot set it doesn't matter because it is symmetric across the x-axis, but if you try it with a different function the graph will be upside-down. Am I correct or did I misunderstand something? Very helpful video overall.
Yes! You are correct!
do you have a switch for your cameras? hahaha by the way love your way to explain math. GREAT work!