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

moving Tessellate towards more of a library structure

Browse Source
This commit is contained in:
Gavin McDonald
2016-02-19 12:46:31 -05:00
parent ccd9cdb111
commit 63af7b6db8
8 changed files with 126 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/main.js
View File

@@ -1,7 +1,54 @@
import {random} from './utils.js';
import Tessellate from './tessellate.js';
import {TileCircle, TileHexagon, TileSquare} from './tessellate.js';
import {Cell} from './tessellate.js';
var tessellate = new Tessellate({
element: '#container'
});
class Demo {
constructor() {
['click', 'draw'].map(method => this[method] = this[method].bind(this));
this.map = [];
let tessellate = new Tessellate({
element: '#container',
click: this.click,
draw: this.draw
});
this.circle = new TileCircle();
this.square = new TileSquare();
this.hexagon = new TileHexagon();
this.tiles = ['circle', 'hexagon', 'square'];
this.styles = ['filled', 'outline'];
}
click(event) {
let x = event.pageX;
let y = event.pageY;
let scale = random(10, 50);
this.map.push(new Cell({
tile: this.tiles[random(this.tiles.length-1)],
style: this.styles[random(this.styles.length-1)],
name: 'gavin',
x,
y,
scale,
pointyTop: random(1) ? true : false,
red: random(255),
green: random(255),
blue: random(255),
alpha: random(25,75)/100
}));
}
draw(context) {
this.map.forEach(cell => this[cell.tile][cell.style](context, cell));
}
}
let demo = new Demo();

9
src/sketch.js
View File

@@ -1,7 +1,7 @@
export default class Sketch {
constructor(settings) {
this.lastTime = null;
this.lastNow = null;
['getContext', 'onResize', 'render'].map(method => this[method] = this[method].bind(this));
@@ -28,9 +28,12 @@ export default class Sketch {
}
render(now) {
this.draw(this.context, now, this.lastTime);
this.context.now = now;
this.context.lastNow = this.lastNow;
this.lastTime = now;
this.draw(this.context);
this.lastNow = now;
requestAnimationFrame(this.render);
}
}

46
src/tessellate.js
View File

@@ -1,20 +1,24 @@
import {random} from './utils.js';
import {noop, random} from './utils.js';
import OnTap from './onTap.js';
import Point from './point.js';
import Sketch from './sketch.js';
import TileCircle from './tileCircle.js';
import TileHex from './tileHex.js';
import TileSquare from './tileSquare.js';
import TileHexagon from './tileHexagon.js';
export {TileCircle, TileHexagon, TileSquare};
import Cell from './cell.js';
export {Cell};
export default class Tessellate {
constructor(settings) {
['draw'].map(method => {this[method] = this[method].bind(this)});
['click', 'draw'].map(method => {this[method] = this[method].bind(this)});
this.drawCB = settings.draw || noop;
this.clickCB = settings.click || noop;
this.element = document.querySelector(settings.element);
this.sketch = new Sketch({
@@ -22,45 +26,23 @@ export default class Tessellate {
draw: this.draw
});
this.map = [];
this.onTap = new OnTap({
element: this.element,
click: (event) => {
let x = event.pageX;
let y = event.pageY;
let tiles = ['circle', 'hex', 'square'];
let styles = ['filled', 'outline'];
let scale = random(10, 50);
this.map.push(new Cell({
tile: tiles[random(tiles.length-1)],
style: styles[random(styles.length-1)],
name: 'gavin',
x,
y,
scale,
pointyTop: random(1) ? true : false,
red: random(255),
green: random(255),
blue: random(255),
alpha: 0.5
}));
}
click: this.click
});
this.circle = new TileCircle({context: this.sketch.getContext()});
this.hex = new TileHex({context: this.sketch.getContext()});
this.square = new TileSquare({context: this.sketch.getContext()});
}
draw(context, now, lastTime) {
click(event) {
this.clickCB(event);
}
draw(context) {
let canvas = context.canvas;
let width = canvas.width;
let height = canvas.height;
context.clearRect(0, 0, width, height);
this.map.forEach(cell => this[cell.tile][cell.style](cell));
this.drawCB(context);
}
}

5
src/tile.js
View File

@@ -1,11 +1,6 @@
export default class Tile {
constructor(settings) {
this.context = settings.context || null;
}
setContext(newContext) {
this.context = newContext || this.context;
}
}

22
src/tileCircle.js
View File

@@ -6,19 +6,19 @@ export default class TileCircle extends Tile {
super(settings);
}
filled(cell) {
this.context.beginPath();
this.context.arc(cell.x, cell.y, cell.scale, 0, 2*Math.PI, false);
this.context.fillStyle = cell.getColor();
this.context.fill();
filled(context, cell) {
context.beginPath();
context.arc(cell.x, cell.y, cell.scale, 0, 2*Math.PI, false);
context.fillStyle = cell.getColor();
context.fill();
}
outline(cell) {
this.context.beginPath();
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();
outline(context, cell) {
context.beginPath();
context.arc(cell.x, cell.y, cell.scale, 0, 2*Math.PI, false);
context.lineWidth = cell.width;
context.strokeStyle = cell.getColor();
context.stroke();
}
}

46
src/tileHex.js → src/tileHexagon.js
View File

@@ -1,7 +1,7 @@
import Tile from './tile.js';
export default class TileHex extends Tile {
export default class TileHexagon extends Tile {
constructor(settings) {
super(settings);
@@ -35,44 +35,44 @@ export default class TileHex extends Tile {
}
}
outline(cell) {
outline(context, 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]);
this.context.lineTo(x + scale * hexCornerX[1], y + scale * hexCornerY[1]);
this.context.lineTo(x + scale * hexCornerX[2], y + scale * hexCornerY[2]);
this.context.lineTo(x + scale * hexCornerX[3], y + scale * hexCornerY[3]);
this.context.lineTo(x + scale * hexCornerX[4], y + scale * hexCornerY[4]);
this.context.lineTo(x + scale * hexCornerX[5], y + scale * hexCornerY[5]);
this.context.closePath();
context.beginPath();
context.moveTo(x + scale * hexCornerX[0], y + scale * hexCornerY[0]);
context.lineTo(x + scale * hexCornerX[1], y + scale * hexCornerY[1]);
context.lineTo(x + scale * hexCornerX[2], y + scale * hexCornerY[2]);
context.lineTo(x + scale * hexCornerX[3], y + scale * hexCornerY[3]);
context.lineTo(x + scale * hexCornerX[4], y + scale * hexCornerY[4]);
context.lineTo(x + scale * hexCornerX[5], y + scale * hexCornerY[5]);
context.closePath();
this.context.lineWidth = cell.width;
this.context.strokeStyle = cell.getColor();
this.context.stroke();
context.lineWidth = cell.width;
context.strokeStyle = cell.getColor();
context.stroke();
}
filled(cell) {
filled(context, 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]);
this.context.lineTo(x + scale * hexCornerX[1], y + scale * hexCornerY[1]);
this.context.lineTo(x + scale * hexCornerX[2], y + scale * hexCornerY[2]);
this.context.lineTo(x + scale * hexCornerX[3], y + scale * hexCornerY[3]);
this.context.lineTo(x + scale * hexCornerX[4], y + scale * hexCornerY[4]);
this.context.lineTo(x + scale * hexCornerX[5], y + scale * hexCornerY[5]);
context.beginPath();
context.moveTo(x + scale * hexCornerX[0], y + scale * hexCornerY[0]);
context.lineTo(x + scale * hexCornerX[1], y + scale * hexCornerY[1]);
context.lineTo(x + scale * hexCornerX[2], y + scale * hexCornerY[2]);
context.lineTo(x + scale * hexCornerX[3], y + scale * hexCornerY[3]);
context.lineTo(x + scale * hexCornerX[4], y + scale * hexCornerY[4]);
context.lineTo(x + scale * hexCornerX[5], y + scale * hexCornerY[5]);
this.context.fillStyle = cell.getColor();
this.context.fill();
context.fillStyle = cell.getColor();
context.fill();
}
}

36
src/tileSquare.js
View File

@@ -13,40 +13,40 @@ export default class TileSquare extends Tile {
this.diamondY = [0, -sqrt2, 0, sqrt2];
}
filled(cell) {
filled(context, 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]);
this.context.lineTo(x + scale * squareCornerX[1], y + scale * squareCornerY[1]);
this.context.lineTo(x + scale * squareCornerX[2], y + scale * squareCornerY[2]);
this.context.lineTo(x + scale * squareCornerX[3], y + scale * squareCornerY[3]);
context.beginPath();
context.moveTo(x + scale * squareCornerX[0], y + scale * squareCornerY[0]);
context.lineTo(x + scale * squareCornerX[1], y + scale * squareCornerY[1]);
context.lineTo(x + scale * squareCornerX[2], y + scale * squareCornerY[2]);
context.lineTo(x + scale * squareCornerX[3], y + scale * squareCornerY[3]);
this.context.fillStyle = cell.getColor();
this.context.fill();
context.fillStyle = cell.getColor();
context.fill();
}
outline(cell) {
outline(context, 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]);
this.context.lineTo(x + scale * squareCornerX[1], y + scale * squareCornerY[1]);
this.context.lineTo(x + scale * squareCornerX[2], y + scale * squareCornerY[2]);
this.context.lineTo(x + scale * squareCornerX[3], y + scale * squareCornerY[3]);
this.context.closePath();
context.beginPath();
context.moveTo(x + scale * squareCornerX[0], y + scale * squareCornerY[0]);
context.lineTo(x + scale * squareCornerX[1], y + scale * squareCornerY[1]);
context.lineTo(x + scale * squareCornerX[2], y + scale * squareCornerY[2]);
context.lineTo(x + scale * squareCornerX[3], y + scale * squareCornerY[3]);
context.closePath();
this.context.lineWidth = cell.width;
this.context.strokeStyle = cell.getColor();
this.context.stroke();
context.lineWidth = cell.width;
context.strokeStyle = cell.getColor();
context.stroke();
}
}

2
src/utils.js
View File

@@ -1,4 +1,6 @@
export function noop() {};
export function throttleEvent(type, name, obj) {
obj = obj || window;
let running = false;