diff options
author | sanine <sanine.not@pm.me> | 2022-05-31 20:52:15 -0500 |
---|---|---|
committer | sanine <sanine.not@pm.me> | 2022-05-31 20:52:15 -0500 |
commit | 5efc7885e1c3959aa165be640858ffb3f8a5860b (patch) | |
tree | 6865327d6affd6df2c4f61ed3b9d5ab446e2b23e | |
parent | 8aa6645f2311de78f74b35f804cc45c7fcf38f57 (diff) |
refactor: remove modules/ folder
-rw-r--r-- | src/BrushSelector.js | 72 | ||||
-rw-r--r-- | src/Geometry/Geometry.js (renamed from src/modules/Geometry.js) | 0 | ||||
-rw-r--r-- | src/Geometry/Geometry.test.js (renamed from src/modules/Geometry.test.js) | 2 | ||||
-rw-r--r-- | src/Terrain.js | 206 | ||||
-rw-r--r-- | src/Util/Util.js (renamed from src/modules/Util.js) | 0 | ||||
-rw-r--r-- | src/Util/Util.test.js | 41 | ||||
-rw-r--r-- | src/main.js | 39 | ||||
-rw-r--r-- | src/modules/Mouse.js | 53 | ||||
-rw-r--r-- | src/modules/Util.test.js | 23 | ||||
-rw-r--r-- | src/test-assert.js (renamed from src/modules/test-assert.js) | 0 |
10 files changed, 42 insertions, 394 deletions
diff --git a/src/BrushSelector.js b/src/BrushSelector.js deleted file mode 100644 index ea72990..0000000 --- a/src/BrushSelector.js +++ /dev/null @@ -1,72 +0,0 @@ -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/modules/Geometry.js b/src/Geometry/Geometry.js index 43f277f..43f277f 100644 --- a/src/modules/Geometry.js +++ b/src/Geometry/Geometry.js diff --git a/src/modules/Geometry.test.js b/src/Geometry/Geometry.test.js index 925a53d..0b81438 100644 --- a/src/modules/Geometry.test.js +++ b/src/Geometry/Geometry.test.js @@ -1,4 +1,4 @@ -import { test, assert } from './test-assert.js'; +import { test, assert } from '../test-assert.js'; import { AABB, QTNode, QuadTree } from './Geometry.js'; const RUN_BENCHMARKS = false; diff --git a/src/Terrain.js b/src/Terrain.js deleted file mode 100644 index 291a4fc..0000000 --- a/src/Terrain.js +++ /dev/null @@ -1,206 +0,0 @@ -'use strict'; - -import Voronoi from './3rdparty/rhill-voronoi-core.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)) */ - -function lloydRelax(point_set, density) { - /* setup quadtree and averages */ - let tree = new QuadTree(1,1); - let averages = {}; - for (let i=0; i<point_set.length; i++) { - const point = point_set[i]; - point.index = i; - tree.insert(point); - - let [avg, append] = useAverage(); - const cent_x = { avg, append }; - [avg, append] = useAverage(); - const cent_y = { avg, append }; - averages[i] = { cent_x, cent_y }; - } - - /* compute average centroids */ - for (let x=0; x<1; x += 1/density) { - for (let y=0; y<1; y += 1/density) { - const point = { x, y }; - const closest = tree.closest(point); - const { cent_x, cent_y } = averages[closest.index]; - cent_x.append(point.x); - cent_y.append(point.y); - } - } - - /* return centroid points */ - const result = []; - for (let i=0; i<point_set.length; i++) { - const point = { x: averages[i].cent_x.avg(), y: averages[i].cent_y.avg() }; - result.push(point); - } - return result; -} - - -class Terrain { - constructor() { - const N_SEED_POINTS = 2**12; - const N_RELAX_ITERATIONS = 1; - const RELAX_DENSITY = 400; - const randomPoint = () => ({x: Math.random(), y: Math.random()}); - - this.min_height = 0; - this.max_height = 0; - - 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++) - lloydRelax(seed_points, RELAX_DENSITY); - - const v = new Voronoi(); - this.voronoi = v.compute(seed_points, {xl: 0, xr: 1, yt: 0, yb: 1}); - - this.tree = new QuadTree(1,1); - 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); - } - } - - - applyBrush(x, y, f, strength, radius) { - const region = new AABB(x-radius, y-radius, 2*radius, 2*radius); - const points = this.tree.root.getPointsInRegion(region); - - const dist2 = (a, b) => (a.x - b.x)**2 + (a.y - b.y)**2; - - const sigma = radius/3; - const beta = 1/(2*sigma*sigma); - const center = { x, y }; - const power = pt => Math.exp(-beta * dist2(pt, center)); - - for (let pt of points) f(pt, strength * power(pt)); - } - - - 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.voronoi.edges) { - ct.fillStyle = `hsl(${edge.va.height}, 100%, 50%)`; - ct.beginPath(); - ct.arc(edge.va.x, edge.va.y, 0.0005, 0, 2*Math.PI); - ct.closePath(); - ct.fill(); - - /*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(); - } -} - -export { lloydRelax }; -export default Terrain; diff --git a/src/modules/Util.js b/src/Util/Util.js index 165d1d0..165d1d0 100644 --- a/src/modules/Util.js +++ b/src/Util/Util.js diff --git a/src/Util/Util.test.js b/src/Util/Util.test.js new file mode 100644 index 0000000..9c6adbf --- /dev/null +++ b/src/Util/Util.test.js @@ -0,0 +1,41 @@ +import { test, assert} from '../test-assert.js'; +import { useAverage, clamp, lerp } from './Util.js'; + + +test('Average correctly accumulates an average', () => { + let [avg, avg_append] = useAverage(); + let data = []; + for (let i=0; i<5000; i++) { + let d = Math.random(); + data.push(d); + avg_append(d); + } + + let manual_average = 0; + for (let d of data) manual_average += d; + manual_average /= data.length; + + const precision = (decimalPlaces, num) => { + const theta = 10**decimalPlaces; + return Math.floor(num * theta) / theta; + }; + assert.equal(precision(5, avg()), precision(5, manual_average)); +}); + + +test('Clamp correctly constrains values', () => { + assert.equal(clamp(5, 0, 10), 5); + assert.equal(clamp(-1, 0, 10), 0); + assert.equal(clamp(15, 0, 10), 10); +}); + + +test ('Lerp correctly interpolates values', () => { + const a = 15; + const b = 10; + assert.equal(lerp(a, b, 0), a); + assert.equal(lerp(a, b, 1), b); + assert.equal(lerp(a, b, 0.5), (a+b)/2); + assert.equal(lerp(a, b, 0.25), (3*a + b)/4); + assert.equal(lerp(a, b, 0.75), (a + (3*b))/4); +}); diff --git a/src/main.js b/src/main.js deleted file mode 100644 index f73a17b..0000000 --- a/src/main.js +++ /dev/null @@ -1,39 +0,0 @@ -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); - - let brushing = false; - - canvas.onMouseDown = e => { - if (e.button == 0) brushing = true; - }; - canvas.onMouseUp = e => { - if (e.button == 0) brushing = false; - }; - - const pos = canvas.mouse.drawingPos; - canvas.onMouseMove = () => { - if (brushing) selector.apply(); - canvas.draw(); - }; - - canvas.onDraw = ct => { - terrain.render(ct); - - ct.strokeStyle = '#fff'; - ct.lineWidth = canvas.pixelsToUnits(1); - ct.beginPath(); - ct.arc(pos.x, pos.y, canvas.pixelsToUnits(selector.radiusSlider.value), 0, 2*Math.PI); - ct.closePath(); - ct.stroke(); - }; - canvas.draw(); -} diff --git a/src/modules/Mouse.js b/src/modules/Mouse.js deleted file mode 100644 index 0b8f922..0000000 --- a/src/modules/Mouse.js +++ /dev/null @@ -1,53 +0,0 @@ -class Mouse { - constructor(ct) { - this.ct = ct; - this.x = 0; - this.y = 0; - this.radius = 0.005; - this.show = false; - this.pressed = false; - this.onMove = null; - - window.addEventListener('mousemove', e => { - /* get current transform matrix */ - const matrix = this.ct.getTransform(); - matrix.invertSelf(); - - const x = e.offsetX; const y = e.offsetY; - this.x = matrix.a*x + matrix.b*y; - this.y = matrix.c*x + matrix.d*y; - - if (this.onMove) this.onMove(); - }); - - const root = document.getElementById('root'); - - root.addEventListener('mouseover', e => { - e = e ? e : window.event; - this.show = true; - }); - - root.addEventListener('mouseout', e => { - e = e ? e: window.event; - this.show = false; - }); - } - - render(ct) { - if (!this.show) return; - console.log(this.radius); - ct.save(); - - ct.strokeStyle = '#fff'; - - ct.beginPath(); - ct.arc(this.x, this.y, this.radius, 0, 2*Math.PI); - ct.closePath(); - ct.stroke(); - - ct.restore(); - } -} - - -export default Mouse; diff --git a/src/modules/Util.test.js b/src/modules/Util.test.js deleted file mode 100644 index 000d54e..0000000 --- a/src/modules/Util.test.js +++ /dev/null @@ -1,23 +0,0 @@ -import { test, assert} from './test-assert.js'; -import { useAverage } from './Util.js'; - - -test('Average correctly accumulates an average', () => { - let [avg, avg_append] = useAverage(); - let data = []; - for (let i=0; i<5000; i++) { - let d = Math.random(); - data.push(d); - avg_append(d); - } - - let manual_average = 0; - for (let d of data) manual_average += d; - manual_average /= data.length; - - const precision = (decimalPlaces, num) => { - const theta = 10**decimalPlaces; - return Math.floor(num * theta) / theta; - }; - assert.equal(precision(5, avg()), precision(5, manual_average)); -}); diff --git a/src/modules/test-assert.js b/src/test-assert.js index 7be2989..7be2989 100644 --- a/src/modules/test-assert.js +++ b/src/test-assert.js |