ZX-Spectral

WebCamera ZX-Spacing

by Ruslan Alikberov

HTML

<body onload='init()'>
<canvas width=256 height=192 style=position:absolute></canvas>
<video autoplay width=256 height=192 style=opacity:0.1></video><br />
<table>
<tr><td>Threshold</td><td><input type=number min=64 max=224 value=145 /></td></tr>
<tr><td>Black</td><td><input type=number min=64 max=224 value=64 /></td></tr>
<tr><td>white</td><td><input type=number min=64 max=224 value=80 /></td></tr>
</table>
</body>

JavaScript

var	gate	= null;
var	lower	= null;
var	higher	= null;
var	video	= null;
var	canvas	= null;
var	context	= null;
var	stream	= null;

function render() {
	var	factor	= +gate.value / 255;
	var	low	= +lower.value;
	var	high	= +higher.value;
	requestAnimationFrame(render);
	context.drawImage(video, 0, 0, 256, 192);
	for(var min, max, mid, r, g, b, rg, gb, br, p, f, i, x, y = 0; y < 24; ++ y) for(x = 0; x < 32; ++ x) {
		frame = context.getImageData(x * 8, y * 8, 8, 8);
		buffer = frame.data;
		for(i = 0, min = 0, max = 255; i < 256; i += 4) {
			g = buffer[i + 1];
			r = buffer[i + 2];
			b = buffer[i + 0];
			min = Math.min(r, g, b, min);
			max = Math.max(r, g, b, max);
		}
		max -= min;
		var palette = [0, 0, 0, 0, 0, 0, 0, 0];
		for(i = 0; i < 256; i += 4) {
			g = buffer[i + 1], r = buffer[i + 2], b = buffer[i + 0];
			rg = Math.abs(r - g), gb = Math.abs(g - b), br = Math.abs(b - r);
			min = Math.min(r, g, b), max = Math.max(r, g, b), mid = min + (max - min) * factor;
			if(r < low && g < low && b < low)
				r = g = b = 0;
			else
			if(r > high && g > high && b > high)
				r = 2, g = 4, b = 1;
			else
				b = b < mid ? 0 : 1, r = r < mid ? 0 : 2, g = g < mid ? 0 : 4;
			palette[b + r + g] ++;
		}
		for(i = 0, r = 0, g = 0, f = 0, p = 0; i < 8; ++ i) {
			b = palette[i];
			if(r < b)
				r = b, f = i;
			else
			if(g < b)
				g = b, p = i;
		}
		for(i = 0; i < 256; i += 4) {
			g = (buffer[i + 1] - min) / max > factor ? 4 : 0;
			r = (buffer[i + 2] - min) / max > factor ? 2 : 0;
			b = (buffer[i + 0] - min) / max > factor ? 1 : 0;
			g = buffer[i + 1], r = buffer[i + 2], b = buffer[i + 0];
			rg = Math.abs(r - g), gb = Math.abs(g - b), br = Math.abs(b - r);
			min = Math.min(r, g, b), max = Math.max(r, g, b), mid = min + (max - min) * factor;
			if(r < low && g < low && b < low)
				r = g = b = 0;
			else
			if(r > high && g > high && b > high)
				r = 2, g = 4, b = 1;
			else
				b = b < mid ? 0 : 1, r = r < mid ? 0 : 2, g = g < mid ? 0 : 4;
			if(r + g + b !=...