tessellating flat top squares properly

src/exWhyZee.js

@@ -122,16 +122,29 @@ export default class ExWhyZee {
 		let lowerRightHex = this.pixelToHex(lowerRightPoint).moveAxial({q: 0, r: 1});
 		let upperRightHex = this.pixelToHex(upperRightPoint).moveAxial({q: 1, r: -1});
 
-		let height = lowerRightHex.getR() - upperLeftHex.getR();
+		let height = lowerRightHex.getR() - upperRightHex.getR();
 		let width = upperRightHex.getQ() - upperLeftHex.getQ();
 
-		for (let row = 0; row <= height; row++) {
+		if (this.pointyTop) {
-			hexagons[row] = [];
+			for (let row = 0; row <= height; row++) {
-			let r = upperLeftHex.getR() + row;
+				hexagons[row] = [];
-			let qOffset = upperLeftHex.getQ() - Math.floor(row / 2);
+				let r = upperLeftHex.getR() + row;
+				let qOffset = upperLeftHex.getQ() - Math.floor(row / 2);
 
-			for (let q = qOffset; q <= qOffset + width; q++) {
+				for (let q = qOffset; q <= qOffset + width; q++) {
-				hexagons[row].push(new Hex(q, r));
+					hexagons[row].push(new Hex(q, r));
+				}
+			}
+		}
+		else {
+			for (let col = 0; col <= width; col++) {
+				hexagons[col] = [];
+				let q = upperLeftHex.getQ() + col;
+				let rOffset = upperLeftHex.getR() - Math.floor(col / 2);
+
+				for (let r = rOffset; r <= rOffset + height; r++) {
+					hexagons[col].push(new Hex(q, r));
+				}
 			}
 		}
 

src/hex.js

@@ -9,14 +9,14 @@ function computeY(x, z) {
 //   round off coords
 //   throw out whichever one changed the most
 //   re-establish "x + y + z = 0"
-function roundOff(x, y, z) {
+function roundOff(hex) {
-	let rX = Math.round(x);
+	let rX = Math.round(hex.x);
-	let rY = Math.round(y);
+	let rY = Math.round(hex.y);
-	let rZ = Math.round(z);
+	let rZ = Math.round(hex.z);
 
-	let xDiff = Math.abs(rX - x);
+	let xDiff = Math.abs(rX - hex.x);
-	let yDiff = Math.abs(rY - y);
+	let yDiff = Math.abs(rY - hex.y);
-	let zDiff = Math.abs(rZ - z);
+	let zDiff = Math.abs(rZ - hex.z);
 
 	if ((xDiff > yDiff) && (xDiff > zDiff)) {
 		rX = -rY-rZ;
@@ -28,11 +28,11 @@ function roundOff(x, y, z) {
 		rZ = -rX-rY;
 	}
 
-	x = rX === -0 ? 0 : rX;
+	hex.x = rX === -0 ? 0 : rX;
-	y = rY === -0 ? 0 : rY;
+	hex.y = rY === -0 ? 0 : rY;
-	z = rZ === -0 ? 0 : rZ;
+	hex.z = rZ === -0 ? 0 : rZ;
 
-	return {x, y, z};
+	return hex;
 }
 
 export default class Hex extends Point {
@@ -51,7 +51,7 @@ export default class Hex extends Point {
 			this.z = arguments[2];
 		}
 
-		roundOff(this.x, this.y, this.z);
+		roundOff(this);
 	}
 
 	getX() {return this.x;}

src/main.js

@@ -42,6 +42,7 @@ class Demo {
 			blue: utils.random(255),
 			alpha: utils.random(25,75)/100
 		}));
+		console.log(this.map[this.map.length - 1]);
 	}
 
 	draw(context) {

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({
+				if (!this.map[hex.getX()]) this.map[hex.getX()] = [];
-					x: hexPoint.getX(),
+
-					y: hexPoint.getY(),
+				if (!this.map[hex.getX()][hex.getY()]) {
-					red: utils.random(255),
+					this.map[hex.getX()][hex.getY()] = new Cell({
-					green: utils.random(255),
+						x: hexPoint.getX(),
-					blue: utils.random(255),
+						y: hexPoint.getY(),
-					alpha: utils.random(25, 75) / 100,
+						pointyTop: true,
-					scale: scale * 0.8
+						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());
 //