commit
message
Minor changes, adding .gitignore
author
Ben Vogt <[email protected]>
date
2016-11-26 23:02:42
stats
3 file(s) changed,
153 insertions(+),
123 deletions(-)
files
.gitignore
index.html
style.css
1diff --git a/.gitignore b/.gitignore
2new file mode 100644
3index 0000000..bb1b85f
4--- /dev/null
5+++ b/.gitignore
6@@ -0,0 +1,8 @@
7+/tmp
8+.DS_Store
9+
10+.idea
11+*.iml
12+tools/.go
13+tools/target
14+tools/pkg
15diff --git a/index.html b/index.html
16index fb9e74d..fa9b495 100644
17--- a/index.html
18+++ b/index.html
19@@ -7,142 +7,149 @@
20 <script type="text/javascript" src="main.js"></script>
21 </head>
22 <body>
23- <!-- header -->
24 <div class="container">
25 <div class="row">
26- <h1>Terrain Maps</h1>
27- <h4>Generating and manipulating terrain maps using Diamond-Square, smoothing, and erosion algorithms.</h4>
28- <p>I've been messing around with different terrain smoothing algorithms on Diamond-Square-generated maps. I'm putting them here to so I remember them and write them out a little more clearly. All maps use the Diamond-Square algorithm
29- to begin with. After than, some use smoothing passes, which essentially involves iterating over every point and setting it to be the average of all neighboring points within an X radius. Others involve erosion algorithms.</p>
30- <p>All maps are rendered with heighest points in white, lowest ones in black. Values are relative to minimum and maxmimum values, meaning that if a map was generated with a single point that is 100, and all others being around 5, it's going to
31- look pretty dark. All maps are 256 by 256. </p>
32- <p><strong>NOTE: Some of these map sets take upwards of 45 seconds to generate on a computer with a solid processor. Your milage may vary.</strong></p>
33+ <!-- header -->
34+ <div class="row">
35+ <h1>Procedural Terrain Generation</h1>
36+ <h4>Generating and manipulating Diamond-Square maps.</h4>
37+ <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>
38+ <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>
39+ <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>
40+ <p>
41+ <strong>Notes about demos</strong>
42+ <ul>
43+ <li>Maps are 256x256.</li>
44+ <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>
45+ <li></li>
46+ </ul>
47+ </p>
48+ </div>
49+ <!-- section -->
50+ <div>
51+ <hr>
52+ <div class="row">
53+ <h2>Standard Diamond-Square Algorithm</h2>
54+ <p>
55+ Diamon-Square with several different deviation parameters.
56+ <button class="run button-primary" id="standard">GENERATE</button>
57+ </p>
58+ </div>
59+ <div class="set" id="container-standard"></div>
60+ </div>
61+ <!-- section -->
62+ <div>
63+ <hr>
64+ <div class="row">
65+ <h2>Diamond-Square Algorithm with Smoothing Pass</h2>
66+ <p>
67+ Diamon-Square smoothed with average of neighbors in 10 point radius, and 20 point radius.
68+ <button class="run button-primary" id="smoothed">GENERATE</button>
69+ </p>
70+ </div>
71+ <div class="set" id="container-smoothed"></div>
72+ <hr>
73+ </div>
74+ <!-- section -->
75+ <div>
76+ <div class="row">
77+ <h2>Combining Diamond-Square Maps</h2>
78+ <p>
79+ 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
80+ 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
81+ 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
82+ map.
83+ </p>
84+ <p>
85+ This allows us to generate a map that has terrain that is smooth in some parts, and rugged in other parts.
86+ <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.
87+ <button class="run button-primary" id="combined">GENERATE</button>
88+ </p>
89+ </div>
90+ <div class="set" id="container-combined"></div>
91+ <hr>
92+ </div>
93+ <!-- section -->
94+ <div>
95+ <div class="row">
96+ <h2>Greedy Raindrop Erosion Algorithm</h2>
97+ <p>
98+ For each point on the map, steal a certain percentage off the tallest neighbor. Results in blochy, plateau-like formations.
99+ <button class="run button-primary" id="grd">GENERATE</button>
100+ </p>
101+ </div>
102+ <div class="set" id="container-grd"></div>
103+ <hr>
104+ </div>
105+ <!-- section -->
106+ <div>
107+ <div class="row">
108+ <h2>Simple Erosion Algorithm</h2>
109+ <p>
110+ 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
111+ it's carrying capacity, deposit sediment on that point. Repeat this process with many more droplets.
112+ <button class="run button-primary" id="simpleErosion">GENERATE</button>
113+ </p>
114+ </div>
115+ <div class="set" id="container-simpleErosion"></div>
116+ <hr>
117+ </div>
118+ <!-- section -->
119+ <div>
120+ <div class="row">
121+ <h2>Complex Erosion Algorithm</h2>
122+ <p>
123+ 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.
124+ <button class="run button-primary" id="complexErosion">GENERATE</button>
125+ </p>
126+ </div>
127+ <div class="set" id="container-complexErosion"></div>
128+ <hr>
129+ </div>
130+ <!-- section -->
131+ <div>
132+ <div class="row">
133+ <h2>Varous Maps</h2>
134+ <br>
135+ <h4>Smoothing, Greedy Raindrop, and Complex Erosion</h4>
136+ <p>
137+ Smoothing, Greedy Raindrop, and Complex Erosion algorithms applied to the same DS map.
138+ <button class="run button-primary" id="sample">GENERATE</button>
139+ </p>
140+ </div>
141+ <div class="set" id="container-sample"></div>
142+ <br>
143+ <div class="row">
144+ <h4>Combining Smooth, and Complex Erosion Maps</h4>
145+ <p>
146+ 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>.
147+ Also generating <code>c2 from (p2,p3,m2)</code> by swapping first two maps.
148+ <button class="run button-primary" id="many">GENERATE</button>
149+ </p>
150+ </div>
151+ <div class="set" id="container-many"></div>
152+ <br>
153+ <div class="row">
154+ <h4>Smoothing a Complex Erosion Map</h4>
155+ <p>
156+ Eroding a map with Complex Erosion Algorithm before applying smoothing. <code>regular -> complexErosion -> smooth</code>
157+ <button class="run button-primary" id="smooth-complex-erosion">GENERATE</button>
158+ </p>
159+ </div>
160+ <div class="set" id="container-smooth-complex-erosion"></div>
161+ <br>
162+ <div class="row">
163+ <h4>Smoothing a Simple Erosion Map</h4>
164+ <p>
165+ Eroding a map with Simple Erosion Algorithm before applying smoothing. <code>regular -> simpleErosion -> smooth</code>
166+ <button class="run button-primary" id="smooth-simple-erosion">GENERATE</button>
167+ </p>
168+ </div>
169+ <div class="set" id="container-smooth-simple-erosion"></div>
170+ <hr>
171+ </div>
172 </div>
173 </div>
174- <!-- container -->
175- <div class="container">
176- <hr>
177- <div class="row">
178- <h2>Standard Diamond-Square Algorithm</h2>
179- <p>
180- Diamon-Square with several different deviation parameters.
181- <button class="run button-primary" id="standard">GENERATE</button>
182- </p>
183- </div>
184- <div class="set" id="container-standard"></div>
185- <hr>
186- </div>
187- <!-- container -->
188- <div class="container">
189- <hr>
190- <div class="row">
191- <h2>Diamond-Square Algorithm with Smoothing Pass</h2>
192- <p>
193- Diamon-Square smoothed with average of neighbors in 10 point radius, and 20 point radius.
194- <button class="run button-primary" id="smoothed">GENERATE</button>
195- </p>
196- </div>
197- <div class="set" id="container-smoothed"></div>
198- <hr>
199- </div>
200- <!-- container -->
201- <div class="container">
202- <div class="row">
203- <h2>Combining Diamond-Square Maps</h2>
204- <p>
205- 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
206- 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
207- 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
208- map.
209- </p>
210- <p>
211- This allows us to generate a map that has terrain that is smooth in some parts, and rugged in other parts.
212- <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.
213- <button class="run button-primary" id="combined">GENERATE</button>
214- </p>
215- </div>
216- <div class="set" id="container-combined"></div>
217- <hr>
218- </div>
219- <!-- container -->
220- <div class="container">
221- <div class="row">
222- <h2>Greedy Raindrop Erosion Algorithm</h2>
223- <p>
224- For each point on the map, steal a certain percentage off the tallest neighbor. Results in blochy, plateau-like formations.
225- <button class="run button-primary" id="grd">GENERATE</button>
226- </p>
227- </div>
228- <div class="set" id="container-grd"></div>
229- <hr>
230- </div>
231- <!-- container -->
232- <div class="container">
233- <div class="row">
234- <h2>Simple Erosion Algorithm</h2>
235- <p>
236- 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
237- it's carrying capacity, deposit sediment on that point. Repeat this process with many more droplets.
238- <button class="run button-primary" id="simpleErosion">GENERATE</button>
239- </p>
240- </div>
241- <div class="set" id="container-simpleErosion"></div>
242- <hr>
243- </div>
244- <!-- container -->
245- <div class="container">
246- <div class="row">
247- <h2>Complex Erosion Algorithm</h2>
248- <p>
249- 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.
250- <button class="run button-primary" id="complexErosion">GENERATE</button>
251- </p>
252- </div>
253- <div class="set" id="container-complexErosion"></div>
254- <hr>
255- </div>
256- <!-- container -->
257- <div class="container">
258- <div class="row">
259- <h2>Varous Maps</h2>
260- <br>
261- <h4>Smoothing, Greedy Raindrop, and Complex Erosion</h4>
262- <p>
263- Smoothing, Greedy Raindrop, and Complex Erosion algorithms applied to the same DS map.
264- <button class="run button-primary" id="sample">GENERATE</button>
265- </p>
266- </div>
267- <div class="set" id="container-sample"></div>
268- <br>
269- <div class="row">
270- <h4>Combining Smooth, and Complex Erosion Maps</h4>
271- <p>
272- 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>.
273- Also generating <code>c2 from (p2,p3,m2)</code> by swapping first two maps.
274- <button class="run button-primary" id="many">GENERATE</button>
275- </p>
276- </div>
277- <div class="set" id="container-many"></div>
278- <br>
279- <div class="row">
280- <h4>Smoothing a Complex Erosion Map</h4>
281- <p>
282- Eroding a map with Complex Erosion Algorithm before applying smoothing. <code>regular -> complexErosion -> smooth</code>
283- <button class="run button-primary" id="smooth-complex-erosion">GENERATE</button>
284- </p>
285- </div>
286- <div class="set" id="container-smooth-complex-erosion"></div>
287- <br>
288- <div class="row">
289- <h4>Smoothing a Simple Erosion Map</h4>
290- <p>
291- Eroding a map with Simple Erosion Algorithm before applying smoothing. <code>regular -> simpleErosion -> smooth</code>
292- <button class="run button-primary" id="smooth-simple-erosion">GENERATE</button>
293- </p>
294- </div>
295- <div class="set" id="container-smooth-simple-erosion"></div>
296- <hr>
297- </div>
298 <!-- hidden canvas for rendering-->
299 <canvas class="hidden" id="tmp" width="256" height="256"></canvas>
300 </body>
301diff --git a/style.css b/style.css
302index 5b8783b..cd64b1e 100644
303--- a/style.css
304+++ b/style.css
305@@ -24,7 +24,7 @@ div.set:empty:before {
306 display: block;
307 padding-top: 120px;
308 vertical-align: middle;
309- content: 'Press GENERATE to create maps.';
310+ content: 'Click GENERATE to create maps.';
311 }
312
313 div.set .spinner {