After some quick digging, I realized I was way smarter as a high schooler than I am now. How did I do this before? Complex numbers, complex plane, how to iterate correctly and determine if it has escaped toward infinity. And after I figured all that stuff out, I had to tackle more problems, how to zoom in, how to colorize (both grayscale and color as the calculator had neither). This was going to be a tough task.
(Also I’d like to point out all images in this post link to the fractal viewer itself, to see that image live)
I wanted to not use a framework, as I did not see the need. This was a single page, single page application. 99% of the work would be done drawing to the canvas, and none of the inputs were related or reliant on any other elements. But, I did take a reactive approach, and it was cool to implement my own stateful app that has a
setState function and batch renders state changes asynchronously. This part was definitely a little tricky but fun to work on.
With the absense of i also comes an alternative way of dealing with complex numbers. We must refer to both the real and imaginary parts separately (where a complex number is written
x + yi, x being the real part and i being the imaginary part).
Zooming in was not, in and of itself, that difficult. When the user clicks and drags a box to zoom in on, just save the left, right, top and bottom boundaries and that’s that…right? Well, as soon as you open that link in a window with a different aspect ratio, it gets all mucked up. Instead of saving the “viewport window”, I needed to save the origin (middle coordinate of the screen), and the delta of values between the x plane (real numbers) and y plane (imaginary numbers). This way I could render and view, at any zoom level, on any device and it will be centered and look correct.
When rendering, I would get pretty noticable lines where values would change abruptly. While this was mathematically correct, I’ve seen many more examples on the internet that looks much smoother. Since I am a very visual person (why I love working on the front end, and hey, I even have a BFA), this smoother kind of look is what I wanted to go for. A pretty clever way to smooth color, I found here. That was way easier than I thought it would be!
Sweet variable names, no?
All in all, this was a lot of fun to work on and hope others enjoy it at least a fraction as much as I did. Check it out here, or just look at my screenshots below to see what all this talk is about (remember they are clickable!).