67 lines
1.5 KiB
JavaScript
67 lines
1.5 KiB
JavaScript
|
|
import {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 Cell from './cell.js';
|
|
|
|
export default class Tessellate {
|
|
constructor(settings) {
|
|
['draw'].map(method => {this[method] = this[method].bind(this)});
|
|
|
|
this.element = document.querySelector(settings.element);
|
|
|
|
this.sketch = new Sketch({
|
|
element: this.element,
|
|
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
|
|
}));
|
|
}
|
|
});
|
|
|
|
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) {
|
|
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));
|
|
}
|
|
}
|