Face tracking optimization

public/coffeescripts/libs/webgl/effects.coffee

@@ -5,8 +5,27 @@ define([
   'libs/face/face'
 ], ($, kendo) ->
 
-    face = {}
-    buffer =[]
+    face = {
+
+        props: 
+            glasses: new Image()
+            horns: new Image()
+            hipster: new Image()
+            sombraro: new Image()
+            backCanvas: {}
+            width: 200
+
+        backCanvas: document.createElement "canvas"
+
+        comp: []
+
+        lastCanvas: {}
+
+        backCtx: {}
+    }
+
+    timeStripsBuffer = []
+    ghostBuffer = []
 
     draw = (canvas, element, effect) ->
         texture = canvas.texture(element)
@@ -25,23 +44,24 @@ define([
 
         face.ctx.drawImage(video, 0, 0, video.width, video.height)
         face.backCtx.drawImage(video, 0, 0, face.backCanvas.width, face.backCanvas.height)
-
-        comp = ccv.detect_objects {
-            canvas: face.backCanvas,
-            cascade: cascade,
-            interval: 4,
-            min_neighbors: 1
-        }
+
+        if not pub.isPreview
+
+            comp = ccv.detect_objects {
+                canvas: face.backCanvas,
+                cascade: cascade,
+                interval: 4,
+                min_neighbors: 1
+            }
+
+        else [{ x: video.width * .375, y: video.height * .375, width: video.width / 4, height: video.height / 4 }]
 
     trackFace = (video, canvas, prop, xoffset, yoffset, xscaler, yscaler) ->
 
         aspectWidth = video.width / face.backCanvas.width
         face.backCanvasheight = (video.height / video.width) * face.backCanvas.width
         aspectHeight = video.height / face.backCanvas.height
 
-        w = 4
-        m = 4
-
         comp = faceCore video, canvas, prop
 
         if comp.length
@@ -50,10 +70,11 @@ define([
         for i in face.comp
             face.ctx.drawImage prop, 
                 (i.x * aspectWidth) - (xoffset * aspectWidth), 
-                (i.y * aspectHeight) - (yoffset * aspectHeight) 
+                (i.y * aspectHeight) - (yoffset * aspectHeight),
                 (i.width * aspectWidth) * xscaler, 
                 (i.height * aspectWidth) * yscaler
 
+
     trackHead = (video, canvas, prop, xOffset, yOffset, width, height) ->
 
         aspectWidth = video.width / face.backCanvas.width
@@ -74,31 +95,21 @@ define([
 
     pub = 
 
+        isPreview: true
+
         clearBuffer: ->
 
-            buffer = []
+            timeStripsBuffer = []
+            ghostBuffer = []
 
         init: ->
 
-            face.backCanvas = document.createElement "canvas"
-            face.backCanvas.width = 200
-
-            face.comp = []
-
-            face.lastCanvas = {}
-
             face.backCtx = face.backCanvas.getContext "2d"
 
-            face.props = {}
-
-            face.props.glasses = new Image()
             face.props.glasses.src = "images/glasses.png"
-
-            face.props.horns = new Image()
             face.props.horns.src = "images/horns.png"
-
-            face.props.hipster = new Image()
             face.props.hipster.src = "images/hipster.png"
+            face.props.sombraro.src = "images/sombraro.png"
 
 
         data: [
@@ -308,12 +319,12 @@ define([
                         effect = ->
 
                             createBuffers = (length) ->
-                                while buffer.length < length
-                                    buffer.push canvas.texture(element)
+                                while timeStripsBuffer.length < length
+                                    timeStripsBuffer.push canvas.texture(element)
 
                             createBuffers(32)
-                            buffer[frame++ % buffer.length].loadContentsOf(element)
-                            canvas.timeStrips(buffer, frame)
+                            timeStripsBuffer[frame++ % timeStripsBuffer.length].loadContentsOf(element)
+                            canvas.timeStrips(timeStripsBuffer, frame)
                             canvas.matrixWarp([-1, 0, 0, 1], false, true)
 
                         draw(canvas, element, effect)
@@ -328,13 +339,13 @@ define([
                         effect = ->
 
                             createBuffers = (length) ->
-                                while buffer.length < length
-                                    buffer.push canvas.texture(element)
+                                while ghostBuffer.length < length
+                                    ghostBuffer.push canvas.texture(element)
 
                             createBuffers(32)
-                            buffer[frame++ % buffer.length].loadContentsOf(element)
+                            ghostBuffer[frame++ % ghostBuffer.length].loadContentsOf(element)
                             canvas.matrixWarp([1, 0, 0, 1], false, true)
-                            canvas.blend buffer[frame % buffer.length], .5
+                            canvas.blend ghostBuffer[frame % ghostBuffer.length], .5
                             canvas.matrixWarp([-1, 0, 0, 1], false, true)
 
                         draw(canvas, element, effect)
@@ -394,6 +405,14 @@ define([
                         trackFace video, canvas, face.props.hipster, 0, 0, 1, 2.2
                 }
 
+                # {
+                #     name: "Sombraro"
+                #     kind: "face"
+                #     filter: (canvas, video) ->
+
+                #         trackFace video, canvas, face.props.sombraro, 75, 25, 4, 2
+                # }
+
 
         ]
 

public/coffeescripts/mylibs/preview/preview.coffee

@@ -63,6 +63,8 @@ define([
 
             $.subscribe("/preview/show", (e) ->
 
+                effects.isPreview = false
+
                 effects.clearBuffer()
 
                 $.extend(preview, e)
@@ -128,10 +130,7 @@ define([
                     $mask.fadeIn 50, -> 
                         $mask.fadeOut 900, ->
 
-                            if trackingFace
-                                images.push canvas.toDataURL()
-                            else
-                                images.push webgl.toDataURL()
+                            currentCanvas.toDataURL()
 
                             if photoNumber > 0
 

public/coffeescripts/mylibs/preview/selectPreview.coffee

@@ -65,6 +65,7 @@ define([
                 $container.kendoStop(true).kendoAnimate({ effects: "zoomIn fadeIn", show: true, duration: 500, complete: ->
                     $("footer").kendoStop(true).kendoAnimate({ effects: "fadeIn", show: true, duration: 200 })
                     paused = false
+                    effects.isPreview = true
                 })
             )
 

public/javascripts/mylibs/preview/preview.js

@@ -45,6 +45,7 @@
         $preview.append(canvas);
         $preview.append(webgl);
         $.subscribe("/preview/show", function(e) {
+          effects.isPreview = false;
           effects.clearBuffer();
           $.extend(preview, e);
           if (preview.kind === "face") {
@@ -124,11 +125,7 @@
             --photoNumber;
             return $mask.fadeIn(50, function() {
               return $mask.fadeOut(900, function() {
-                if (trackingFace) {
-                  images.push(canvas.toDataURL());
-                } else {
-                  images.push(webgl.toDataURL());
-                }
+                currentCanvas.toDataURL();
                 if (photoNumber > 0) {
                   return $.publish("/camera/countdown", [3, callback]);
                 } else {

public/stylesheets/site.css

@@ -39,7 +39,7 @@ body {
 
 #sidebar {
 	height: 100%;
-    position: absolute;
+    position: fixed;
     z-index: 100;
     top: 0;
     left:auto;
@@ -268,6 +268,8 @@ footer img {
 
 #camera .header {
 	display: none;
+	margin: 20px 0px 0px 20px;
+	text-align: left;
 }
 
 #camera .body {
@@ -379,4 +381,16 @@ box-shadow: 10px 10px 5px #888;
 	border: none;
 	resize: none;
 	margin-top: 10px;
+}
+
+.pager {
+	margin-top: 20px;
+}
+
+.pager h3 {
+	display: inline
+}
+
+.pager button {
+	margin-left: 20px;
 }