diff --git a/public/index.html b/public/index.html
index c369669..0c05541 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,7 +2,7 @@
-
+
Tessellate
diff --git a/src/drawHexagon.js b/src/drawHexagon.js
index 8f1cbed..4f16160 100644
--- a/src/drawHexagon.js
+++ b/src/drawHexagon.js
@@ -1,35 +1,65 @@
-import {POINTY} from './consts.js';
+import {FLAT, POINTY} from './consts.js';
+import {range, toFixed} from './utils.js';
+
+const DEFAULTS = {
+ pipScale: 0.05,
+ pipDistance: 0.4,
+};
export default class DrawHexagon {
constructor(settings) {
+ this.settings = Object.assign({}, DEFAULTS, settings);
+
this.flatTopCornerX = [];
this.flatTopCornerY = [];
this.pointyTopCornerX = [];
this.pointyTopCornerY = [];
- // dice dots, 0,0 is center
- // TODO: if pointy: [0].concat(flatTop), if flat: [0].concat(pointy)
-// this.hexDotX = [0];
-// this.hexDotY = [0];
+ const hexSides = 6;
+ const hexSlices = 24;
- let hexSides = 6;
- let hexSlices = 24;
- for (let hexSlice = 0; hexSlice < hexSlices; hexSlice++) {
- let x = parseInt(Math.cos(((hexSlice / hexSlices) * hexSides) * (2 * Math.PI) / hexSides) * 1000) / 1000;
- let y = parseInt(Math.sin(((hexSlice / hexSlices) * hexSides) * (2 * Math.PI) / hexSides) * 1000) / 1000;
+ range(hexSlices).forEach(hexSlice => {
+ const x = toFixed(Math.cos(((hexSlice / hexSlices) * hexSides) * (2 * Math.PI) / hexSides));
+ const y = toFixed(Math.sin(((hexSlice / hexSlices) * hexSides) * (2 * Math.PI) / hexSides));
if ((hexSlice % 4) === 0) {
- let cur = hexSlice / 4;
+ const cur = hexSlice / 4;
this.flatTopCornerX[cur] = x;
this.flatTopCornerY[cur] = y;
}
if (((hexSlice-2) % 4) === 0) {
- let cur = (hexSlice-2) / 4;
+ const cur = (hexSlice-2) / 4;
this.pointyTopCornerX[cur] = x;
this.pointyTopCornerY[cur] = y;
}
- }
+ });
+
+ this.hexPips = {};
+ this.hexPips[FLAT] = [];
+ this.hexPips[POINTY] = [];
+
+ const getFlatVertex = ([x, y]) => [x ? this.flatTopCornerX[x - 1] : 0, y ? this.flatTopCornerY[y - 1] : 0];
+
+ // start with 0,0 as center
+ this.hexPips[FLAT][1] = [[0, 0]].map(getFlatVertex);
+ this.hexPips[FLAT][2] = [[1, 1], [4, 4]].map(getFlatVertex);
+ this.hexPips[FLAT][3] = [[1, 1], [3, 3], [5, 5]].map(getFlatVertex);
+ this.hexPips[FLAT][4] = [[0, 0], [2, 2], [4, 4], [6, 6]].map(getFlatVertex);
+ this.hexPips[FLAT][5] = [[0, 0], [2, 2], [3, 3], [5, 5], [6, 6]].map(getFlatVertex);
+ this.hexPips[FLAT][6] = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6]].map(getFlatVertex);
+ this.hexPips[FLAT][7] = [[0, 0], [1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6]].map(getFlatVertex);
+
+ const getPointyVertex = ([x, y]) => [x ? this.pointyTopCornerX[x - 1] : 0, y ? this.pointyTopCornerY[y - 1] : 0];
+
+ // start with 0,0 as center
+ this.hexPips[POINTY][1] = [[0, 0]].map(getPointyVertex);
+ this.hexPips[POINTY][2] = [[2, 2], [5, 5]].map(getPointyVertex);
+ this.hexPips[POINTY][3] = [[1, 1], [3, 3], [5, 5]].map(getPointyVertex);
+ this.hexPips[POINTY][4] = [[0, 0], [2, 2], [4, 4], [6, 6]].map(getPointyVertex);
+ this.hexPips[POINTY][5] = [[0, 0], [1, 1], [3, 3], [4, 4], [6, 6]].map(getPointyVertex);
+ this.hexPips[POINTY][6] = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6]].map(getPointyVertex);
+ this.hexPips[POINTY][7] = [[0, 0], [1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6]].map(getPointyVertex);
}
outline(context, scale, x, y, cell) {
@@ -67,5 +97,31 @@ export default class DrawHexagon {
context.fillStyle = cell.getColor();
context.fill();
}
+
+ pip(context, scale, cellX, cellY, vertexX, vertexY, pipRadius, pipDistance) {
+ const x = cellX + (pipDistance * vertexX);
+ const y = cellY + (pipDistance * vertexY);
+
+ context.moveTo(x, y);
+ context.arc(x, y, pipRadius*3, 0, Math.PI*2, true);
+ }
+
+ pips(context, scale, x, y, cell) {
+ const {orientation, pips} = cell;
+
+ if (this.hexPips[orientation] && this.hexPips[orientation][pips]) {
+ const pipRadius = scale * this.settings.pipScale;
+ const pipDistance = scale * this.settings.pipDistance;
+
+ context.beginPath();
+
+ this.hexPips[orientation][pips]
+ .forEach(([hexPipX, hexPipY]) => this.pip(context, scale, x,y, hexPipX, hexPipY, pipRadius, pipDistance));
+
+ context.closePath();
+ context.fillStyle = 'rgb(0,0,0)';
+ context.fill();
+ }
+ }
}
diff --git a/src/drawSquare.js b/src/drawSquare.js
index 60dd4f2..322298c 100644
--- a/src/drawSquare.js
+++ b/src/drawSquare.js
@@ -1,12 +1,49 @@
import {sqrt2} from './utils.js';
-import {POINTY} from './consts.js';
+import {FLAT, POINTY} from './consts.js';
+
+const DEFAULTS = {
+ pipScale: 0.05,
+ pipDistance: 0.4,
+};
export default class DrawSquare {
constructor(settings) {
+ this.settings = Object.assign({}, DEFAULTS, settings);
+
this.squareX = [1, 1, -1, -1];
this.squareY = [1, -1, -1, 1];
- this.diamondX = [sqrt2, 0, -sqrt2, 0];
- this.diamondY = [0, -sqrt2, 0, sqrt2];
+ this.diamondX = [sqrt2, 0, -sqrt2, 0, sqrt2 / 2, -sqrt2 / 2];
+ this.diamondY = [0, -sqrt2, 0, sqrt2, -sqrt2 / 2, sqrt2 / 2];
+
+ this.squarePips = {};
+ this.squarePips[FLAT] = [];
+ this.squarePips[POINTY] = [];
+
+ const getFlatVertex = ([x, y]) => [x ? this.squareX[x - 1] : 0, y ? this.squareY[y - 1] : 0];
+
+ // start with 0,0 as center
+ this.squarePips[FLAT][1] = [[0, 0]].map(getFlatVertex);
+ this.squarePips[FLAT][2] = [[1, 1], [3, 3]].map(getFlatVertex);
+ this.squarePips[FLAT][3] = [[0, 0], [1, 1], [3, 3]].map(getFlatVertex);
+ this.squarePips[FLAT][4] = [[1, 1], [2, 2], [3, 3], [4, 4]].map(getFlatVertex);
+ this.squarePips[FLAT][5] = [[0, 0], [1, 1], [2, 2], [3, 3], [4, 4]].map(getFlatVertex);
+ this.squarePips[FLAT][6] = [[1, 0], [1, 1], [2, 2], [3, 0], [3, 3], [4, 4]].map(getFlatVertex);
+ this.squarePips[FLAT][7] = [[0, 0], [1, 0], [1, 1], [2, 2], [3, 0], [3, 3], [4, 4]].map(getFlatVertex);
+ this.squarePips[FLAT][8] = [[0, 1], [0, 3], [1, 0], [1, 1], [2, 2], [3, 0], [3, 3], [4, 4]].map(getFlatVertex);
+ this.squarePips[FLAT][9] = [[0, 0], [0, 1], [0, 3], [1, 0], [1, 1], [2, 2], [3, 0], [3, 3], [4, 4]].map(getFlatVertex);
+
+ const getPointyVertex = ([x, y]) => [x ? this.diamondX[x - 1] : 0, y ? this.diamondY[y - 1] : 0];
+
+ // start with 0,0 as center
+ this.squarePips[POINTY][1] = [[0, 0]].map(getPointyVertex);
+ this.squarePips[POINTY][2] = [[1, 1], [3, 3]].map(getPointyVertex);
+ this.squarePips[POINTY][3] = [[0, 0], [1, 1], [3, 3]].map(getPointyVertex);
+ this.squarePips[POINTY][4] = [[1, 1], [2, 2], [3, 3], [4, 4]].map(getPointyVertex);
+ this.squarePips[POINTY][5] = [[0, 0], [1, 1], [2, 2], [3, 3], [4, 4]].map(getPointyVertex);
+ this.squarePips[POINTY][6] = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6]].map(getPointyVertex);
+ this.squarePips[POINTY][7] = [[0, 0], [1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6]].map(getPointyVertex);
+ this.squarePips[POINTY][8] = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [5, 6], [6, 5], [6, 6]].map(getPointyVertex);
+ this.squarePips[POINTY][9] = [[0, 0], [1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [5, 6], [6, 5], [6, 6]].map(getPointyVertex);
}
fill(context, scale, x, y, cell) {
@@ -40,5 +77,31 @@ export default class DrawSquare {
context.strokeStyle = cell.getColor();
context.stroke();
}
+
+ pip(context, scale, cellX, cellY, vertexX, vertexY, pipRadius, pipDistance) {
+ const x = cellX + (pipDistance * vertexX);
+ const y = cellY + (pipDistance * vertexY);
+
+ context.moveTo(x, y);
+ context.arc(x, y, pipRadius*3, 0, Math.PI*2, true);
+ }
+
+ pips(context, scale, x, y, cell) {
+ const {orientation, pips} = cell;
+
+ if (this.squarePips[orientation] && this.squarePips[orientation][pips]) {
+ const pipRadius = scale * this.settings.pipScale;
+ const pipDistance = scale * this.settings.pipDistance;
+
+ context.beginPath();
+
+ this.squarePips[orientation][pips]
+ .forEach(([pipX, pipY]) => this.pip(context, scale, x, y, pipX, pipY, pipRadius, pipDistance));
+
+ context.closePath();
+ context.fillStyle = 'rgb(0,0,0)';
+ context.fill();
+ }
+ }
}
diff --git a/src/main.js b/src/main.js
index 70b76af..51fcacf 100644
--- a/src/main.js
+++ b/src/main.js
@@ -63,16 +63,24 @@ class Demo {
}
onTap(tap) {
- console.log(tap.tile.getPoint());
+ const {x, y, z} = tap.tile.getPoint();
+ console.log(x, y, z);
- this.taps.push(this.createTile(
- tap.tile.x,
- tap.tile.y,
+ const key = `${ x },${ z != null ? z : y }`;
- Tessellate.utils.random(Tessellate.DRAW_STYLES),
- Tessellate.utils.random(Tessellate.TILE_STYLES),
- Tessellate.utils.random(Tessellate.TILE_ORIENTATIONS),
- ));
+ this.map[key].pips = Tessellate.utils.random(1,9);
+ console.log(this.map[key].pips);
+
+// console.log(tap.tile.getPoint());
+//
+// this.taps.push(this.createTile(
+// tap.tile.x,
+// tap.tile.y,
+//
+// Tessellate.utils.random(Tessellate.DRAW_STYLES),
+// Tessellate.utils.random(Tessellate.TILE_STYLES),
+// Tessellate.utils.random(Tessellate.TILE_ORIENTATIONS),
+// ));
}
createTile(x, y, drawStyle, tileStyle, orientation) {
@@ -101,6 +109,7 @@ class Demo {
const pixelPoint = this.tessellate.tileToPixel(x, y, z);
Tessellate.TILES[tile.tileStyle][tile.drawStyle](context, scale, pixelPoint.getX(), pixelPoint.getY(), tile);
+ Tessellate.TILES[tile.tileStyle].pips(context, scale, pixelPoint.getX(), pixelPoint.getY(), tile);
}
draw({context, scale, tilePoints}) {
diff --git a/src/onTap.js b/src/onTap.js
index 4e09a85..db86e3e 100644
--- a/src/onTap.js
+++ b/src/onTap.js
@@ -5,6 +5,7 @@ export default class OnTap {
constructor(settings) {
this.element = settings.element || document.body;
+ this.debug = false;
this.state = {
clickStartX: null,
clickStartY: null,
@@ -41,6 +42,8 @@ export default class OnTap {
}
mousedown(event) {
+ if (this.debug) console.dir('onTap.mousedown', event);
+
if (!this.state.clickStartTime) {
this.state.clickStartX = event.pageX;
this.state.clickStartY = event.pageY;
@@ -49,6 +52,10 @@ export default class OnTap {
}
touchstart(event) {
+ event.preventDefault();
+
+ if (this.debug) console.dir('onTap.touchstart', event);
+
if (!this.state.clickStartTime) {
this.state.clickStartX = event.pageX;
this.state.clickStartY = event.pageY;
@@ -57,17 +64,11 @@ export default class OnTap {
}
mouseup(event) {
+ if (this.debug) console.dir('onTap.mouseup', event);
if (!this.state.moving) {
this.actions.tap.callback(event);
}
- else {
-// console.log({
-// duration: event.timeStamp - this.state.clickStartTime,
-// deltaX: event.pageX - this.state.clickStartX,
-// deltaY: event.pageY - this.state.clickStartY
-// });
- }
this.state.moving = null;
this.state.lastX = null;
@@ -78,17 +79,16 @@ export default class OnTap {
}
touchend(event) {
+ event.preventDefault();
+
+ if (this.debug) console.dir('onTap.touchend', event);
if (!this.state.moving) {
+ event.offsetX = event.offsetX || event.pageX - event.target.offsetLeft;
+ event.offsetY = event.offsetY || event.pageY - event.target.offsetTop;
+
this.actions.tap.callback(event);
}
- else {
-// console.log({
-// duration: event.timeStamp - this.state.clickStartTime,
-// deltaX: event.pageX - this.state.clickStartX,
-// deltaY: event.pageY - this.state.clickStartY
-// });
- }
this.state.moving = null;
this.state.lastX = null;
@@ -99,6 +99,7 @@ export default class OnTap {
}
mousemove(event) {
+ if (this.debug) console.dir('onTap.mousemove', event);
if (this.state.clickStartTime) {
if (!this.state.moving) {
@@ -122,6 +123,9 @@ export default class OnTap {
}
touchmove(event) {
+ event.preventDefault();
+
+ if (this.debug) console.dir('onTap.touchmove', event);
if (this.state.clickStartTime) {
if (!this.state.moving) {
@@ -149,6 +153,8 @@ export default class OnTap {
}
wheel(event) {
+ if (this.debug) console.dir('onTap.wheel', event);
+
this.actions.zoom.callback(event);
}
}