pixelate

by frogggeee McFrogggeee

HTML

<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>

JavaScript

/*=====================================
=| BEFORE AND AFTER TEST. THIS IS  THE after
=|
=======================================*/
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let pData = [];

let imageData;
let video = document.getElementById("video");

var constraints = {
  audio: false,
  video: {
    width: 480,
    height: 360
  }
}
navigator.mediaDevices.getUserMedia(constraints)
  .then(success)
  .catch(error);

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

  }, 100);

}

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

function pixel() {
  function avg(list) {
    let sum = 0;
    for (let i = 0; i < list.length; i++) {
      sum += list[i];
    }
    return sum / list.length;
  }
  const size = 10;
  let pixelArray = [];
  let grey = function(x, y, subX, subY) {
    return Math.round((imageData.data[((y+subY) * imageData.width + x+subX) * 4] + imageData.data[((y+subY) * imageData.width + x+subX) * 4 + 1] + imageData.data[((y+subY) * imageData.width + x+subX) * 4 + 2]) / 3)
  };
  for (let y = 0; y < 360; y += size) {
    for (let x = 0; x < 480; x += size) {
      //pixelArray.push(grey(x, y, 0, 0));
      let average = [];
      for (let subY = 0; subY < size; subY+=imageData.width) {
        for (let subX = 0; subX < size; subX+=4) {
					average.push(grey(x, y, subX, subY));
        }
      }
      pixelArray.push(avg(average))
    }
  }
  //ctx.clearRect(0, 0, 1000, 1000);
  for (let i = 0; i < 360 / size; i++) {
    for (let j = 0; j < 480 / size; j++) {
      ctx.fillStyle = "rgba(" + pixelArray[i * 48 + j] + "," + pixelArray[i * 48 + j] + "," + pixelArray[i * 48 + j] + "," + 255 + ")";
      ctx.fillRect(size * j, size * i, size, size);
    }
  }

}