gavin/Tessellate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Drawing Mines (#13)

Browse Source
This commit is contained in:
gavin
2018-08-06 01:11:45 +00:00
committed by Gitea
parent 965d3ac7de
commit 77993e41e8
5 changed files with 175 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/drawHexagon.js
View File

@@ -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();
}
}

167
src/drawShapes.js Normal file
View File

@@ -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();
}
}

81
src/drawSquare.js
View File

@@ -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();
}
}

4
src/main.js
View File

@@ -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) {

4
src/tessellate.js
View File

@@ -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}