From 63af7b6db8ebd952d2336718b3655b873cdb58cb Mon Sep 17 00:00:00 2001
From: Gavin McDonald <gavinmcdoh@gmail.com>
Date: Fri, 19 Feb 2016 12:46:31 -0500
Subject: [PATCH] moving Tessellate towards more of a library structure

---
 src/main.js                        | 53 ++++++++++++++++++++++++++++--
 src/sketch.js                      |  9 +++--
 src/tessellate.js                  | 50 +++++++++-------------------
 src/tile.js                        |  5 ---
 src/tileCircle.js                  | 22 ++++++-------
 src/{tileHex.js => tileHexagon.js} | 46 +++++++++++++-------------
 src/tileSquare.js                  | 36 ++++++++++----------
 src/utils.js                       |  2 ++
 8 files changed, 126 insertions(+), 97 deletions(-)
 rename src/{tileHex.js => tileHexagon.js} (52%)

diff --git a/src/main.js b/src/main.js
index a047e0c..9f4ec19 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,54 @@
 
+import {random} from './utils.js';
+
 import Tessellate from './tessellate.js';
+import {TileCircle, TileHexagon, TileSquare} from './tessellate.js';
+import {Cell} from './tessellate.js';
 
-var tessellate = new Tessellate({
-	element: '#container'
-});
+class Demo {
+	constructor() {
+		['click', 'draw'].map(method => this[method] = this[method].bind(this));
+
+		this.map = [];
+
+		let tessellate = new Tessellate({
+			element: '#container',
+			click: this.click,
+			draw: this.draw
+		});
+
+		this.circle = new TileCircle();
+		this.square = new TileSquare();
+		this.hexagon = new TileHexagon();
+
+		this.tiles = ['circle', 'hexagon', 'square'];
+		this.styles = ['filled', 'outline'];
+	}
+
+	click(event) {
+		let x = event.pageX;
+		let y = event.pageY;
+		let scale = random(10, 50);
+
+		this.map.push(new Cell({
+			tile: this.tiles[random(this.tiles.length-1)],
+			style: this.styles[random(this.styles.length-1)],
+			name: 'gavin',
+			x,
+			y,
+			scale,
+			pointyTop: random(1) ? true : false,
+			red: random(255),
+			green: random(255),
+			blue: random(255),
+			alpha: random(25,75)/100
+		}));
+	}
+
+	draw(context) {
+		this.map.forEach(cell => this[cell.tile][cell.style](context, cell));
+	}
+}
+
+let demo = new Demo();
 
diff --git a/src/sketch.js b/src/sketch.js
index 6894595..a3570f7 100644
--- a/src/sketch.js
+++ b/src/sketch.js
@@ -1,7 +1,7 @@
 
 export default class Sketch {
 	constructor(settings) {
-		this.lastTime = null;
+		this.lastNow = null;
 
 		['getContext', 'onResize', 'render'].map(method => this[method] = this[method].bind(this));
 
@@ -28,9 +28,12 @@ export default class Sketch {
 	}
 
 	render(now) {
-		this.draw(this.context, now, this.lastTime);
+		this.context.now = now;
+		this.context.lastNow = this.lastNow;
 
-		this.lastTime = now;
+		this.draw(this.context);
+
+		this.lastNow = now;
 		requestAnimationFrame(this.render);
 	}
 }
diff --git a/src/tessellate.js b/src/tessellate.js
index b507069..f98c895 100644
--- a/src/tessellate.js
+++ b/src/tessellate.js
@@ -1,20 +1,24 @@
 
-import {random} from './utils.js';
+import {noop, random} from './utils.js';
 
 import OnTap from './onTap.js';
 import Point from './point.js';
 import Sketch from './sketch.js';
 
-import TileCircle from './tileCircle.js';
-import TileHex    from './tileHex.js';
-import TileSquare from './tileSquare.js';
+import TileCircle  from './tileCircle.js';
+import TileSquare  from './tileSquare.js';
+import TileHexagon from './tileHexagon.js';
+export {TileCircle, TileHexagon, TileSquare};
 
 import Cell from './cell.js';
+export {Cell};
 
 export default class Tessellate {
 	constructor(settings) {
-		['draw'].map(method => {this[method] = this[method].bind(this)});
+		['click', 'draw'].map(method => {this[method] = this[method].bind(this)});
 
+		this.drawCB = settings.draw || noop;
+		this.clickCB = settings.click || noop;
 		this.element = document.querySelector(settings.element);
 
 		this.sketch = new Sketch({
@@ -22,45 +26,23 @@ export default class Tessellate {
 			draw: this.draw
 		});
 
-		this.map = [];
-
 		this.onTap = new OnTap({
 			element: this.element,
-			click: (event) => {
-				let x = event.pageX;
-				let y = event.pageY;
-				let tiles = ['circle', 'hex', 'square'];
-				let styles = ['filled', 'outline'];
-				let scale = random(10, 50);
-
-				this.map.push(new Cell({
-					tile: tiles[random(tiles.length-1)],
-					style: styles[random(styles.length-1)],
-					name: 'gavin',
-					x,
-					y,
-					scale,
-					pointyTop: random(1) ? true : false,
-					red: random(255),
-					green: random(255),
-					blue: random(255),
-					alpha: 0.5
-				}));
-			}
+			click: this.click
 		});
-
-		this.circle  = new TileCircle({context: this.sketch.getContext()});
-		this.hex     = new TileHex({context: this.sketch.getContext()});
-		this.square  = new TileSquare({context: this.sketch.getContext()});
 	}
 
-	draw(context, now, lastTime) {
+	click(event) {
+		this.clickCB(event);
+	}
+
+	draw(context) {
 		let canvas = context.canvas;
 		let width = canvas.width;
 		let height = canvas.height;
 
 		context.clearRect(0, 0, width, height);
 
-		this.map.forEach(cell => this[cell.tile][cell.style](cell));
+		this.drawCB(context);
 	}
 }
diff --git a/src/tile.js b/src/tile.js
index d123178..6209115 100644
--- a/src/tile.js
+++ b/src/tile.js
@@ -1,11 +1,6 @@
 
 export default class Tile {
 	constructor(settings) {
-		this.context = settings.context || null;
-	}
-
-	setContext(newContext) {
-		this.context = newContext || this.context;
 	}
 }
 
diff --git a/src/tileCircle.js b/src/tileCircle.js
index 3ae2d69..b7532d4 100644
--- a/src/tileCircle.js
+++ b/src/tileCircle.js
@@ -6,19 +6,19 @@ export default class TileCircle extends Tile {
 		super(settings);
 	}
 
-	filled(cell) {
-		this.context.beginPath();
-		this.context.arc(cell.x, cell.y, cell.scale, 0, 2*Math.PI, false);
-		this.context.fillStyle = cell.getColor();
-		this.context.fill();
+	filled(context, cell) {
+		context.beginPath();
+		context.arc(cell.x, cell.y, cell.scale, 0, 2*Math.PI, false);
+		context.fillStyle = cell.getColor();
+		context.fill();
 	}
 
-	outline(cell) {
-		this.context.beginPath();
-		this.context.arc(cell.x, cell.y, cell.scale, 0, 2*Math.PI, false);
-		this.context.lineWidth = cell.width;
-		this.context.strokeStyle = cell.getColor();
-		this.context.stroke();
+	outline(context, cell) {
+		context.beginPath();
+		context.arc(cell.x, cell.y, cell.scale, 0, 2*Math.PI, false);
+		context.lineWidth = cell.width;
+		context.strokeStyle = cell.getColor();
+		context.stroke();
 	}
 }
 
diff --git a/src/tileHex.js b/src/tileHexagon.js
similarity index 52%
rename from src/tileHex.js
rename to src/tileHexagon.js
index 42c7b20..9e463e9 100644
--- a/src/tileHex.js
+++ b/src/tileHexagon.js
@@ -1,7 +1,7 @@
 
 import Tile from './tile.js';
 
-export default class TileHex extends Tile {
+export default class TileHexagon extends Tile {
 	constructor(settings) {
 		super(settings);
 
@@ -35,44 +35,44 @@ export default class TileHex extends Tile {
 		}
 	}
 
-	outline(cell) {
+	outline(context, cell) {
 		let x = cell.x;
 		let y = cell.y;
 		let scale = cell.scale;
 		let hexCornerX = cell.pointyTop ? this.pointyTopCornerX : this.flatTopCornerX;
 		let hexCornerY = cell.pointyTop ? this.pointyTopCornerY : this.flatTopCornerY;
 
-		this.context.beginPath();
-		this.context.moveTo(x + scale * hexCornerX[0], y + scale * hexCornerY[0]);
-		this.context.lineTo(x + scale * hexCornerX[1], y + scale * hexCornerY[1]);
-		this.context.lineTo(x + scale * hexCornerX[2], y + scale * hexCornerY[2]);
-		this.context.lineTo(x + scale * hexCornerX[3], y + scale * hexCornerY[3]);
-		this.context.lineTo(x + scale * hexCornerX[4], y + scale * hexCornerY[4]);
-		this.context.lineTo(x + scale * hexCornerX[5], y + scale * hexCornerY[5]);
-		this.context.closePath();
+		context.beginPath();
+		context.moveTo(x + scale * hexCornerX[0], y + scale * hexCornerY[0]);
+		context.lineTo(x + scale * hexCornerX[1], y + scale * hexCornerY[1]);
+		context.lineTo(x + scale * hexCornerX[2], y + scale * hexCornerY[2]);
+		context.lineTo(x + scale * hexCornerX[3], y + scale * hexCornerY[3]);
+		context.lineTo(x + scale * hexCornerX[4], y + scale * hexCornerY[4]);
+		context.lineTo(x + scale * hexCornerX[5], y + scale * hexCornerY[5]);
+		context.closePath();
 
-		this.context.lineWidth = cell.width;
-		this.context.strokeStyle = cell.getColor();
-		this.context.stroke();
+		context.lineWidth = cell.width;
+		context.strokeStyle = cell.getColor();
+		context.stroke();
 	}
 
-	filled(cell) {
+	filled(context, cell) {
 		let x = cell.x;
 		let y = cell.y;
 		let scale = cell.scale;
 		let hexCornerX = cell.pointyTop ? this.pointyTopCornerX : this.flatTopCornerX;
 		let hexCornerY = cell.pointyTop ? this.pointyTopCornerY : this.flatTopCornerY;
 
-		this.context.beginPath();
-		this.context.moveTo(x + scale * hexCornerX[0], y + scale * hexCornerY[0]);
-		this.context.lineTo(x + scale * hexCornerX[1], y + scale * hexCornerY[1]);
-		this.context.lineTo(x + scale * hexCornerX[2], y + scale * hexCornerY[2]);
-		this.context.lineTo(x + scale * hexCornerX[3], y + scale * hexCornerY[3]);
-		this.context.lineTo(x + scale * hexCornerX[4], y + scale * hexCornerY[4]);
-		this.context.lineTo(x + scale * hexCornerX[5], y + scale * hexCornerY[5]);
+		context.beginPath();
+		context.moveTo(x + scale * hexCornerX[0], y + scale * hexCornerY[0]);
+		context.lineTo(x + scale * hexCornerX[1], y + scale * hexCornerY[1]);
+		context.lineTo(x + scale * hexCornerX[2], y + scale * hexCornerY[2]);
+		context.lineTo(x + scale * hexCornerX[3], y + scale * hexCornerY[3]);
+		context.lineTo(x + scale * hexCornerX[4], y + scale * hexCornerY[4]);
+		context.lineTo(x + scale * hexCornerX[5], y + scale * hexCornerY[5]);
 
-		this.context.fillStyle = cell.getColor();
-		this.context.fill();
+		context.fillStyle = cell.getColor();
+		context.fill();
 	}
 }
 
diff --git a/src/tileSquare.js b/src/tileSquare.js
index 3af78de..f2a21cc 100644
--- a/src/tileSquare.js
+++ b/src/tileSquare.js
@@ -13,40 +13,40 @@ export default class TileSquare extends Tile {
 		this.diamondY = [0, -sqrt2, 0, sqrt2];
 	}
 
-	filled(cell) {
+	filled(context, cell) {
 		let x = cell.x;
 		let y = cell.y;
 		let scale = cell.scale;
 		let squareCornerX = cell.pointyTop ? this.diamondX : this.squareX;
 		let squareCornerY = cell.pointyTop ? this.diamondY : this.squareY;
 
-		this.context.beginPath();
-		this.context.moveTo(x + scale * squareCornerX[0], y + scale * squareCornerY[0]);
-		this.context.lineTo(x + scale * squareCornerX[1], y + scale * squareCornerY[1]);
-		this.context.lineTo(x + scale * squareCornerX[2], y + scale * squareCornerY[2]);
-		this.context.lineTo(x + scale * squareCornerX[3], y + scale * squareCornerY[3]);
+		context.beginPath();
+		context.moveTo(x + scale * squareCornerX[0], y + scale * squareCornerY[0]);
+		context.lineTo(x + scale * squareCornerX[1], y + scale * squareCornerY[1]);
+		context.lineTo(x + scale * squareCornerX[2], y + scale * squareCornerY[2]);
+		context.lineTo(x + scale * squareCornerX[3], y + scale * squareCornerY[3]);
 
-		this.context.fillStyle = cell.getColor();
-		this.context.fill();
+		context.fillStyle = cell.getColor();
+		context.fill();
 	}
 
-	outline(cell) {
+	outline(context, cell) {
 		let x = cell.x;
 		let y = cell.y;
 		let scale = cell.scale;
 		let squareCornerX = cell.pointyTop ? this.diamondX : this.squareX;
 		let squareCornerY = cell.pointyTop ? this.diamondY : this.squareY;
 
-		this.context.beginPath();
-		this.context.moveTo(x + scale * squareCornerX[0], y + scale * squareCornerY[0]);
-		this.context.lineTo(x + scale * squareCornerX[1], y + scale * squareCornerY[1]);
-		this.context.lineTo(x + scale * squareCornerX[2], y + scale * squareCornerY[2]);
-		this.context.lineTo(x + scale * squareCornerX[3], y + scale * squareCornerY[3]);
-		this.context.closePath();
+		context.beginPath();
+		context.moveTo(x + scale * squareCornerX[0], y + scale * squareCornerY[0]);
+		context.lineTo(x + scale * squareCornerX[1], y + scale * squareCornerY[1]);
+		context.lineTo(x + scale * squareCornerX[2], y + scale * squareCornerY[2]);
+		context.lineTo(x + scale * squareCornerX[3], y + scale * squareCornerY[3]);
+		context.closePath();
 
-		this.context.lineWidth = cell.width;
-		this.context.strokeStyle = cell.getColor();
-		this.context.stroke();
+		context.lineWidth = cell.width;
+		context.strokeStyle = cell.getColor();
+		context.stroke();
 	}
 }
 
diff --git a/src/utils.js b/src/utils.js
index 499f0e1..3cfc085 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,4 +1,6 @@
 
+export function noop() {};
+
 export function throttleEvent(type, name, obj) {
 	obj = obj || window;
 	let running = false;