From 8aa6645f2311de78f74b35f804cc45c7fcf38f57 Mon Sep 17 00:00:00 2001 From: sanine Date: Mon, 30 May 2022 18:19:02 -0500 Subject: add brushes --- src/BrushSelector.js | 72 ++++++++++++++++++++++++++++++ src/Terrain.js | 115 +++++++++++++++++++++++++++++++++++++++++++----- src/index.html | 6 +++ src/main.js | 14 +++--- src/modules/Geometry.js | 6 ++- src/modules/Util.js | 5 ++- 6 files changed, 199 insertions(+), 19 deletions(-) create mode 100644 src/BrushSelector.js 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 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; + } 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 }; -- cgit v1.2.1