Changing your coordinates for computer graphics.

Ok I know this might be a boring topic, but it might be helpfully for someone out there.  I want to show how to change a coordinate system. One reason you might want to dothis is for computer graphics (which is the class I learned this from). Some computer graphic software will start their coordinates from the upper left where Y increases as you go down. This is sorta confusing since most people are use to the Cartesian coordination system (the x y coordinates) , where Y increases as it goes up and there is a negative x and y.

The trick to this is fairly simple with a 2 step math problem. Lets convert the coordinates [0, 400] to the coordinates   [-20,20].

  • [0, 400] —> [-20, 20]

Your first step is to make them more parallel, do not worry about the magnitude at the step. So this will be either an addition or subtraction to the original coordinates. One or the other.

  • [0, 400] —  (-200)  —>  [-200, 200]    subtract 200

Your second and final step is to multiply or divide the number to the final coordinates. On this one I will divide by 10 to make 20.

  • [-200, 200] —- /10 —> [-20, 20]

Here is the same example but in reverse

  1. [-20, 20] —> [0, 400]   // starting point and want to go to the final coordinates
  2. [-20, 20] —> + 20 —> [0, 40] // add 20
  3. [0, 40] —> * 100 —> [0, 4o0]  // multiply by 100 to get to the final product.
Creating a method to convert coordinates

Here is an example of a method to switch between coordinates. You can probably have more dynamic method but I will do one assuming you do not have more then 2 different coordinate systems in your program. This one is only going one direction ( [0, 400] — > [-20, 20]) and you would need a point class.

public pt changeCoordinates( x, y){

new_x =  (x-200)/10;

new_y = (y-2000/10;

return pt(new_x, new_y);


Flip Y coordinates

If you just want to flip the Y coordinates where y is zero at the bottom and y is the max or highest at the top.

new_y = y_max – y;

y_max = the max width of the window/coord.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Graveyard Database Logo

Has everything you want to know about grave yards. Plus has many celebrites and world leaders graves. Pssst it is my other site

Google + Profile
Check out Android Photo Mapping, its a app/site I been working on
Fabulou wholesale Petr Mrazek jersey is back. Best choice to get the wholesale Petr Mrazek jersey is suitable for all style of people.