# complex coordinate to screen coordinate problem

As an expansion to my fractal software, I've decided to add center plus width as an image location/definition. Which leads me to the question of how do I convert the complex number given to an x,y coordinate on the screen plane. Obviously, I do this when I calculate the image as I iterate a given function, but I do that in terms that are not applicable to the 'free-standing' number I want to deal with. I can go in the other direction with no problem but have not been able to figure this one out. The downside of doing mathematics without being a mathematician! In short, complex to screen conversion—how? As an example of screen to complex conversion her is the function I use for that:

scr2Pix = (pX, pY, pW, pH, minX, maxX, minY, maxY) ->
xPercent = pX / pW
yPercent = pY / pH
newX = minX + (maxX - minX) * xPercent;
newY = minY + (maxY - minY) * yPercent;
[newX, newY]


The language is coffeescript. The parameters are better shown in this snippet:

x1 = -2.5 #! lower left X—complex
y1 = -1.5 #! lower left Y—complex
x2 = 1.5  #! upper right X—complex
y2 = 1.5  #! upper right Y—complex

console.log scr2Pix(320,240,640,480,x1,x2,y1,y2)


with a return value of [-0.5, 0], in effect asking for the conversion of 320,240 to a complex number. NB pW is screen width, pH is screen height, with pX and pY being the coordinates of the location I'd like to convert.

I believe what I'm looking for is pix2Scr() not so much as code, but as an algorithm that I can add to my collection.

The proposed answer coded inline as:

Sw = 640
w = 4
Sh = 480
x = -0.5
y = 0

nx = (Sw/(2*w)) * x + (-Sw/2)
ny = (Sw/(2*w)) * -y + (-Sh/2)

console.log nx,ny


produces -360 -240 which is correct except for sign so I've put in one too many minus signs somewhere?

• "center plus width" what does that mean? – rschwieb Jan 22 at 20:54
• "a,y coordinate on the screen plane" what does that mean? – rschwieb Jan 22 at 20:54
• Your paragraph is filled with sentences that manage not to describe what you want. A few examples of what you expect to map where would be useful. – rschwieb Jan 22 at 20:58
• Fractal images are often presented with a complex center coordinate plus a width (width in the complex plane). The screen plane has an xy origin in the upper left of o,o with numbers increasing from there. Free-standing was a reference that C in a typical mandelbrot calculation involves a combination of factors before iteration. Here, it comes from user input i.e. free-standing. I'm asking for a conversion of the number from one plane to the other. My view of the complex plane is always bounded by -2.5, -1.5i and 1.5, 1.5i the screen plane is bounded by o,o and 640,480 (varies with image size) – hsmyers Jan 22 at 21:34
• as an example: -0.759 +0.000i @ +2.500 decoded center and width Robert P. Munafo uses them in his 'Encyclopedia' to locate his images. In particular, "Sea-Horse Valley"… mrob.com/pub/muency/seahorsevalley.html – hsmyers Jan 22 at 21:41

## 1 Answer

First, let me clarify my interpretation of the problem. Your additional context was a great help in getting this far, but I may have misunderstood.

Let the location to be displayed be represented by $$x_0+iy_0\in\mathbb C$$ and $$w\in\mathbb R$$. My understanding is that $$w$$ represents a positive distance so that we want to map

• from a rectangle lying between the vertical lines described by $$x=x_0-w/2$$ and $$x=x_0+w/2$$ centered on $$x_0+iy_0$$

• to screen coordinates so that the image of $$x_0+iy_0$$ is centered in the screen and the picture fills the screen (aspect ratio preserved)

Three basic things need to happen

1. Scale the plane;
2. Reflect the plane over the $$x$$ axis, since the display uses left-handed coordinates; and
3. translate the image of $$x_0+iy_0$$ to the center of the display.

Tackling 1) first: Let $$S_w$$ and $$S_h$$ denote the number of pixels in the width and height of the image, respectively. To make a rectangle that used to be $$2w$$ wide fit in a space that is $$S_w$$ pixels wide, we'll scale by a factor of $$\lambda =\frac{S_w}{w}$$.

Now 2): So far, we've mapped the complex plane into a (right-handed) pixel plane. To reverse the direction of the $$y$$ axis, we make the appropriate transformation. If you are thinking of things in terms of complex mappings, that is what the complex conjugate map does, and if you are thinking in terms of linear transformations on $$\mathbb R\times\mathbb R$$ then you would use the matrix $$\begin{bmatrix}1&0\\0&-1\end{bmatrix}$$ .

Now 3): If you were to use these transformations right now and map the whole plane to your screen, all you'd see is an image of quadrant $$IV$$ of the complex plane. The center that you want ($$p_2=\lambda(x_0, -y_0)$$ in the new coordinates) is probably nowhere in sight. Centered on your screen is the point $$p_1=(S_w/2, S_h/2)$$, by definition.

So the requisite translation is to add $$p_1-p_2$$ to each point of the screen plane.

I'll write out the whole transformation now, all in terms of $$w,x_0, y_0, S_w,S_h$$:

$$(x,y)\mapsto \frac{S_w}{w}(x,-y)+(-\frac{S_w}{w}x_0+\frac{S_w}{2},\frac{S_w}{w}y_0+\frac{S_h}{2})$$

In the example you gave with $$w=4$$, $$x_0=-1/2$$ and $$y_0=0$$, $$S_w=640$$ and $$S_h=480$$, this turns into

$$(x,y)\mapsto 160(x,-y)+(400,240)$$

This maps $$(-1/2,0)$$ to $$(320, 240)$$,

and $$(-5/2,0)$$ to $$(0, 240)$$,

and $$(3/2,0)$$ to $$(640, 240)$$,

as expected.

Or, to rewrite it in terms of $$z\in\mathbb C$$ where $$z_0=x_0+iy_0$$:

$$z\mapsto \frac{S_w}{w}\overline{(z-z_0)}+\frac{S_w}{2}+i\frac{S_h}{2}$$

Another way to do this would have been to use four-point correspondence to compute the affine transformation. It is a very general algorithm which can compute the affine transformation needed to map from one plane in $$3$$-space to another plane.

Actually for an affine transformation like this one, only three points are necessary because things simplify a little since you are moving around the same plane.

• I think I got everything straight. It is always a pain for me switching handedness in coordinate systems, but this deserves testing. Please tell me if your implementation doesn't perform as advertised, and I'll see what I can do to help. – rschwieb Jan 23 at 15:28
• My first fractal software in the '80s went one entire iteration displaying top inverted with bottom before a good friend pointed it out! – hsmyers Jan 23 at 19:42
• In going over your answer, I believe you are correct in all essentials. I may stumble given my mathematical ignorance, but I'm used to that… – hsmyers Jan 23 at 19:49
• I've added an edit with my first version of your answer. I get both back as negative numbers so I've misplaced a minus sign or two? – hsmyers Jan 23 at 20:12
• @hsmyers I think we have the correct map now. – rschwieb Jan 24 at 14:59