## Converting pixel coordinates to graph coordinates

I’ve been working out how to plot functions on a 2d graph, like you’d see on a graphing calculator. My pixel plotting function only understands discrete pixel coordinates, but a 2d graph can be any arbitrary ranges of x and y both positive and negative.

It took me a few notebook pages of puzzling over it, but I think I’ve figured out how to go back and forth between pixel coordinates and arbitrary x/y coordinates that are contained within the pixel coordinates.

Let’s start with one dimension graph along the x-axis on a number line that ranges from -4 to 7:

-4 -3 -2 -1 0 1 2 3 4 5 6 7

If my image has a pixel width of 640 pixels, how can I tell me program to make a point at 2 on my number line? I can’t tell my pixel putting function to plot a pixel at 2, because it would put a pixel on the very far left – three pixels in (since the count starts at 0). I have to convert from graph space to pixel space by figuring out how many pixels across the image it takes to reach 2 on the number line. Which pixel does the number line 2 come out to be?

Quick note: I think I got the math right here. I worked it out on my own which means it might not work at all, or not work in all cases. It seems to work for me.

My image is 640 pixels wide. I know that -4 on the number line is at pixel 0, and 7 on the number line is pixel 639. Each pixel is going to represent a certain small chunk of the graph. Numbers are infinite, but my pixels aren’t.

The total width of my number line is 11.

11 / 640 = 0.0171875

Each pixel represents a range of the number line that is 0.0171875 wide. This means that on my graph, numbers 0 to 0.0171875 is represented by the far left pixel, pixel 0. If I wan to plot number .012, then I light up pixel 0 because that number falls within that pixels range. The next pixel represents 0.0171876 to 0.034375 on the number line. I can figure out any pixel’s place on the number line by multiplying it by .0171875.

Well… is that totally true? No. Remember that my particular number line doesn’t start from 0 at the far left. It starts from -4. I need to multiply my pixel x coordinate by .0171875 and then translate it by adding the number that represents the far left point on the graph, which in my case is -4. Let’s test this real quick.

I know that the center of my 640 pixel wide screen is pixel 320. I can also visually see that the center of my number line is 1.5. Let’s run it through the procedure I just outlined and see if I can show that pixel 320 lands on number 1.5 on my line.

First, multiply the pixel x coordinate 320 by .0171875:

320 * .0171875 = 5.5

Ok, now lets shift it by adding the left-most place on my number line:

5.5 + (-4) = 1.5

Neat. Pixel 320 does land on number line point 1.5 according to this method. As a sanity check, let’s try another range. Let’s bump up my pixel width to 1024 and make the number line consist of only negative numbers:

-15 -14 -13 -12 -11 -10 -9 -8

I’ll again try to show that the middle pixel is the middle of the number line, -11.5.

The graph width is determined by subtracting the graph minimum from the graph maximum: -8 – -15 = 7

Each pixel represents the graph width divided by the total amount of pixels: 7/1024 = 0.0068359375

So, half of 1024 is 512, and we want to multiply it by the amount each pixel represents on the graph: 512 * 0.0068359375 = 3.5

And now we need to shift this result by adding the far left point on the graph (the minimum point on the graph): 3.5 + (-15) = -11.5

-11.5 looks like the center of the graph to me, so that’s good. Things check out.

Graph Location = Pixel Location * (Graph Width / Pixel Width) + Graph Minimum

Ok good. But what about the other way around? What if I know which graph location I want to plot a point at, but don’t know the pixel that falls on this point? Well, I’ll try to shuffle the equation around with some 8th grade algebra.

Pixel Location = (Graph Location – Graph Minimum) / (Graph Width / Pixel Width)

Let’s see if this works. I’ll use the same pixel width as before, 1024, and the same number line:

-15 -14 -13 -12 -11 -10 -9 -8

I want to plot a pixel at the center point on the graph, -11.5. Let’s run that through the above formula and see if I get the center pixel.

Pixel Location = (-11.5 – -15) / (7 / 1024)

= 3.5 / 0.0068359375

= 512

Groovy. I’ll try to write a program to demonstrate this later.

This entry was posted in Hobbies, Programming, Uncategorized. Bookmark the permalink.