Remove unneeded temp canvas

cpury · Aug 24, 2018 · dfc79fe · dfc79fe
1 parent acc74d5
commit dfc79fe
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 31 deletions.
diff --git a/index.html b/index.html
@@ -72,19 +72,15 @@ <h3>Hi there! 😃</h3>
     </div>
   </div>
 
-  <div id="video-container">
-    <video id="webcam" width="400" height="300" preload="auto" loop playsinline autoplay>
-    </video>
-    <canvas id="overlay" width="400" height="300"></canvas>
-  </div>
+  <video id="webcam" width="400" height="300" autoplay></video>
+  <canvas id="overlay" width="400" height="300"></canvas>
 
   <footer>
     Created with TensorFlow.js by Max Schumacher.
     <a href="https://github.com/cpury/lookie-lookie" target="_blank" alt="Source">Source</a>
   </footer>
 
   <canvas id="eyes" width="50" height="25"></canvas>
-  <canvas id="temp" width="400" height="300"></canvas>
 
   <div id="target"></div>
 

diff --git a/js/dataset.js b/js/dataset.js
@@ -28,14 +28,12 @@ window.dataset = {
     // - angle of rectangle (TODO)
     var x = facetracker.currentEyeRect[0] + (facetracker.currentEyeRect[2] / 2);
     var y = facetracker.currentEyeRect[1] + (facetracker.currentEyeRect[3] / 2);
-    var canvasWidth = $('#temp').width();
-    var canvasHeight = $('#temp').height();
 
-    x = (x / canvasWidth) * 2 - 1;
-    y = (y / canvasHeight) * 2 - 1;
+    x = (x / facetracker.vidWidth) * 2 - 1;
+    y = (y / facetracker.vidHeight) * 2 - 1;
 
-    var rectWidth = facetracker.currentEyeRect[2] / canvasWidth;
-    var rectHeight = facetracker.currentEyeRect[3] / canvasHeight;
+    var rectWidth = facetracker.currentEyeRect[2] / facetracker.vidWidth;
+    var rectHeight = facetracker.currentEyeRect[3] / facetracker.vidHeight;
 
     if (mirror) {
       x = 1 - x;

diff --git a/js/facetracker.js b/js/facetracker.js
@@ -91,15 +91,22 @@ $(document).ready(function () {
       var rect = facetracker.getEyesRect(position);
       facetracker.currentEyeRect = rect;
 
-      var tempCanvas = document.getElementById('temp');
-      var tempCtx = tempCanvas.getContext('2d');
       var eyesCanvas = document.getElementById('eyes');
       var eyesCtx = eyesCanvas.getContext('2d');
 
-      tempCtx.drawImage(facetracker.vid, 0, 0, facetracker.vidWidth, facetracker.vidHeight);
-      eyesCtx.drawImage(tempCanvas, rect[0], rect[1], rect[2], rect[3], 0, 0, eyesCanvas.width, eyesCanvas.height);
-      tempCtx.strokeStyle = 'green';
-      tempCtx.strokeRect(rect[0], rect[1], rect[2], rect[3]);
+      // Resize because the underlying video might be a different resolution:
+      var resizeFactorX = facetracker.vid.videoWidth / facetracker.vidWidth;
+      var resizeFactorY = facetracker.vid.videoHeight / facetracker.vidHeight;
+
+      // facetracker.overlayCC.drawImage(facetracker.vid, 0, 0, facetracker.vidWidth, facetracker.vidHeight);
+      facetracker.overlayCC.strokeStyle = 'red';
+      facetracker.overlayCC.strokeRect(rect[0], rect[1], rect[2], rect[3]);
+      eyesCtx.drawImage(
+        facetracker.vid,
+        rect[0] * resizeFactorX, rect[1] * resizeFactorY,
+        rect[2] * resizeFactorX, rect[3] * resizeFactorY,
+        0, 0, eyesCanvas.width, eyesCanvas.height
+      );
     }
   };
 

diff --git a/style.css b/style.css
@@ -6,26 +6,16 @@ body, html {
   color: rgba(0, 0, 0, 0.8);
 }
 
-#video-container, #webcam, #overlay {
-  /* width: 50%;
-  height: 50%; */
+#webcam, #overlay {
   position: absolute;
   top: 0;
   left: 0;
 }
 
 #eyes {
-  /* width: 200px;
-  height: 100px; */
   position: absolute;
-  bottom: 0;
-  right: 0;
-}
-
-#temp {
-  position: absolute;
-  bottom: 0;
-  left: 0;
+  top: 0;
+  left: 400px;
 }
 
 #target {