add basic canvas object

2 files changed, 61 insertions, 34 deletions

diff --git a/src/Canvas.js b/src/Canvas.js
new file mode 100644
index 0000000..590034a
--- /dev/null
+++ b/src/Canvas.js
@@ -0,0 +1,47 @@
+class Canvas {
+	constructor(rootId) {
+		const root = document.getElementById(rootId);
+
+		this.element = document.createElement('canvas');
+		this.context = this.element.getContext('2d');
+		this.fillWindow();
+		window.addEventListener('resize', () => this.fillWindow());
+
+		root.appendChild(this.element);
+
+		this.ondraw = null;
+
+		/* automatically compute drawing-space mouse coordinates */
+		this.mousePos = { x: 0, y: 0 };
+		this.onmousemove = null;
+		this.element.addEventListener('mousemove', e => {
+			const matrix = this.context.getTransform();
+			matrix.invertSelf();
+
+			const screenX = e.offsetX; const screenY = e.offsetY;
+			this.mousePos.x = matrix.a*screenX + matrix.b*screenY;
+			this.mousePos.y = matrix.c*screenX + matrix.d*screenY;
+
+			if (this.onmousemove) this.onmousemove(this.mousePos);
+		});
+
+	}
+
+	fillWindow() {
+		const width = window.innerWidth;
+		const height = window.innerHeight;
+		const scale = Math.max(width, height);
+
+		this.element.width = width; this.element.height = height;
+		this.context.scale(scale, scale);
+
+		this.draw();
+	}
+
+	draw() {
+		this.context.clearRect(0, 0, 1, 1);
+		if (this.ondraw) this.ondraw(this.context);
+	}
+}
+
+export default Canvas;
diff --git a/src/main.js b/src/main.js
index ade4e27..40c3f83 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,42 +1,22 @@
-import Voronoi from './modules/3rdparty/rhill-voronoi-core.js';
-import Terrain from './modules/Terrain.js';
-import Mouse from './modules/Mouse.js';
+import Canvas from './Canvas.js';
 
 const $ = id => document.getElementById(id)
 
 window.onload = () => {
-	let canvas = document.createElement('canvas');
-	const ct = canvas.getContext('2d');
+	const canvas = new Canvas('root');
 
-	let render;
-
-	let mouse = new Mouse(ct);
-
-	const setCanvasSize = () => {
-		canvas.setAttribute('width', window.innerWidth);
-		canvas.setAttribute('height', window.innerHeight);
-		const scale = Math.max(canvas.width, canvas.height);
-		ct.scale(scale, scale);
-		render();
-	};
-	window.addEventListener('resize', setCanvasSize);
+	const pos = canvas.mousePos;
+	canvas.onmousemove = () => canvas.draw();
+	
+	canvas.ondraw = ct => {
+		ct.fillRect(0, 0, 0.5, 0.5);
 
-	const terrain = new Terrain();
-	render = () => {
-		ct.clearRect(0, 0, 1, 1);
-		terrain.renderGrid(ct);
-		mouse.render(ct);
+		ct.strokeStyle = '#fff';
+		ct.lineWidth = 0.001;
+		ct.beginPath();
+		ct.arc(pos.x, pos.y, 0.1, 0, 2*Math.PI);
+		ct.closePath();
+		ct.stroke();
 	};
-	mouse.onMove = () => {
-		terrain.applyBrush(mouse.x, mouse.y, (pt, strength) => {
-			const lerp = (a, b, theta) => ((theta-1)*a) + (theta*b);
-			pt.height = lerp(pt.height, pt.height + 10, strength);
-		}, 1, mouse.radius);
-		render();
-	}
-
-	setCanvasSize();
-	
-	const root = $('root');
-	root.appendChild(canvas);
+	canvas.draw();
 }