Coding Challenge #22: Julia Set in Processing

Coding Challenge #22: Julia Set in Processing

Articles , , , , , , , , , , , , , , , , , , , , , , , , , , , , 41 Comments



hello welcome to another coding challenge in this coding challenge I'm going to take the Mandelbrot set which is here programmed in processing and I'm going to convert that code to the Julia set so I'm going to explain a little bit about what the Julia set fractal is and then just write the code for it play with it make an animation out of it do a few other things and then I'll be finished so first I want to say is I'm going to assume a little bit of knowledge which you can pick up and watch the previous video about the Mandelbrot set if some of the stuff is confusing to you okay I have to keep going here so first let's look let me just don't remind you what's going on so the idea is that there is a canvas and the canvas has an x-axis and a y-axis but I'm thinking that canvas though it exists on the screen with that x-axis and y-axis I'm using it to visually represent something called the complex plane what do I mean by the complex plane while a complex number is a number written like a plus bi where I is an imaginary number or the square root of negative 1 there's you know think about that it's imaginary right what's the square root of negative 1 you're gonna be thinking for a very long time until you just decide like I can't come up with the answer so I'll just make up an imaginary number that is the answer called I so the all complex numbers have a real component that's the a and an imaginary component that's the B and so the x-axis represents a and the y-axis represents B and so the in the Mandelbrot set what happens in the Mandelbrot we're saying for every complex number C which equals a plus bi every complex number on this plane we want to test the function where Z of some iterative function so Z of n Zn plus 1 equals Zn the previous Z squared plus that complex number so if we start the first write Z sub 0 would be C and then Z sub 1 would be C squared plus C and then Z sub 2 would be C squared plus C squared plus C right this is the iterative process that's going to happen over and over again I mention all discs okay so now one thing that we need to know is how to take a complex number I'm doing this again because I think it's worth it a plus bi and square it so if we take a plus bi squared take a plus bi multiply by itself we get a squared plus a B I write a times a plus bi times a plus bi times a which is a bi plus bi squared so this turns out to be a squared plus a oops sorry plus 2 a B I plus B squared times I squared well I is the square root of negative 1 so I squared is negative 1 so this is minus B squared and now we have a squared plus B squared minus B squared plus 2 a B I so this is now another complex number with a real component and an imaginary component and you can see this that math is happening in the code all the way down here so this is what's happening it's we're iterating over and over again and looking at the so a A's represents a squared B B represents B squared so the new complex number is a squared minus B squared plus that Plus see the real plus C a of C can see that a of C and then the B component is 2 a B plus y so x and y are remembering the previous a and B okay so that's what's happening with the Mandelbrot set and the whole point of the Mandelbrot is testing ok is the point going towards infinity or is the iterative process resulting infinity or is it resulting in a bounded number that doesn't tend toward Finity and my test to see if it's going to infinity is just essentially look at its distance from 0 a squared plus B squared is greater than arbitrarily 16 and typically you just couldn't check a 4 2 squared is 4 but you know you can kind of play around with this because what I'm doing is also mapping the number of iterations it takes to get to a certain color and so there's a variety of ways you could kind of approach this in here as a strict mathematical approach but I'm all over the place and trying different things so you can see doing that and then just setting a pixel color based on how many iterations there were and then we get this particular famous well-known pattern known as the Mandelbrot set so that's my recap of the Mandelbrot set you don't have to watch that previous video after call let's talk about what the Julius set is so the Julia set is actually something very specific and I'm going to go I'm going to use this Paul Bork site which has to do with this particular insane looking function Z to the fourth power the gap sorry that Julie said his name for a mathematician named Gaston Julia who is looking at this particular crazy polynomial expression but I'm going to look at kind of what is more conventionally known or thought of as the the Julia set itself which is actually a connected deeply to the Mandelbrot set so what you can see Julia said welcome thought of as like Mandelbrot dust these patterns that emerge out of these like pieces of the Mandelbrot set in a way and so there's a key difference in how the Julia set works the way that Julia set works is instead of C itself being related to the very pixel that you're iterating see in the Julia set is actually just a constant so Z sub 0 the first Z is equal to the complex number represented by the pixel but the thing that you add to it the C is actually just a constant so while Z sub 0 changes as you move along C always remains constant and I'll show you in the code I can actually just change two things in the code in two seconds and we'll see the Julia set so let me show you what I mean by that and somebody please make a version of a rainbow Julia set for me I'm going to do everything black and white so let me show you what I mean so fun thing I'm going to do is I'm gonna go to the Wikipedia page and I'm going to scroll down and you can see there are different results that you can get and let's pick this one like I want to get this particular result so look at this constant this is a complex number with both a real component and an imaginary component and it's a constant so what I want to change in the code is instead of that constant right each iterative process I take the the squared a squared minus B squared + 2 a B and add it to the particular complex number that I'm iterating but instead of that instead of that specific X&Y saved complex number I want to just use these so this the constant so this would be negative 0.7 something so I'm going to change this to that negative 0.7 something and this I'm going to change to negative 0.3 so now if I run this there we go look I've got the Julia set fractal with exactly the same code I didn't really change anything about it so that's the secret here the Julia set is really just a little bit of a trick in many ways in terms of all you care about is the visual pattern is just a trick to use a constant instead of the actual complex number that's associated with that pixel now what I really should do to improve what I'm doing here is make that constant a variable so what I'm going to do is I'm going to comment that out I'm going to go backwards and I'm going to here in side draw at the very top I'm going to add a see a referring to the a component of the complex constant and and I'm going to make a variable called CB and I'm going to get that for CA and I'm going to make that for a c.b.c that's going to be ca and that's going to be CB then what I'm going to do is I'm going to go down here and change this to CA and CB so now you can see there we go there is my this particular Julia set so now we have a mechanism by which I could kind of just keep going be like Oh interesting let's grab this particular number which you notice by the way this particular pattern only has has a 0 for the real component so I'm going to go and I'm going to just change this to 0 and this to 0.8 and I'm gonna run that and you can see there's that pattern matches exactly what we just saw on Wikipedia I'm doing fine that'll be the thumbnail for this video so okay so this is interesting we're getting somewhere now let's say I want to animate this there's two things that I want to do in this video number one is I just want to make this animate and number two I want to look at how I might use a mouse over the Mandelbrot set itself and see the Julia set associated with each point on the Mandelbrot set itself back from an awkward cut I kind of went off at a misdirection into something that wasn't so important you can watch the the archive live version of this for all of the chatter about that but the only thing I'm going to do is actually right now let's just move this up here because technically I want to check if it's going toward infinity and with the Julia set I actually only need to check you know it's good enough just to check if it's greater than 4 but once I once I square those values I could check here to see if those values have gotten greater than 4 and then iterate to the next generation at the next generation and you can see here I've still got the Julia set going okay so there's a lot of things I could do here and I want to do a couple things the first thing I want to do is just make this animate so one thing I could do is in these constant values instead of having them oh before I get to that let me show you something so this is a particular Julia set where only the only the imaginary number which which has no real component the real number is 0 the imaginary number is 0.8 but if I actually try to pick one where there is no imaginary component one thing you'll notice is that the the Julia set is always perfectly symmetrical if there is no imaginary component so we could keep trying different like values I don't know if I'll get something and you can see here is another perfectly symmetrical Julia set so if if the imaginary component is always 0 you will get perfect symmetry but one thing that I want to do is I want to just say let me map the mouse value which goes from between 0 and width to between like negative one and one Mouse x value and let me also map the mouse Y value which goes between 0 and height to between negative one and one and now what I can do is you can see as I move the mouse around I am seeing all the different Julia sets now ultimately what I wanted to do is put the Mandelbrot set next to this is essentially the same thing so as I move the mouse over the Mandelbrot you can set you can see the Julia set next to it and maybe I'll leave that as somebody as an exercise to somebody you can see just on Paul Bork's site here this diagram is what I intended to do as I move the mouse over the Mandelbrot set you would then see the Julia set the corresponding Julia set the dust so to speak next to it but this is kind of a nice effect here and you can see something about this range of like negative one to one is kind of a nice range to use and I can try to get if I get to 0 where 0 along the y-axis would be here so these should be all the symmetrical ones but you can see I'm not exactly at zero but you can see if I'm at zero I've got the symmetrical one so you can see I can somebody could make a nice dancing gif I should add some music here I'll do that enough Bobby I just could do this in the middle of the video I don't care anymore Nancy Julia said ok so but what I want to show you what I think could be interesting to try is instead of having it be Mouse interactive or a really quick way that I could have those values in the Julia set adjust automatically as I could use a sine wave so what if I had an angle and set that equal to zero and then let me comment this out and then I say float ca equals sine of that angle and float CB I'm just going to make the imaginary component 0 for right now and I'm going to say oops and not a angle and then I'm gonna have that angle increase you know over time by some amount and you can see look what's happening now that it's oscillating between negative 1 and 1 so you almost have this like breathing Julia set let me zoom in on that a little bit we could this would be good for like meditation so the other thing I could do is I could oscillate only the imaginary component I could set the real component to zero and now you can see this sort of like oscillation happening here we'll sort of almost has this like left and right feel to it then what I could do is I could oscillate them both and have this one like kind of be it a different period I'll just multiply the angle by something and you can see what's happening we should have this kind of like infinite set of oscillating Julia fractals and I almost want I just want to sort of see like you can see it's like animating quite quickly I want to just sort of see like how far I can push this if I up the resolution a bit if processing performance-wise is still good I'm going to go to like a thousand by eight hundred so you can see performance wise it's starting to slow down a little bit but I'm still able to get pretty fast performance out of pixel operations so I will make a JavaScript version of this but you'll see the canvas pixel operations in JavaScript without doing something like WebGL magic are going to be much much slower okay so I think so let's do one more thing so let me put this back one thing that I think would be useful is we need this Julia set to be a rainbow so I'm going to leave the exercise of putting a Mandelbrot set and a Julia set next to each other for somebody on the internet to do and share with me or maybe I'll just post the code to that go with this video and this should now say Julia set but what I want to do is change the color mode to HSB so instead of reading the red green and blue values of a color I'm going to make colors based on hue saturation and brightness so what I'm going to do down here is when I make the color and since I have this sort of crazy formula based on the number of iterations sorry let me go over here and grab this I'm just going to put this in a separate variable called H for hue then we make a color hue with a saturation and brightness of 255 that's why does it not like H duplicate variable H I use that for something else hu for he okay let me run this ah there we go there's my rainbow Julia set finally and you know I could potentially I don't know you know we could play with these values a little bit – or the brightness – actually we I don't know why even consider playing with the saturation and we can say here's my lovely rainbow julia said now oh i this this would be a good this is a good screenshot but i need to pick a good so let's look let's go back to Wikipedia I'm in this video let's look let's look for this 1.8 this one looks kind of nice right point eight point one five six so zero point eight zero point zero point one five six ooh I didn't get that right something's negative probably own egative point eight negative point eight there we go ooh the how lovely so this will be my do this with my thumbnail for this video I shouldn't be deciding to do that after the video but you're watching me make the thumbnail in the video whatever um okay uh and that's it I think for this video here's the thing I would one thing that I'm not doing is the zooming so this would be an interesting exercise for you guys the range is defined in this particular code by these values W and H so for example if I were to change this to two you're going to see I'm quite zoomed in on it so that is also something I could use to animate for example what if I said the absolute value of sine of that angle you know times five this would sort of zoom in and out so you can see here I am zooming into as I'm zooming directly into the center which might which you can see like kind of zooms into blackness but you could probably figure out like where's the sort of point you want to zoom also at a certain point you know these numbers are getting smaller and smaller and smaller and smaller and smaller is the degree of accuracy I'm gonna get with floating point math won't work so well but I encourage you to sort of explore the zooming on your own and sort of see how that and you can see how it's like really slowing down also as it gets computation wise as it gets closer and closer in but that's something you can also explore with and play and I could even put this back this will be my final move here that we can sort of see it's zooming as those values are changing as well so this is the full finished version thanks for watching this Julia set tutorial I hope that you learned something I hope I didn't get too much wrong I usually get quite a few things wrong but I'll hear from the internet with Corrections and make them again in a future video thanks very much everybody good bye

41 thoughts on “Coding Challenge #22: Julia Set in Processing

  • JaceyRaze

    Could you extrude the black part in 3D along the axis you animated it on? then could spin it around in WebGL or something

  • Proxy

    Amazing, you made it so easy to understand, this is how my Mandelbrot set turned out https://i.imgur.com/qCmGbPV.png
    32 bit colors are great even if it's just grayscale

    https://i.imgur.com/nePdrQF.png
    https://i.imgur.com/Qq3S1xy.png
    I can even control CA and CB with the arrow keys. thought since this is at 1920×1080 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

  • einemailadressenbesitzer einemailadressenbesitzer

    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.

  • Brian Park

    Why are you taking the SQRT in the line where you calculate pixel color?

  • Mayank Mamgaain

    Isn't camel notation used in javascript like it is in java?

  • Nerdiconium

    Awesome sequel: 9i out of 10, would do Java again

  • Aa ron

    9:59 there is a perfect circle in the darkest gray shade i wanna see someone approaching pi with this

  • NoobLord

    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

  • aliasghar907

    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?

  • unhott

    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?

  • mar777i

    If either the real or imaginary part of the number ever crosses 2, the absolute values will start exploding in magnitude.

    The crown towards -2 + 0i exists because the formula x² + x has really amazing properties there:
    -1.5 → -1.5² + -1.5 → 0.75 ─ will diverge towards zero
    -1.9 → -1.9² + -1.9 → 1.71 ─ see how the absolute value of the result is less than input?
    -1.95 → -1.95² + -1.95 → 1.8525 ─ we're getting somewhere…
    -1.999 → -1.999² + -1.999 → 1.997
    -2 → -2² + -2 → 2 ─ the absolute value is equal here!
    -2.001 → -2.001² + -2.001 → 2.003 ─ wait, did it just grow?
    -2.1 → -2.1² + -2.1 → 2.31 ─ and here it grows even more!

  • Demetrio Torgan

    Amazing

  • Demetrio Torgan

    Amazing

  • David Sichma

    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: https://youtu.be/WboQI1tDIfc

  • Jason Bracey

    At 1:00 – 1:16, another name for "imaginary number" is lateral number. Look at Welch Labs https://www.youtube.com/watch?v=T647CGsuOVU

  • arado240dd

    Hi, do you have the code for this? or a link to it..

  • Pierre Thierry

    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.

  • Boris Vassilev

    It's not working for me!? 🙁

  • Wild Animal Channel

    Making programming fun again!

  • Elías Burgos

    This is insane for me.

  • Die Weltwissen 121

    Hello i find your programm videos really good but can you tell me the Programm you are using ?

  • Julio Valdez

    He's a smart version of Vinny from jersey shore

  • physcogamer

    can you coding in c++

  • Ashish Kushwaha

    hey! nice one!

  • Gerardo da Silva

    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)

  • Silviu Stefaniu

    Love your videos 😀
    Check out my version https://youtu.be/COnkuF5PNm4

  • UltraAnalisis

    make a video of you just dancing all of that music.

  • Isidora Flores

    you're making me lose sleep

  • generaldave

    Great videos. Again, I translated to Python using pygame.

    GitHub: https://github.com/generaldave/Julia-Set

  • Mike Felts

    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.

  • TheMPKev

    I love how when you take the pen to draw something on the board, you begin 95% of the time by drawing a square

  • doomood

    I really enjoy your video! Keep teaching us good stuff 😀

  • Vedvart

    Love that little annotation rant on how imaginary numbers aren't imaginary (;

  • slap_my_hand

    holy fuck

  • Will Edwards

    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?

  • Jonathan Jung

    pls tell me how to zoom in the programm processing. Everything is sooo smaaaall and tiny

  • Sergiusz Olszewski

    I wrote "Julia set" in assembly. That was pain in the ass.

  • Dane Filipczak

    bravo :' )

  • Zonko Kongo

    Awesome series! Really enjoying it.

    Edit: I really like the mathematical correctness, the great programming and the enthusiasm.

  • mrZcr4fter

    Beautiful

Leave a Reply

Your email address will not be published. Required fields are marked *