summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/BrushSelector.js72
-rw-r--r--src/Terrain.js115
-rw-r--r--src/index.html6
-rw-r--r--src/main.js14
-rw-r--r--src/modules/Geometry.js6
-rw-r--r--src/modules/Util.js5
6 files changed, 199 insertions, 19 deletions
diff --git a/src/BrushSelector.js b/src/BrushSelector.js
new file mode 100644
index 0000000..ea72990
--- /dev/null
+++ b/src/BrushSelector.js
@@ -0,0 +1,72 @@
+import { lerp } from './modules/Util.js';
+
+class BrushSelector {
+ constructor(rootId, canvas, terrain) {
+ console.log('hi');
+ this.canvas = canvas;
+ this.terrain = terrain;
+ this.div = document.createElement('div');
+ this.div.setAttribute('style', 'position: absolute; padding: 10px; display: block; right: 10px; bottom: 10px;');
+
+ this.radiusSlider = this.addSlider('Brush Size', 0, 500);
+ this.strengthSlider = this.addSlider('Brush Strength', 0, 100);
+
+ this.addBrush('Raise', (pt, str) => pt.height += 5 * str);
+ this.addBrush('Lower', (pt, str) => pt.height -= 5 * str);
+ this.addBrush('Round', (pt, str) => {
+ const neighbors = this.terrain.getNeighbors(pt);
+ let avg = 0;
+ for (let n of neighbors) avg += n.height;
+ avg /= neighbors.length;
+ pt.height = lerp(pt.height, avg, str);
+ });
+
+ const root = document.getElementById(rootId);
+ root.appendChild(this.div);
+ }
+
+ addSlider(label, min, max) {
+ const l = document.createElement('label');
+ const text = document.createTextNode(label);
+ l.appendChild(text);
+ this.div.appendChild(l);
+
+ const s = document.createElement('input');
+ s.type = 'range';
+ s.min = min;
+ s.max = max;
+ s.value = 0.5 * (max + min);
+ this.div.appendChild(s);
+ return s;
+ }
+
+ addBrush(name, f) {
+ const button = document.createElement('button');
+ const text = document.createTextNode(name);
+ button.appendChild(text);
+
+ button.onclick = () => {
+ if (this.button === button) return // already selected
+ if (this.button) this.button.classList.remove('selected');
+ button.classList.add('selected');
+ this.button = button;
+ this.f = f;
+ };
+
+ if (!this.button) button.onclick();
+
+ this.div.appendChild(button);
+ }
+
+ apply() {
+ const radius = this.radiusSlider.value;
+ const str = this.strengthSlider.value/this.strengthSlider.max;
+ this.terrain.applyBrush(
+ this.canvas.mouse.drawingPos.x,
+ this.canvas.mouse.drawingPos.y,
+ this.f, str, this.canvas.pixelsToUnits(radius)
+ );
+ }
+}
+
+export default BrushSelector;
diff --git a/src/Terrain.js b/src/Terrain.js
index c287063..291a4fc 100644
--- a/src/Terrain.js
+++ b/src/Terrain.js
@@ -2,8 +2,8 @@
import Voronoi from './3rdparty/rhill-voronoi-core.js';
-import { useAverage } from './modules/Util.js';
-import { AABB, QuadTree } from './modules/Geometry.js';
+import { lerp, clamp, useAverage } from './modules/Util.js';
+import { dist, AABB, QuadTree } from './modules/Geometry.js';
/* from here on up, we always assume that points live in the range [(0,0), (1,1)) */
@@ -58,17 +58,29 @@ class Terrain {
let seed_points = [];
for (let i=0; i<N_SEED_POINTS; i++) seed_points.push(randomPoint());
- for (let i=0; i<N_RELAX_ITERATIONS; i++)
+ for (let i=0; i<N_RELAX_ITERATIONS; i++)
lloydRelax(seed_points, RELAX_DENSITY);
const v = new Voronoi();
- this.graph = v.compute(seed_points, {xl: 0, xr: 1, yt: 0, yb: 1});
+ this.voronoi = v.compute(seed_points, {xl: 0, xr: 1, yt: 0, yb: 1});
this.tree = new QuadTree(1,1);
- for (let v of this.graph.vertices) {
- v.hue = 0;
+ let index = 0;
+ for (let v of this.voronoi.vertices) {
+ v.height = v.y;
+ v.index = index;
+ index += 1;
this.tree.insert(v);
}
+
+ this.graph = {};
+ for (let e of this.voronoi.edges) {
+ if (!this.graph[e.va.index]) this.graph[e.va.index] = new Set();
+ if (!this.graph[e.vb.index]) this.graph[e.vb.index] = new Set();
+
+ this.graph[e.va.index].add(e.vb.index);
+ this.graph[e.vb.index].add(e.va.index);
+ }
}
@@ -87,22 +99,105 @@ class Terrain {
}
+ getNeighbors(point) {
+ const indices = Array.from(this.graph[point.index]);
+ return indices.map( index => this.voronoi.vertices[index] );
+ }
+
+
renderGrid(ct) {
ct.save();
ct.lineWidth = 0.001;
- for (let edge of this.graph.edges) {
- ct.fillStyle = `hsl(${edge.va.hue}, 100%, 50%)`;
+ for (let edge of this.voronoi.edges) {
+ ct.fillStyle = `hsl(${edge.va.height}, 100%, 50%)`;
ct.beginPath();
- ct.arc(edge.va.x, edge.va.y, 0.005, 0, 2*Math.PI);
+ ct.arc(edge.va.x, edge.va.y, 0.0005, 0, 2*Math.PI);
ct.closePath();
ct.fill();
- ct.beginPath();
+ /*ct.beginPath();
ct.moveTo(edge.va.x, edge.va.y);
ct.lineTo(edge.vb.x, edge.vb.y);
ct.closePath();
ct.stroke();
+ */
+ }
+ ct.restore();
+ }
+
+ render(ct) {
+ function rgb(r, g, b) {
+ this.r = r; this.g = g; this.b = b;
+ }
+ const renderRgb = rgb => `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+ const lerpColors = (a, b, alpha) => new rgb(
+ lerp(a.r, b.r, alpha),
+ lerp(a.g, b.g, alpha),
+ lerp(a.b, b.b, alpha)
+ );
+ const getBucket = (value, min, max, numBuckets) => {
+ const delta = max - min;
+ const step = delta/numBuckets;
+ return clamp(Math.floor((value-min)/step), 0, numBuckets-1);
}
+ const getColor = (value, min, max, colors) => {
+ if (value < min) return colors[0];
+ if (value >= max) return colors[colors.length-1];
+
+ const step = (max - min)/(colors.length - 1);
+
+ const index = getBucket(value, min, max, colors.length-1);
+ const alpha = (value - (index*step) - min)/step;
+ const color = lerpColors(
+ colors[index], colors[index+1],
+ alpha
+ );
+ if (color.r <= 0)
+ console.log(value, index, alpha, color);
+ return color;
+ }
+
+ const colors = [
+ /* ocean */
+ new rgb(31, 59, 68),
+ new rgb(68, 130, 149),
+
+ /* land */
+ new rgb(229, 199, 169),
+ new rgb(198, 133, 67),
+ new rgb(117, 89, 61),
+
+ /* mountain */
+ new rgb(82, 74, 64),
+ new rgb(82, 74, 64),
+ new rgb(255, 255, 255),
+ ];
+ ct.save();
+
+ for (let cell of this.voronoi.cells) {
+ ct.beginPath();
+
+ let height = 0;
+ let count = 1;
+ for (let edge of cell.halfedges) {
+ const p0 = edge.getStartpoint();
+ const p1 = edge.getEndpoint();
+ height += p0.height;
+ count += 1;
+ ct.lineTo(p0.x, p0.y);
+ ct.lineTo(p1.x, p1.y);
+ }
+ ct.closePath();
+ height /= count;
+ height = 10 * Math.floor(height/10);
+ const color = getColor(height, 0, 100, colors);
+ if (color.r <=0) console.log(color);
+ ct.fillStyle = renderRgb(color);
+ ct.strokeStyle = renderRgb(color);
+ ct.stroke();
+ ct.fill();
+ }
+
ct.restore();
}
}
diff --git a/src/index.html b/src/index.html
index ce0739c..cebdef7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,6 +11,12 @@
background-color: #333;
color: white;
}
+ button {
+ font-family: monospace;
+ }
+ button.selected {
+ color: red;
+ }
</style>
<script type="module" src="main.js"></script>
</head>
diff --git a/src/main.js b/src/main.js
index 4527a90..f73a17b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,14 +1,17 @@
import Terrain from './Terrain.js';
import Canvas from './Canvas.js';
+import Brush from './Brush.js';
+import BrushSelector from './BrushSelector.js';
const $ = id => document.getElementById(id)
window.onload = () => {
const canvas = new Canvas('root');
const terrain = new Terrain();
+ const selector = new BrushSelector('root', canvas, terrain);
- const BRUSH_RADIUS = 80;
let brushing = false;
+
canvas.onMouseDown = e => {
if (e.button == 0) brushing = true;
};
@@ -18,20 +21,17 @@ window.onload = () => {
const pos = canvas.mouse.drawingPos;
canvas.onMouseMove = () => {
- if (brushing)
- terrain.applyBrush(pos.x, pos.y, (pt, strength) => {
- pt.hue += 10 * strength;
- }, 1, canvas.pixelsToUnits(BRUSH_RADIUS));
+ if (brushing) selector.apply();
canvas.draw();
};
canvas.onDraw = ct => {
- terrain.renderGrid(ct);
+ terrain.render(ct);
ct.strokeStyle = '#fff';
ct.lineWidth = canvas.pixelsToUnits(1);
ct.beginPath();
- ct.arc(pos.x, pos.y, canvas.pixelsToUnits(BRUSH_RADIUS), 0, 2*Math.PI);
+ ct.arc(pos.x, pos.y, canvas.pixelsToUnits(selector.radiusSlider.value), 0, 2*Math.PI);
ct.closePath();
ct.stroke();
};
diff --git a/src/modules/Geometry.js b/src/modules/Geometry.js
index 628512b..43f277f 100644
--- a/src/modules/Geometry.js
+++ b/src/modules/Geometry.js
@@ -1,5 +1,9 @@
'use strict';
+function dist(a, b) {
+ return Math.sqrt((a.x - b.x)**2 + (a.y - b.y)**2);
+}
+
/* AABB - axis-aligned bounding box */
class AABB {
/* create a new AABB */
@@ -226,4 +230,4 @@ class QuadTree {
}
}
-export { AABB, QTNode, QuadTree };
+export { dist, AABB, QTNode, QuadTree };
diff --git a/src/modules/Util.js b/src/modules/Util.js
index 2375f10..165d1d0 100644
--- a/src/modules/Util.js
+++ b/src/modules/Util.js
@@ -14,4 +14,7 @@ function clamp(value, min, max) {
return Math.min(Math.max(value, min), max);
}
-export { useAverage, clamp };
+function lerp(a, b, alpha) {
+ return ((1-alpha)*a) + (alpha*b);
+}
+export { useAverage, clamp, lerp };
generated by cgit v1.2.1 (git 2.18.0) at 2024-11-15 06:33:42 +0000