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

Pips! (#8)

Browse Source
This commit is contained in:
gavin
2018-07-29 01:40:45 +00:00
committed by Gitea
parent 18f978cc8a
commit 5cb4308251
5 changed files with 173 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/drawHexagon.js
View File

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