In this recipe we are going to replicate the visualization found on http://www.mta.me, done by Alexander Chen. The original piece is done in HTML, but we are going to do it in Flash, without the music component.
Open the files downloaded from the Packt Publishing website, look into the Chapter 7 | recipe 5 folder, and follow along.
The following are the steps required the animate the New York City subway system:
- Head over to http://www.mta.info/developers/download.html and download the New York City Transit Subway data.
- From the data derive these information: line color, departures, and duration of each trip.
- Download this map: http://www.nycsubway.org/perl/caption.pl?/img/maps/system_1972.jpg and open it in Photoshop.
- In Photoshop, note the coordinates for the paths of each line.
- Create
Main.asand copy the data into it. - Create the
Subwayclass. - In its constructor, determine the distance of each section of the path and with that information derive how many frames you must stay for on each section.
- Create a circle to represent the subway car:
var totalFrames:int = Math.round(_route[3] * 4); for (i = 0; i < _path.length; i++) { if (i > 0) { distances.push(Math.sqrt(Math.pow(_path[i][0] - _path[i - 1][0], 2) + Math.pow(_path[i][1] - _path[i - 1][1], 2))); totalDistance += distances[i - 1]; } } for (i = 0; i < distances.length; i++) { _frames.push (Math.ceil(distances[i] / totalDistance * totalFrames)); } - Add the
_onEnterFramefunction. Erase all the graphics and compute the new line to be drawn. Also, move the circle to the end of the path. - Create the
SubwayAnimationclass. - In it create a function that will be called every 3 seconds. This function will look at the schedule and instantiate the needed subways depending on their departure.
- In
Main.as, create an instance ofSubwayAnimationand provide it with the route data and the schedule data.
The big trouble for this recipe is getting our data. Not that it is very hard; it is just very tedious. If you head over to the MTA API development page you will find all the data you need, but not exactly in the format you want. There might even be too much data in there. Anyway, what you get is multiple text files. Some information is really easy to get such as the hexadecimal color of each line. Some will be a bit harder, such as the departure times and the duration of a trip for each lines. In any case you should build another ActionScript program (or in any other programming language you are comfortable with) just to parse the data and export it in a format you like.
Now that we got the information, we need the paths for each lines. By using the 1972 New York City subway plan, we save a bit of work as it was a bit stylized; there are fewer bumps and turns. Open the map in Photoshop and take the coordinates (x and y) of the start, the end, and every turning point for each line. There are about 27 lines; it will take some time, but not too much. Also remember that the Flash coordinate system is a bit different than Photoshop, so you will have to check the height of the picture minus the y of your coordinate in order for it to show properly in Flash. Here again you could use programming to help you in your task. You could load the image and record the coordinates of every MouseDown events.
Now that we have all our data, we can start coding. In this representation, we will make it so that 3 seconds represent one minute. So every 3 seconds we will check if there are subways departing and if so we will instantiate a Subway class for each of those departing. That happens in the SubwayAnimation class.
The Subway class has all the meat in it. Its constructor is used to calculate how many frames we must spend on each path segment. This is important because otherwise the speed wouldn't be consistent across small and large path segments. The _frameCount variable keeps track of which frame we are at in the current path segment.
The _onEnterFrame function is where we deal with the animation. We start by erasing everything. We then redraw all the completed line segments. We go on by figuring out at which point in the current segment we are at and we draw this incomplete segment. We finally place the circle at the end of the incomplete segment to represent the metro car.
We then check if we completed this segment and if yes we go on to the next segment. If all the segments were completed that means we drew the entire path. We then wait for 4 seconds and fade out the path. When the fade out is completed we make sure the Subway object is removed from the stage so that it can be destroyed, thus freeing memory.
We stopped this visualization before doing the line collisions and adding sounds, but it wouldn't be too hard to do.
Finding collisions can be an expensive process, so we would start by determining which line can intersect with which line so we can save a few operations. Then you check if the current path intersects with all the other paths of the other present lines. Another way you could do this is to use the hitTestObject function provided by ActionScript.
In http://www.mta.me whenever a line intersects another line, it plays a sound. So what you could do here is have a collection of 10 to 15 sounds ranging from low pitch to high pitch. The longer the line segment crossed, the lower the pitch sound of the cord will be. It is that simple.