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

added tessellated map

Browse Source
This commit is contained in:
Gavin McDonald
2016-02-20 20:23:01 -05:00
parent a2479f2d2f
commit d24e14af32
5 changed files with 421 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/cell.js
View File

@@ -16,7 +16,7 @@ export default class Cell {
this.red = 0; this.red = 0;
this.green = 0; this.green = 0;
this.blue = 0; this.blue = 0;
this.alpha = 0; this.alpha = 0.5;
this.created = Date.now(); this.created = Date.now();
extend(this, settings); extend(this, settings);

317
src/exWhyZee.js Normal file
View File

@@ -0,0 +1,317 @@
import {sqrt3, extend} from './utils.js';
import Hex from './hex.js';
import Point from './point.js';
export default class ExWhyZee {
constructor(settings) {
[
'maxWidth',
'minWidth',
'maxDistance',
'minDistance',
'getOriginX',
'getOriginY',
'getScale',
'getCellWidth',
'getCellHeight',
'getHorzDistance',
'getVertDistance',
'hexToPixel',
'pixelToHex',
'boundingBox'
].map(method => this[method] = this[method].bind(this));
this.pointyTop = false;
// in pixels
this.originX = 0;
this.originY = 0;
// in pixels
this.scale = 25;
this.scaleMin = 5;
this.scaleMax = 250;
// in cells
this.width = 0;
this.height = 0;
extend(this, settings);
this.originX = parseInt(this.originX);
this.originY = parseInt(this.originY);
this.width = parseInt(this.width);
this.height = parseInt(this.height);
}
maxWidth() {
return this.scale * 2;
}
minWidth() {
return this.maxWidth() * sqrt3;
}
maxDistance() {
return this.maxWidth() * (3/4);
}
minDistance() {
return this.minWidth();
}
getOriginX() {return this.originX;}
getOriginY() {return this.originY;}
getScale() {return this.scale;}
getCellWidth() {return this.pointyTop ? this.minWidth() : this.maxWidth();}
getCellHeight() {return this.pointyTop ? this.maxWidth() : this.minWidth();}
getHorzDistance() {return this.pointyTop ? this.minDistance() : this.maxDistance();}
getVertDistance() {return this.pointyTop ? this.maxDistance() : this.minDistance();}
hexToPixel(hex) {
let scale = this.scale;
function minWidth(a, b) {
return scale * sqrt3 * (a + (b / 2))
};
function maxWidth(a) {
return scale * 3/2 * a
};
let pixelX = this.pointyTop ? minWidth(hex.getQ(), hex.getR()) : maxWidth(hex.getQ());
let pixelY = this.pointyTop ? maxWidth(hex.getR()) : minWidth(hex.getR(), hex.getQ());
pixelX += this.originX;
pixelY += this.originY;
return new Point(pixelX, pixelY);
}
pixelToHex(point) {
let scale = this.scale;
function radiusLong(a, b) {
return ((a * (sqrt3 / 3)) - (b / 3)) / scale;
};
function radiusShort(a) {
return (a * (2 / 3)) / scale;
};
let pixelX = point.getX() - this.originX;
let pixelY = point.getY() - this.originY;
let q = this.pointyTop ? radiusLong(pixelX, pixelY) : radiusShort(pixelX);
let r = this.pointyTop ? radiusShort(pixelY) : radiusLong(pixelY, pixelX);
return new Hex(q, r);
}
boundingBox(upperLeftPoint, lowerRightPoint) {
let hexagons = [];
let upperRightPoint = new Point(lowerRightPoint.getX(), upperLeftPoint.getY());
// push out by a 1 axially to account for interlocking hexagons
// possibly return hexagons not within bounds
let upperLeftHex = this.pixelToHex(upperLeftPoint).moveAxial({q: 0, r: -1});
let lowerRightHex = this.pixelToHex(lowerRightPoint).moveAxial({q: 0, r: 1});
let upperRightHex = this.pixelToHex(upperRightPoint).moveAxial({q: 1, r: -1});
let height = lowerRightHex.getR() - upperLeftHex.getR();
let width = upperRightHex.getQ() - upperLeftHex.getQ();
for (let row = 0; row <= height; row++) {
hexagons[row] = [];
let r = upperLeftHex.getR() + row;
let qOffset = upperLeftHex.getQ() - Math.floor(row / 2);
for (let q = qOffset; q <= qOffset + width; q++) {
hexagons[row].push(new Hex(q, r));
}
}
return hexagons;
}
}
// function getCoordinates(canvasX, canvasY) {
// var hexWidth = sqrt3 * scale;
// var graphY = Math.round((originY + (scale/2) - canvasY) / (1.5*scale));
// var mapY = height ? graphY % height : graphY;
// mapY = mapY < 0 ? mapY + height : mapY;
// var graphX = Math.round(((canvasX - originX) / hexWidth) - (graphY/2));
// var mapX = width ? graphX % width : graphX;
// mapX = mapX < 0 ? (width + mapX) : mapX;
// var mapZ = -(mapX + mapY);
//
// return {x:mapX, y:mapY, z:mapZ}
// }
//
// var ExWhyZee = {
// boundingBox: function(upperLeftPoint, lowerRightPoint, contained) {
// var hexagons = [];
// var upperRightPoint = Point(lowerRightPoint.getX(), upperLeftPoint.getY());
//
// // push out by a 1 axially to account for interlocking hexagons
// // possibly return hexagons not within bounds
// var upperLeftHex = this.pixelToHex(upperLeftPoint).moveAxial({q: 0, r: -1});
// var lowerRightHex = this.pixelToHex(lowerRightPoint).moveAxial({q: 0, r: 1});
// var upperRightHex = this.pixelToHex(upperRightPoint).moveAxial({q: 1, r: -1});
//
// var height = lowerRightHex.getR() - upperLeftHex.getR();
// var width = upperRightHex.getQ() - upperLeftHex.getQ();
//
// for (var row = 0; row <= height; row++) {
// hexagons[row] = [];
// var r = upperLeftHex.getR() + row;
// var qOffset = upperLeftHex.getQ() - Math.floor(row / 2);
//
// for (var q = qOffset; q <= qOffset + width; q++) {
// hexagons[row].push(Hex(q, r));
// }
// }
//
// return hexagons;
// },
//
// cellDistance: function(hex1, hex2) {
// return Math.max(
// Math.abs(hex1.getX() - hex2.getX()),
// Math.abs(hex1.getY() - hex2.getY()),
// Math.abs(hex1.getZ() - hex2.getZ())
// );
// },
//
// setNeighbors: function(distance) {
// if (!neighbors[distance - 1]) {
// var length = 6 * distance;
// for (var i=0; i<distance; i++) {
// // each of the six directions
// neighbors[(0 * distance) + i] = Hex( distance, (i - distance), -i);
// neighbors[(2 * distance) + i] = Hex((distance - i), i, -i);
// neighbors[(3 * distance) + i] = Hex( -i, distance, (i - distance));
// neighbors[(4 * distance) + i] = Hex( -distance, (distance - i), i);
// neighbors[(5 * distance) + i] = Hex((i - distance), -i, distance);
// neighbors[(6 * distance) + i] = Hex( i, -distance, (distance - i));
// }
// }
// },
//
// getNeighborRing: function(hex, distance) {
// if (!neighbors[distance]) {
// ExWhyZee.setNeighbors(distance);
// }
//
// return _.map(neighbors[distance], function(neighbor) {
// return Hex(hex.getQ() + neighbor.getQ(), hex.getR() + neighbor.getR());
// });
// },
//
// getNeighbors: function getNeighbors(hex, distance) {
// if (distance) {
// return ExWhyZee.getNeighborRing().concat(getNeighbors(hex, distance - 1));
// }
// },
//
//// getNeighbors: function(x,y, distance) {
//// var neighbors = [];
////
//// for (var curX=x-distance; curX<=x+distance; curX++) {
//// for (var curY=y-distance; curY<=y+distance; curY++) {
////
//// if (cellDistance(x,y, curX,curY) <= distance) {
//// if ((curX !== x) || (curY !== y)) {
//// var tempX = curX < 0 ? curX + map.width : curX;
//// tempX = tempX >= map.width ? tempX - map.width : tempX;
//// var tempY = curY < 0 ? curY + map.height : curY;
//// tempY = tempY >= map.height ? tempY - map.height : tempY;
////
//// neighbors.push({'x':tempX, 'y':tempY, 'z':-(tempX+tempY)});
//// }
//// }
//// }
//// }
////
//// return neighbors;
//// },
//
// hexToPixel: function(hex) {
// var minWidth = function(a, b) {
// return scale * sqrt3 * (a + (b / 2))
// };
//
// var maxWidth = function(a) {
// return scale * 3/2 * a
// };
//
// var pixelX = pointyTop ? minWidth(hex.getQ(), hex.getR()) : maxWidth(hex.getQ());
// var pixelY = pointyTop ? maxWidth(hex.getR()) : minWidth(hex.getR(), hex.getQ());
//
// pixelX += originX;
// pixelY += originY;
//
// return Point(pixelX, pixelY);
// },
//
// pixelToHex: function(point) {
// var radiusLong = function(a, b) {
// return ((a * (sqrt3 / 3)) - (b / 3)) / scale;
// };
//
// var radiusShort = function(a) {
// return (a * (2 / 3)) / scale;
// };
//
// var pixelX = point.getX() - originX;
// var pixelY = point.getY() - originY;
//
// var q = pointyTop ? radiusLong(pixelX, pixelY) : radiusShort(pixelX);
// var r = pointyTop ? radiusShort(pixelY) : radiusLong(pixelY, pixelX);
//
// return Hex(q, r);
// },
//
// move: function(event) {
// if (event.deltaX) {
//
// originX = Math.floor((originX*1000) + (event.deltaX*1000)) / 1000;
// }
//
// if (event.deltaY) {
//
// originY = Math.floor((originY*1000) + (event.deltaY*1000)) / 1000;
// }
// },
//
// zoom: function(event) {
// var scaleOrig = scale;
//
// var scaleTemp = parseInt((scaleOrig + (event.deltaY / 10)) * 1000) / 1000;
//
// // make sure 'scale' doesn't get too small nor too big
// if (scaleTemp < scaleMin)
// scaleTemp = scaleMin;
// else if (scaleTemp > scaleMax)
// scaleTemp = scaleMax;
//
// if (scaleOrig != scaleTemp) {
//
// scale = scaleTemp;
//
// // zoom to the current mouse location
// this.move({
// deltaX: (((event.offsetX - originX) / scaleOrig) * (scaleOrig - scaleTemp)),
// deltaY: (((event.offsetY - originY) / scaleOrig) * (scaleOrig - scaleTemp))
// });
// }
// }
// };
//
// return ExWhyZee;
//};

118
src/hex.js
View File

@@ -54,70 +54,68 @@ export default class Hex extends Point {
roundOff(this.x, this.y, this.z); roundOff(this.x, this.y, this.z);
} }
return { getX() {return this.x;}
getX: function() {return this.x;}, getY() {return this.y;}
getY: function() {return this.y;}, getZ() {return this.z;}
getZ: function() {return this.z;},
setX: function(newX) {this.x = newX; return this;}, setX(newX) {this.x = newX; return this;}
setY: function(newY) {this.y = newY; return this;}, setY(newY) {this.y = newY; return this;}
setZ: function(newZ) {this.z = newZ; return this;}, setZ(newZ) {this.z = newZ; return this;}
moveX: function(byX) {this.x += byX; return this;}, moveX(byX) {this.x += byX; return this;}
moveY: function(byY) {this.y += byY; return this;}, moveY(byY) {this.y += byY; return this;}
moveZ: function(byZ) {this.z += byZ; return this;}, moveZ(byZ) {this.z += byZ; return this;}
getQ: function() {return this.x;}, getQ() {return this.x;}
getR: function() {return this.z;}, getR() {return this.z;}
setQ: function(newQ) { setQ(newQ) {
this.x = newQ; this.x = newQ;
this.y = computeY(this.x, this.z); this.y = computeY(this.x, this.z);
return this; return this;
}, }
setR: function(newR) { setR(newR) {
this.z = newR; this.z = newR;
this.y = computeY(this.x, this.z); this.y = computeY(this.x, this.z);
return this; return this;
}, }
moveQ: function(byQ) { moveQ(byQ) {
this.x += byQ; this.x += byQ;
this.y = computeY(this.x, this.z); this.y = computeY(this.x, this.z);
return this; return this;
}, }
moveR: function(byR) { moveR(byR) {
this.z += byR; this.z += byR;
this.y = computeY(this.x, this.z); this.y = computeY(this.x, this.z);
return this; return this;
}, }
getHex: function() { return {x: this.x, y: this.y, z: this.z}; }, getHex() { return {x: this.x, y: this.y, z: this.z}; }
setHex: function(newHex) { setHex(newHex) {
this.x = newHex.x; this.x = newHex.x;
this.y = newHex.y; this.y = newHex.y;
this.z = newHex.z; this.z = newHex.z;
return this; return this;
}, }
moveHex: function(byHex) { moveHex(byHex) {
this.x += byHex.x; this.x += byHex.x;
this.y += byHex.y; this.y += byHex.y;
this.z += byHex.z; this.z += byHex.z;
return this; return this;
}, }
getAxial: function() {return {q: this.x, r: this.z};}, getAxial() {return {q: this.x, r: this.z};}
setAxial: function(newAxial) { setAxial(newAxial) {
this.x = newAxial.q; this.x = newAxial.q;
this.z = newAxial.r; this.z = newAxial.r;
this.y = computeY(this.x, this.y); this.y = computeY(this.x, this.y);
return this; return this;
}, }
moveAxial: function(byAxial) { moveAxial(byAxial) {
this.x += byAxial.q; this.x += byAxial.q;
this.z += byAxial.r; this.z += byAxial.r;
this.y = computeY(this.x, this.z); this.y = computeY(this.x, this.z);
return this; return this;
} }
}; }
};

2
src/point.js
View File

@@ -12,4 +12,4 @@ export default class Point {
setY(newY) { this.y = newY; } setY(newY) { this.y = newY; }
getPoint() { return {x: this.x, y: this.y}; } getPoint() { return {x: this.x, y: this.y}; }
}; }

45
src/tessellate.js
View File

@@ -14,9 +14,11 @@ export {DrawCircle, DrawHexagon, DrawSquare};
import Cell from './cell.js'; import Cell from './cell.js';
export {Cell}; export {Cell};
import ExWhyZee from './exWhyZee.js';
export default class Tessellate { export default class Tessellate {
constructor(settings) { constructor(settings) {
['click', 'draw'].map(method => {this[method] = this[method].bind(this)}); ['click', 'draw', 'drawMap'].map(method => {this[method] = this[method].bind(this)});
this.drawCB = settings.draw || utils.noop; this.drawCB = settings.draw || utils.noop;
this.clickCB = settings.click || utils.noop; this.clickCB = settings.click || utils.noop;
@@ -31,12 +33,51 @@ export default class Tessellate {
element: this.element, element: this.element,
click: this.click click: this.click
}); });
this.xyz = new ExWhyZee({
pointyTop: true,
originX: this.sketch.getContext().canvas.width / 2,
originY: this.sketch.getContext().canvas.height / 2
});
this.circle = new DrawCircle();
} }
click(event) { click(event) {
this.clickCB(event); this.clickCB(event);
} }
drawMap(context) {
let scale = this.xyz.getScale();
let upperLeft = new Point(0, 0);
let lowerRight = new Point(context.canvas.width, context.canvas.height);
let hexagons = this.xyz.boundingBox(upperLeft, lowerRight);
let height = hexagons.length;
for (let r=0; r<height; r++) {
let width = hexagons[r].length;
for (let c=0; c<width; c++) {
let hex = hexagons[r][c];
let hexPoint = this.xyz.hexToPixel(hex);
this.circle.outline(context, new Cell({
x: hexPoint.getX(),
y: hexPoint.getY(),
red: utils.random(255),
green: utils.random(255),
blue: utils.random(255),
alpha: utils.random(25, 75) / 100,
scale: scale * 0.8
}));
// let cell = map.getXY(hex.getX(), hex.getY());
//
// hexTiles.filled(hexPoint.getX(), hexPoint.getY(), scale * 0.9, {color: cell.getColor()});
}
}
}
draw(context) { draw(context) {
let canvas = context.canvas; let canvas = context.canvas;
let width = canvas.width; let width = canvas.width;
@@ -44,6 +85,8 @@ export default class Tessellate {
context.clearRect(0, 0, width, height); context.clearRect(0, 0, width, height);
this.drawMap(context);
this.drawCB(context); this.drawCB(context);
} }
} }