summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/Canvas.js4
-rw-r--r--src/Terrain.js (renamed from src/modules/Terrain.js)8
-rw-r--r--src/main.js30
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();
};