{"id":2846,"date":"2016-10-14T09:18:15","date_gmt":"2016-10-14T13:18:15","guid":{"rendered":"http:\/\/andywoodruff.com\/blog\/?p=2846"},"modified":"2018-12-28T10:40:18","modified_gmt":"2018-12-28T15:40:18","slug":"the-rain-on-terrain","status":"publish","type":"post","link":"https:\/\/andywoodruff.com\/blog\/the-rain-on-terrain\/","title":{"rendered":"The rain on terrain"},"content":{"rendered":"<p>If you poured water over the terrain somewhere in the world, where would it go? That&#8217;s perhaps one way to think of the thing that distracted me in the evenings this week.<\/p>\n<p><em>[Edit: an interactive map should appear here, but there are some unresolved issues. Check out the <a href=\"https:\/\/awoodruff.github.io\/relief-flow\/\">GitHub-hosted version<\/a> for something at least partly functional!]<\/em><\/p>\n<p>What we have here is more or less an animated flowy map of drainage, although it&#8217;s not a serious attempt at an accurate map. It&#8217;s just something that turned out to be kind of pretty.<\/p>\n<p>Apologies for its clunkiness; I&#8217;m not <em>that<\/em> good at code. This is another episode in my habit of messing around with terrain mapping in the browser on canvas elements. See for example <a href=\"https:\/\/github.com\/awoodruff\/canvas-shaded-relief\" target=\"_blank\">shaded relief<\/a> and <a href=\"http:\/\/andywoodruff.com\/blog\/hachures-and-sketchy-relief-maps\/\" target=\"_blank\">grassy sketchy thingies<\/a>. (Side note: calculation of aspect turns out to be poor in those; <a href=\"http:\/\/desktop.arcgis.com\/en\/arcmap\/10.3\/tools\/spatial-analyst-toolbox\/how-aspect-works.htm\" target=\"_blank\">this way<\/a> works better and I&#8217;ll fix them at some point.) None of this ever turns out zippy, but it&#8217;s always a good learning experience and is occasionally art-worthy.<\/p>\n<p><video src='\/flow\/oahu.mov'\/ autoplay loop style='max-width:100%'><\/p>\n<p>Maybe you can guess what&#8217;s going on here. I throw a bunch of random points at a terrain map, and they begin flowing toward lower elevation. That&#8217;s all, really: each path continuously asks &#8220;what adjacent location is lowest?&#8221; and moves in that direction. It&#8217;s more complicated behind the curtain, of course, but it&#8217;s not awful. I&#8217;ve tried to leave helpful comments in <a href=\"https:\/\/github.com\/awoodruff\/relief-flow\" target=\"_blank\">the code<\/a>.<\/p>\n<p>I&#8217;ve been inspired for a while to attempt this kind of animation by Cameron Beccario&#8217;s <a href=\"https:\/\/earth.nullschool.net\/#current\/wind\/surface\/level\/orthographic=-72.87,37.91,1494\" target=\"_blank\">amazing global map of wind, etc.<\/a> (perhaps spurred into mind by everybody posting links to the map during Hurricane Matthew) and the original <a href=\"http:\/\/hint.fm\/wind\/\" target=\"_blank\">wind map<\/a> by Martin Wattenberg and Fernanda Vi\u00e9gas, and other similar maps that they have in turn inspired. I&#8217;m not as smart as those people and don&#8217;t entirely know how they&#8217;ve done it, but I was pleased to learn how to do a kind of fading trail animation one way or another.<\/p>\n<p><video src='\/flow\/whites8.mov'\/ autoplay loop style='max-width:100%'><\/p>\n<p>The key to all this is <a href=\"https:\/\/mapzen.com\/blog\/terrain-tile-service\/\">Mapzen&#8217;s terrain tiles<\/a>. The hillshade you see in the map is straight magic from them, and replaces the things I was trying to do on my own with DEM images and canvas. Invisible but crucial are their Terrarium elevation tiles, which are these wild-looking purple and green things\u2014but which encode actual elevation in their colors. Pretty clever.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/andywoodruff.com\/blog\/wp-content\/uploads\/2016\/10\/terrarium.jpg\" alt=\"Mapzen Terrarium\" width=\"702\" height=\"152\" class=\"alignnone size-full wp-image-2850\" srcset=\"https:\/\/andywoodruff.com\/blog\/wp-content\/uploads\/2016\/10\/terrarium.jpg 702w, https:\/\/andywoodruff.com\/blog\/wp-content\/uploads\/2016\/10\/terrarium-300x65.jpg 300w\" sizes=\"auto, (max-width: 702px) 100vw, 702px\" \/><\/p>\n<p>Just load those in, do some pixel calculations to find which way is downhill, throw down some paths, and animate those according to the calculated directions. And there, you&#8217;ve got yourself a map that&#8217;s pretty fun to watch.<\/p>\n<p>Anyway, play with the map, and have a look at the <a href=\"https:\/\/github.com\/awoodruff\/relief-flow\" target=\"_blank\">GitHub repository<\/a> if you want to see the code or tell me about anything dumb I have done.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you poured water over the terrain somewhere in the world, where would it go? That&#8217;s perhaps one way to think of the thing that distracted me in the evenings this week. [Edit: an interactive map should appear here, but there are some unresolved issues. Check out the GitHub-hosted version for something at least partly [&hellip;]<\/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-2846","post","type-post","status-publish","format-standard","hentry","category-my-maps"],"_links":{"self":[{"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/posts\/2846","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=2846"}],"version-history":[{"count":5,"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/posts\/2846\/revisions"}],"predecessor-version":[{"id":3002,"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/posts\/2846\/revisions\/3002"}],"wp:attachment":[{"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/media?parent=2846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/categories?post=2846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/tags?post=2846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}