Mandelbrot in Real-Time: Fractal Shaders with P5js

Code from video: editor.p5js.org/BarneyCodes/s...
Mandelbrot Wikipedia: en.wikipedia.org/wiki/Mandelb...
When the Mandelbrot set is visualised it produces some amazing fractal patterns. A while ago I made a Mandelbrot plotter using P5js but it was too slow to let me explore the fractal in real time, so in this video I upgrade my code to use a shader instead!
The big advantage of using a fragment shader for this is that the GPU can run the code for a whole bunch of pixels all at the same time, instead of having to do them one after the other, like the CPU does and this makes it SO MUCH FASTER for this sort of code!
Follow me:
Support the channel: www.youtube.com/@BarneyCodes/...
Twitter: / barneycodes
Reddit: / barneycodes
Chapters:
0:00 The Mandelbrot Set
0:29 Visualising the set
0:50 First attempt
1:20 Why a shader?
1:51 Fragment Shader
3:35 Vertex Shader
4:00 Bringing it together with JavaScript
5:50 Dragging
6:30 Zooming
7:14 Float inaccuracies
7:35 Adding colour
8:20 Thanks Dan!
8:37 Exploring the Mandelbrot Set
#creativecoding #p5js #javascript

[@BarneyCodes]

If you'd like to see what else I'm working on, it would be great if you could wishlist my game Star Mining Co. on Steam! s.team/a/2584800/

[@StevesMakerspace]

Another great video. Thanks, Barney! Congrats on the shout-out from Dan.

[@BarneyCodes]

Thanks Steve, very kind! I was very surprised when I saw it!

[@VincentWuAnimation]

I like your p5js video, plz keep making it!

[@BarneyCodes]

Thank you, I will!

[@sharknemesis5109]

Somehow on my algorithm. Great vid.

[@BarneyCodes]

Thanks!

[@TheSoylentGreen]

Great code and explanation, Barney!

[@BarneyCodes]

Thanks!

[@marcelinetavernier]

I just did a similar think in processing but without shaders, this will help me a lot, thank you for your great video (I used doubles instead of float so I can zoom way more!)

[@BarneyCodes]

Glad you found the video useful! Doubles is a great idea, I'll have to try that! I think they might not be supported in some versions of GLSL, so fingers crossed!

[@marcelinetavernier]

@@BarneyCodes that's what I was thinking, might try it too

[@BarneyCodes]

Would love to hear how you go!

[@marcelinetavernier]

@@BarneyCodes oh, I thought I sent you a link to my code but I think CZcams delete those messages automatically 😂, maybe you can find it somewhere

[@BarneyCodes]

I think you're right, must be an anti-spam/scam thing. I'll have a look and see if I can find it!

[@jordymottershead]

there’s a cool game concept somewhere in this code..

[@BarneyCodes]

I hadn't even thought of that! Maybe a sort of searching game? You get given a screenshot of a section of the Mandelbrot and you have to explore to find that section?
If you make a game out of it, please let me know! I'd love to give it a try!

[@nothappyz]

Have you tried doubles? They are of course much slower tho

[@BarneyCodes]

I think WebGL doesn't support doubles unfortunately, but if/when I move this to WebGL 2 or WebGPU I'll definitely use doubles!

[@nothappyz]

@@BarneyCodes I see, interesting. Very nice channel by the way!

[@BarneyCodes]

Thank you!