Playing with CSS animations kind of drifted into looking at JS animations, then 3D rendering with WebGL, then shaders in GLSL. I’ve wanted to get more accustomed to those, especially using them for non-graphics things, but I’ve almost always had on-board Intel GPUs, and they’ve traditionally been against doing anything other than graphics with them. Anyway, I made some shaders and as a kind of first “hello world” I plotted a mandelbrot. Since I’ve been plotting in on a ton of devices and frameworks over the past 25 years or so, it still blows me away that even a decidedly out of date on-board graphics unit can easily plot it at full screen resolution 60 frames a second without any particular hardship. Not to be all old-man “uphill both ways”, but in high school we’d “borrow” the overnight use of the lab computers to calculate a single frame of that.

Anyway, playing with that, I took advantage of the whole real-time plotting thing and disturbed the formula a little to make it wobble around kinda funkily. Since it’s on the formula level and not a transform, the entire shape kind of shifts, down into the actual fractal, which looks pretty cool. So here’s a look:


The wobble sliders change how fast the tweaks change. What is actually happening is that I’m scaling the x squared in the real plane and the x*y in the imaginary plane by a constant though out the iterations, then wobbling the constant around 1.0 by a sine curve (over time). In other words, a correctly calculated one would do:

next_Z(real) = Z(real) * Z(real) – Z(imag) * Z(imag) + C(real)
next_Z(imag) = 2*Z(real) * Z(imag) + C(imag)

.. until Z escapes or is deemed stuck near 0+0i and use the time to escape as the pixel color. I instead do:

next_Z(real) = Z(real) * Z(real) * (1-k1*sin( time * k2)) – Z(imag) * Z(imag) + C(real)
next_Z(imag) = 2*Z(real) * Z(imag) * (1-k3*sin( time * k4)) + C(imag)

with k1,k2 <1, mostly <<1. If you want to feel slightly offended that I just pretty much decoupled it from Zn+1=Zn^2+C into a set of fairly arbitrary equation systems that happen to look a little like the mandelbrot set, go ahead – I feel a little dirty myself. But hey, I’m just tinkering with shaders.

I also played a little with sliding the exponent around but less than up to 3 or down 1, i.e. instead of Z^2, do Z^(2+-k), k<1. That actually looked pretty similar, but doing non-integer exponents was so taxing that the frame rate started stuttering a bit. Yeah, yeah – oh the horrors – but I just got (well, just discovered that I got five-ten years ago) this ability and I’d like to keep it a while.

Might do more later, I’m sure the possibilities are endless. In general FYI, the shaders mostly use 24 bit floats (sometimes 32), so zooming in it bottoms out around where the slider ends (x10,000,000 magnification). That’s also true if you slide the wobble to zero and use it as a regular mandelbrot plotter.

Leave a Reply