Updated demo

neki-dev · Mar 21, 2024 · c4a8aa7 · c4a8aa7
1 parent 0f05601
commit c4a8aa7
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 58 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -11,6 +11,7 @@
     <div class="sandbox">
       <div class="controls">
         <div class="parameters">
+          <h4>World params</h4><hr/>
           <div class="inline">
             <div class="item">
               <label>Width</label>
@@ -21,49 +22,62 @@
               <input type="input" name="worldHeight" value="300" />
             </div>
           </div>
+          <h4>Generation params</h4><hr/>
           <div class="item">
             <label>Frequency of biomes change</label>
-            <input
-              type="range"
-              min="0"
-              max="1"
-              step="0.1"
-              name="frequencyChange"
-              value="0.3"
-            />
+            <div class="range">
+              <input
+                type="range"
+                min="0"
+                max="1"
+                step="0.05"
+                name="frequencyChange"
+                value="0.3"
+              />
+              <div id="frequencyChangeValue">0.30</div>
+            </div>
           </div>
           <div class="item">
             <label>Smoothness of biomes borders</label>
-            <input
-              type="range"
-              min="0"
-              max="1"
-              step="0.1"
-              name="borderSmoothness"
-              value="0.5"
-            />
+            <div class="range">
+              <input
+                type="range"
+                min="0"
+                max="1"
+                step="0.05"
+                name="borderSmoothness"
+                value="0.5"
+              />
+              <div id="borderSmoothnessValue">0.50</div>
+            </div>
           </div>
           <div class="item">
             <label>Redistribution of biomes height</label>
-            <input
-              type="range"
-              min="0.5"
-              max="1.5"
-              step="0.1"
-              name="heightRedistribution"
-              value="1.0"
-            />
+            <div class="range">
+              <input
+                type="range"
+                min="0.5"
+                max="1.5"
+                step="0.05"
+                name="heightRedistribution"
+                value="1.0"
+              />
+              <div id="heightRedistributionValue">1.00</div>
+            </div>
           </div>
           <div class="item">
             <label>Falloff area</label>
-            <input
-              type="range"
-              min="0.0"
-              max="0.9"
-              step="0.1"
-              name="falloff"
-              value="0.0"
-            />
+            <div class="range">
+              <input
+                type="range"
+                min="0.0"
+                max="0.9"
+                step="0.05"
+                name="falloff"
+                value="0.0"
+              />
+              <div id="falloffValue">0.00</div>
+            </div>
           </div>
           <div class="item c">
             <input type="checkbox" name="heightAveraging" checked />
@@ -73,6 +87,11 @@
             <input type="checkbox" name="resetSeed" checked />
             <label>Refresh generation seed</label>
           </div>
+          <h4>Render params</h4><hr/>
+          <div class="item">
+            <label>Tile size</label>
+            <input type="input" name="tileSize" value="2" />
+          </div>
         </div>
 
         <button id="generate">Generate</button>
@@ -92,7 +111,7 @@
           <a
             href="https://github.com/neki-dev/gen-biome/blob/main/demo/src/index.ts"
             target="_blank"
-            >📑 Get source code</a
+            >📑 Get source of this demo</a
           >
         </div>
       </div>

diff --git a/demo/src/biomes.ts b/demo/src/biomes.ts
@@ -10,52 +10,94 @@ export const BIOMES: Array<{
   data: BiomeData
 }> = [
   {
-    params: {
-      lowerBound: 0.0,
-      upperBound: 0.2,
+    params: { upperBound: 0.08 },
+    data: {
+      name: 'Liquid',
+      color: '#4292c4',
     },
+  },
+  {
+    params: { lowerBound: 0.08, upperBound: 0.11 },
     data: {
-      name: 'WATER',
-      color: 'dodgerblue',
+      name: 'Liquid',
+      color: '#4c9ccd',
     },
   },
   {
-    params: {
-      lowerBound: 0.2,
-      upperBound: 0.3,
+    params: { lowerBound: 0.11, upperBound: 0.14 },
+    data: {
+      name: 'Liquid',
+      color: '#51a5d8',
     },
+  },
+  {
+    params: { lowerBound: 0.14, upperBound: 0.17 },
     data: {
-      name: 'SAND',
-      color: '#edd665',
+      name: 'Liquid',
+      color: '#56aade',
     },
   },
   {
-    params: {
-      lowerBound: 0.3,
-      upperBound: 0.7,
+    params: { lowerBound: 0.17, upperBound: 0.22 },
+    data: {
+      name: 'Coast',
+      color: '#c5ac6d',
     },
+  },
+  {
+    params: { lowerBound: 0.22, upperBound: 0.25 },
     data: {
-      name: 'GRASS',
-      color: '#9bd138',
+      name: 'Coast',
+      color: '#ccb475',
     },
   },
   {
-    params: {
-      lowerBound: 0.7,
-      upperBound: 0.9,
+    params: { lowerBound: 0.25, upperBound: 0.28 },
+    data: {
+      name: 'Coast',
+      color: '#d2ba7d',
     },
+  },
+  {
+    params: { lowerBound: 0.28, upperBound: 0.34 },
     data: {
-      name: 'MOUNT',
-      color: 'gray',
+      name: 'Fields',
+      color: '#67c72b',
     },
   },
   {
-    params: {
-      lowerBound: 0.9,
+    params: { lowerBound: 0.34, upperBound: 0.46 },
+    data: {
+      name: 'Fields',
+      color: '#5dbc21',
     },
+  },
+  {
+    params: { lowerBound: 0.46, upperBound: 0.65 },
+    data: {
+      name: 'Fields',
+      color: '#56ae1e',
+    },
+  },
+  {
+    params: { lowerBound: 0.65, upperBound: 0.72 },
+    data: {
+      name: 'Mounts',
+      color: '#333333',
+    },
+  },
+  {
+    params: { lowerBound: 0.72, upperBound: 0.79 },
+    data: {
+      name: 'Mounts',
+      color: '#444444',
+    },
+  },
+  {
+    params: { lowerBound: 0.79 },
     data: {
-      name: 'SNOW',
-      color: 'white',
+      name: 'Mounts',
+      color: '#555555',
     },
   },
 ];
diff --git a/demo/src/index.ts b/demo/src/index.ts
@@ -4,7 +4,6 @@ import { BIOMES } from "./biomes";
 import { ui } from "./interface";
 
 const ctx = ui.screen.getContext("2d") as CanvasRenderingContext2D;
-const tileSize = 2;
 let savedSeed!: number[];
 
 function generateAndRenderWorld() {
@@ -40,6 +39,8 @@ function generateAndRenderWorld() {
    * RENDER
    */
 
+  const tileSize = Number(ui.inputs.tileSize?.value);
+
   ui.screen.width = world.width * tileSize;
   ui.screen.height = world.height * tileSize;
 

diff --git a/demo/src/interface.ts b/demo/src/interface.ts
@@ -11,8 +11,18 @@ export const ui = {
     heightAveraging: input('heightAveraging'),
     worldWidth: input('worldWidth'),
     worldHeight: input('worldHeight'),
+    tileSize: input('tileSize'),
   },
   buttons: {
     generate: document.getElementById('generate'),
   },
 };
+
+Object.entries(ui.inputs).forEach(([name, input]) => {
+  input?.addEventListener('input', () => {
+    const value = document.getElementById(name + 'Value');
+    if (value) {
+      value.innerText = Number(input.value).toFixed(2);
+    }
+  });
+});
diff --git a/demo/styles.css b/demo/styles.css
@@ -8,6 +8,19 @@ body {
   font: 14px Tahoma;
 }
 
+h4 {
+  margin-bottom: 6px;
+  text-transform: uppercase;
+}
+
+hr {
+  display: block;
+  margin-bottom: 10px;
+  border: none;
+  height: 1px;
+  background: #ccc;
+}
+
 .sandbox {
   display: flex;
   padding: 50px;
@@ -18,6 +31,8 @@ body {
   flex: 1;
   background-color: #ddd;
   overflow: scroll;
+  min-width: 600px;
+  min-height: 400px;
 }
 .preview #screen {
   display: block;
@@ -66,6 +81,10 @@ body {
   font: 12px Tahoma;
   width: 100%;
 }
+.controls .parameters .item .range {
+  display: flex;
+  gap: 10px;
+}
 .controls .parameters .item input[type="range"] {
   width: 100%;
 }