A Pressing Matter (#11)

src/main.js

@@ -1,3 +1,6 @@
+const ONE_SECOND = 1000;
+const PRESS_RIPPLE = ONE_SECOND / 3;
+
 const DEFAULTS = {
 	board:       Tessellate.BOARD_STYLES.HEX,
 	style:       Tessellate.DRAW_STYLES.FILL,
@@ -5,11 +8,26 @@ const DEFAULTS = {
 	tile:        Tessellate.TILE_STYLES.HEX,
 };
 
+const pressRipple = function() {
+	const sinStart = 2 * Math.PI;
+	const halfPi = Math.PI / 2;
+
+	return pressFactor => Math.sin(sinStart + (pressFactor * halfPi)) + 1;
+}();
+
+const pressFade = function() {
+	const halfPi = Math.PI / 2;
+
+	return pressFactor => Math.sin(Math.PI + (pressFactor * halfPi)) + 1;
+}();
+
 class Demo {
 	constructor() {
 		[
 			'setOriginTile',
-			'onTap',
+			'tap',
+			'pressStart',
+			'press',
 			'createTile',
 			'drawTile',
 			'draw',
@@ -21,11 +39,14 @@ class Demo {
 
 		this.map = {};
 		this.taps = [];
+		this.ripples = [];
 		this.setOriginTile();
 
 		this.tessellate = new Tessellate(Object.assign({
 			element: '#container',
-			tap: this.onTap,
+			tap: this.tap,
+			pressStart: this.pressStart,
+			press: this.press,
 			draw: this.draw,
 		}, this.settings));
 	}
@@ -62,7 +83,7 @@ class Demo {
 		});
 	}
 
-	onTap(tap) {
+	tap(tap) {
 		const {x, y, z} = tap.tile.getPoint();
 		console.log(x, y, z);
 
@@ -70,40 +91,77 @@ class Demo {
 
 		this.map[key].pips = Tessellate.utils.random(1,7);
 		console.log(this.map[key].pips);
-
-//		console.log(tap.tile.getPoint());
-//
-//		this.taps.push(this.createTile(
-//			tap.tile.x,
-//			tap.tile.y,
-//
-//			Tessellate.utils.random(Tessellate.DRAW_STYLES),
-//			Tessellate.utils.random(Tessellate.TILE_STYLES),
-//			Tessellate.utils.random(Tessellate.TILE_ORIENTATIONS),
-//		));
 	}
 
-	createTile(x, y, drawStyle, tileStyle, orientation) {
+	pressStart(tap) {
+		this.ripples.push({
+			timestamp: tap.event.timeStamp,
+
+			cell: this.createTile({
+				x: tap.tile.x,
+				y: tap.tile.y,
+
+				scale: 1.0,
+
+				drawStyle: Tessellate.DRAW_STYLES.FILL,
+				tileStyle: Tessellate.TILE_STYLES.CIRCLE,
+				orientation: Tessellate.TILE_ORIENTATIONS.FLAT,
+
+				red:   255,
+				green: 127,
+				blue:  127,
+				alpha: 0.5,
+			})
+		});
+
+		this.taps.push(this.createTile({
+			x: tap.tile.x,
+			y: tap.tile.y,
+
+			drawStyle: Tessellate.utils.random(Tessellate.DRAW_STYLES),
+			tileStyle: Tessellate.utils.random(Tessellate.TILE_STYLES),
+			orientation: Tessellate.utils.random(Tessellate.TILE_ORIENTATIONS),
+		}));
+	}
+
+	press(tap) {
+		console.log('PRESS END');
+	}
+
+	createTile({x, y,
+		drawStyle, tileStyle, orientation,
+		scale = Tessellate.utils.random(7, 9) / 10,
+		red =   Tessellate.utils.random(255),
+		green = Tessellate.utils.random(255),
+		blue =  Tessellate.utils.random(255),
+		alpha = Tessellate.utils.random(25, 75) / 100,
+	}) {
+
 		return new Tessellate.Cell({
 			x, y,
 
-			scale: Tessellate.utils.random(7, 9) / 10,
+			scale,
 
 			drawStyle,
 			tileStyle,
 			orientation,
 
-			red: Tessellate.utils.random(255),
-			green: Tessellate.utils.random(255),
-			blue: Tessellate.utils.random(255),
-			alpha: Tessellate.utils.random(25,75)/100
+			red,
+			green,
+			blue,
+			alpha,
 		});
 	}
 
 	drawTile({x, y, z}, context, scale) {
 		const key = `${ x },${ z != null ? z : y }`;
 
-		this.map[key] = this.map[key] || this.createTile(x, y, this.settings.style, this.settings.tile, this.settings.orientation);
+		this.map[key] = this.map[key] || this.createTile({
+			x, y,
+			drawStyle: this.settings.style,
+			tileStyle: this.settings.tile,
+			orientation: this.settings.orientation,
+		});
 
 		const tile = this.map[key];
 		const pixelPoint = this.tessellate.tileToPixel(x, y, z);
@@ -115,6 +173,21 @@ class Demo {
 	draw({context, scale, tilePoints}) {
 		tilePoints.forEach(tilePoint => this.drawTile(tilePoint, context, scale));
 
+		const now = Date.now();
+		this.ripples.forEach(({timestamp, cell}) => {
+			let pressFactor = (now - timestamp) / PRESS_RIPPLE;
+			pressFactor = pressFactor > 1 ? 1 : pressFactor;
+
+			Object.assign(cell, {
+				scale: pressRipple(pressFactor),
+				alpha: pressFade(pressFactor),
+			});
+
+			const pixelPoint = this.tessellate.tileToPixel(cell.x, cell.y);
+			Tessellate.TILES[cell.tileStyle][cell.drawStyle](context, scale, pixelPoint.getX(), pixelPoint.getY(), cell);
+		});
+		this.ripples = this.ripples.filter(ripple => (ripple.timestamp + PRESS_RIPPLE) > now);
+
 		this.taps.forEach(cell => {
 			const pixelPoint = this.tessellate.tileToPixel(cell.x, cell.y);
 			Tessellate.TILES[cell.tileStyle][cell.drawStyle](context, scale, pixelPoint.getX(), pixelPoint.getY(), cell);