add basic color brushing demo

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