Mapping screen coordinates to the complex plane
Building on information presented in An initial rendering of the Mandelbrot set using canvas, here we look at how to map screen coordinates to the complex plane.
Mandelbrot 1 has a number of issues, including the inability to reveal interesting regions of the Mandelbrot set through zooming, as suggested by the following semi-transparent red rectangle:
.png)
Here the semi-transparent red rectangle, created by a click-and-drag operation, indicates which region of the Mandelbrot set to zoom in on. That is, the upper-left and lower-right corners of the rectangle define a "zoom box." We must now transform the points from the canvas coordinate system for the upper-left and lower-right corners of the zoom box to the analogous points in the complex plane coordinate system in order to draw that region of the Mandelbrot set (thus "zooming into" the Mandelbrot set).
To transform a point from the canvas coordinate system (red) to the complex plane coordinate system (green), we assume that all coordinate transformations are proportional:
.png)
That is:
.png)
(1)
Similarly, we have:
.png)
(2)
And
.png)
(3)
Solving (2) and (3) for x’ and y’ yields the required transformation equations:
.png)
But because x’ and y’ are dependent upon ReMax, ReMin, ImMax, and ImMin, we must choose these values such that the rendered Mandelbrot image is not skewed in either the x- or y-direction. That is, we solve (1) to determine one of the complex plane extrema, say ReMax, as a function of the other three (ensuring a proportional complex plane). For example:
.png)
So given the point (x, y) from the canvas coordinate system, the analogous coincident point in the complex plane (x’, y') can be calculated using the above transformation equations, as shown here:
.png)
In this example, we have:
.png)
So, the coordinate transformations equations become:
.png)
Thus, the above canvas coordinate system point (30, 20) becomes (-1.3, 0.4) in the complex plane coordinate system.
To calculate (x', y') given (x, y), simply solve the transformation equations for x and y:
.png)
For example, the complex plan point (1.1, -1.2) occurs on the canvas at point (90, 60), as expected.
Note For an alternate way to generate the above coordinate transformation equations, see How to map points between 2D coordinate systems.
With a means to map a canvas point to a point in the complex plane, we are in a position to discuss how to implement a zoom box. However, in order to ease the implementation of the zoom box, we first rewrite Mandelbrot 1 as discussed in Simplifying zoom box implementation.