Coding Challenge #22: Julia Set in Processing
Вставка
- Опубліковано 19 чер 2024
- In this coding challenge, I program the Julia Set fractal in Processing (Java). Code: thecodingtrain.com/challenges...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge #21: ...
🎥 Next video: • Coding Challenge #23: ...
🎥 All videos: • Coding Challenges
References:
🗄 Wikipedia on Julia Set: en.wikipedia.org/wiki/Julia_set
🗄 Julia Set page: paulbourke.net/fractals/juliaset/
Videos:
🚂 Coding Challenge: Mandelbrot Set: • Coding Challenge #21: ...
Related Coding Challenges:
🚂 #21 Mandelbrot Set with p5.js: • Coding Challenge #21: ...
🚂 #168 The Mandelbulb: • Coding Challenge 168: ...
Timestamps:
0:00 Introducing today's coding challenge: the Julia set
0:40 Review of the Mandelbrot set
4:51 The Julia set
7:16 Adjust code to include a particular Julia set
10:07 Use mouseX, mouseY to see all the different Julia sets
12:30 Add sine wave to animate
14:42 Add color by changing the color mode to HSB
16:45 Use zoom to animate
17:56 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: ua-cam.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...
#juliaset #mandelbrotset #fractal #complexnumber #processing
This really feels like a friend who's super passionate about geeky stuff and just showing you all of the cool things they found out and made over the weekend
I love how when you take the pen to draw something on the board, you begin 95% of the time by drawing a square
This is still true 5 years later and I love that fact
@@camsy83 a universal constant
Fun fact about the julia set, if c is in the mandelbrot set, the corresponding julia set will be one whole thing, whereas if it is outside the mandelbrot set it will be a big disjointed mess of random points
Awesome sequel: 9i out of 10, would do Java again
you're making me lose sleep
Same. Its 3am and my bath water is cold af
I mean it’s 9:45 and I’m 12 does that count? XD
Good to know I’m not the only one
You have such energy and vigor! It’s pretty inspiring lol.
Thank you so much for keeping these videos going. I've learned so much from you!
Thank you!
I really enjoy your video! Keep teaching us good stuff :D
Can confirm if this understanding of difference between Mandelbrot and Julia shader calculations is correct?:
Main difference is seemingly that a Mandelbrot set has a C val that changes every pixel as it basically seems to do a “for loop” style scan across each row of texture coordinates row by row in the entire frame.
So at each point it is calculating the pixel color for, it inputs that texture coordinate under that pixel as C.
In a julia set Z is initially set to the texture coordinate it’s rendering the pixel color for, but C is a constant coordinate val that is shared by every pixel (texture coordinate under the pixel) calculation and that val is from a specified n+i plane coordinate selected. (so in an interactive shader, the coordinate under the touch is C and then Z is every pixel coordinate in a similar “for loop” style row by row scan as the Mandelbrot).
That is seemingly how that functions.
I did something similar to the Julia set animation that you have as a project in high school in the mid 90s. That used a program called Fractint to calculate the Julia set for a given point on the Mandelbrot set. What I then did was move around the edge of the Mandlebrot set, capture the Julia set for each point as an image, and then compile those images into a movie.
There was a slight difference though... whereas you're getting around 60fps (and I'm getting around 50fps or so), at that time it took about 5 minutes or so to render a frame. Just a wheee bit slower :)
Really enjoying these Coding Challenges and I'm doing them along side of you (though months behind as I'm catching up). The Mandlebrot and Julia set videos were probably the two that I've had the most fun with.
Hi ...how can I zoom into a specific spot ???
I'm a gnome, and you've been gnomed!
Awesome series! Really enjoying it.
Edit: I really like the mathematical correctness, the great programming and the enthusiasm.
Beautiful
Love that little annotation rant on how imaginary numbers aren't imaginary (;
Making programming fun again!
To explain to those unfamiliar, each Julia set is the set of all z(0) values for which z(i+1) = z(i)^2 + c converges, for a fixed value of c.
The Mandlebrot set is effectively the set of all values of c for which the origin is in the Julia set ( i.e. set of values of c for which z(i+1) = z(i)^2 + c converges, where z(0)=0 )
Amazing
Perfect genius
your approach is not software engineering as its best or at all (and i guess this is not your aim to teach), but despite this its still really educating for programming(math and physics) and entertaining at the same time. I enjoy it a a lot. You are naturally funny.
awesome as always Dan :-)
thank you!
This is awesome. This should be In your examples for processing's IDE .
maybe i'll add it!
hey! nice one!
bravo :' )
Isn't it getting slow because the black pixels are the ones requiring the maximum number of iterations at about 17:30 ? These pixels never tend towards infinity so they get iterated 100 times, and the larger the black area is, the slower the sketch get, I don't think that has to do with the "size" of the number, which must be the same as when not zoomed in :D Anyways, really cool video Dan :p
ohhhhhhhh, yes indeed you are absolutely right. oops.
that might be a minor reason, but for the most part it slows down because he uses the abs(sin(angle)) for the zoom. think about how this function looks: as it is approaching its maximum, it grows very slowly, therefore you get many frames with a similar zoom level when you are already zoomed in, whereas when you are zoomed out, the derivative of the function is much bigger in absolute terms, so the zoom level between two frames changes by a bigger margin.
There is a mistake in your concept.
Note that w does not represent how far it is zoomed in, but the width of the area we want to display.
That means that while approaching its maximum, like you said, the derivative gets small. But at that time it is zoomed pretty far out, the biggest area possible is shown.
However if the output of abs(sin(angle)) is near its minimum and has a very big derivative the displayed area gets smaller and smaller.
So actually it should speed up, the further you zoom in, if you use that zoom function.
The reason it doesn't are those black pixels. Note that they take up to 100 times longer than other pixel.
This is insane for me.
Are solutions of the julia set where the real part is 0 and complex part is non-zero all symmetrical with respect to a point of inversion?
new profile picture :D
What are those gradient shades around the set..? Sholdnt it be pitch black? Also, are there any mappable values inside the bug shaped mandelbrot set graph, or should that also be pitch black..? Lastly, how can there simultanously be so many different x values for each y value and/or vice versa?
Mandelbrot set comes from Julia / Fatou sets !
WoW...!!
Literally how can I find a man like this to marry
wahoo !
Could you extrude the black part in 3D along the axis you animated it on? then could spin it around in WebGL or something
Amazing. But question. What is value in the Mandelbrot code? In the code for the Mandelbrot set what does the word value mean?
Could you use doubles instead of float for higher accuracy?
12:59 reminded me of the theme song of Dark...
"Make that constant a variable"
I wrote "Julia set" in assembly. That was pain in the ass.
Nice. Could you publish your code?
1drv.ms/f/s!An2bLsd5JHssguZrZFmrCsmBDd337w
There you go. You need to compile it with masm.exe and run it under DOS/DOS emulator. Also add 6 parameters x1, x2, y1, y2, cr, ci like -1.5 +1.5 -1.5 +1.5 -0.123 +0.745
Sergiusz Olszewski Reported for making me die of laugh 😊😂😂😂
That's amazing Sergiusz
Gratulacje
Why are you taking the SQRT in the line where you calculate pixel color?
hello great video but i have a couple of questions. is p5 all written in javascript?
indeed it is!
Hi! I have a question when plotted the julia sets that have real numbers it plots it inverse to what is shown on the image from google (inverse across the y axis) why is that ?
make a video of you just dancing all of that music.
also, his test for tendency to diverge to infinity is if the absolute value of the number is greater than 4 (16^0.5), but this is unnecessary since the point furthest from the origin in the Mandelbrot set is -2, and that has an absolute value of 2. using 2 instead of 4 would allow the program to break earlier for numbers not in the set, so it would run faster.
it's squared, so abs(-2)^2=4
+Piotr Kraso yeah, thanks, I know. I just meant use 2 as the maximum limit of the absolute value of the complex number, so with his Pythagoras test, 4 would be used, yes.
Hi, do you have the code for this? or a link to it..
Isn't camel notation used in javascript like it is in java?
Where is the code @3:22 I've looked at the Mandelbrot Set with p5.js but that is in p5.js and not in Processing. Where do all the `floats` come from?
All the code is here: github.com/CodingRainbow/Rainbow-Code/tree/master/code_challenges. I just updated the Julia Set under CC_22_JuliaSet. If something is missing or not up to date, please file a github issue thank you!
This has a good thumbnail :D
i agree!
Hey! I have a hard but nice CODING CHALLENGE! You know the julia-sets have all different not integer dimensions. I think it would be very interesting to have a map like the mandelbrot-set, that shows the magnitude of the dimension of the julia-set for that Parameter c.
So that a higher dimension creates a darker point. So the programme needs to create the julia set, then to calculate it´s dimension (i think box-counting) and then to give the point a magnitude. I know it´s really hard but maybe you would accept the challange :)
Please suggest here! github.com/CodingTrain/Rainbow-Topics/issues
It doesn't slow down because it's zoomed in. Black pixels make it slow because they go to maxiterations.
Thanks for that tutorial. How does the julia equation draw all of the pixels if it is only sampling one coordinate val? In a Mandelbrot, it is inputting every pixel as a coordinate and running through all the pixels/points on the screen, right?
you are still using the coordinates as complex numbers as starting points (for Z0 basically), but instead of adding the value itself in the later iterations ( Z1 = Z0² + Z0, Z2= Z1² + Z0), you add the constant value for the given Julia set (so Z1 = Z0² + c, Z2= Z1² +c)
@@MrBunt Thanks for replying!
So C is the coordinate of the pixel location being colored in the Mandelbrot edition of rendering, right? How is each pixel coordinate color determined in a julia then? (if C is constant) Oh! Wait. So Z0=pixel_coordinate^2 + constant (constant is the coordinate where the Mandelbrot that julia is centered at in the 2D plane). Right? Think that is it. So Mandelbrot is initialized with "Z=0^2+coordinate of pixel being rendered" and the julia set fractal rendering per pixel is initialized with the equation I listed above. That seems to be correct. Right?
@@MrBunt By the way, can clarify what "zooming" into a fractal is mathematically and how that is done programmatically? Is "zooming" simply rendering at a much higher amount of pixels than the screen pixels and then essentially "zooming" that picture? Thanks in advance for a good answer!
julia set in p5.js is then quite simple with altering the number no problem - apart from getting the colour to be like the p5org version ? Any chance of sharing how thats possible
it's my intention to have p5.js and Processing versions of all the examples, sorry I haven't been able to keep up with this. You can file an issue here: github.com/CodingRainbow/Rainbow-Code/issues
I'm new to Java so any help would be appreciated. How would I print this out (like on paper) and how would I change the background behind the main shape?
In Processing you can use saveFrame() to save an image that you could later print. Take a look at this tutorial for more about color: processing.org/tutorials/color/
Daniel Shiffman wow! Didn't expect the main man himself to respond. Thanks a bunch!
you could also just take a screenshot xD
mandelbrot 2: electric boogaloo
He's a smart version of Vinny from jersey shore
Are you kidding? Thank YOU.
pls tell me how to zoom in the programm processing. Everything is sooo smaaaall and tiny
The "w" variable at the end of the video he uses for just that
Can we make a hole app in processing3
Hey dan! I downloaded your script for mandelbrot on github and reworked it. I recently had my HDD become a RAW partion accidentally so I lost the most recent version of it, but here's what I've been able to recover.
I've decided to move my scripts to github so they don't get lost next time! :)
github.com/MagicGonads/Home/tree/Scripts/processing/mandelbrot
The main script (mandelbrot.pde) allows you to browse through different values, then press space to save that snapshot along with relevant information about it, so you can insert that info into image.pde in the image folder, then in the image folder you can set the resolution multipler, and generate higher resolution images that dont display in the window, but rather it runs once and then saves to a local folder.
You can set the complex transpose for both z and c, so for z it means a gradient between a Tricorn fractal and a Mandelbrot fractal, and for c it means a gradient between an updside down julia set and a regular julia set.
The newer, now lost, version allowed you to merge between julia and mandelbrot modes, it was really cool.
How I did it was I added a constant value to every pixel and then calculated using the mandelbrot method, so I'll be re-adding that soon.
Also I had added a 'ghost' feature that allowed you to see the n previous calulations for the main script, I wasn't able to introduce any transparency on the image script however, any ideas? I need to be able to give a PImage transparency and then add another PImage (with transparency) on top of the previous one, then save that image.
you can use the alpha channel of a PImage for transparency. For more I would recommend asking at forum.processing.org. Thanks for sharing!
Amazing, you made it so easy to understand, this is how my Mandelbrot set turned out i.imgur.com/qCmGbPV.png
32 bit colors are great even if it's just grayscale
i.imgur.com/nePdrQF.png
i.imgur.com/Qq3S1xy.png
I can even control CA and CB with the arrow keys. thought since this is at 1920x1080 it takes a while to generate an image
i made this in the oly programming language i know, QBasic. it runs pretty great but i cannot get color to work. since QB64 only supports RGB or RGBA
fucking entertaining! Just like watching some favourite tv series.
hah, glad to hear!
Hello i find your programm videos really good but can you tell me the Programm you are using ?
processing.org/download/
holy fuck
can you coding in c++
Am I the only one who has major trouble not putting ; after for loops ?
no();
I tried to do this in c#, but the performance is like 20x slower :(
I'd love to have 14:04 as a screensaver... anyone know how to do that? :p
shreddymetal I would say that you record this thing and set this as an animated background
There is probably a tool for this
he seems to infer that the number 'i' is imaginary in the sense that it doesn't exist.
this is basically the same as saying negative numbers don't exist, because you can't really see them in reality - it's just unfortunate that they are named imaginary numbers.
i is real in the same way number are real - they are abstract constructs that can represent real things.
Thanks for this very important feedback and clarification. I apologize for being so flip about the "imaginary" nature of complex numbers. I'm going to read your comment on my next live stream (this morning) and consider adding a youtube annotation on top of the video itself.
Daniel Shiffman thanks a bunch! I just get a bit annoyed about how complex numbers are seen as having no real world likeness, so aren't real. I like maths (yes, with an s. I live in the UK). I like maths more than a teenager should...
+Daniel Shiffman I don't mean to be rude, but did you read the comment in the end? I had a quick look through the stream on UA-cam, and didn't see it. I don't mind either way, just wondering.
oh oops, i may have actually forgotten to read it, but I think I did discuss the issue? Did I not? Apologies, I lose track of too many things and need a better system!
+Daniel Shiffman no worries, I don't mind either way
It's not working for me!? :(
you are F.A.B.U.L.O.U.S!
Fabulous
Antilame
Best
Ultimate
Legendary
Obviouslythebest
Überfabulous
Superman
Idk why I just did that but +1 sub
thank you!
Lol i thought He was interfacing Processing with the Julia lang
You could mix-up the Mandelbrot Set and the Julia Set, apply some generalization, randomly change those new variables you just created and you should get some pretty results.
I already did that here: ua-cam.com/video/WboQI1tDIfc/v-deo.html
Thanks, great suggestion!
3:37 + that imaginery number that originan x+ y that we know. whats imaginery. i not get it yet. all just variables and numbers nothing imaginery
how real is sqrt(2)
it is an irrational number, so it is real by definition
@@Sierpinski22 I dont remember leaving this comment but i am sure it was part of a joke xD
@@duality4y Oh ok 👍
i = (0, 1)
i² = i.i = (0, 1).(0, 1) = (0.0 - 1.1, 1.0 + 0.1) = (-1, 0)
So
i² = -1
i = sqrt(-1)
Came here to see the code. Disappointed 😞
it's here! thecodingtrain.com/challenges/22-julia-set
It's a bit sad to show code and have this huge blob of a unique function, instead of properly separate functions for separate parts of the code.
Amazing