From d3540ed11708ec250c51c61cdc7b70f6a095dcbf Mon Sep 17 00:00:00 2001 From: Gavin McDonald Date: Fri, 6 Jul 2018 12:00:58 -0400 Subject: [PATCH] cleaned up computation for hex bounding box --- src/cartographerXYZ.js | 78 +++++++++++++----------------------------- src/main.js | 6 ++-- src/tessellate.js | 4 +-- 3 files changed, 29 insertions(+), 59 deletions(-) diff --git a/src/cartographerXYZ.js b/src/cartographerXYZ.js index e02e926..19c1b82 100644 --- a/src/cartographerXYZ.js +++ b/src/cartographerXYZ.js @@ -1,6 +1,6 @@ import Cartographer from './cartographer.js'; -import {sqrt3, extend} from './utils.js'; +import {extend, rangeInclusive, sqrt3} from './utils.js'; import Hex from './hex.js'; import Point from './point.js'; @@ -26,29 +26,6 @@ export default class CartographerXYZ extends Cartographer { 'pixelToTile', 'boundingBox', ].map(method => this[method] = this[method].bind(this)); - - this.pointyTop = settings.pointyTop; - - // in pixels - this.originX = 0; - this.originY = 0; - - // in pixels - this.scale = 25; - this.scaleMin = 10; - this.scaleMax = 250; - - // in cells - this.width = 0; - this.height = 0; - - extend(this, settings); - - this.originX = parseInt(this.originX); - this.originY = parseInt(this.originY); - - this.width = parseInt(this.width); - this.height = parseInt(this.height); } maxWidth() { @@ -113,43 +90,36 @@ export default class CartographerXYZ extends Cartographer { return new Hex(q, r); } - boundingBox(upperLeftPoint, lowerRightPoint) { - let tiles = []; - let upperRightPoint = new Point(lowerRightPoint.getX(), upperLeftPoint.getY()); - - // push out by a 1 axially to account for interlocking hexagons - // possibly return hexagons not within bounds - let upperLeftTile = this.pixelToTile(upperLeftPoint).moveAxial({q: 0, r: -1}); - let lowerRightTile = this.pixelToTile(lowerRightPoint).moveAxial({q: 0, r: 1}); - let upperRightTile = this.pixelToTile(upperRightPoint).moveAxial({q: 1, r: -1}); - - let height = lowerRightTile.getR() - upperRightTile.getR(); - let width = upperRightTile.getQ() - upperLeftTile.getQ(); + boundingBox(upperLeftPoint, upperRightPoint, lowerLeftPoint, lowerRightPoint) { + const upperLeftTile = this.pixelToTile(upperLeftPoint); + const lowerLeftTile = this.pixelToTile(lowerLeftPoint); + const lowerRightTile = this.pixelToTile(lowerRightPoint); + const upperRightTile = this.pixelToTile(upperRightPoint); if (this.pointyTop) { - for (let row = 0; row <= height; row++) { - tiles[row] = []; - let r = upperLeftTile.getR() + row; - let qOffset = upperLeftTile.getQ() - Math.floor(row / 2); + const rows = rangeInclusive(upperLeftTile.getR() -1 , lowerLeftTile.getR() + 1); - for (let q = qOffset; q <= qOffset + width; q++) { - tiles[row].push(new Hex(q, r)); - } - } + const width = upperRightTile.getQ() - upperLeftTile.getQ(); + return rows.map((r, index) => { + const left = upperLeftTile.getQ() - Math.floor(index / 2); + const right = left + width; + const columns = rangeInclusive(left, right + 1); + + return columns.map(q => new Hex(q, r)); + }); } else { - for (let col = 0; col <= width; col++) { - tiles[col] = []; - let q = upperLeftTile.getQ() + col; - let rOffset = upperLeftTile.getR() - Math.floor(col / 2); + const columns = rangeInclusive(upperLeftTile.getQ() - 1, upperRightTile.getQ() + 1); - for (let r = rOffset; r <= rOffset + height; r++) { - tiles[col].push(new Hex(q, r)); - } - } + const height = lowerRightTile.getR() - upperRightTile.getR(); + return columns.map((q, index) => { + const top = upperLeftTile.getR() - Math.floor(index / 2); + const bottom = top + height; + const rows = rangeInclusive(top, bottom + 1); + + return rows.map(r => new Hex(q, r)); + }); } - - return tiles; } } diff --git a/src/main.js b/src/main.js index de71f96..dc62fc2 100644 --- a/src/main.js +++ b/src/main.js @@ -13,11 +13,11 @@ class Demo { let tessellate = new Tessellate({ element: '#container', - board: Tessellate.BOARD_STYLES.SQUARE, - tile: Tessellate.TILE_STYLES.SQUARE, + board: Tessellate.BOARD_STYLES.HEX, + tile: Tessellate.TILE_STYLES.HEX, tap: this.onTap, draw: this.draw, - pointyTop: true, //utils.random(1) ? true : false, + pointyTop: false, //utils.random(1) ? true : false, }); this.circle = new DrawCircle(); diff --git a/src/tessellate.js b/src/tessellate.js index 9c9e4ad..9bfef38 100644 --- a/src/tessellate.js +++ b/src/tessellate.js @@ -145,9 +145,9 @@ export default class Tessellate { drawMap(context) { const scale = this.cartographer.getScale(); - const upperLeft = new Point(0, 0); + const upperLeft = new Point(0, 0); const upperRight = new Point(context.canvas.width, 0); - const lowerLeft = new Point(0, context.canvas.height); + const lowerLeft = new Point(0, context.canvas.height); const lowerRight = new Point(context.canvas.width, context.canvas.height); const tiles = this.cartographer.boundingBox(upperLeft, upperRight, lowerLeft, lowerRight);