From c4a8aa744bd3b7090b47c8bdee359a7499564d4e Mon Sep 17 00:00:00 2001 From: neki-dev Date: Thu, 21 Mar 2024 09:54:05 +0100 Subject: [PATCH] Updated demo --- demo/index.html | 85 ++++++++++++++++++++++++---------------- demo/src/biomes.ts | 90 +++++++++++++++++++++++++++++++------------ demo/src/index.ts | 3 +- demo/src/interface.ts | 10 +++++ demo/styles.css | 19 +++++++++ 5 files changed, 149 insertions(+), 58 deletions(-) diff --git a/demo/index.html b/demo/index.html index ca5ea91..a7eced3 100644 --- a/demo/index.html +++ b/demo/index.html @@ -11,6 +11,7 @@
+

World params


@@ -21,49 +22,62 @@
+

Generation params


- +
+ +
0.30
+
- +
+ +
0.50
+
- +
+ +
1.00
+
- +
+ +
0.00
+
@@ -73,6 +87,11 @@
+

Render params


+
+ + +
@@ -92,7 +111,7 @@ 📑 Get source code📑 Get source of this demo
diff --git a/demo/src/biomes.ts b/demo/src/biomes.ts index e94b365..40a23f7 100644 --- 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 index 76030dc..cc24ced 100644 --- 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 index 29ff37f..3ce2706 100644 --- 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 index 8cf711d..2c62577 100644 --- 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%; }