19 done

goodmanship · goodmanship · commit aaed630c7952 · 2017-04-21T22:54:27.000-07:00
diff --git a/19 - Webcam Fun/index.html b/19 - Webcam Fun/index.html
@@ -10,7 +10,7 @@
   <div class="photobooth">
     <div class="controls">
       <button onClick="takePhoto()">Take Photo</button>
-<!--       <div class="rgb">
+      <div class="rgb">
         <label for="rmin">Red Min:</label>
         <input type="range" min=0 max=255 name="rmin">
         <label for="rmax">Red Max:</label>
@@ -29,7 +29,7 @@
         <input type="range" min=0 max=255 name="bmin">
         <label for="bmax">Blue Max:</label>
         <input type="range" min=0 max=255 name="bmax">
-      </div> -->
+      </div>
     </div>
 
     <canvas class="photo"></canvas>
diff --git a/19 - Webcam Fun/scripts.js b/19 - Webcam Fun/scripts.js
@@ -3,3 +3,84 @@ const canvas = document.querySelector('.photo');
 const ctx = canvas.getContext('2d');
 const strip = document.querySelector('.strip');
 const snap = document.querySelector('.snap');
+
+function getVideo() {
+  navigator.mediaDevices.getUserMedia({video: true, audio: false})
+    .then(localMediaStream => {
+      video.src = window.URL.createObjectURL(localMediaStream)
+      video.play()
+    })
+    .catch(err => console.log(err))
+}
+
+function paintToCanvas() {
+  const width = video.videoWidth
+  const height = video.videoHeight
+  canvas.width = width
+  canvas.height = height
+
+  return setInterval(() => {
+    ctx.drawImage(video, 0, 0, width, height)
+    let pixels = ctx.getImageData(0, 0, width, height)
+    // pixels.data = redEffect(pixels.data)
+    // pixels.data = rgbSplit(pixels.data)
+    // ctx.globalAlpha = 0.1
+    pixels.data = greenScreen(pixels.data)
+    ctx.putImageData(pixels, 0, 0)
+  }, 16)
+}
+
+function takePhoto() {
+  snap.currentTime = 0
+  snap.play()
+
+  const data = canvas.toDataURL('image/jpeg')
+  const link = document.createElement('a')
+  link.href = data
+  link.setAttribute('download', 'handsome')
+  link.innerHTML = `<img src="${data}" alt="handsome bitch" />`
+  strip.insertBefore(link, strip.firstChild)
+}
+
+function redEffect(pix) {
+  for(i = 0; i < pix.length; i+=4) {
+    pix[i] = pix[i] + 100
+    pix[i + 1] = pix[i + 1] - 50
+    pix[i + 2] = pix[i + 2] * 0.5
+  }
+  return pix
+}
+
+function rgbSplit(pix) {
+  for(i = 0; i < pix.length; i+=4) {
+    pix[i - 150] = pix[i]
+    pix[i + 100] = pix[i + 1]
+    pix[i - 150] = pix[i + 2]
+  }
+  return pix
+}
+
+function greenScreen(pix) {
+  const levels = {}
+  document.querySelectorAll('.rgb input').forEach(input => {
+    levels[input.name] = input.value
+  })
+
+  for (i = 0; i < pix.length; i+=4) {
+    red = pix[i]
+    blue = pix[i + 1]
+    green = pix[i + 2]
+    alpha = pix[i + 3]
+    if (red >= levels.rmin
+      && green >= levels.gmin
+      && blue >= levels.bmin
+      && red <= levels.rmax
+      && green <= levels.gmax
+      && blue <= levels.bmax) {
+      pix[i + 3] = 0
+    }
+  }
+  return pix
+}
+getVideo()
+video.addEventListener('canplay', paintToCanvas)
