summaryrefslogtreecommitdiff
path: root/src/Terrain.js
diff options
context:
space:
mode:
authorsanine <sanine.not@pm.me>2022-05-30 18:19:02 -0500
committersanine <sanine.not@pm.me>2022-05-30 18:19:02 -0500
commit8aa6645f2311de78f74b35f804cc45c7fcf38f57 (patch)
tree95107aedc3305ef11526ef8dd846c249cc356cdb /src/Terrain.js
parent9ccb4a7bc728fd0e85c04fddb802fde02b73cfe2 (diff)
add brushesmain
Diffstat (limited to 'src/Terrain.js')
-rw-r--r--src/Terrain.js115
1 files changed, 105 insertions, 10 deletions
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();
}
}