pointy top squares

src/cartographerXY.js

@@ -55,10 +55,10 @@ export default class CartographerXY extends Cartographer {
 
 		const minWidth = (a) => this.minWidth() * a;
 
-		const maxWidth = (a) => this.maxWidth() * a;
+		const maxWidth = (a, b) => (this.maxWidth() * a) + ((b % 2) * (this.maxWidth() / 2));
 
-		let pixelX = this.pointyTop ? maxWidth(square.getX()) : minWidth(square.getX());
-		let pixelY = this.pointyTop ? maxWidth(square.getY()) : minWidth(square.getY());
+		let pixelX = this.pointyTop ? maxWidth(square.getX(), square.getY()) : minWidth(square.getX());
+		let pixelY = this.pointyTop ? (this.maxWidth() / 2) * square.getY() : minWidth(square.getY());
 
 		pixelX += this.originX;
 		pixelY += this.originY;
@@ -69,7 +69,7 @@ export default class CartographerXY extends Cartographer {
 	pixelToTile(point) {
 		let scale = this.scale;
 
-		const radiusLong = a => a / this.maxWidth();
+		const radiusLong = a => (a / (this.maxWidth() / 2));
 		const radiusShort = a => a / this.minWidth();
 
 		let pixelX = point.getX() - this.originX;
@@ -96,7 +96,7 @@ export default class CartographerXY extends Cartographer {
 			for (let row = 0; row <= height; row++) {
 				tiles[row] = [];
 				let y = upperLeftTile.getY() + row;
-				let xOffset = upperLeftTile.getX();
+				let xOffset = upperLeftTile.getX() - (row % 2);
 
 				for (let x = xOffset; x <= xOffset + width; x++) {
 					tiles[row].push(new Square(x, y));

src/cartographerXYZ.js

@@ -114,7 +114,7 @@ export default class CartographerXYZ extends Cartographer {
 	}
 
 	boundingBox(upperLeftPoint, lowerRightPoint) {
-		let hexagons = [];
+		let tiles = [];
 		let upperRightPoint = new Point(lowerRightPoint.getX(), upperLeftPoint.getY());
 
 		// push out by a 1 axially to account for interlocking hexagons
@@ -128,28 +128,28 @@ export default class CartographerXYZ extends Cartographer {
 
 		if (this.pointyTop) {
 			for (let row = 0; row <= height; row++) {
-				hexagons[row] = [];
+				tiles[row] = [];
 				let r = upperLeftTile.getR() + row;
 				let qOffset = upperLeftTile.getQ() - Math.floor(row / 2);
 
 				for (let q = qOffset; q <= qOffset + width; q++) {
-					hexagons[row].push(new Hex(q, r));
+					tiles[row].push(new Hex(q, r));
 				}
 			}
 		}
 		else {
 			for (let col = 0; col <= width; col++) {
-				hexagons[col] = [];
+				tiles[col] = [];
 				let q = upperLeftTile.getQ() + col;
 				let rOffset = upperLeftTile.getR() - Math.floor(col / 2);
 
 				for (let r = rOffset; r <= rOffset + height; r++) {
-					hexagons[col].push(new Hex(q, r));
+					tiles[col].push(new Hex(q, r));
 				}
 			}
 		}
 
-		return hexagons;
+		return tiles;
 	}
 }
 

src/main.js

@@ -13,8 +13,8 @@ class Demo {
 
 		let tessellate = new Tessellate({
 			element: '#container',
-			board: Tessellate.BOARD_STYLES.HEX,
-			tile: Tessellate.TILE_STYLES.CIRCLE,
+			board: Tessellate.BOARD_STYLES.SQUARE,
+			tile: Tessellate.TILE_STYLES.SQUARE,
 			tap: this.onTap,
 			draw: this.draw,
 			pointyTop: false, //utils.random(1) ? true : false,

src/tessellate.js

@@ -118,7 +118,7 @@ export default class Tessellate {
 						green: utils.random(255),
 						blue: utils.random(255),
 						alpha: utils.random(25, 75) / 100,
-						scale: utils.random(5,9)/10
+						scale: utils.random(6,9)/10
 					});
 				}