#+title: Adding details to a sketched terrain
#+date: <2017-07-24 Mon>

#+begin_export html
<x:head>
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:site" content="@redblobgames" />
  <meta property="og:url" content="https://www.redblobgames.com/x/1729-generate-details/" />
  <meta property="og:title" content="Red Blob Games: adding details to sketched terrain" />
  <meta property="og:description" content="Experiment with adding details to a sketched island terrain" />
  <meta property="og:image" content="https://www.redblobgames.com/x/1729-generate-details/blog/example.png"/>
</x:head>

<style>
canvas#layer-drawing { cursor: crosshair; }
div.layers { clear: both; display: grid; grid-template-columns: 1fr; }
div.layers > canvas { grid-column: 1; grid-row: 1; width: 100%; }
figure canvas { width: 100%; }
#distance-field-panels div { display: inline-block; width: 200px; text-align: center; }
button { width: 200px; margin: 0 4px; }
p button { width: auto; margin: 0; }
button.a { background-color: hsl(30,20%,80%); }
button.b { background-color: hsl(330,50%,70%); }
button.e { width: 100px; background-color: hsl(120,20%,80%); }
button.c { background-color: hsl(240,20%,80%); }
#buttoncontainer.altitude  button.a,
#buttoncontainer.erase     button.e,
#buttoncontainer.boundary  button.b,
#buttoncontainer.coastline button.c 
{ outline: 2px solid black; font-weight: bold; }
</style>

<p style="font-size:small">
   <em>Note:</em> the /x/ series of posts on my site are mostly unpolished mini posts. I'm trying out a few different ideas for procedural map generation; this is one of them.
</p>
#+end_export

The past few mini projects were:

- [[../1723-procedural-river-growing/][Generating rivers from coastlines]]
- [[../1724-elevation-from-rivers/][Generating elevation from rivers, part 1]]
- [[../1725-procedural-elevation/][Generating elevation from rivers, part 2]]
- [[../1728-elevation-control/][Sketching coastlines and mountain ranges]]

This week I'm going to glue these together (in a hacky way for now): sketch coastlines and mountain ranges, and see what rivers and elevation are generated.

The page may be a little flaky. I'm including the javascript from two separate projects and hacking them to work together. I'll fix it up later but for now I just wanted to see if it worked at all.

* Sketch
:PROPERTIES:
:CUSTOM_ID: sketch
:END:

Sketch @@html:<span style="color:hsl(30,50%,30%)">⯀</span>@@mountain ridges or @@html:<span style="color:hsl(240,100%,30%)">⯀</span>@@coastlines: @@html: <button style="margin-left:100px;width:75px" onclick="sketcher.reset_sketch()">blank map</button>@@

#+begin_export html
<div class="layers">
  <canvas id="layer-output" width="600" height="600"/>
  <canvas id="layer-preview" width="600" height="600"/>
  <canvas id="rivers" width="600" height="600" />
  <canvas id="layer-drawing" width="600" height="600"/>
</div>
<div id="buttoncontainer" style="text-align:center">
  <button class="a" onclick="set_mode('altitude')">Mountain (+1)</button>
  <button class="e" onclick="set_mode('erase')">Erase</button>
  <button class="c" onclick="set_mode('coastline')">Coastlines (0)</button>
</div>
<div style="text-align:center">
  Noise: <input type="range" min="0.0" max="1.0" value="0.0" step="0.1" oninput="set_noise(this.valueAsNumber)" style="width:400px"/>
</div>
#+end_export

The rivers will /mostly/ follow the guidelines, but I have some randomness in there to allow rivers to cut through mountain ridges occasionally. That parameter will need to be tweaked eventually.

#+begin_export html
<figure>
<a href="blog/crater-lake.png"><img src="blog/crater-lake-thumb.png" width="100" height="100" alt="Crater lake image" style="float:right;width:100px;margin-left:10px"/></a>
</figure>
#+end_export

Bonus feature: To make an interior lake, draw the lake as a coastline. By default the interior will be land. Draw inside the coastline with @@html: <button onclick="set_mode('boundary')">boundary (-1)</button>@@ to make it a lake instead. Some of the algorithms work on non-island maps too. If you @@html: <button onclick="erase_boundary()">erase the exterior boundary</button>@@ of the map you can make a crater lake. 

* Export to elevation image
:PROPERTIES:
:CUSTOM_ID: export-to-elevation-image
:END:

The idea behind sketching was that you're drawing /lines/ which are then mapped onto a /mesh/. If I keep the original lines, I can map them onto a higher resolution mesh. For this project, it was quicker to draw the elevations to a bitmap and then build a new mesh from the bitmap. Here's the bitmap:

#+begin_export html
<figure><canvas id="t-bias" width="600" height="600"/></figure>
<div style="text-align:center">
  Sharp: <input type="range" min="0.25" max="5.0" value="2.5" step="0.25" oninput="set_sharp(this.valueAsNumber)" style="width:400px"/>
</div>
#+end_export

The parameter controls the elevation exponent, which I often use to sharpen mountain peaks. The bitmap is used for the next section.

* Generate detailed elevation
:PROPERTIES:
:CUSTOM_ID: generate-detailed-elevation
:END:

From [[../1725-procedural-elevation/][two blog posts ago]], I came up with some algorithms to carve canyons and ravines into the terrain. (This renderer may not work across platforms… still need to look into that)

#+begin_export html
<figure id="regl-container">
<button onclick="sketch_to_terrain()">Render</button>
<br />
   <canvas id="regl-canvas" onclick="params.seed = Math.floor(Math.random() * 100000); redraw()"/>
</figure>
#+end_export

Try changing the sharpness slider above and re-rendering.

It looks neat but I don't know if we're going to use it for our game.

(Update: the game was cancelled, but I was able to improve the rendering significantly, and some of this ended up in [[https://www.redblobgames.com/maps/mapgen4/][mapgen4]] a year later.)

* Next steps
:PROPERTIES:
:CUSTOM_ID: next-steps
:END:

This week was about a quick hack to combine the last few mini projects to see if everything would work together. It didn't at first but I found many bugs and fixed them, and now it seems to work reasonably.

Now that I know these steps work together, the next step is biomes.

Also take a look at [[http://entropicparticles.com/procedure-for-rivers-and-lakes/][this page]], which has a river algorithm that does a lot more than mine does: lakes, erosion, deposition, river deltas, water tables, snow, surface tension, capillary action. Cool! I didn't try those algorithms; our game doesn't need them.

#+begin_export html
<x:footer>
  <script>
    let module = {};
  </script>
  <script src="/js/simplex-noise.js"/>
  <script src="/js/prng.js"/>
  <script src="/js/draggable.v1.js"/>
  <script src="../1725-procedural-elevation/triangle-mesh.js"/>
  <!-- gluing together elevation-control -->
  <script src="../1728-elevation-control/delay-draw.js"/>
  <script src="../1728-elevation-control/elevation-control.js"/>
  <!-- and procedural-elevation -->
  <script src="/js/regl.js"></script>
  <script src="../1725-procedural-elevation/procedural-elevation.js"/>
  <script src="../1725-procedural-elevation/third-party/gl-matrix-min.js"/>
  <script src="../1725-procedural-elevation/draw-3d.js"/>
  <!-- glue code -->
  <script src="generate-details.js"/>

  Created 18 Jul 2017 with Emacs org-mode (<a href="index.org">source of this page</a>); code uses <a href="https://github.com/mapbox/delaunator">Delaunator</a>, <a href="https://glmatrix.net/">glmatrix</a>, and <a href="http://regl.party/">regl.js</a>&#160;
<!-- hhmts start -->Last modified: 18 Aug 2022<!-- hhmts end -->
</x:footer>
#+end_export