Seeing my comrade Zach Johnson’s impressive work on generating isoline maps in Flash, I offered to try to lend a hand with smoothing the lines (point-to-point connections) he was deriving from interpolations via Delauney triangulation. I first turned to the fantastic book Foundation Actionscript 3.0 Animation: Making Things Move!, in which Keith Peters presents a method for drawing a continuous curve based on multiple points. (Grant Skinner has a post with a nice demo of the same method and an even cooler demo of a double-line version for fills.) While the method produces a nice, smooth, continuously curved line, it’s not very appropriate for the isoline problem because the curve doesn’t actually pass through any of the specified points, save the first and last. The points in this case are interpolations, so a smoothed line that is essentially an interpolation of an interpolation would be sacrificing too much accuracy.
The bottom line is that I had no luck finding a satisfactory way to use Flash’s built-in curveTo method—which draws quadratic Bézier curves—and instead opted for creating cubic Bézier curves (compare the two in the above image from the Flash documentation). Thanks to Flash’s BezierSegment class, it’s pretty easy to construct these curves. With my limited understanding of the math involved, however, finding good control points for a continuous curve was a bit more challenging.
I put together an AS3 CubicBezier class, which for now just contains two methods: one to draw a continuous series of curves through many points (as was my goal), and one to draw a single curve between two points (seemed worthwhile to throw that in), both demonstrated below. I’m sure there are a few kinks (ha!) to work out, but generally the results seem pretty satisfying. This was written with cartographic generalization in mind, but hopefully it can be more broadly useful.
Drawing in Flash dynamically with ActionScript is a jolly fun time, but when doing so one of course lacks some of the finer controls of drawing the graphics manually in the Flash authoring environment. One such deficiency is dashed lines, so a while back I made a simple DashedLine class in AS3 to use here and there in my projects.
It’s basically a Sprite that has simple drawing methods with dashed lines. Just make a new instance, providing the line width, color, and an array of alternating dash and gap lengths (in pixels). Then call moveTo() and lineTo() methods directly on the Sprite, not its graphics property. (You can also do beginFill() if you want.) For example:
var dashy:DashedLine = new DashedLine(1,0x339933,new Array(8,4,2,4));
dashy.moveTo(0,50);
dashy.lineTo(100,0);
dashy.lineTo(200,50);
dashy.lineTo(300,0);
addChild(dashy);
Try it out below!
This is by no means complete, as I'd like to add the rest of the usual drawing methods (curves are going to be tricky) and resolve the bugs that surely exist. For now, though, download the DashedLine class as is; hopefully it'll make sense through the basic comments I've included.
Recently I was asked if I could whip up a small flier announcing the UW-Madison Department of Geography’s traditional party thrown on one night during the Association of American Geographers Annual Meeting (held last month in Boston). I came up with the image at right: a map made entirely of type. It was a hit with the crowd and was easy to make. I simply used Illustrator to trace lines over streets in a Google Maps screenshot, type on those paths, and add the extra type around the edges and in the background.
There are many fun examples of art with typography out there, but type maps in particular are something that you don’t see often enough. (I suppose, though, if it were more common it would lose some of its appeal.) I’m sure there are more than I realize, but here are some examples I’ve managed to find:
London’s Kerning is a poster that made its rounds on the blogosphere not long ago.
Ork Posters have neighborhood maps of some cities in which the shapes of the neighborhoods are made up of type.
Similar to the Ork Posters, but with a bit more flair, is this map of Manhattan neighborhoods. (I haven’t tracked down the source of this one.)
I found a typographic map in the portfolio of Elena Zubowicz, but unfortunately it’s difficult to see detail.
Finally, what appears to be a map of visited countries not unlike the city neighborhood maps, in which words fill the country shapes. This is an interesting map outside of typography, as it roughly preserves the shape of Eurasia despite leaving out many countries.
Something on my to-do list of impossible dreams is to see if a basic typographic map could be produced programmatically by reading a shapefile or something. Keep an eye out; maybe something will come of the idea!
“Thoughts and adventures in maps, code, and anything in between,” reads the sub-heading up at the top of this page. That means I’ll be posting about almost anything that’s somehow related to interactive cartography. I’m a geographer. I turned into a cartographer. Somehow I became Flash guy. Maps, code, and anything in between.
I’m still working out the styles and things on this blog, but stay tuned and I’ll get everything set up. And maybe—just maybe—I’ll have something worth saying!
