terrain-map
ARCHIVED - repo for blog post http://www.vogt.world/writing/procedural-terrain-generation/
git clone https://git.vogt.world/terrain-map.git
Log | Files | README.md
← Commit log
commit
message
Tweaking presentation
author
Ben Vogt <[email protected]>
date
2016-05-14 03:43:06
stats
2 file(s) changed, 15 insertions(+), 7 deletions(-)
files
index.html
style.css
 1diff --git a/index.html b/index.html
 2index 41e4c81..fbc95f8 100644
 3--- a/index.html
 4+++ b/index.html
 5@@ -22,10 +22,10 @@
 6     <div class="container">
 7       <hr>
 8       <div class="row">
 9-        <h2>Standard Diamond-Square algorithm</h2>
10+        <h2>Standard Diamond-Square Algorithm</h2>
11         <p>
12           Diamon-Square with smoothing of 10, and 20.
13-          <button class="run button-primary" id="standard">RUN</button>
14+          <button class="run button-primary" id="standard">GENERATE</button>
15         </p>
16       </div>
17       <div class="set-of" id="container-1"></div>
18@@ -34,7 +34,7 @@
19     <!-- container-2 -->
20     <div class="container">
21       <div class="row">
22-        <h2>Combining Diamond-Square maps</h2>
23+        <h2>Combining Diamond-Square Maps</h2>
24         <p>
25           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
26           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
27@@ -44,7 +44,7 @@
28         <p>
29           This allows us to generate a map that has terrain that is smooth in some parts, and rugged in other parts.
30           <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.
31-          <button class="run button-primary" id="combined">RUN</button>
32+          <button class="run button-primary" id="combined">GENERATE</button>
33         </p>
34       </div>
35       <div class="set-of" id="container-2"></div>
36@@ -56,7 +56,7 @@
37         <h2>Greedy Raindrop Erosion Algorithm</h2>
38         <p>
39           For each point on the map, steal a certain percentage off the tallest neighbor. Results in blochy, plateau-like formations.
40-          <button class="run button-primary" id="grd">RUN</button>
41+          <button class="run button-primary" id="grd">GENERATE</button>
42         </p>
43       </div>
44       <div class="set-of" id="container-3"></div>
45@@ -69,7 +69,7 @@
46         <p>
47           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
48           it's carrying capacity, deposit sediment on that point. Repeat this process with many more droplets.
49-          <button class="run button-primary" id="simpleErosion">RUN</button>
50+          <button class="run button-primary" id="simpleErosion">GENERATE</button>
51         </p>
52       </div>
53       <div class="set-of" id="container-4"></div>
54@@ -81,7 +81,7 @@
55         <h2>Complex Erosion Algorithm</h2>
56         <p>
57           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.
58-          <button class="run button-primary" id="complexErosion">RUN</button>
59+          <button class="run button-primary" id="complexErosion">GENERATE</button>
60         </p>
61       </div>
62       <div class="set-of" id="container-5"></div>
63diff --git a/style.css b/style.css
64index 5c5f7d2..401b7b2 100644
65--- a/style.css
66+++ b/style.css
67@@ -18,6 +18,15 @@ div.set-of:empty {
68   background: #F5F5F5;
69 }
70 
71+div.set-of:empty:before {
72+  text-align: center;
73+  width: 100%;
74+  display: block;
75+  padding-top: 100px;
76+  vertical-align: middle;
77+  content: 'Press GENERATE to create maps.';
78+}
79+
80 .run {
81   float: right;
82 }