detect cards js

cartoon-battle · Feb 5, 2018 · d060e85 · d060e85
1 parent 886759a
commit d060e85
Show file tree

Hide file tree

Showing 5 changed files with 233 additions and 0 deletions.
diff --git a/detect-cards/Cards-1-1.png b/detect-cards/Cards-1-1.png
diff --git a/detect-cards/Cards-2-1.png b/detect-cards/Cards-2-1.png
diff --git a/detect-cards/click.js b/detect-cards/click.js
@@ -0,0 +1,110 @@
+var img = document.querySelector('img');
+var canvas = document.createElement('canvas');
+canvas.width = img.width;
+canvas.height = img.height;
+canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
+
+var expectedSize = {
+	w: 235,
+	h: 335,
+}
+var CARD_WIDTH = 235;
+var CARD_HEIGHT = 335;
+var EDGE_LENGTH = 100;
+var CHUNK = 4;
+
+function isColorSimilar(alpha, bravo) {
+	return  Math.abs(alpha.r - bravo.r) < 5 &&
+			Math.abs(alpha.g - bravo.g) < 5 &&
+			Math.abs(alpha.b - bravo.b) < 5;
+}
+
+function arrayToColor(arr) {
+	return {r: arr[0], g: arr[1], b: arr[2]}
+}
+
+function isVerticalEdge(point, distance) {
+	var edge = canvas.getContext('2d').getImageData(
+		Math.max(point.x + distance -1, 0), Math.max(point.y - EDGE_LENGTH, 0), 
+		2, EDGE_LENGTH*2
+	).data;
+
+	var diff = 0;
+	for (var i = 0; i < edge.length; i = i + CHUNK*2) {
+		diff += isColorSimilar(
+			arrayToColor(edge.slice(i,i+3)), 
+			arrayToColor(edge.slice(i+CHUNK,i+CHUNK+3))
+		) ? 0 : 1;
+	}
+
+	return diff > EDGE_LENGTH*0.9;
+}
+
+function isHorizontalEdge(point, distance) {
+	var edge = canvas.getContext('2d').getImageData(
+		Math.max(point.x - EDGE_LENGTH, 0), Math.max(point.y + distance -1, 0),
+		EDGE_LENGTH*2, 2
+	).data;
+
+	var diff = 0;
+	for (var i = 0; i < edge.length/2; i = i + CHUNK) {
+		diff += isColorSimilar(
+			arrayToColor(edge.slice(i,i+3)), 
+			arrayToColor(edge.slice(i+edge.length/2,i+edge.length/2+3))
+		) ? 0 : 1;
+	}
+
+	return diff > EDGE_LENGTH*0.9;
+}
+
+img.onclick = function (e) {
+	var pt = {x: e.offsetX, y: e.offsetY }
+	var orientation;
+
+	for (d = 0; d < 335; d++) {
+		if (isVerticalEdge(pt, d)) {
+			if (isVerticalEdge(pt, d - CARD_WIDTH) || (pt.x + d == CARD_WIDTH)) {
+				orientation = 'vertical';
+				break;
+			} else if (isVerticalEdge(pt, d - CARD_HEIGHT)  || (pt.x + d == CARD_HEIGHT)) {
+				orientation = 'horizontal';
+				break;
+			} else {
+				console.log("false positive vertical edge for x ", pt.x + d, (CARD_HEIGHT))
+			}
+		}
+	}
+
+	if (!orientation) {
+		console.log("Couldn’t detect a vertical edge");
+		return ;
+	}
+
+	// store left edge
+	pt.x = pt.x + d - ((orientation === 'horizontal') ? CARD_HEIGHT : CARD_WIDTH);
+
+	var verticalSize = (orientation === 'horizontal') ? CARD_WIDTH : CARD_HEIGHT;
+
+	var p2 = {x:e.offsetX, y:e.offsetY};
+	for (d = 0; d < verticalSize; d++) {
+		if (isHorizontalEdge(p2, d)) {
+			if (!isHorizontalEdge(p2, d - verticalSize)) {
+				console.log("false positive horizontal edge for x ", pt.x + d)
+				continue;
+			}
+
+			// store bottom edge
+			pt.y = pt.y + d;
+			break;
+		}
+	}
+
+	var div = img.parentNode.appendChild(document.createElement('div'));
+	div.className = orientation;
+	div.style.top = pt.y + 'px';
+	div.style.left = pt.x + 'px'
+
+	div.onclick = function () { this.parentNode.removeChild(this); }
+
+
+}
diff --git a/detect-cards/index.html b/detect-cards/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+
+<title></title>
+<style>
+	div.horizontal, div.vertical {
+		position: absolute;
+		box-sizing: border-box;
+		border: 4px dashed red;
+	}
+	div.horizontal {
+		width: 335px;
+		height: 235px;
+		margin-top: -235px;
+	}
+	div.vertical {
+		width: 235px;
+		height: 335px;
+		margin-top: -335px;
+	}
+	div div:nth-child(4n) { background-color: rgba(255, 0, 0, .2) }
+	div div:nth-child(4n +1) { background-color: rgba(255, 255, 0, .2) }
+	div div:nth-child(4n +2) { background-color: rgba(0, 255, 0, .2) }
+	div div:nth-child(4n +3) { background-color: rgba(255, 0, 255, .2) }
+
+</style>
+<div style=position:relative>
+<img src="Cards-2-1.png" style=display:block>
+</div>
+
+<script src="click.js"></script>
diff --git a/detect-cards/index.js b/detect-cards/index.js
@@ -0,0 +1,93 @@
+var img = document.querySelector('img');
+var canvas = document.createElement('canvas');
+canvas.width = img.width;
+canvas.height = img.height;
+canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
+
+var expectedSize = {
+	w: 235,
+	h: 335,
+}
+var currentPoint = {
+	x: 0,
+	y: img.height - 1,
+}
+function appendDiv(point, orientation) {
+	var div = document.createElement('div');
+
+	div.className = orientation;
+	div.style.top = point.y + 'px';
+	div.style.left = point.x + 'px';
+
+	img.parentNode.appendChild(div);
+}
+
+function isEdge(point, distance) {
+	var edge = canvas.getContext('2d').getImageData(
+		point.x + distance - 1, point.y - expectedSize.w, 
+		2, expectedSize.w
+	).data;
+
+	var diff = 0, chunk = 4;
+	for (var i = 0; i < edge.length; i = i + chunk*2) {
+		diff += (
+			Math.abs(edge[i + 0] - edge[i + 0 + chunk]) < 5 &&
+			Math.abs(edge[i + 1] - edge[i + 1 + chunk]) < 5 &&
+			Math.abs(edge[i + 2] - edge[i + 2 + chunk]) < 5
+		) ? 0 : 1;
+	}
+
+	return diff / expectedSize.w;
+}
+
+function hasVerticalEdge(point) {
+	return Math.max(
+		isEdge(point, expectedSize.w),
+		isEdge(point, expectedSize.w+1),
+		isEdge(point, expectedSize.w+2)
+	);
+}
+
+function hasHorizontalEdge(point) {
+	return Math.max(
+		isEdge(point, expectedSize.h),
+		isEdge(point, expectedSize.h+1),
+		isEdge(point, expectedSize.h+2)
+	);	
+}
+img.onload = function () {
+	return ;
+	for (var x = 0; x < img.width; x++) {
+		var edge = Math.round(isEdge({x: x, y: currentPoint.y}, 1) * 200);
+		var div = document.createElement('span');
+		div.style.position = 'absolute';
+		div.style.left = (x-3) + 'px';
+		div.style.borderLeft = '7px solid rgba(250,0,0,1)';
+		div.style.borderTop = '7px solid rgba(250,255,255,1)';
+		div.style.height = (edge-7) + 'px';
+		div.style.bottom = 0;
+
+		if (edge > 190)
+		img.parentNode.appendChild(div);
+	}
+
+//	return;
+
+	do {
+		var orientation = hasVerticalEdge(currentPoint) > hasHorizontalEdge(currentPoint) ? 'vertical' : 'horizontal';
+
+		console.log('Card at {', currentPoint.x + ", " + currentPoint.y, '} orientation is ', orientation);
+		console.log({
+			vertical: hasVerticalEdge(currentPoint),
+			horizontal: hasHorizontalEdge(currentPoint)
+		});
+
+		appendDiv(currentPoint, orientation)
+
+		currentPoint = {
+			x: currentPoint.x + ((orientation === 'horizontal') ? expectedSize.h : expectedSize.w),
+			y: currentPoint.y
+		}
+
+	} while(currentPoint.x < img.width);
+}