class: white, center, middle <video src="images/sketchy.mov" loop="true" autoplay="true"></video> .link.right[Elevation + math + pixels = terrain art for the web [awoodruff.github.io/nacis2017](http://awoodruff.github.io/nacis2017)] --- background-image: url(images/code.png) --- background-image: url(images/harvardturkey.jpg) Hi, my name is Andy Woodruff ([@awoodruff](http://twitter.com/awoodruff)). I live in Cambridge, Mass. and work with [Axis Maps](http://axismaps.com). .link.shadow[[awoodruff.github.io/nacis2017](http://awoodruff.github.io/nacis2017)] --- class: center, middle, shadow background-image: url(images/tp1.jpg) ## "[A]nything you can imagine, you can do. I think we are living in the best time to be a cartographer." **Tom Patterson, probably not talking about silly JavaScript coding, but still. _ICC 2017, Washington, D.C._** --- class: middle, center, enormous # 1 --- class: bottom, shadow-hard, smaller background-image: url(images/tp_cp.jpg) Shaded relief in Photoshop. This tutorial still works, 20 years later. Try it! [http://www.shadedrelief.com/cp28/relief_tp.html](http://www.shadedrelief.com/cp28/relief_tp.html) --- background-image: url(images/MOLOKAI-DEM.jpg) --- background-image: url(images/molokai-map2.jpg) --- class: middle, center, enormous # 2 --- class: middle, center       .link[Slocum et al., Thematic Cartography and Geographic Visualization (Second edition)] --- ## Remember when Flash was cool? ``` public class ShadedRelief extends Sprite { // Do a buncha math and junk with AS3. } ```  .link[[andywoodruff.com/blog/shaded-relief-in-as3/](http://andywoodruff.com/blog/shaded-relief-in-as3/)] --- ## Remember when JavaScript was cool? ``` function drawRelief () { // Do a buncha math and junk with JS and Canvas. } ```  .link[[github.com/awoodruff/canvas-shaded-relief](https://github.com/awoodruff/canvas-shaded-relief)] --- class: middle, center, enormous # 3 --- class: bottom, shadow background-image: url(images/molokai_sketchy.jpg) .link.dark[[andywoodruff.com/blog/hachures-and-sketchy-relief-maps/](http://andywoodruff.com/blog/hachures-and-sketchy-relief-maps/)] --- background-image: url(images/bigisland.jpg) --- background-image: url(images/mtwashington_sketchy.jpg) --- class: middle, center, enormous # 4 --- class: bottom, black, contain background-image: url(images/molokai_flow.gif) .link[[andywoodruff.com/blog/the-rain-on-terrain/](http://andywoodruff.com/blog/the-rain-on-terrain/)] --- background-image: url(images/mapzen.jpg) .link.dark.shadow[[Mapzen elevation tiles](https://mapzen.com/documentation/terrain-tiles/)] --- class: middle, center, enormous # 5 --- class: middle, center, enormous # ? --- class: center, middle, shadow-hard background-image: url(images/handcoded.jpg) # Artisanal, hand-coded maps --- class: middle Go push pixels! [awoodruff.github.io/nacis2017](http://awoodruff.github.io/nacis2017) andy@axismaps.com [@awoodruff](http://twitter.com/awoodruff)