diff options
| -rw-r--r-- | src/Canvas.js | 4 | ||||
| -rw-r--r-- | src/Terrain.js (renamed from src/modules/Terrain.js) | 8 | ||||
| -rw-r--r-- | src/main.js | 30 |
3 files changed, 28 insertions, 14 deletions
diff --git a/src/Canvas.js b/src/Canvas.js index 7f6404b..6dff7bd 100644 --- a/src/Canvas.js +++ b/src/Canvas.js @@ -22,6 +22,8 @@ class Canvas { /* callbacks */ this.onDraw = null; this.onMouseMove = null; + this.onMouseDown = null; + this.onMouseUp = null; /* register event listeners */ @@ -53,9 +55,11 @@ class Canvas { this.element.addEventListener('mousedown', e => { e.preventDefault(); if (e.button === 1) this.panning = true; + if (this.onMouseDown) this.onMouseDown(e); }); this.element.addEventListener('mouseup', e => { if (e.button === 1) this.panning = false; + if (this.onMouseUp) this.onMouseUp(e); }); /* mouse leave */ diff --git a/src/modules/Terrain.js b/src/Terrain.js index 21908ac..c287063 100644 --- a/src/modules/Terrain.js +++ b/src/Terrain.js @@ -2,8 +2,8 @@ import Voronoi from './3rdparty/rhill-voronoi-core.js'; -import { useAverage } from './Util.js'; -import { AABB, QuadTree } from './Geometry.js'; +import { useAverage } from './modules/Util.js'; +import { AABB, QuadTree } from './modules/Geometry.js'; /* from here on up, we always assume that points live in the range [(0,0), (1,1)) */ @@ -66,7 +66,7 @@ class Terrain { this.tree = new QuadTree(1,1); for (let v of this.graph.vertices) { - v.height = 0; + v.hue = 0; this.tree.insert(v); } } @@ -91,7 +91,7 @@ class Terrain { ct.save(); ct.lineWidth = 0.001; for (let edge of this.graph.edges) { - ct.fillStyle = `hsl(${edge.va.height}, 100%, 50%)`; + ct.fillStyle = `hsl(${edge.va.hue}, 100%, 50%)`; ct.beginPath(); ct.arc(edge.va.x, edge.va.y, 0.005, 0, 2*Math.PI); ct.closePath(); diff --git a/src/main.js b/src/main.js index d618d05..4527a90 100644 --- a/src/main.js +++ b/src/main.js @@ -1,27 +1,37 @@ +import Terrain from './Terrain.js'; import Canvas from './Canvas.js'; const $ = id => document.getElementById(id) window.onload = () => { const canvas = new Canvas('root'); + const terrain = new Terrain(); + + const BRUSH_RADIUS = 80; + 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 = () => canvas.draw(); + canvas.onMouseMove = () => { + if (brushing) + terrain.applyBrush(pos.x, pos.y, (pt, strength) => { + pt.hue += 10 * strength; + }, 1, canvas.pixelsToUnits(BRUSH_RADIUS)); + canvas.draw(); + }; canvas.onDraw = ct => { - ct.fillStyle = '#f00'; - ct.fillRect(0, 0, 1/3, 1/3); - ct.fillStyle = '#0f0'; - ct.fillRect(2/3, 0, 1/3, 1/3); - ct.fillStyle = '#ff0'; - ct.fillRect(0, 2/3, 1/3, 1/3); - ct.fillStyle = '#00f'; - ct.fillRect(2/3, 2/3, 1/3, 1/3); + terrain.renderGrid(ct); ct.strokeStyle = '#fff'; ct.lineWidth = canvas.pixelsToUnits(1); ct.beginPath(); - ct.arc(pos.x, pos.y, canvas.pixelsToUnits(30), 0, 2*Math.PI); + ct.arc(pos.x, pos.y, canvas.pixelsToUnits(BRUSH_RADIUS), 0, 2*Math.PI); ct.closePath(); ct.stroke(); }; |