tessellating flat top squares properly

src/tessellate.js

@@ -34,6 +34,7 @@ export default class Tessellate {
 			click: this.click
 		});
 
+		this.map = [];
 		this.xyz = new ExWhyZee({
 			pointyTop: true,
 			originX: this.sketch.getContext().canvas.width / 2,
@@ -41,6 +42,7 @@ export default class Tessellate {
 		});
 
 		this.circle = new DrawCircle();
+		this.hexagon = new DrawHexagon();
 	}
 
 	click(event) {
@@ -61,15 +63,22 @@ export default class Tessellate {
 				let hex = hexagons[r][c];
 				let hexPoint = this.xyz.hexToPixel(hex);
 
-				this.circle.outline(context, new Cell({
-					x: hexPoint.getX(),
-					y: hexPoint.getY(),
-					red: utils.random(255),
-					green: utils.random(255),
-					blue: utils.random(255),
-					alpha: utils.random(25, 75) / 100,
-					scale: scale * 0.8
-				}));
+				if (!this.map[hex.getX()]) this.map[hex.getX()] = [];
+
+				if (!this.map[hex.getX()][hex.getY()]) {
+					this.map[hex.getX()][hex.getY()] = new Cell({
+						x: hexPoint.getX(),
+						y: hexPoint.getY(),
+						pointyTop: true,
+						red: utils.random(255),
+						green: utils.random(255),
+						blue: utils.random(255),
+						alpha: utils.random(25, 75) / 100,
+						scale: scale * utils.random(5,9)/10
+					});
+				}
+
+				this.hexagon.filled(context, this.map[hex.getX()][hex.getY()]);
 
 //				let cell = map.getXY(hex.getX(), hex.getY());
 //