add brushesmain

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 };