moving Tessellate towards more of a library structure

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