{"id":2770,"date":"2016-05-09T09:14:08","date_gmt":"2016-05-09T13:14:08","guid":{"rendered":"http:\/\/andywoodruff.com\/blog\/?p=2770"},"modified":"2016-05-09T14:32:11","modified_gmt":"2016-05-09T18:32:11","slug":"hachures-and-sketchy-relief-maps","status":"publish","type":"post","link":"https:\/\/andywoodruff.com\/blog\/hachures-and-sketchy-relief-maps\/","title":{"rendered":"Hachures and sketchy relief maps"},"content":{"rendered":"

\"Sketchy<\/p>\n

I’ve never been a terrain representation expert, but occasionally I get briefly super interested in some DIY technique for relief mapping, not using typical GIS tools or rendering software. Tom Patterson’s old (but still applicable) Photoshop tutorials<\/a> were my introduction to the magic simplicity of turning a grayscale image into fancy shaded relief.<\/p>\n

Some years ago I wrote code for simple shaded relief, using Flash at the time<\/a>. I picked that up again just a few months ago and did the same using JavaScript and canvas elements<\/a>. These were impractical experiments, but they were a super interesting way to learn some basics about how automated relief shading works, and they were a more fun playground than turning knobs or filling in boxes in some software would have been.<\/p>\n

\"hachures\"<\/p>\n

Then the other day, for no particular reason, hachures<\/a> came to mind. Hachures are an old-fashioned technique in which parallel lines are drawn along slopes. You don’t see them much these days, but they’re one of my favorite techniques; their chapter is still the only one I’ve managed to read in Imhof’s book<\/a>. From time to time I’ve wished there were an easy way to generate nice hachure maps in GIS or what have you\u2014as far as I know there’s still not much out there.<\/p>\n

I tried rendering some hachure-like maps based on the same code<\/a> I’d used before, that is, in a browser with just some JavaScript. The ultimate result was not so much hachure maps but the kind of sketchy map style you see in these images, almost like something drawn with colored pencils.<\/p>\n

\"Sketchy<\/a><\/p>\n

It began with something that I quickly recalled is essentially what Michal Migurski had worked on<\/a> (later inspiring Eric Fischer<\/a>) some years back: divide elevation data into a grid and use short strokes to show slope (as line width) and aspect (as rotation).<\/p>\n

\"Gridded<\/p>\n

That was kind of cool, but certainly a lot more rigid-looking than classic hachure maps. The next step was to introduce some small random offsets in the grid so things didn’t line up so perfectly, looking slightly more natural.<\/p>\n

\"Random<\/p>\n

Wanting to move even further from a gridded appearance, next I tried drawing longer strokes at each point, longer than the dimensions of the cell so that lines would start to blend together. I also remembered that I wanted shadow<\/em> hachures, where stroke weight or shade corresponds to brightness in an illuminated scene, not just slope. (My earlier shaded relief code could calculate this.)<\/p>\n

\"Longer<\/p>\n

At this point it was starting to look more like a pencil sketch than a true hachure map, so I ran with that and added color. There’s kind of a combination of slope and shadow hachuring here, with stroke width representing slope and color representing shadowing.<\/p>\n

\"Shadow<\/p>\n

Lastly, there were two subtle steps: add a little more randomness in the form of slight curves, and draw the map at lower opacity several times on top of itself, each time with the sun angle varying a bit. This produced a somewhat smoother scene with a bit more shadow detail, and allowed the various random effects to accumulate into a very grassy look.<\/p>\n

\"Sketchy<\/a><\/p>\n

The source code for this is on GitHub here<\/a>. All in all, it’s not practical code, at least not in this implementation (it would be interesting to try it in a more efficient way, or on something like Mapzen’s elevation tiles<\/a>), but it’s a fun style to play around with! With more attention to things like color I can imagine some pretty good-looking maps. In any event, here are a few more that I rendered.<\/p>\n

Crater Lake:
\n\"Crater<\/a><\/p>\n

White Mountains, around Mount Washington:
\n\"Mount<\/a><\/p>\n

Oahu:
\n\"Oahu<\/a><\/p>\n

Yosemite Valley:
\n\"Yosemite<\/a><\/p>\n

Hocking Hills, Ohio:
\n\"Hocking<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

I’ve never been a terrain representation expert, but occasionally I get briefly super interested in some DIY technique for relief mapping, not using typical GIS tools or rendering software. Tom Patterson’s old (but still applicable) Photoshop tutorials were my introduction to the magic simplicity of turning a grayscale image into fancy shaded relief. Some years […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-2770","post","type-post","status-publish","format-standard","hentry","category-my-maps"],"_links":{"self":[{"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/posts\/2770","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/comments?post=2770"}],"version-history":[{"count":38,"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/posts\/2770\/revisions"}],"predecessor-version":[{"id":2826,"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/posts\/2770\/revisions\/2826"}],"wp:attachment":[{"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/media?parent=2770"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/categories?post=2770"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/tags?post=2770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}