From 77993e41e844f065a38769c22bfc576e5dc53322 Mon Sep 17 00:00:00 2001 From: gavin Date: Mon, 6 Aug 2018 01:11:45 +0000 Subject: [PATCH] Drawing Mines (#13) --- src/drawHexagon.js | 77 +-------------------- src/drawShapes.js | 167 +++++++++++++++++++++++++++++++++++++++++++++ src/drawSquare.js | 81 +--------------------- src/main.js | 4 +- src/tessellate.js | 4 ++ 5 files changed, 175 insertions(+), 158 deletions(-) create mode 100644 src/drawShapes.js diff --git a/src/drawHexagon.js b/src/drawHexagon.js index fd6a2e8..aee968b 100644 --- a/src/drawHexagon.js +++ b/src/drawHexagon.js @@ -1,15 +1,9 @@ import {FLAT, POINTY} from './consts.js'; import {range, toFixed} from './utils.js'; -const DEFAULTS = { - flagScale: 0.5, - pipScale: 0.15, - pipDistance: 0.4, -}; - export default class DrawHexagon { constructor(settings) { - this.settings = Object.assign({}, DEFAULTS, settings); + this.settings = Object.assign({}, settings); this.flatTopCornerX = []; this.flatTopCornerY = []; @@ -35,38 +29,6 @@ export default class DrawHexagon { this.pointyTopCornerY[cur] = y; } }); - - this.hexPips = {}; - this.hexPips[FLAT] = []; - this.hexPips[POINTY] = []; - - const flatPipVerticesX = [0].concat(this.flatTopCornerX); - const flatPipVerticesY = [0].concat(this.flatTopCornerY); - - const getFlatVertex = n => [flatPipVerticesX[n], flatPipVerticesY[n]]; - - // start with 0,0 as center - this.hexPips[FLAT][1] = [0].map(getFlatVertex); - this.hexPips[FLAT][2] = [1, 4].map(getFlatVertex); - this.hexPips[FLAT][3] = [1, 3, 5].map(getFlatVertex); - this.hexPips[FLAT][4] = [0, 2, 4, 6].map(getFlatVertex); - this.hexPips[FLAT][5] = [0, 2, 3, 5, 6].map(getFlatVertex); - this.hexPips[FLAT][6] = [1, 2, 3, 4, 5, 6].map(getFlatVertex); - this.hexPips[FLAT][7] = [0, 1, 2, 3, 4, 5, 6].map(getFlatVertex); - - const pointyPipVerticesX = [0].concat(this.pointyTopCornerX); - const pointyPipVerticesY = [0].concat(this.pointyTopCornerY); - - const getPointyVertex = n => [pointyPipVerticesX[n], pointyPipVerticesY[n]]; - - // start with 0,0 as center - this.hexPips[POINTY][1] = [0].map(getPointyVertex); - this.hexPips[POINTY][2] = [2, 5].map(getPointyVertex); - this.hexPips[POINTY][3] = [1, 3, 5].map(getPointyVertex); - this.hexPips[POINTY][4] = [0, 2, 4, 6].map(getPointyVertex); - this.hexPips[POINTY][5] = [0, 1, 3, 4, 6].map(getPointyVertex); - this.hexPips[POINTY][6] = [1, 2, 3, 4, 5, 6].map(getPointyVertex); - this.hexPips[POINTY][7] = [0, 1, 2, 3, 4, 5, 6].map(getPointyVertex); } outline(context, scale, x, y, cell) { @@ -104,42 +66,5 @@ 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, 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(); - } - } - - flag (context, scale, x, y) { - context.beginPath(); - - context.moveTo(x, y); - context.arc(x, y, scale * this.settings.flagScale, 0, Math.PI*2, true); - - context.closePath(); - context.fillStyle = 'rgb(255,0,0)'; - context.fill(); - } } diff --git a/src/drawShapes.js b/src/drawShapes.js new file mode 100644 index 0000000..775d7cc --- /dev/null +++ b/src/drawShapes.js @@ -0,0 +1,167 @@ +import {range, sqrt2, toFixed} from './utils.js'; +import {HEX, SQUARE, FLAT, POINTY} from './consts.js'; + +const DEFAULTS = { + flagScale: 0.5, + pipScale: 0.15, + pipDistance: 0.4, + + sides: 6, + slices: 24, +}; + +function generateFlatSquarePips() { + const pips = []; + const pipX = [0, 1, 1, -1, -1, 1, -1, 0, 0]; + const pipY = [0, 1, -1, -1, 1, 0, 0, -1, 1]; + + const getVertex = n => [pipX[n], pipY[n]]; + + pips[1] = [0].map(getVertex); + pips[2] = [1, 3].map(getVertex); + pips[3] = [0, 1, 3].map(getVertex); + pips[4] = [1, 2, 3, 4].map(getVertex); + pips[5] = [0, 1, 2, 3, 4].map(getVertex); + pips[6] = [1, 2, 3, 4, 5, 6].map(getVertex); + pips[7] = [0, 1, 2, 3, 4, 5, 6].map(getVertex); + pips[8] = [1, 2, 3, 4, 5, 6, 7, 8].map(getVertex); + pips[9] = [0, 1, 2, 3, 4, 5, 6, 7, 8].map(getVertex); + + return pips; +} + +function generatePointySquarePips() { + const pips = []; + const pipX = [0, sqrt2, 0, -sqrt2, 0, sqrt2 / 2, -sqrt2 / 2, sqrt2 / 2, -sqrt2 / 2]; + const pipY = [0, 0, -sqrt2, 0, sqrt2, -sqrt2 / 2, sqrt2 / 2, sqrt2 / 2, -sqrt2 / 2]; + + const getVertex = n => [pipX[n], pipY[n]]; + + pips[1] = [0].map(getVertex); + pips[2] = [1, 3].map(getVertex); + pips[3] = [0, 1, 3].map(getVertex); + pips[4] = [1, 2, 3, 4].map(getVertex); + pips[5] = [0, 1, 2, 3, 4].map(getVertex); + pips[6] = [1, 2, 3, 4, 5, 6].map(getVertex); + pips[7] = [0, 1, 2, 3, 4, 5, 6].map(getVertex); + pips[8] = [1, 2, 3, 4, 5, 6, 7, 8].map(getVertex); + pips[9] = [0, 1, 2, 3, 4, 5, 6, 7, 8].map(getVertex); + + return pips; +} + +function generateFlatHexPips(slicesX, slicesY) { + const pips = [] + slicesX = [0].concat(slicesX); + slicesY = [0].concat(slicesY); + + const getVertex = n => [slicesX[n], slicesY[n]]; + + pips[1] = [0].map(getVertex); + pips[2] = [1, 13].map(getVertex); + pips[3] = [5, 13, 21].map(getVertex); + pips[4] = [0, 1, 9, 17].map(getVertex); + pips[5] = [0, 5, 9, 17, 21].map(getVertex); + pips[6] = [1, 5, 9, 13, 17, 21].map(getVertex); + pips[7] = [0, 1, 5, 9, 13, 17, 21].map(getVertex); + + return pips; +} + +function generatePointyHexPips(slicesX, slicesY) { + const pips = [] + slicesX = [0].concat(slicesX); + slicesY = [0].concat(slicesY); + + const getVertex = n => [slicesX[n], slicesY[n]]; + + pips[1] = [0].map(getVertex); + pips[2] = [7, 19].map(getVertex); + pips[3] = [7, 15, 23].map(getVertex); + pips[4] = [0, 3, 11, 19].map(getVertex); + pips[5] = [0, 3, 11, 15, 23].map(getVertex); + pips[6] = [3, 7, 11, 15, 19, 23].map(getVertex); + pips[7] = [0, 3, 7, 11, 15, 19, 23].map(getVertex); + + return pips; +} + +export default class DrawShapes { + constructor(settings) { + this.settings = Object.assign({}, DEFAULTS, settings); + + const sides = this.settings.sides; + const slices = this.settings.slices; + this.slicesX = range(slices).map(slice => toFixed(Math.cos(((slice / slices) * sides) * (2 * Math.PI) / sides))); + this.slicesY = range(slices).map(slice => toFixed(Math.sin(((slice / slices) * sides) * (2 * Math.PI) / sides))); + + this.pipVertices = { + [HEX]: { + [FLAT]: generateFlatHexPips(this.slicesX, this.slicesY), + [POINTY]: generatePointyHexPips(this.slicesX, this.slicesY), + }, + [SQUARE]: { + [FLAT]: generateFlatSquarePips(), + [POINTY]: generatePointySquarePips(), + } + }; + } + + 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, 0, Math.PI*2, true); + } + + pips(context, scale, x, y, cell) { + const {tileStyle, orientation, pips} = cell; + + if (this.pipVertices[tileStyle] + && this.pipVertices[tileStyle][orientation] + && this.pipVertices[tileStyle][orientation][pips]) { + const pipRadius = scale * this.settings.pipScale; + const pipDistance = scale * this.settings.pipDistance; + + context.beginPath(); + + this.pipVertices[tileStyle][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(); + } + } + + flag (context, scale, x, y) { + context.beginPath(); + + context.moveTo(x, y); + context.arc(x, y, scale * this.settings.flagScale, 0, Math.PI*2, true); + + context.closePath(); + context.fillStyle = 'rgb(255,0,0)'; + context.fill(); + } + + mine(context, scale, x, y) { + var peak = scale * 0.667; + var valley = scale * 0.333; + + context.beginPath(); + context.moveTo(x,y); + + context.moveTo(x + peak * this.slicesX[0], y + peak * this.slicesY[0]); + range(this.settings.slices).filter(slice => slice % 2 === 1).forEach(slice => { + context.lineTo(x + valley * this.slicesX[slice], y + valley * this.slicesY[slice]); + context.lineTo(x + peak * this.slicesX[slice+1], y + peak * this.slicesY[slice+1]); + }); + + context.closePath(); + context.fillStyle = 'rgb(255,0,0)'; + context.fill(); + } +} + diff --git a/src/drawSquare.js b/src/drawSquare.js index 24b046c..4ffe6b6 100644 --- a/src/drawSquare.js +++ b/src/drawSquare.js @@ -1,56 +1,14 @@ import {sqrt2} from './utils.js'; import {FLAT, POINTY} from './consts.js'; -const DEFAULTS = { - flagScale: 0.5, - pipScale: 0.15, - pipDistance: 0.4, -}; - export default class DrawSquare { constructor(settings) { - this.settings = Object.assign({}, DEFAULTS, settings); + this.settings = Object.assign({}, settings); this.squareX = [1, 1, -1, -1]; this.squareY = [1, -1, -1, 1]; 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 flatPipVerticesX = [0].concat(this.squareX).concat([this.squareX[1], this.squareX[3], 0, 0]); - const flatPipVerticesY = [0].concat(this.squareY).concat([0, 0, this.squareY[1], this.squareY[3]]); - - const getFlatVertex = n => [flatPipVerticesX[n], flatPipVerticesY[n]]; - - // start with 0,0 as center - this.squarePips[FLAT][1] = [0].map(getFlatVertex); - this.squarePips[FLAT][2] = [1, 3].map(getFlatVertex); - this.squarePips[FLAT][3] = [0, 1, 3].map(getFlatVertex); - this.squarePips[FLAT][4] = [1, 2, 3, 4].map(getFlatVertex); - this.squarePips[FLAT][5] = [0, 1, 2, 3, 4].map(getFlatVertex); - this.squarePips[FLAT][6] = [1, 2, 3, 4, 5, 6].map(getFlatVertex); - this.squarePips[FLAT][7] = [0, 1, 2, 3, 4, 5, 6].map(getFlatVertex); - this.squarePips[FLAT][8] = [1, 2, 3, 4, 5, 6, 7, 8].map(getFlatVertex); - this.squarePips[FLAT][9] = [0, 1, 2, 3, 4, 5, 6, 7, 8].map(getFlatVertex); - - const pointyPipVerticesX = [0].concat(this.diamondX).concat([this.diamondX[4], this.diamondX[5]]); - const pointyPipVerticesY = [0].concat(this.diamondY).concat([this.diamondY[5], this.diamondY[4]]); - - const getPointyVertex = n => [pointyPipVerticesX[n], pointyPipVerticesY[n]]; - - // start with 0,0 as center - this.squarePips[POINTY][1] = [0].map(getPointyVertex); - this.squarePips[POINTY][2] = [1, 3].map(getPointyVertex); - this.squarePips[POINTY][3] = [0, 1, 3].map(getPointyVertex); - this.squarePips[POINTY][4] = [1, 2, 3, 4].map(getPointyVertex); - this.squarePips[POINTY][5] = [0, 1, 2, 3, 4].map(getPointyVertex); - this.squarePips[POINTY][6] = [1, 2, 3, 4, 5, 6].map(getPointyVertex); - this.squarePips[POINTY][7] = [0, 1, 2, 3, 4, 5, 6].map(getPointyVertex); - this.squarePips[POINTY][8] = [1, 2, 3, 4, 5, 6, 7, 8].map(getPointyVertex); - this.squarePips[POINTY][9] = [0, 1, 2, 3, 4, 5, 6, 7, 8].map(getPointyVertex); } fill(context, scale, x, y, cell) { @@ -84,42 +42,5 @@ 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, 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(); - } - } - - flag (context, scale, x, y) { - context.beginPath(); - - context.moveTo(x, y); - context.arc(x, y, scale * this.settings.flagScale, 0, Math.PI*2, true); - - context.closePath(); - context.fillStyle = 'rgb(255,0,0)'; - context.fill(); - } } diff --git a/src/main.js b/src/main.js index cc0aebe..2bb5afe 100644 --- a/src/main.js +++ b/src/main.js @@ -178,7 +178,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); + Tessellate.Shapes.pips(context, scale, pixelPoint.getX(), pixelPoint.getY(), tile); } draw({context, scale, tilePoints}) { @@ -206,7 +206,7 @@ class Demo { Tessellate.funky.forEach(this.flags, cell => { const pixelPoint = this.tessellate.tileToPixel(cell.x, cell.y); - Tessellate.TILES[this.settings.tile].flag(context, scale, pixelPoint.getX(), pixelPoint.getY()); + Tessellate.Shapes.flag(context, scale, pixelPoint.getX(), pixelPoint.getY()); }); if (!this.notFirstTime) { diff --git a/src/tessellate.js b/src/tessellate.js index 63385f9..a01d287 100644 --- a/src/tessellate.js +++ b/src/tessellate.js @@ -5,6 +5,7 @@ import OnTap from './onTap.js'; import Point from './point.js'; import Sketch from './sketch.js'; +import DrawShapes from './drawShapes.js'; import DrawCircle from './drawCircle.js'; import DrawSquare from './drawSquare.js'; import DrawHexagon from './drawHexagon.js'; @@ -32,6 +33,8 @@ const TILES = { [SQUARE]: new DrawSquare(), }; +const Shapes = new DrawShapes(); + const DEFAULTS = { tile: HEX, board: HEX, @@ -68,6 +71,7 @@ export class Tessellate { static get TILES() {return TILES} static get Cell() {return Cell} + static get Shapes() {return Shapes} static get utils() {return utils} static get funky() {return funky}