Added world.each method & Added heightAveraging parameter

neki-dev · Mar 23, 2023 · a02222d · a02222d
1 parent e3b0413
commit a02222d
Show file tree

Hide file tree

Showing 22 changed files with 212 additions and 108 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,5 +2,5 @@
 .idea
 node_modules/
 coverage/
-.DS_Store
-*.LICENSE.txt
+demo/dist/
+.DS_Store
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-## ⚡ Gen Biome
+## ![Gen Biome](./docs/logotype-s.png)
 [![Npm package version](https://badgen.net/npm/v/gen-biome)](https://npmjs.com/package/gen-biome)
 [![Small size](https://img.badgesize.io/neki-dev/gen-biome/master/dist/index.js)](https://github.com/neki-dev/gen-biome/blob/master/dist/index.js)
 [![Building](https://github.com/neki-dev/gen-biome/actions/workflows/build.yml/badge.svg)](https://github.com/neki-dev/gen-biome/actions/workflows/build.yml)
@@ -40,6 +40,8 @@ const layer: WorldLayer = generator.addLayer(params?)
 * * *  _Default: 0.5, Min: 0.0, Max: 1.0_
 * * `heightRedistribution` - Redistribution of biomes height
 * * *  _Default: 1.0, Min: 0.5, Max: 1.5_
+* * `heightAveraging` - Averaging of biomes height
+* * *  _Default: true_
 
 #### Get generator layers
 ```js
@@ -97,6 +99,14 @@ const world: World = generator.generate(seed?)
 const matrix: T[][] = world.getMatrix()
 ```
 
+#### Each all positions
+```js
+world.each(callback)
+```
+* `callback`
+* * `position` - Position at matrix
+* * `data` - Biome data
+
 #### Get biome data at position
 ```js
 const data: T = world.getAt(position)

diff --git a/demo/dist/index.js b/demo/dist/index.js
diff --git a/demo/index.html b/demo/index.html
@@ -11,58 +11,77 @@
     <div class="sandbox">
       <div class="controls">
         <div class="parameters">
-          <h2>Generation parameters</h2>
-
-          <div class="items">
-            <div class="item">
-              <label> World width </label>
-              <input type="input" name="worldWidth" value="300" />
-            </div>
-            <div class="item">
-              <label> World height </label>
-              <input type="input" name="worldHeight" value="300" />
-            </div>
-            <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>
-            <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>
-            <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>
-            <div class="item">
-              <input type="checkbox" name="resetSeed" checked />
-              Refresh generation seed
-            </div>
+          <div class="item">
+            <label> World width </label>
+            <input type="input" name="worldWidth" value="300" />
+          </div>
+          <div class="item">
+            <label> World height </label>
+            <input type="input" name="worldHeight" value="300" />
+          </div>
+          <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>
+          <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>
+          <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>
+          <div class="item c">
+            <input type="checkbox" name="heightAveraging" checked />
+            <label>Average biomes height</label>
+          </div>
+          <div class="item c">
+            <input type="checkbox" name="resetSeed" checked />
+            <label>Refresh generation seed</label>
           </div>
         </div>
 
-        <button id="generate">Generate world</button>
+        <button id="generate">Generate</button>
+
+        <div class="tint">
+          * The displayed biomes on map are example.
+          <br />
+          You can use your biome set.
+        </div>
+
+        <div class="meta">
+          <a
+            href="https://github.com/neki-dev/gen-biome#generator"
+            target="_blank"
+            >📑 Documentation</a
+          >
+          <a
+            href="https://github.com/neki-dev/gen-biome/blob/main/demo/src/index.ts"
+            target="_blank"
+            >📑 Get source code</a
+          >
+        </div>
       </div>
 
       <div class="preview">

diff --git a/demo/src/index.ts b/demo/src/index.ts
@@ -1,11 +1,14 @@
-import { WorldGenerator } from '../../src/index';
-import { renderOnCanvas } from './render';
-import { BiomeData, BIOMES } from './biomes';
-import { ui } from './interface';
+import { WorldGenerator } from "../../src/index";
+import { BiomeData, BIOMES } from "./biomes";
+import { ui } from "./interface";
 
+const ctx = ui.screen.getContext("2d") as CanvasRenderingContext2D;
+const tileSize = 2;
 let savedSeed!: number[];
 
-ui.buttons.generate?.addEventListener('click', () => {
+function generateAndRenderWorld() {
+  // PREPARE
+
   const generator = new WorldGenerator<BiomeData>({
     width: Number(ui.inputs.worldWidth?.value),
     height: Number(ui.inputs.worldHeight?.value),
@@ -15,18 +18,30 @@ ui.buttons.generate?.addEventListener('click', () => {
     frequencyChange: Number(ui.inputs.frequencyChange?.value),
     borderSmoothness: Number(ui.inputs.borderSmoothness?.value),
     heightRedistribution: Number(ui.inputs.heightRedistribution?.value),
+    heightAveraging: ui.inputs.heightAveraging?.checked,
   });
 
   for (const { params, data } of BIOMES) {
     layer.addBiome(params, data);
   }
 
+  // GENERATE
+
   const seed = ui.inputs.resetSeed?.checked ? undefined : savedSeed;
   const world = generator.generate(seed);
 
   savedSeed = world.seed;
 
-  renderOnCanvas(world);
-});
+  // RENDER
+
+  ui.screen.width = world.width * tileSize;
+  ui.screen.height = world.height * tileSize;
+
+  world.each((position, biome) => {
+    ctx.fillStyle = biome.color;
+    ctx.fillRect(position.x * tileSize, position.y * tileSize, tileSize, tileSize);
+  });
+}
 
-ui.buttons.generate?.click();
+ui.buttons.generate?.addEventListener("click", generateAndRenderWorld);
+generateAndRenderWorld();
diff --git a/demo/src/interface.ts b/demo/src/interface.ts
@@ -5,6 +5,7 @@ export const ui = {
     frequencyChange: document.querySelector<HTMLInputElement>('[name=frequencyChange]'),
     borderSmoothness: document.querySelector<HTMLInputElement>('[name=borderSmoothness]'),
     heightRedistribution: document.querySelector<HTMLInputElement>('[name=heightRedistribution]'),
+    heightAveraging: document.querySelector<HTMLInputElement>('[name=heightAveraging]'),
     worldWidth: document.querySelector<HTMLInputElement>('[name=worldWidth]'),
     worldHeight: document.querySelector<HTMLInputElement>('[name=worldHeight]'),
   },

diff --git a/demo/src/render.ts b/demo/src/render.ts
diff --git a/demo/styles.css b/demo/styles.css
@@ -32,26 +32,70 @@ body {
 
 .controls .parameters {
   margin-bottom: 20px;
-}
-.controls .parameters h2 {
-  margin-bottom: 10px;
-}
-.controls .parameters .items {
-  border: 1px solid #ddd;
-  padding: 15px;
+  padding: 20px;
+  background: #eee;
+  border-radius: 8px;
 }
 .controls .parameters .item:not(:last-child) {
   margin-bottom: 20px;
 }
+.controls .parameters .item.c {
+  display: flex;
+  align-items: center;
+}
 .controls .parameters .item label {
   display: block;
+  text-transform: uppercase;
+  font-size: 11px;
   margin-bottom: 3px;
 }
+.controls .parameters .item.c label {
+  margin: 0 0 0 5px;
+}
+.controls .parameters .item input[type="input"] {
+  border: 1px solid #ddd;
+  padding: 8px 12px;
+  box-shadow: 0 1px 5px #eee inset;
+  border-radius: 5px;
+  background: #fff;
+  font: 12px Tahoma;
+}
 .controls .parameters .item input[type="range"] {
   width: 100%;
 }
 
 .controls button {
-  margin-top: 15px;
   padding: 10px 15px;
+  border-radius: 5px;
+  background: #22272d;
+  border: none;
+  text-transform: uppercase;
+  font-weight: bold;
+  letter-spacing: 1px;
+  color: #fff;
+}
+.controls button:hover {
+  cursor: pointer;
+  background: #1f354f;
+}
+
+.tint {
+  margin-top: 25px;
+}
+
+.meta {
+  margin-top: 25px;
+  display: flex;
+  flex-direction: column;
+}
+.meta a {
+  text-decoration: none;
+  color: #444;
+}
+.meta a:hover {
+  text-decoration: none;
+  color: #555;
 }
+.meta a:not(:last-child) {
+  margin-bottom: 5px;
+}
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/types.d.ts b/dist/types.d.ts
@@ -21,6 +21,11 @@ export type WorldLayerParams = {
      * Min: 0.5, Max: 1.5
      */
     heightRedistribution?: number;
+    /**
+     * Averaging of biomes height
+     * Default: true
+     */
+    heightAveraging?: boolean;
 };
 export type WorldBiomeParams = {
     /**

diff --git a/dist/utils/perlin.d.ts b/dist/utils/perlin.d.ts
@@ -5,6 +5,7 @@ type NoiseParameters = {
     frequency: number;
     redistribution: number;
     octaves: number;
+    averaging: boolean;
 };
 export declare function generateSeed(): number[];
 export declare function generateNoise(parameters: NoiseParameters): number;

diff --git a/dist/world-layer.d.ts b/dist/world-layer.d.ts
@@ -4,6 +4,7 @@ export declare class WorldLayer<T> {
     private readonly frequency;
     private readonly octaves;
     private readonly redistribution;
+    private readonly averaging;
     private biomes;
     constructor(params?: WorldLayerParams);
     addBiome(params: WorldBiomeParams, data: T): WorldBiome<T>;
@@ -14,5 +15,6 @@ export declare class WorldLayer<T> {
         frequency: number;
         octaves: number;
         redistribution: number;
+        averaging: boolean;
     };
 }
diff --git a/dist/world.d.ts b/dist/world.d.ts
@@ -6,6 +6,7 @@ export declare class World<T> {
     private matrix;
     constructor(matrix: T[][], seed: number[]);
     getMatrix(): T[][];
-    getAt(position: WorldBiomePosition): T | undefined;
+    each(callback: (position: WorldBiomePosition, biome: T) => boolean | void): void;
+    getAt(position: WorldBiomePosition): T;
     replaceAt(position: WorldBiomePosition, data: T): void;
 }
diff --git a/docs/logotype-l.png b/docs/logotype-l.png
diff --git a/docs/logotype-s.png b/docs/logotype-s.png
diff --git a/package-lock.json b/package-lock.json