turret program

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: 1px solid;
}
p {
  color: white;
  z-index: 3;
  position: absolute;
  top: -10px;
  left: 5px;
}

JavaScript

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 pixelArray = [];
let streaming = false;
let blobs = [];
let distThreshold = 3; // 2=blobs defined by touching 3=blobs defined by up to 1 pixel away
let blobPos = [];
let blobInfo = [];
let movement = 0;
let pixelBrightnesses = [];
let brightPixels = [];
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;
  }
}, 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 - rect.top;
});
navigator.mediaDevices.getUserMedia(constraints)
  .then(success)
  .catch(error);

function success(stream) {
  var video = document.getElementById('video');
  video.srcObject = stream;
  setTimeout(function() {
    streaming = true;
    ctx.clearRect(0, 0, 1000, 1000);
    ctx.drawImage(video, 0, 0, 480, 360);
    oldImage = ctx.getImageData(0, 0, 480, 360);

    setTimeout(update, 100);
  }, 100);
}

function error(error) {
  console.log(error);
}

function avg(list) {
  let sum = 0;
  for (let i = 0; i < list.length; i++) {
    sum += list[i];
  }
  return sum / list.length;
}
let dist = function(x, y, x2, y2) {
  return Math.sqrt(((x - x2) * (x - x2)) + ((y - y2) * (y - y2)));
}

function update() {
  ctx.globalCompositeOperation = "difference";
  ctx.clearRect(0, 0, 1000, 1000);
  // calculate difference between images
 ...