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

set viewport to speed up mobile taps, hex and square both handle 'pointy top' versions

Browse Source
This commit is contained in:
Gavin McDonald
2016-02-18 10:45:48 -05:00
parent f7cb7c094a
commit c3e5995bf1
8 changed files with 44 additions and 875 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -7,3 +7,5 @@
node_modules/* node_modules/*
hexmine hexmine
public/js/main.js

1
public/index.html
View File

@@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>Tessellate</title> <title>Tessellate</title>
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">

788
public/js/main.js
View File

File diff suppressed because one or more lines are too long

4
src/tessellate.js
View File

@@ -6,7 +6,6 @@ import Point from './point.js';
import Sketch from './sketch.js'; import Sketch from './sketch.js';
import TileCircle from './tileCircle.js'; import TileCircle from './tileCircle.js';
import TileDiamond from './tileDiamond.js';
import TileHex from './tileHex.js'; import TileHex from './tileHex.js';
import TileSquare from './tileSquare.js'; import TileSquare from './tileSquare.js';
@@ -28,7 +27,7 @@ export default class Tessellate {
click: (event) => { click: (event) => {
let x = event.pageX; let x = event.pageX;
let y = event.pageY; let y = event.pageY;
let tiles = ['circle', 'diamond', 'hex', 'square']; let tiles = ['circle', 'hex', 'square'];
let styles = ['filled', 'outline']; let styles = ['filled', 'outline'];
let scale = random(10, 50); let scale = random(10, 50);
@@ -45,7 +44,6 @@ export default class Tessellate {
}); });
this.circle = new TileCircle({context: this.sketch.getContext()}); this.circle = new TileCircle({context: this.sketch.getContext()});
this.diamond = new TileDiamond({context: this.sketch.getContext()});
this.hex = new TileHex({context: this.sketch.getContext()}); this.hex = new TileHex({context: this.sketch.getContext()});
this.square = new TileSquare({context: this.sketch.getContext()}); this.square = new TileSquare({context: this.sketch.getContext()});
} }

45
src/tileDiamond.js
View File

@@ -1,45 +0,0 @@
import Tile from './tile.js';
import {hypotenuse} from './utils.js';
let RGBA_DEFAULT = 'rgba(0, 0, 0, 0.5)';
export default class TileDiamond extends Tile {
constructor(settings) {
super(settings);
}
filled(settings) {
let x = settings.x;
let y = settings.y;
let scale = settings.scale;
this.context.beginPath();
this.context.moveTo(x+hypotenuse(scale), y);
this.context.lineTo(x, y-hypotenuse(scale));
this.context.lineTo(x-hypotenuse(scale), y);
this.context.lineTo(x, y+hypotenuse(scale));
this.context.fillStyle = settings.color || RGBA_DEFAULT;
this.context.fill();
}
outline(settings) {
let x = settings.x;
let y = settings.y;
let scale = settings.scale;
this.context.beginPath();
this.context.moveTo(x+hypotenuse(scale), y);
this.context.lineTo(x, y-hypotenuse(scale));
this.context.lineTo(x-hypotenuse(scale), y);
this.context.lineTo(x, y+hypotenuse(scale));
this.context.closePath();
this.context.lineWidth = settings.width ? settings.width : 1;
this.context.strokeStyle = settings.color || RGBA_DEFAULT;
this.context.stroke();
}
}

45
src/tileHex.js
View File

@@ -7,50 +7,33 @@ export default class TileHex extends Tile {
constructor(settings) { constructor(settings) {
super(settings); super(settings);
this.sqrt3 = Math.sqrt(3);
this.hexSides = 6;
this.pointyTopCornerX = [];
this.pointyTopCornerY = [];
this.flatTopCornerX = []; this.flatTopCornerX = [];
this.flatTopCornerY = []; this.flatTopCornerY = [];
this.pointyTopCornerX = [];
this.pointyTopCornerY = [];
// dice dots, 0,0 is center // dice dots, 0,0 is center
// TODO: if pointy: [0].concat(flatTop), if flat: [0].concat(pointy) // TODO: if pointy: [0].concat(flatTop), if flat: [0].concat(pointy)
// this.hexDotX = [0]; // this.hexDotX = [0];
// this.hexDotY = [0]; // this.hexDotY = [0];
this.hexSlices = 24; let hexSides = 6;
this.hexSliceX = [0]; let hexSlices = 24;
this.hexSliceY = [0]; for (let hexSlice = 0; hexSlice < hexSlices; hexSlice++) {
let x = parseInt(Math.cos(((hexSlice / hexSlices) * hexSides) * (2 * Math.PI) / hexSides) * 1000) / 1000;
for (let hexSlice = 0; hexSlice < this.hexSlices; hexSlice++) { let y = parseInt(Math.sin(((hexSlice / hexSlices) * hexSides) * (2 * Math.PI) / hexSides) * 1000) / 1000;
this.hexSliceX[hexSlice] = parseInt(Math.cos(((hexSlice/this.hexSlices)*this.hexSides) * (2 * Math.PI) / this.hexSides) * 1000) / 1000;
this.hexSliceY[hexSlice] = parseInt(Math.sin(((hexSlice/this.hexSlices)*this.hexSides) * (2 * Math.PI) / this.hexSides) * 1000) / 1000;
if (((hexSlice-2) % 4) === 0) {
let cur = (hexSlice-2) / 4;
this.pointyTopCornerX[cur] = this.hexSliceX[hexSlice];
this.pointyTopCornerY[cur] = this.hexSliceY[hexSlice];
}
if ((hexSlice % 4) === 0) { if ((hexSlice % 4) === 0) {
let cur = hexSlice / 4; let cur = hexSlice / 4;
this.flatTopCornerX[cur] = this.hexSliceX[hexSlice]; this.flatTopCornerX[cur] = x;
this.flatTopCornerY[cur] = this.hexSliceY[hexSlice]; this.flatTopCornerY[cur] = y;
} }
// if (((hexSlice-2) % 4) === 0) { if (((hexSlice-2) % 4) === 0) {
// let cur = (hexSlice-2) / 4; let cur = (hexSlice-2) / 4;
// this.hexCornerX[cur] = this.hexSliceX[hexSlice]; this.pointyTopCornerX[cur] = x;
// this.hexCornerY[cur] = this.hexSliceY[hexSlice]; this.pointyTopCornerY[cur] = y;
// } }
//
// if ((hexSlice % 4) === 0) {
// let cur = hexSlice / 4;
// this.hexDotX[cur+1] = this.hexSliceX[hexSlice];
// this.hexDotY[cur+1] = this.hexSliceY[hexSlice];
// }
} }
} }

27
src/tileSquare.js
View File

@@ -1,23 +1,32 @@
import Tile from './tile.js'; import Tile from './tile.js';
import {sqrt2} from './utils.js';
let RGBA_DEFAULT = 'rgba(0, 0, 0, 0.5)'; let RGBA_DEFAULT = 'rgba(0, 0, 0, 0.5)';
export default class TileSquare extends Tile { export default class TileSquare extends Tile {
constructor(settings) { constructor(settings) {
super(settings); super(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];
} }
filled(settings) { filled(settings) {
let x = settings.x; let x = settings.x;
let y = settings.y; let y = settings.y;
let scale = settings.scale; let scale = settings.scale;
let squareCornerX = settings.pointy ? this.diamondX : this.squareX;
let squareCornerY = settings.pointy ? this.diamondY : this.squareY;
this.context.beginPath(); this.context.beginPath();
this.context.moveTo(x+scale, y+scale); this.context.moveTo(x + scale * squareCornerX[0], y + scale * squareCornerY[0]);
this.context.lineTo(x+scale, y-scale); this.context.lineTo(x + scale * squareCornerX[1], y + scale * squareCornerY[1]);
this.context.lineTo(x-scale, y-scale); this.context.lineTo(x + scale * squareCornerX[2], y + scale * squareCornerY[2]);
this.context.lineTo(x-scale, y+scale); this.context.lineTo(x + scale * squareCornerX[3], y + scale * squareCornerY[3]);
this.context.fillStyle = settings.color || RGBA_DEFAULT; this.context.fillStyle = settings.color || RGBA_DEFAULT;
this.context.fill(); this.context.fill();
@@ -27,12 +36,14 @@ export default class TileSquare extends Tile {
let x = settings.x; let x = settings.x;
let y = settings.y; let y = settings.y;
let scale = settings.scale; let scale = settings.scale;
let squareCornerX = settings.pointy ? this.diamondX : this.squareX;
let squareCornerY = settings.pointy ? this.diamondY : this.squareY;
this.context.beginPath(); this.context.beginPath();
this.context.moveTo(x+scale, y+scale); this.context.moveTo(x + scale * squareCornerX[0], y + scale * squareCornerY[0]);
this.context.lineTo(x+scale, y-scale); this.context.lineTo(x + scale * squareCornerX[1], y + scale * squareCornerY[1]);
this.context.lineTo(x-scale, y-scale); this.context.lineTo(x + scale * squareCornerX[2], y + scale * squareCornerY[2]);
this.context.lineTo(x-scale, y+scale); this.context.lineTo(x + scale * squareCornerX[3], y + scale * squareCornerY[3]);
this.context.closePath(); this.context.closePath();
this.context.lineWidth = settings.width ? settings.width : 1; this.context.lineWidth = settings.width ? settings.width : 1;

7
src/utils.js
View File

@@ -31,6 +31,13 @@ export function extend(obj, src) {
return obj; return obj;
} }
// hypotenuse factor of isoscelese right triangle
export let sqrt2 = Math.sqrt(2);
// short width factor given the lenght of a hexagon's side
// (2*S gives long width)
export let sqrt3 = Math.sqrt(3);
export function hypotenuse(a, b) { export function hypotenuse(a, b) {
if (b == null) b = a; if (b == null) b = a;