old turret p

by frogggeee McFrogggeee

HTML

<body>
<p id = "info">

</p>
<canvas id="canvas" width="480" height="360" style="border: 1px solid;"></canvas>

<!-- -->
<video id="video" autoplay></video>

<div id="results"></div>

<script>
  
</script>
</body>

CSS

canvas {
  position: absolute;
  left: 0;
  top: 0;
}
body {
}
video {
position: absolute;
top: 360px;
left: 0;
border: 0px solid;
}
p {
  color: white;
  z-index: 3;
  position: absolute;
  top: -10px;
  left: 5px;
}

JavaScript

/*
IDEAS

when screen moves, stationary entities have shifted clumps of values on the graph

increase sensitivity in the dimensions of a high priority blob

if multiple new small blobs appear inside an old big blob, merge the small blobs
*/
let graphs = true;
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let video = document.getElementById("video");
let count = 0;
let oldImage = [];
let mx = 0; // mouse x
let my = 0; // mouse y
let info;
let image = [];
let pause = -1;
const minimum = 0; // minimum pixel motion value to turn green
let stop = false;
let stage = 2;
let pixelArray = [];
let streaming = false;
let blobs = [];
let distThreshold = 3; // 2=blobs defined by touching 3=blobs defined by up to 1 pixel away
let pixelSize = 8;
let blobPos = [];
let blobInfo = [];
let movement = 0;
let pixelBrightnesses = [];
let brightPixels = [];
let pixelFuzz = [];
let allPixelFuzz = [];
let data;
let sensitiveSpots = []; // areas to increase sensitivity
/*
structure:
sensitiveSpots [
	spot 1 [x, y, w, h]
	spot 2 [x, y, w, h]
	spot 3 [x, y, w, h]
]
*/
let pri = [];
for (let i = 0; i < 111; i++) {
  pri.push(0);
}
let dimensions = [
  [],
  []
]; // new, old
let ids = [
  [],
  []
];
let marks = [28, 77];
ctx.globalCompositeOperation = 'difference';
let constraints = {
  audio: false,
  video: {
    width: 480,
    height: 360
  }
};
document.addEventListener('keydown', (event) => {
  var name = event.key;
  var code = event.code;
  if (code == "Digit1") {

  }
  if (event.key == "p") {
    pause *= -1;
  }
  if (event.key == "1") {
    stage = 1;
  }
  if (event.key == "2") {
    stage = 2;
  }
  if (event.key == "s") {
    stop = true;
  }
}, false);
document.addEventListener("mousedown", function(e) {
  pause *= -1;
});
document.addEventListener("mousemove", function moved(e) {
  const rect = e.target.getBoundingClientRect();
  mx = e.clientX - rect.left;
  my = e.clientY -...