[*] providing tilePoint/pixelPoint pairs to client draw function

src/main.js

@@ -220,7 +220,11 @@ class Demo {
 		return tile;
 	}
 
-	drawTile({x, y, z}, context, scale) {
+	drawTile(pointGroup, context, scale) {
+		const {x, y, z} = pointGroup.tilePoint;
+		const pixelX = pointGroup.pixelPoint.getX();
+		const pixelY = pointGroup.pixelPoint.getY();
+
 		this.counts[0] += 1;
 
 		const key = `${ x },${ z != null ? z : y }`;
@@ -233,16 +237,15 @@ class Demo {
 		});
 
 		let tile = this.map[key];
-		const pixelPoint = this.tessellate.tileToPixel(x, y, z);
 
 		const fadeFactor = this.gray ? Math.min((Date.now() - this.gray) / 5000, 1) : null;
 		tile = this.gray ? this.fadeToGray(tile, fadeFactor) : tile;
 
-		Tessellate.TILES[tile.tileStyle][tile.drawStyle](context, scale, pixelPoint.getX(), pixelPoint.getY(), tile);
+		Tessellate.TILES[tile.tileStyle][tile.drawStyle](context, scale, pixelX, pixelY, tile);
 
 		if (this.mined) {
 			this.counts[2] += 1;
-			Tessellate.Shapes.mine(context, scale, pixelPoint.getX(), pixelPoint.getY());
+			Tessellate.Shapes.mine(context, scale, pixelX, pixelY);
 		}
 		else {
 			if (!tile.pips && this.pipDefault !== null) {
@@ -257,12 +260,12 @@ class Demo {
 
 			if (tile.pips) {
 				this.counts[1] += tile.pips;
-				Tessellate.Shapes.pips(context, scale, pixelPoint.getX(), pixelPoint.getY(), tile);
+				Tessellate.Shapes.pips(context, scale, pixelX, pixelY, tile);
 			}
 		}
 	}
 
-	draw({context, height, width, scale, tilePoints, now, lastNow}) {
+	draw({context, height, width, scale, pointGroups, now, lastNow}) {
 		this.counts = [
 			0, // tiles
 			0, // pips
@@ -275,7 +278,7 @@ class Demo {
 			blue: 128,
 		});
 
-		tilePoints.forEach(tilePoint => this.drawTile(tilePoint, context, scale));
+		pointGroups.forEach(pointGroup => this.drawTile(pointGroup, context, scale));
 
 		this.ripples.forEach(({timestamp, cell}) => {
 			const pressFactor = Math.min((now - timestamp) / PRESS_RIPPLE, 1);

src/tessellate.js

@@ -224,6 +224,16 @@ export class Tessellate {
 		const height = canvas.height;
 		const width = canvas.width;
 
+		const corners = {
+			upperLeftX: 0,
+			upperLeftY: 0,
+			lowerRightX: width,
+			lowerRightY: height
+		};
+
+		const pointGroups = this.getTilePoints(corners)
+		.map(tilePoint => ({tilePoint, pixelPoint: this.tileToPixel(tilePoint)}));
+
 		this.settings.draw({
 			context,
 
@@ -233,12 +243,7 @@ export class Tessellate {
 			lastNow: context.lastUTC,
 			now: context.utc,
 
-			tilePoints: this.getTilePoints({
-				upperLeftX: 0,
-				upperLeftY: 0,
-				lowerRightX: width,
-				lowerRightY: height
-			}),
+			pointGroups,
 		});
 	}