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

using 'cell' to describe shapes instead of raw object

Browse Source
This commit is contained in:
Gavin McDonald
2016-02-19 09:51:08 -05:00
parent c3e5995bf1
commit ccd9cdb111
6 changed files with 77 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/cell.js Normal file
View File

@@ -0,0 +1,29 @@
import {extend} from './utils.js';
import {random} from './utils.js';
export default class Cell {
constructor(settings) {
this.getColor = this.getColor.bind(this);
this.x = 0;
this.y = 0;
this.scale = 10;
this.pointyTop = false;
this.tile = 'circle';
this.style = 'filled';
this.width = 1;
this.red = 0;
this.green = 0;
this.blue = 0;
this.alpha = 0;
this.created = Date.now();
extend(this, settings);
}
getColor() {
return `rgba(${this.red},${this.green},${this.blue},${this.alpha})`;
}
}

2
src/hex.js
View File

@@ -106,7 +106,7 @@ export default class Hex extends Point {
return this; return this;
}, },
getAxial: function() {return {x: this.x, z: this.z};}, getAxial: function() {return {q: this.x, r: this.z};},
setAxial: function(newAxial) { setAxial: function(newAxial) {
this.x = newAxial.q; this.x = newAxial.q;
this.z = newAxial.r; this.z = newAxial.r;

14
src/tessellate.js
View File

@@ -9,6 +9,8 @@ import TileCircle from './tileCircle.js';
import TileHex from './tileHex.js'; import TileHex from './tileHex.js';
import TileSquare from './tileSquare.js'; import TileSquare from './tileSquare.js';
import Cell from './cell.js';
export default class Tessellate { export default class Tessellate {
constructor(settings) { constructor(settings) {
['draw'].map(method => {this[method] = this[method].bind(this)}); ['draw'].map(method => {this[method] = this[method].bind(this)});
@@ -31,15 +33,19 @@ export default class Tessellate {
let styles = ['filled', 'outline']; let styles = ['filled', 'outline'];
let scale = random(10, 50); let scale = random(10, 50);
this.map.push({ this.map.push(new Cell({
tile: tiles[random(tiles.length-1)], tile: tiles[random(tiles.length-1)],
style: styles[random(styles.length-1)], style: styles[random(styles.length-1)],
name: 'gavin',
x, x,
y, y,
scale, scale,
pointy: random(1) ? true : false, pointyTop: random(1) ? true : false,
color: `rgba(${ random(255) }, ${ random(255) }, ${ random(255) }, 0.5)` red: random(255),
}); green: random(255),
blue: random(255),
alpha: 0.5
}));
} }
}); });

16
src/tileCircle.js
View File

@@ -1,25 +1,23 @@
import Tile from './tile.js'; import Tile from './tile.js';
let RGBA_DEFAULT = 'rgba(0, 0, 0, 0.5)';
export default class TileCircle extends Tile { export default class TileCircle extends Tile {
constructor(settings) { constructor(settings) {
super(settings); super(settings);
} }
filled(settings) { filled(cell) {
this.context.beginPath(); this.context.beginPath();
this.context.arc(settings.x, settings.y, settings.scale, 0, 2*Math.PI, false); this.context.arc(cell.x, cell.y, cell.scale, 0, 2*Math.PI, false);
this.context.fillStyle = settings.color || RGBA_DEFAULT; this.context.fillStyle = cell.getColor();
this.context.fill(); this.context.fill();
} }
outline(settings) { outline(cell) {
this.context.beginPath(); this.context.beginPath();
this.context.arc(settings.x, settings.y, settings.scale, 0, 2*Math.PI, false); this.context.arc(cell.x, cell.y, cell.scale, 0, 2*Math.PI, false);
this.context.lineWidth = settings.width ? settings.width : 1; this.context.lineWidth = cell.width;
this.context.strokeStyle = settings.color || RGBA_DEFAULT; this.context.strokeStyle = cell.getColor();
this.context.stroke(); this.context.stroke();
} }
} }

32
src/tileHex.js
View File

@@ -1,8 +1,6 @@
import Tile from './tile.js'; import Tile from './tile.js';
let RGBA_DEFAULT = 'rgba(0, 0, 0, 0.5)';
export default class TileHex extends Tile { export default class TileHex extends Tile {
constructor(settings) { constructor(settings) {
super(settings); super(settings);
@@ -37,12 +35,12 @@ export default class TileHex extends Tile {
} }
} }
outline(settings) { outline(cell) {
let x = settings.x; let x = cell.x;
let y = settings.y; let y = cell.y;
let scale = settings.scale; let scale = cell.scale;
let hexCornerX = settings.pointy ? this.pointyTopCornerX : this.flatTopCornerX; let hexCornerX = cell.pointyTop ? this.pointyTopCornerX : this.flatTopCornerX;
let hexCornerY = settings.pointy ? this.pointyTopCornerY : this.flatTopCornerY; let hexCornerY = cell.pointyTop ? this.pointyTopCornerY : this.flatTopCornerY;
this.context.beginPath(); this.context.beginPath();
this.context.moveTo(x + scale * hexCornerX[0], y + scale * hexCornerY[0]); this.context.moveTo(x + scale * hexCornerX[0], y + scale * hexCornerY[0]);
@@ -53,17 +51,17 @@ export default class TileHex extends Tile {
this.context.lineTo(x + scale * hexCornerX[5], y + scale * hexCornerY[5]); this.context.lineTo(x + scale * hexCornerX[5], y + scale * hexCornerY[5]);
this.context.closePath(); this.context.closePath();
this.context.lineWidth = settings.width ? settings.width : 1; this.context.lineWidth = cell.width;
this.context.strokeStyle = settings.color || RGBA_DEFAULT; this.context.strokeStyle = cell.getColor();
this.context.stroke(); this.context.stroke();
} }
filled(settings) { filled(cell) {
let x = settings.x; let x = cell.x;
let y = settings.y; let y = cell.y;
let scale = settings.scale; let scale = cell.scale;
let hexCornerX = settings.pointy ? this.pointyTopCornerX : this.flatTopCornerX; let hexCornerX = cell.pointyTop ? this.pointyTopCornerX : this.flatTopCornerX;
let hexCornerY = settings.pointy ? this.pointyTopCornerY : this.flatTopCornerY; let hexCornerY = cell.pointyTop ? this.pointyTopCornerY : this.flatTopCornerY;
this.context.beginPath(); this.context.beginPath();
this.context.moveTo(x + scale * hexCornerX[0], y + scale * hexCornerY[0]); this.context.moveTo(x + scale * hexCornerX[0], y + scale * hexCornerY[0]);
@@ -73,7 +71,7 @@ export default class TileHex extends Tile {
this.context.lineTo(x + scale * hexCornerX[4], y + scale * hexCornerY[4]); this.context.lineTo(x + scale * hexCornerX[4], y + scale * hexCornerY[4]);
this.context.lineTo(x + scale * hexCornerX[5], y + scale * hexCornerY[5]); this.context.lineTo(x + scale * hexCornerX[5], y + scale * hexCornerY[5]);
this.context.fillStyle = settings.color || RGBA_DEFAULT; this.context.fillStyle = cell.getColor();
this.context.fill(); this.context.fill();
} }
} }

32
src/tileSquare.js
View File

@@ -3,8 +3,6 @@ import Tile from './tile.js';
import {sqrt2} from './utils.js'; import {sqrt2} from './utils.js';
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);
@@ -15,12 +13,12 @@ export default class TileSquare extends Tile {
this.diamondY = [0, -sqrt2, 0, sqrt2]; this.diamondY = [0, -sqrt2, 0, sqrt2];
} }
filled(settings) { filled(cell) {
let x = settings.x; let x = cell.x;
let y = settings.y; let y = cell.y;
let scale = settings.scale; let scale = cell.scale;
let squareCornerX = settings.pointy ? this.diamondX : this.squareX; let squareCornerX = cell.pointyTop ? this.diamondX : this.squareX;
let squareCornerY = settings.pointy ? this.diamondY : this.squareY; let squareCornerY = cell.pointyTop ? this.diamondY : this.squareY;
this.context.beginPath(); this.context.beginPath();
this.context.moveTo(x + scale * squareCornerX[0], y + scale * squareCornerY[0]); this.context.moveTo(x + scale * squareCornerX[0], y + scale * squareCornerY[0]);
@@ -28,16 +26,16 @@ export default class TileSquare extends Tile {
this.context.lineTo(x + scale * squareCornerX[2], y + scale * squareCornerY[2]); this.context.lineTo(x + scale * squareCornerX[2], y + scale * squareCornerY[2]);
this.context.lineTo(x + scale * squareCornerX[3], y + scale * squareCornerY[3]); this.context.lineTo(x + scale * squareCornerX[3], y + scale * squareCornerY[3]);
this.context.fillStyle = settings.color || RGBA_DEFAULT; this.context.fillStyle = cell.getColor();
this.context.fill(); this.context.fill();
} }
outline(settings) { outline(cell) {
let x = settings.x; let x = cell.x;
let y = settings.y; let y = cell.y;
let scale = settings.scale; let scale = cell.scale;
let squareCornerX = settings.pointy ? this.diamondX : this.squareX; let squareCornerX = cell.pointyTop ? this.diamondX : this.squareX;
let squareCornerY = settings.pointy ? this.diamondY : this.squareY; let squareCornerY = cell.pointyTop ? this.diamondY : this.squareY;
this.context.beginPath(); this.context.beginPath();
this.context.moveTo(x + scale * squareCornerX[0], y + scale * squareCornerY[0]); this.context.moveTo(x + scale * squareCornerX[0], y + scale * squareCornerY[0]);
@@ -46,8 +44,8 @@ export default class TileSquare extends Tile {
this.context.lineTo(x + scale * squareCornerX[3], y + scale * squareCornerY[3]); 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 = cell.width;
this.context.strokeStyle = settings.color || RGBA_DEFAULT; this.context.strokeStyle = cell.getColor();
this.context.stroke(); this.context.stroke();
} }
} }