diff --git a/src/cell.js b/src/cell.js
new file mode 100644
index 0000000..83fb501
--- /dev/null
+++ b/src/cell.js
@@ -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})`;
+	}
+}
+
diff --git a/src/hex.js b/src/hex.js
index 5e9dbac..366626e 100644
--- a/src/hex.js
+++ b/src/hex.js
@@ -106,7 +106,7 @@ export default class Hex extends Point {
 			return this;
 		},
 
-		getAxial: function() {return {x: this.x, z: this.z};},
+		getAxial: function() {return {q: this.x, r: this.z};},
 		setAxial: function(newAxial) {
 			this.x = newAxial.q;
 			this.z = newAxial.r;
diff --git a/src/tessellate.js b/src/tessellate.js
index 0174a45..b507069 100644
--- a/src/tessellate.js
+++ b/src/tessellate.js
@@ -9,6 +9,8 @@ import TileCircle from './tileCircle.js';
 import TileHex    from './tileHex.js';
 import TileSquare from './tileSquare.js';
 
+import Cell from './cell.js';
+
 export default class Tessellate {
 	constructor(settings) {
 		['draw'].map(method => {this[method] = this[method].bind(this)});
@@ -31,15 +33,19 @@ export default class Tessellate {
 				let styles = ['filled', 'outline'];
 				let scale = random(10, 50);
 
-				this.map.push({
+				this.map.push(new Cell({
 					tile: tiles[random(tiles.length-1)],
 					style: styles[random(styles.length-1)],
+					name: 'gavin',
 					x,
 					y,
 					scale,
-					pointy: random(1) ? true : false,
-					color: `rgba(${ random(255) }, ${ random(255) }, ${ random(255) }, 0.5)`
-				});
+					pointyTop: random(1) ? true : false,
+					red: random(255),
+					green: random(255),
+					blue: random(255),
+					alpha: 0.5
+				}));
 			}
 		});
 
diff --git a/src/tileCircle.js b/src/tileCircle.js
index 240806e..3ae2d69 100644
--- a/src/tileCircle.js
+++ b/src/tileCircle.js
@@ -1,25 +1,23 @@
 
 import Tile from './tile.js';
 
-let RGBA_DEFAULT = 'rgba(0, 0, 0, 0.5)';
-
 export default class TileCircle extends Tile {
 	constructor(settings) {
 		super(settings);
 	}
 
-	filled(settings) {
+	filled(cell) {
 		this.context.beginPath();
-		this.context.arc(settings.x, settings.y, settings.scale, 0, 2*Math.PI, false);
-		this.context.fillStyle = settings.color || RGBA_DEFAULT;
+		this.context.arc(cell.x, cell.y, cell.scale, 0, 2*Math.PI, false);
+		this.context.fillStyle = cell.getColor();
 		this.context.fill();
 	}
 
-	outline(settings) {
+	outline(cell) {
 		this.context.beginPath();
-		this.context.arc(settings.x, settings.y, settings.scale, 0, 2*Math.PI, false);
-		this.context.lineWidth = settings.width ? settings.width : 1;
-		this.context.strokeStyle = settings.color || RGBA_DEFAULT;
+		this.context.arc(cell.x, cell.y, cell.scale, 0, 2*Math.PI, false);
+		this.context.lineWidth = cell.width;
+		this.context.strokeStyle = cell.getColor();
 		this.context.stroke();
 	}
 }
diff --git a/src/tileHex.js b/src/tileHex.js
index 661bf41..42c7b20 100644
--- a/src/tileHex.js
+++ b/src/tileHex.js
@@ -1,8 +1,6 @@
 
 import Tile from './tile.js';
 
-let RGBA_DEFAULT = 'rgba(0, 0, 0, 0.5)';
-
 export default class TileHex extends Tile {
 	constructor(settings) {
 		super(settings);
@@ -37,12 +35,12 @@ export default class TileHex extends Tile {
 		}
 	}
 
-	outline(settings) {
-		let x = settings.x;
-		let y = settings.y;
-		let scale = settings.scale;
-		let hexCornerX = settings.pointy ? this.pointyTopCornerX : this.flatTopCornerX;
-		let hexCornerY = settings.pointy ? this.pointyTopCornerY : this.flatTopCornerY;
+	outline(cell) {
+		let x = cell.x;
+		let y = cell.y;
+		let scale = cell.scale;
+		let hexCornerX = cell.pointyTop ? this.pointyTopCornerX : this.flatTopCornerX;
+		let hexCornerY = cell.pointyTop ? this.pointyTopCornerY : this.flatTopCornerY;
 
 		this.context.beginPath();
 		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.closePath();
 
-		this.context.lineWidth = settings.width ? settings.width : 1;
-		this.context.strokeStyle = settings.color || RGBA_DEFAULT;
+		this.context.lineWidth = cell.width;
+		this.context.strokeStyle = cell.getColor();
 		this.context.stroke();
 	}
 
-	filled(settings) {
-		let x = settings.x;
-		let y = settings.y;
-		let scale = settings.scale;
-		let hexCornerX = settings.pointy ? this.pointyTopCornerX : this.flatTopCornerX;
-		let hexCornerY = settings.pointy ? this.pointyTopCornerY : this.flatTopCornerY;
+	filled(cell) {
+		let x = cell.x;
+		let y = cell.y;
+		let scale = cell.scale;
+		let hexCornerX = cell.pointyTop ? this.pointyTopCornerX : this.flatTopCornerX;
+		let hexCornerY = cell.pointyTop ? this.pointyTopCornerY : this.flatTopCornerY;
 
 		this.context.beginPath();
 		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[5], y + scale * hexCornerY[5]);
 
-		this.context.fillStyle = settings.color || RGBA_DEFAULT;
+		this.context.fillStyle = cell.getColor();
 		this.context.fill();
 	}
 }
diff --git a/src/tileSquare.js b/src/tileSquare.js
index be5fec5..3af78de 100644
--- a/src/tileSquare.js
+++ b/src/tileSquare.js
@@ -3,8 +3,6 @@ import Tile from './tile.js';
 
 import {sqrt2} from './utils.js';
 
-let RGBA_DEFAULT = 'rgba(0, 0, 0, 0.5)';
-
 export default class TileSquare extends Tile {
 	constructor(settings) {
 		super(settings);
@@ -15,12 +13,12 @@ export default class TileSquare extends Tile {
 		this.diamondY = [0, -sqrt2, 0, sqrt2];
 	}
 
-	filled(settings) {
-		let x = settings.x;
-		let y = settings.y;
-		let scale = settings.scale;
-		let squareCornerX = settings.pointy ? this.diamondX : this.squareX;
-		let squareCornerY = settings.pointy ? this.diamondY : this.squareY;
+	filled(cell) {
+		let x = cell.x;
+		let y = cell.y;
+		let scale = cell.scale;
+		let squareCornerX = cell.pointyTop ? this.diamondX : this.squareX;
+		let squareCornerY = cell.pointyTop ? this.diamondY : this.squareY;
 
 		this.context.beginPath();
 		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[3], y + scale * squareCornerY[3]);
 
-		this.context.fillStyle = settings.color || RGBA_DEFAULT;
+		this.context.fillStyle = cell.getColor();
 		this.context.fill();
 	}
 
-	outline(settings) {
-		let x = settings.x;
-		let y = settings.y;
-		let scale = settings.scale;
-		let squareCornerX = settings.pointy ? this.diamondX : this.squareX;
-		let squareCornerY = settings.pointy ? this.diamondY : this.squareY;
+	outline(cell) {
+		let x = cell.x;
+		let y = cell.y;
+		let scale = cell.scale;
+		let squareCornerX = cell.pointyTop ? this.diamondX : this.squareX;
+		let squareCornerY = cell.pointyTop ? this.diamondY : this.squareY;
 
 		this.context.beginPath();
 		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.closePath();
 
-		this.context.lineWidth = settings.width ? settings.width : 1;
-		this.context.strokeStyle = settings.color || RGBA_DEFAULT;
+		this.context.lineWidth = cell.width;
+		this.context.strokeStyle = cell.getColor();
 		this.context.stroke();
 	}
 }