Screen Shot 2016-09-28 at 10.20.27 PM.png

Project Date: April 2016 - Present
Technologies: Processing
Source Link: Github

Travel: Vectorized

I first heard about Processing years ago, but only very recently did I start playing with it. Featured on the front page of this website is a my first project in Processing, and the relative ease with which I could create it speaks volumes about Processing's flexibility and approachability.

A RECORD OF A YEAR'S TRAVEL

Over the last twelve months I've traveled more miles than any other time in my life. Though helped in large part by regular trips to Japan for work, I traveled to four countries and almost twenty cities. Using Processing, I've created a 3-dimensional representation of my travel over this period.

KEY INGREDIENTS

In this Processing program, I used the Processing 3D engine with simple drawing functionality to generate a 3D globe with various shapes projected on its surface. The crux of this program is converting series of geographical coordinates to rectangular coordinates. The following function converts geographic latitude and longitude at a given drawn sphere radius, and converts them to rectangular coordinates with their origin at the center of the sphere.

float[] coord_to_xyz (float lat, float lon, float rad) {
  float x = cos( radians(-lat) ) * cos( radians(-lon) ) * (rad);
  float y = sin( radians(-lat) ) * (rad);
  float z = cos( radians(-lat) ) * sin( radians(-lon) ) * (rad);
  float[] xyz = { x, y, z };
  return xyz;
}

With this basic ability to plot points on the surface of the sphere, it's a simple extension to draw lines and shapes to define continents, pins, and paths.

OUTLINING LAND MASSES

To create stylized outlines of land masses, I created a Google Map and drew several lines with points at intervals around land. See this map. Use this map, or customize another to capture more or less detail. Once the map is complete, curl the publicly available URL and capture the output. You can then parse out a list of coordinates from the source. The complete file below has a complete list of coordinates for the land shapes.

DEFINING AND DRAWING PATHS

I created a list of coordinates characterizing the path of my travel from location to location. This function iterates through that list and draw lines between the points. These lines are straight-line between the start and end location, so they pass through the sphere. Alternatively, one could write a function that defines a great arc between any set of start and end points and then plots an arc as several segments along the surface of the sphere.

float[][] travel_history = { 
  {40.7128,-74.0059},
  {40.7128,-74.0059},
  {40.7128,-74.0059},
  {35.6895,139.6917},
  {39.7392,-104.9903},
  {38.6270,-90.1994},
  {40.7128,-74.0059},
  {40.7128,-74.0059} 
};

void drawTravelHistory() {
  stroke(lncolor,80);
  strokeWeight(2);

  beginShape();
  for (float[] coord : travel_history){
    float[] xyz = coord_to_xyz(coord[0], coord[1], r + standoff);
    vertex(xyz[0], xyz[1], xyz[2]);
  }
  endShape();  
}

A second function draws a pin at a coordinate, and can be called from within the function above to draw a pin for each destination.

THE FINAL RESULT

You can download the complete file on Github.