content/blog/2016/06/diamond-square.markdown @ e5c90825e160
Fix JS demos (thanks, Weend)
| author | Steve Losh <steve@stevelosh.com> |
|---|---|
| date | Mon, 18 Sep 2017 00:11:54 -0400 |
| parents | fdf01e99fd51 |
| children | ceb68ee2312a |
+++ title = "Terrain Generation with Diamond Square" snip = "Improving on Midpoint Displacement." date = 2016-06-27T13:35:00Z draft = false +++ <script defer src="/media/js/three.min.js"></script> <script defer src="/media/js/TrackballControls.js"></script> <script defer src="/media/js/terrain3.js"></script> In the last two posts we looked at implementing the Midpoint Displacement algorithm for procedurally generating terrain. Today we're going to look at a similar algorithm called Diamond Square that fixes some problems with Midpoint Displacement. The full series of posts so far: * [Midpoint Displacement](/blog/2016/02/midpoint-displacement/) * [Recursive Midpoint Displacement](/blog/2016/03/recursive-midpoint-displacement/) * [Diamond Square](/blog/2016/06/diamond-square/) Midpoint Displacement is simple and fast, but it has some flaws. If you look at the end result you'll probably start to notice "seams" in the terrain that appear on perfectly square chunks. This happens because when you're calculating the midpoints of the edges of each square you're only averaging two sources of information. [Diamond Square][] is an algorithm that works a lot like Midpoint Displacement, but it adds an extra step to ensure that (almost) every point uses *four* sources of data. This reduces the visual artifacts a lot without much extra effort. Let's [draw the owl][owl]. [Diamond Square]: https://en.wikipedia.org/wiki/Diamond-square_algorithm [owl]: https://i.imgur.com/RadSf.jpg <div id="toc"></div> ## Overview The high-level description of Diamond Square goes something like this: 1. Initialize the corners to random values. 2. Set the center of the heightmap to the average of the corners (plus jitter). 3. Set the midpoints of the edges of the heightmap to the average of the four points on the "diamond" around them (plus jitter). 4. Repeat steps 2-4 on successively smaller chunks of the heightmap until you bottom out at 3x3 chunks. ## Initialization Initialization is pretty simple: ```clojure (defn ds-init-corners [heightmap] (let [last (heightmap-last-index heightmap)] (heightmap-set! heightmap 0 0 (rand)) (heightmap-set! heightmap 0 last (rand)) (heightmap-set! heightmap last 0 (rand)) (heightmap-set! heightmap last last (rand)))) ``` Just set the corners to random values, exactly like we did in Midpoint Displacement. <div id="demo-1" class="threejs"></div> ## Square In the "square" step of Diamond Square, we take a square region of the heightmap and set the center of it to the average of the four corners (plus jitter). <pre class="lineart"> Column 0 1 2 3 4 0 1 2 3 4 0 1 2 3 4 ┌─┬─┬─┬─┬─┐ ┌─┬─┬─┬─┬─┐ ┌─┬─┬─┬─┬─┐ 0 │1│ │ │ │8│ 0 │1│ │ │ │8│ 0 │1│ │ │ │8│ ├─┼─┼─┼─┼─┤ ├─╲─┼─┼─╱─┤ ├─╲─┼─┼─╱─┤ 1 │ │ │ │ │ │ 1 │ │╲│ │╱│ │ 1 │ │╲│ │╱│ │ R ├─┼─┼─┼─┼─┤ ├─┼─◢─◣─┼─┤ ├─┼─◢─◣─┼─┤ o 2 │ │ │◉│ │ │ 2 │ │ │◉│ │ │ 2 │ │ │3│ │ │ w ├─┼─┼─┼─┼─┤ ├─┼─◥─◤─┼─┤ ├─┼─◥─◤─┼─┤ 3 │ │ │ │ │ │ 3 │ │╱│ │╲│ │ 3 │ │╱│ │╲│ │ ├─┼─┼─┼─┼─┤ ├─╱─┼─┼─╲─┤ ├─╱─┼─┼─╲─┤ 4 │0│ │ │ │3│ 4 │0│ │ │ │3│ 4 │0│ │ │ │3│ └─┴─┴─┴─┴─┘ └─┴─┴─┴─┴─┘ └─┴─┴─┴─┴─┘ </pre> The Wikipedia article calls this the "diamond" step, but that seems backwards to me. We're operating on a *square* region of the heightmap, so this should be the *square* step. Since we're no longer working with heightmap "slices" like we were in the previous post, we'll need a way to specify the square chunk of the heightmap we're working on. I chose to use a center point (`x` and `y` coordinates) and a radius: ```clojure (defn ds-square [heightmap x y radius spread] (let [new-height (jitter (average4 (heightmap-get heightmap (- x radius) (- y radius)) (heightmap-get heightmap (- x radius) (+ y radius)) (heightmap-get heightmap (+ x radius) (- y radius)) (heightmap-get heightmap (+ x radius) (+ y radius))) spread)] (heightmap-set! heightmap x y new-height))) ``` <div id="demo-2" class="threejs"></div> ## Diamond In the "diamond" step of Diamond Square, we take a diamond-shaped region and set the center of it to the average of the four corners: <pre class="lineart"> Column 0 1 2 3 4 5 6 7 8 0 1 2 3 4 5 6 7 8 ┌─┬─┬─┬─┬─┬─┬─┬─┬─┐ ┌─┬─┬─┬─┬─┬─┬─┬─┬─┐ 0 │1│ │ │ │3│ │ │ │3│ 0 │1│ │ │ │3│ │ │ │3│ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ ├─┼─┼─┼─╱─╲─┼─┼─┼─┤ 1 │ │ │ │ │ │ │ │ │ │ 1 │ │ │ │╱│ │╲│ │ │ │ R ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ ├─┼─┼─╱─┼─┼─╲─┼─┼─┤ o 2 │ │ │3│ │ │ │4│ │ │ 2 │ │ │3│ │◉│ │4│ │ │ w ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ ├─┼─┼─╲─┼─┼─╱─┼─┼─┤ 3 │ │ │ │ │ │ │ │ │ │ 3 │ │ │ │╲│ │╱│ │ │ │ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ ├─┼─┼─┼─╲─╱─┼─┼─┼─┤ 4 │5│ │ │ │5│ │ │ │5│ 4 │5│ │ │ │5│ │ │ │5│ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ 5 │ │ │ │ │ │ │ │ │ │ 5 │ │ │ │ │ │ │ │ │ │ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ 6 │ │ │7│ │ │ │6│ │ │ 6 │ │ │7│ │ │ │6│ │ │ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ 7 │ │ │ │ │ │ │ │ │ │ 7 │ │ │ │ │ │ │ │ │ │ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ 8 │9│ │ │ │7│ │ │ │7│ 8 │9│ │ │ │7│ │ │ │7│ └─┴─┴─┴─┴─┴─┴─┴─┴─┘ └─┴─┴─┴─┴─┴─┴─┴─┴─┘ Column 0 1 2 3 4 5 6 7 8 0 1 2 3 4 5 6 7 8 ┌─┬─┬─┬─┬─┬─┬─┬─┬─┐ ┌─┬─┬─┬─┬─┬─┬─┬─┬─┐ 0 │1│ │ │ │3│ │ │ │3│ 0 │1│ │ │ │3│ │ │ │3│ ├─┼─┼─┼─╱┬╲─┼─┼─┼─┤ ├─┼─┼─┼─╱┬╲─┼─┼─┼─┤ 1 │ │ │ │╱│││╲│ │ │ │ 1 │ │ │ │╱│││╲│ │ │ │ R ├─┼─┼─╱─┼▼┼─╲─┼─┼─┤ ├─┼─┼─╱─┼▼┼─╲─┼─┼─┤ o 2 │ │ │3├─▶◉◀─┤4│ │ │ 2 │ │ │3├─▶4◀─┤4│ │ │ w ├─┼─┼─╲─┼▲┼─╱─┼─┼─┤ ├─┼─┼─╲─┼▲┼─╱─┼─┼─┤ 3 │ │ │ │╲│││╱│ │ │ │ 3 │ │ │ │╲│││╱│ │ │ │ ├─┼─┼─┼─╲┴╱─┼─┼─┼─┤ ├─┼─┼─┼─╲┴╱─┼─┼─┼─┤ 4 │5│ │ │ │5│ │ │ │5│ 4 │5│ │ │ │5│ │ │ │5│ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ 5 │ │ │ │ │ │ │ │ │ │ 5 │ │ │ │ │ │ │ │ │ │ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ 6 │ │ │7│ │ │ │6│ │ │ 6 │ │ │7│ │ │ │6│ │ │ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ 7 │ │ │ │ │ │ │ │ │ │ 7 │ │ │ │ │ │ │ │ │ │ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ 8 │9│ │ │ │7│ │ │ │7│ 8 │9│ │ │ │7│ │ │ │7│ └─┴─┴─┴─┴─┴─┴─┴─┴─┘ └─┴─┴─┴─┴─┴─┴─┴─┴─┘ </pre> Once again we'll use a center point and radius to specify the region inside the heightmap: ```clojure (defn ds-diamond [heightmap x y radius spread] (let [new-height (jitter (safe-average (heightmap-get-safe heightmap (- x radius) y) (heightmap-get-safe heightmap (+ x radius) y) (heightmap-get-safe heightmap x (- y radius)) (heightmap-get-safe heightmap x (+ y radius))) spread)] (heightmap-set! heightmap x y new-height))) ``` <div id="demo-3" class="threejs"></div> ## Edge Cases You might have noticed that we used `heightmap-get-safe` and `safe-average` in the `ds-diamond` code. This is to handle the diamonds on the edge of the heightmap. Those diamonds only have three points to average: <pre class="lineart"> Column 0 1 2 3 4 0 1 2 3 4 ┌─┬─┬─┬─┬─┐ ┌─┬─┬─┬─┬─┐ 0 │1│ │ │ │8│ 0 │1│ │ │ │8│ ├─┼─┼─┼─┼─┤ ├─┼─┼─┼─╱┬╲ 1 │ │ │ │ │ │ 1 │ │ │ │╱│││╲ R ├─┼─┼─┼─┼─┤ ├─┼─┼─╱─┼▼┤ ╲ o 2 │ │ │3│ │ │ 2 │ │ │3├─▶◉◀──? w ├─┼─┼─┼─┼─┤ ├─┼─┼─╲─┼▲┤ ╱ 3 │ │ │ │ │ │ 3 │ │ │ │╲│││╱ ├─┼─┼─┼─┼─┤ ├─┼─┼─┼─╲┴╱ 4 │0│ │ │ │3│ 4 │0│ │ │ │3│ └─┴─┴─┴─┴─┘ └─┴─┴─┴─┴─┘ </pre> So we just ignore the missing point: ```clojure (defn safe-average [a b c d] (let [total 0 count 0] (when a (add! total a) (inc! count)) (when b (add! total b) (inc! count)) (when c (add! total c) (inc! count)) (when d (add! total d) (inc! count)) (/ total count))) (defn heightmap-get-safe [heightmap x y] (let [last (heightmap-last-index heightmap)] (when (and (<= 0 x last) (<= 0 y last)) (heightmap-get heightmap x y)))) ``` Technically this means they have less information to work with than the rest of the points, and you might see some slight artifacts. But in practice it's not too bad, and it's a lot nicer than midpoint displacement where *every* line step uses only *two* points. Another way to handle this is to also wrap those edge coordinates around and pull the point from the other side of the heightmap. This is a bit more work but gives you an extra benefit: the heightmap will be tileable (**update**: like everything where someone doesn't show you running code, it's [not actually that simple](/blog/2016/08/lisp-jam-postmortem/#tiling-diamond-square)). ## Iteration Unfortunately we can't use recursion to iterate for Diamond Square like we did for Midpoint Displacement. We have to interleave the diamond and square steps, performing each round of squares on the *entire* map before moving on to a round of diamonds. If we don't, bad things will happen. Let's look at an example to see why. First we perform the initial square step: <pre class="lineart"> Column 0 1 2 3 4 0 1 2 3 4 ┌─┬─┬─┬─┬─┐ ┌─┬─┬─┬─┬─┐ 0 │1│ │ │ │8│ 0 │1│ │ │ │8│ ├─┼─┼─┼─┼─┤ ├─╲─┼─┼─╱─┤ 1 │ │ │ │ │ │ 1 │ │╲│ │╱│ │ R ├─┼─┼─┼─┼─┤ ├─┼─◢─◣─┼─┤ o 2 │ │ │ │ │ │ 2 │ │ │3│ │ │ w ├─┼─┼─┼─┼─┤ ├─┼─◥─◤─┼─┤ 3 │ │ │ │ │ │ 3 │ │╱│ │╲│ │ ├─┼─┼─┼─┼─┤ ├─╱─┼─┼─╲─┤ 4 │0│ │ │ │3│ 4 │0│ │ │ │3│ └─┴─┴─┴─┴─┘ └─┴─┴─┴─┴─┘ </pre> That's fine. Then we recurse into the first of the four diamonds: <pre class="lineart"> Column 0 1 2 3 4 0 1 2 3 4 ┌─┬─┬─┬─┬─┐ ┌─┬─┬─┬─┬─┐ 0 │1│ │ │ │8│ 0 │1├─▶4◀─┤8│ ├─┼─┼─┼─┼─┤ ├─╲─┼▲┼─╱─┤ 1 │ │ │ │ │ │ 1 │ │╲│││╱│ │ R ├─┼─┼─┼─┼─┤ ├─┼─╲┴╱─┼─┤ o 2 │ │ │3│ │ │ 2 │ │ │3│ │ │ w ├─┼─┼─┼─┼─┤ ├─┼─┼─┼─┼─┤ 3 │ │ │ │ │ │ 3 │ │ │ │ │ │ ├─┼─┼─┼─┼─┤ ├─┼─┼─┼─┼─┤ 4 │0│ │ │ │3│ 4 │0│ │ │ │3│ └─┴─┴─┴─┴─┘ └─┴─┴─┴─┴─┘ </pre> Everything's still good. Then we recurse into the square: <pre class="lineart"> Column 0 1 2 3 4 0 1 2 3 4 ┌─┬─┬─┬─┬─┐ ╔═════╗─┬─┐ 0 │1│ │4│ │8│ 0 ║1│ │4║ │8│ ├─┼─┼─┼─┼─┤ ║─◢─◣─║─┼─┤ 1 │ │ │ │ │ │ 1 ║ │ │ ║ │ │ R ├─┼─┼─┼─┼─┤ ║─◥─◤─║─┼─┤ o 2 │ │ │3│ │ │ 2 ║?│ │3║ │ │ w ├─┼─┼─┼─┼─┤ ╚═════╝─┼─┤ 3 │ │ │ │ │ │ 3 │ │ │ │ │ │ ├─┼─┼─┼─┼─┤ ├─┼─┼─┼─┼─┤ 4 │0│ │ │ │3│ 4 │0│ │ │ │3│ └─┴─┴─┴─┴─┘ └─┴─┴─┴─┴─┘ </pre> But wait, there's a corner missing! We needed to complete that left-hand diamond step to get it, but that's still waiting on the stack for this line of recursion to bottom out. ### A "Strided" Iteration Construct So we need to use normal iteration. We can start by writing the code to do a single round of diamonds or squares on the heightmap. First we'll make a nice looping construct called `do-stride`: ```clojure (defmacro do-stride [varnames start-form end-form stride-form & body] (let [stride (gensym "stride") start (gensym "start") end (gensym "end") build (fn build [vars] (if (empty? vars) `(do ~@body) (let [varname (first vars)] `(loop [~varname ~start] (when (< ~varname ~end) ~(build (rest vars)) (recur (+ ~varname ~stride)))))))] ; Fix the numbers once outside the nested loops, ; and then build the guts. `(let [~start ~start-form ~end ~end-form ~stride ~stride-form] ~(build varnames)))) ``` This scary-looking macro builds the nested looping structure we'll need to perform the iteration for our diamonds and squares. It abstracts away the tedium of writing out nested `for` loops so we can focus on the rest of the algorithm. `do-stride` takes a list of variables to bind, a number to start at, a number to end before, and a body. For each variable it starts at `start`, runs `body`, increments by `stride`, and loops until the value is at or above `end`. For example: * `(do-stride [x] 0 5 1 (console.log x))` will log `0 1 2 3 4`. * `(do-stride [x] 0 5 2 (console.log x))` will log `0 2 4`. * `(do-stride [x y] 0 3 2 (console.log [x y]))` will log `[0, 0] [0, 2] [2, 0] [2, 2]`. ### Square Iteration Now that we've got this, we can iterate our square step over the heightmap for a specific radius: ```clojure (defn ds-squares [heightmap radius spread] (do-stride [x y] radius (heightmap-resolution heightmap) (* 2 radius) (ds-square heightmap x y radius spread))) ``` We use `do-stride` to start at the radius and loop until we fall off the heightmap, stepping by *twice* the radius each time. Because our heightmaps are always square we can use the same values for both dimensions. `do-stride` can take zero or more variables and will just do the right thing, so we don't need to worry about it. The stride is double the radius because as we step between squares we move over the right half of the first *and* the left half of the next: <pre class="lineart"> Column 0 1 2 3 4 5 6 7 8 0 1 2 3 4 5 6 7 8 ╔═════════╗─┬─┬─┬─┐ ╔═════════╗─┬─┬─┬─┐ 0 ║1│ │ │ │3║ │ │ │3│ 0 ║1│ │ │ │3║ │ │ │3│ ║─┼─┼─┼─┼─║─┼─┼─┼─┤ ║─┼─┼─┼─┼─║─┼─┼─┼─┤ 1 ║ │ │ │ │ ║ │ │ │ │ 1 ║ │ │ │ │ ║ │ │ │ │ R ║─┼─┼─┼─┼─║─┼─┼─┼─┤ radius ┼─┼─║─┼─┼─┼─┤ o 2 ║ │ │◉│ │ ║ │◉│ │ │ 2 ║◀━━▶◉◀━━━━━▶◉│ │ │ w ║─┼─┼─┼─┼─║─┼─┼─┼─┤ ║─┼─┼─ stride ┼─┼─┤ 3 ║ │ │ │ │ ║ │ │ │ │ 3 ║ │ │ │ │ ║ │ │ │ │ ║─┼─┼─┼─┼─║─┼─┼─┼─┤ ║─┼─┼─┼─┼─║─┼─┼─┼─┤ 4 ║5│ │ │ │5║ │ │ │5│ 4 ║5│ │ │ │5║ │ │ │5│ ╚═════════╝─┼─┼─┼─┤ ╚═════════╝─┼─┼─┼─┤ 5 │ │ │ │ │ │ │ │ │ │ 5 │ │ │ │ │ │ │ │ │ │ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ 6 │ │ │◉│ │ │ │◉│ │ │ 6 │ │ │◉│ │ │ │◉│ │ │ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ 7 │ │ │ │ │ │ │ │ │ │ 7 │ │ │ │ │ │ │ │ │ │ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ 8 │9│ │ │ │7│ │ │ │7│ 8 │9│ │ │ │7│ │ │ │7│ └─┴─┴─┴─┴─┴─┴─┴─┴─┘ └─┴─┴─┴─┴─┴─┴─┴─┴─┘ </pre> ### Diamond Iteration The diamonds are a little more complicated. First of all, in the `y` dimension we need to start at `0` instead of `radius` (these will be the top and bottom edge cases we looked at). Also, in the `x` direction all the even iterations need to start at `radius`, while the odd iterations should start at `0`. Hopefully a picture will make it a bit more clear: <pre class="lineart"> Column 0 1 2 3 4 5 6 7 8 ┌─┬─┬─┬─┬─┬─┬─┬─┬─┐ 0 │1│ │◉│ │3│ │◉│ │3│ y iteration: 0, start at x = radius ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ 1 │ │ │ │ │ │ │ │ │ │ R ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ o 2 │◉│ │3│ │◉│ │4│ │◉│ y iteration: 1, start at x = 0 w ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ 3 │ │ │ │ │ │ │ │ │ │ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ 4 │5│ │◉│ │5│ │◉│ │5│ y iteration: 2, start at x = radius ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ 5 │ │ │ │ │ │ │ │ │ │ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ 6 │◉│ │7│ │◉│ │6│ │◉│ y iteration: 3, start at x = 0 ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ 7 │ │ │ │ │ │ │ │ │ │ ├─┼─┼─┼─┼─┼─┼─┼─┼─┤ 8 │9│ │◉│ │7│ │◉│ │7│ y iteration: 4, start at x = radius └─┴─┴─┴─┴─┴─┴─┴─┴─┘ </pre> The code for the diamonds is the hairiest bit of the algorithm. Make sure you understand it before moving on. `shift` will be `radius` for even iterations and `0` for odd ones: ```clojure (defn ds-diamonds [heightmap radius spread] (let [size (heightmap-resolution heightmap)] (do-stride [y] 0 size radius (let [shift (if (even? (/ y radius)) radius 0)] (do-stride [x] shift size (* 2 radius) (ds-diamond heightmap x y radius spread)))))) ``` ### Top-Level Iteration Finally we can put it all together. We initialize the corners and starting values, then loop over smaller and smaller radii and just call `ds-squares` and `ds-diamonds` to do the heavy lifting: ```clojure (defn diamond-square [heightmap] (let [initial-spread 0.3 spread-reduction 0.5 center (heightmap-center-index heightmap) size (aget heightmap.shape 0)] (ds-init-corners heightmap) (loop [radius center spread initial-spread] (when (>= radius 1) (ds-squares heightmap radius spread) (ds-diamonds heightmap radius spread) (recur (/ radius 2) (* spread spread-reduction)))) (sanitize heightmap))) ``` ## Result The end result looks like this: <div id="demo-final" class="threejs"></div> It looks a lot like the result from Midpoint Displacement, but without the ugly seams around the square chunks. The code for these blog posts is a bit of a mess because I've been copy/pasting to show the partially-completed demos after each step. I've created a little [single-page demo][ymir] with completed versions of the various algorithms you can play with, and [that code][ymir-code] should be a lot more readable than the hacky code for these posts. [ymir]: http://ymir.stevelosh.com/ [ymir-code]: http://bitbucket.org/sjl/ymir/