name:
index.html
-rw-r--r--
8313
1<html lang="en">
2 <head>
3 <title>Terrain Maps</title>
4 <link rel="stylesheet" type="text/css" href="style.css">
5 <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
6 <script type="text/javascript" src="landmap.js"></script>
7 <script type="text/javascript" src="main.js"></script>
8 </head>
9 <body>
10 <div class="container">
11 <div class="row">
12 <!-- header -->
13 <div class="row">
14 <h1>Procedural Terrain Generation</h1>
15 <h4>Generating and manipulating Diamond-Square maps.</h4>
16 <p>A while ago I started reading about procedural map generation, and I started working with the Diamond Square Algoirthm. Shortly after getting a demo working I found that while the terrain being generated by the DS algorithm was interesting, it was more fun to play with different ways of manipulating the DS map. This page is a collection of terrain manipulation algorithms that I've implimented in Javascript. Each demonstration shows the initial Diamond Square map, as well as the algorithms applied to it.</p>
17 <p>I've also experimented with ways to combine and overlap maps so that the resulting map has different types of toplogies in different areas of the map.</p>
18 <p>To avoid freezing up with page with a lot of Javascript, each time you click "Generate" a web-worker is spun off to handle the processing required to generate, manipulate, and render a map. While this allows you to scroll and interact with the page, it should be noted that some of the demos take close to a minute to generate, and that's on a computer with a solid processor. Your milage may vary.</p>
19 <p>
20 <strong>Notes about demos</strong>
21 <ul>
22 <li>Maps are 256x256.</li>
23 <li>All maps are rendered first in <code>canvas</code> elements, and then converted to images, to allow for responsive placement. (Also, it allows me to screenshot them more easily by just dragging the image out of the browser.)</li>
24 <li></li>
25 </ul>
26 </p>
27 </div>
28 <!-- section -->
29 <div>
30 <hr>
31 <div class="row">
32 <h2>Standard Diamond-Square Algorithm</h2>
33 <p>
34 Diamon-Square with several different deviation parameters.
35 <button class="run button-primary" id="standard">GENERATE</button>
36 </p>
37 </div>
38 <div class="set" id="container-standard"></div>
39 </div>
40 <!-- section -->
41 <div>
42 <hr>
43 <div class="row">
44 <h2>Diamond-Square Algorithm with Smoothing Pass</h2>
45 <p>
46 Diamon-Square smoothed with average of neighbors in 10 point radius, and 20 point radius.
47 <button class="run button-primary" id="smoothed">GENERATE</button>
48 </p>
49 </div>
50 <div class="set" id="container-smoothed"></div>
51 <hr>
52 </div>
53 <!-- section -->
54 <div>
55 <div class="row">
56 <h2>Combining Diamond-Square Maps</h2>
57 <p>
58 Combining a DS, DS smoothed (10), and DS smoothed (20) maps. This is done by generating <code>standard</code>, then <code>standard-two</code>, a completely different map. Then using each of these to generate a smoothed version of themselves. Then
59 we can combine standard with <code>standard-10</code>, using <code>standard-two-20</code> as the map controlling which parts of the map are used for the result. For example the higher the value of a given point on <code>standard-two-20</code>, the
60 stronger the value taken from <code>standard</code> and assigned to the resulting map. The lower the value of a given point on <code>standard-two-20</code>, the stronger the value taken from <code>standard-10</code> and assigned to the resulting
61 map.
62 </p>
63 <p>
64 This allows us to generate a map that has terrain that is smooth in some parts, and rugged in other parts.
65 <br>The final <code>reverse</code> map, is with the <code>standard</code> and <code>standard-10</code> maps swapped, so the smooth and rugged values are reversed.
66 <button class="run button-primary" id="combined">GENERATE</button>
67 </p>
68 </div>
69 <div class="set" id="container-combined"></div>
70 <hr>
71 </div>
72 <!-- section -->
73 <div>
74 <div class="row">
75 <h2>Greedy Raindrop Erosion Algorithm</h2>
76 <p>
77 For each point on the map, steal a certain percentage off the tallest neighbor. Results in blochy, plateau-like formations.
78 <button class="run button-primary" id="grd">GENERATE</button>
79 </p>
80 </div>
81 <div class="set" id="container-grd"></div>
82 <hr>
83 </div>
84 <!-- section -->
85 <div>
86 <div class="row">
87 <h2>Simple Erosion Algorithm</h2>
88 <p>
89 Randomly place a "droplet" of water on the map. For a number of iterations, let the droplet roll to it's nearest neighbor, eroding it's current point on the map if the droplet has not reached it carrying-capacity of sediment. If it has reached
90 it's carrying capacity, deposit sediment on that point. Repeat this process with many more droplets.
91 <button class="run button-primary" id="simpleErosion">GENERATE</button>
92 </p>
93 </div>
94 <div class="set" id="container-simpleErosion"></div>
95 <hr>
96 </div>
97 <!-- section -->
98 <div>
99 <div class="row">
100 <h2>Complex Erosion Algorithm</h2>
101 <p>
102 Like <em>Simple Erosion Algorithm</em> but it uses velocity (with a minimum velocity ensure), slope (with a minimum slope ensured as well) to calculate carring capacity and depositing.
103 <button class="run button-primary" id="complexErosion">GENERATE</button>
104 </p>
105 </div>
106 <div class="set" id="container-complexErosion"></div>
107 <hr>
108 </div>
109 <!-- section -->
110 <div>
111 <div class="row">
112 <h2>Varous Maps</h2>
113 <br>
114 <h4>Smoothing, Greedy Raindrop, and Complex Erosion</h4>
115 <p>
116 Smoothing, Greedy Raindrop, and Complex Erosion algorithms applied to the same DS map.
117 <button class="run button-primary" id="sample">GENERATE</button>
118 </p>
119 </div>
120 <div class="set" id="container-sample"></div>
121 <br>
122 <div class="row">
123 <h4>Combining Smooth, and Complex Erosion Maps</h4>
124 <p>
125 Combining smoothed map <code>p2</code> with an eroded map <code>p3</code>, by a third, unrelated smooth map <code>m2</code> to result in <code>c1 from (p3,p2,m2)</code>.
126 Also generating <code>c2 from (p2,p3,m2)</code> by swapping first two maps.
127 <button class="run button-primary" id="many">GENERATE</button>
128 </p>
129 </div>
130 <div class="set" id="container-many"></div>
131 <br>
132 <div class="row">
133 <h4>Smoothing a Complex Erosion Map</h4>
134 <p>
135 Eroding a map with Complex Erosion Algorithm before applying smoothing. <code>regular -> complexErosion -> smooth</code>
136 <button class="run button-primary" id="smooth-complex-erosion">GENERATE</button>
137 </p>
138 </div>
139 <div class="set" id="container-smooth-complex-erosion"></div>
140 <br>
141 <div class="row">
142 <h4>Smoothing a Simple Erosion Map</h4>
143 <p>
144 Eroding a map with Simple Erosion Algorithm before applying smoothing. <code>regular -> simpleErosion -> smooth</code>
145 <button class="run button-primary" id="smooth-simple-erosion">GENERATE</button>
146 </p>
147 </div>
148 <div class="set" id="container-smooth-simple-erosion"></div>
149 <hr>
150 </div>
151 </div>
152 </div>
153 <!-- hidden canvas for rendering-->
154 <canvas class="hidden" id="tmp" width="256" height="256"></canvas>
155 </body>
156</html>