Start at Zero (#6)

src/main.js

@@ -14,19 +14,21 @@ const DEFAULTS = {
 class Demo {
 	constructor() {
 		[
+			'setOriginTile',
 			'onTap',
 			'createTile',
 			'drawTile',
 			'draw',
 		].map(method => this[method] = this[method].bind(this));
 
-		this.map = {};
-		this.taps = [];
-
 		const queryStringObj = utils.getQueryStringObj();
 
 		this.settings = Object.assign({}, DEFAULTS, queryStringObj);
 
+		this.map = {};
+		this.taps = [];
+		this.setOriginTile();
+
 		this.tessellate = new Tessellate(Object.assign({
 			element: '#container',
 			tap: this.onTap,
@@ -41,6 +43,38 @@ class Demo {
 		this.styles = ['filled', 'outline'];
 	}
 
+	setOriginTile() {
+		this.map['0,0'] = new Cell({
+			x: 0,
+			y: 0,
+			scale: 1,
+			drawStyle: Tessellate.DRAW_STYLES.FILL,
+			tileStyle: this.settings.tile,
+			orientation: this.settings.orientation,
+			red: 255,
+			green: 255,
+			blue: 0,
+			alpha: 1,
+		});
+
+		utils.rangeInclusive(0, 5)
+		.map(interval => interval ? interval * 0.2 : 0.01)
+		.forEach(interval => {
+			this.taps.push(new Cell({
+				x: 0,
+				y: 0,
+				scale: interval,
+				drawStyle: Tessellate.DRAW_STYLES.OUTLINE,
+				tileStyle: this.settings.tile,
+				orientation: this.settings.orientation,
+				red: 0,
+				green: 0,
+				blue: 0,
+				alpha: 1,
+			}));
+		});
+	}
+
 	onTap(tap) {
 		console.log(tap.tile.getPoint());