gen-biome
Version:
Procedural generation of 2D maps with distinct biomes
127 lines (121 loc) • 3.83 kB
HTML
<html lang="en">
<head>
<title>Gen-Biome Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="sandbox">
<div class="controls">
<div class="parameters">
<h4>World params</h4><hr/>
<div class="inline">
<div class="item">
<label>Width</label>
<input type="input" name="worldWidth" value="300" />
</div>
<div class="item">
<label>Height</label>
<input type="input" name="worldHeight" value="300" />
</div>
</div>
<h4>Generation params</h4><hr/>
<div class="item">
<label>Frequency of biomes change</label>
<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>
<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>
<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>
<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 />
<label>Average biomes height</label>
</div>
<div class="item c">
<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>
<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 of this demo</a
>
</div>
</div>
<div class="preview">
<canvas id="screen"></canvas>
</div>
</div>
<script src="dist/index.js"></script>
</body>
</html>