JSFiddle - React, Tailwind, and code Playground

HTML

<a href=https://youtu.be/rgIkcQN2jn4>Video of how to use this</a>

<input type=checkbox id='chkPause'>
<video width="128" height="128" id="video" autoplay="autoplay"></video>a
<canvas width="128" height="384" id="canvas"></canvas>b

Works in firefox (and which others?), not in chrome.

Cut and tape any orange or red rope or wire into a loop. Hold in front of webcam and watch the visual algorithm find it as you move and bend it. You can change the colors and patterns it recognizes in the code here. I told it to look for moving red things in this early experiment.

JavaScript

var video = document.getElementById('video');
var videoStream = null;

var canvas = document.getElementById('canvas');
var canvasContext = null;
//var canvasContext = canvas.getContext('2d');
//var imageData = context.createImageData(canvas.width,canvas.height);
//var imageData = context.getImageData(0, 0, video.width, video.height);
//var pixels = imageData.data;

//var canvasImageData = canvasContext.getImageData(0, 0, canvas.width, canvas.height);
//canvasContext.putImageData(canvasImageData, 0, 0);
//var canvasPixels = canvasImageData.data;

var canvasImageData = null;
var canvasPixels = null;

var byteRect = null;

var started = false;

var log = function(text){
	console.log(text);
};

var colorDimRed = 0;
var colorDimGreen = 1;
var colorDimBlue = 2;
var colorDimAlpha = 3;

//readable and writable pixels as Uint8Array. A canvas is a kind of Uint8Array.
//Single pixel read and write funcs are slow unless you just do a few places.
//TODO Write horizontal lines of same color or 2 colors on end interpolating between,
//and these lines can be derived from triangle which has different color at each corner.
var ByteRect = function(bytes, height, width){
	this.bytes = bytes;
	this.height = height;
	this.width = width;
	this.index = function(y, x, colorDim){
		return (y*this.width+x)*4+colorDim;
	};
	this.read = function(y, x, colorDim){
		return this.bytes[(y*this.width+x)*4+colorDim];
	};
	this.write = function(y, x, colorDim, bright){
		this.bytes[(y*this.width+x)*4+colorDim] = bright;
	};
	this.writeHoriz = function(y, fromX, toXExclusive, colorDim, fromBright, toBright){
		var indexStart = this.index(y, fromX, colorDim);
		var pixelSiz = toXExclusive-fromX;
		var siz = pixelSiz*4;
		var bright = fromBright;
		var brightAdd = (toBright-fromBright)/pixelSiz;
		for(var i=0; i<siz; i+=4){
			bright += brightAdd;
			this.bytes[indexStart+i] = Math.floor(bright) & 0xff;
		}
	};
};

/*
//backed view of part of a ByteRect
var SubRect = function(byteRect, innerY, innerX,...