From 5cb430825189933d9efc76e5a4034fd2e49a5435 Mon Sep 17 00:00:00 2001 From: gavin Date: Sun, 29 Jul 2018 01:40:45 +0000 Subject: [PATCH] Pips! (#8) --- public/index.html | 2 +- src/drawHexagon.js | 82 ++++++++++++++++++++++++++++++++++++++-------- src/drawSquare.js | 69 ++++++++++++++++++++++++++++++++++++-- src/main.js | 25 +++++++++----- src/onTap.js | 34 +++++++++++-------- 5 files changed, 173 insertions(+), 39 deletions(-) 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); } }