#+title: Resource placement on a map
#+date: <2017-09-09>

#+begin_export html
<style>
  canvas { cursor: crosshair; width: 100%; }
  input[type="range"] { cursor: ew-resize; }
</style>
#+end_export

In my map generator tutorials I generally /don't/ include resources like wood, stone, iron, and so on. These are specific to each game so I leave them out. This page has some experiments. It's a quick & dirty experiment so it's not polished; I wanted to see if I could get some interesting shapes.

Let's start with basic simplex/perlin noise. The wavelength tells us how often values change, and [[https://libnoise.sourceforge.net/glossary/#persistence][persistence]] tells us how much detail gets added:

#+begin_export html
<figure><canvas id="diagram-noise" width="600" height="600"/></figure>
#+end_export


Let's highlight some values of the noise function, where bandvalue - bandwidth/2 ≤ noisevalue ≤ bandvalue + bandwidth/2. Think “contour lines” but these are bands instead of lines: 

#+begin_export html
<figure><canvas id="diagram-band" width="600" height="600"/></figure>
#+end_export


Here's an example of iron ore patches, built by taking a blobby band and intersecting it with the elevation. The persistence parameter controls whether there's one large patch or if it's many small patches in the same area. Move the mouse around the image to get different shapes:

#+begin_export html
<figure><canvas id="diagram-iron" width="600" height="600"/></figure>
#+end_export


Here's an example of gold veins, built by taking the union of two veiny bands and intersecting it with a blobby band and also intersecting it with the elevation. Move the mouse around the image to get different shapes:

#+begin_export html
<figure><canvas id="diagram-gold" width="600" height="600"/></figure>
#+end_export


There's a lot more to explore here but this quick experiment seemed promising for getting the "veiny" shapes I was looking for.

Quick & dirty code: [[href:./resource-placement.js][resource-placement.js]]

#+begin_export html
<x:footer>
  <script src="/js/prng.js"/>
  <script src="/js/simplex-noise.js"/>
  <script src="/js/draggable.v1.js"/>
  <script src="resource-placement.js"/>

  Created 9 Sep 2017 with Emacs org-mode (<a href="index.org">source of this page</a>); &#160;
  <!-- hhmts start -->Last modified: 20 Feb 2023<!-- hhmts end -->
</x:footer>
#+end_export