Skip to content

Converting Geographical Coordinates to Cartesian Coordinates

March 21, 2013

I was working on an interesting short term project through Project C for an upcoming movie called Oblivion.

How it works:
Basically, users contribute their favorite memories of Earth via Twitter and/or Instagram hashtagged with #oblivionmemory. If the tweet or photo includes your geolocation, it is automatically placed on a global map. The map at first glance appears cold, dark and desolate, but as user contributions are added, it begins to brighten, state by state, country by country. At the end of the campaign, the map will have transformed into a bright beautiful landscape of the world, as if these precious memories have revived the Earth back to life from Oblivion. (as Matthew Jordan so delicately explains)

This sounds simple enough but it presents a couple challenges. First, after aggregating tweets and photos, how does one convert those geocodes to cartesian coordinates? How do you take the longitude / latitude pairs and find the corresponding pixel on a given map?
In the programming world, given a particular viewport, the origin usually starts in the upper left corner while the x and y values increase as you move towards the bottom right. For this reason, I don’t like the fact that people still call it “cartesian coordinates”. I’m not a mathematician but technically speaking, the correct terminology should be “the absolute value of quadrant IV in the cartesian coordinate system”. Would it not? Anyhow, I’ve accomplished this conversion by performing a few steps:
1) Find the top left and bottom right corners (in pixels) on the map.
2) Find the corresponding geographical coordinates for each of these points.
3) Adjust the longitudes and latitudes (separately) so that their origin is also placed in the upper left corner (using only addition/subtraction and absolute value math).
4) Represent max and min values for both longitude and x values in slope intercept form (y=mx+b)
5) Solve for m and b
6) Repeat steps 4 and 5 for latitude and y values.

Now that I have m and b (slope and y-intercept) for longitude (x) and latitude (y), all I have to do is plug any longitude and latitude into their respective formulas and it will yield the corresponding x and y values.

Now that I can systematically generate xy coordinates for each geocoded post, I need to figure out a way to make the map turn from grayscale to color only in these areas. The way accomplished this was to take a grayscale map and layer it on top of a color map. Next, I would “punch holes” into the top layer exposing pieces of the color map below. These crop circles can be easily generated through GD doing something like this:
imagefilledarc($img, $x, $y, $diameter, $diameter, 0, 360 $transparent, $srcimage, IMG_ARC_PIE);

The rest is easy stuff. 🙂

The site can be viewed at (due to moderation, posts will not appear on the map instantly)

From → Hacks

  1. It’s really a nice and useful piece of information.
    I’m happy that you just shared this helpful info with us.

    Please keep us informed like this. Thanks for sharing.

  2. Hi there would you mind letting me know which webhost you’re working with?
    I’ve loaded your blog in 3 completely different browsers and I must say this blog loads a lot quicker then most.
    Can you suggest a good hosting provider at a honest price?

    Thanks, I appreciate it!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: