Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Face tracking optimization

  • Loading branch information...
commit d1ae7670e365eba433d8ec81dca46479b52e5080 1 parent 1d922ee
@burkeholland authored
View
91 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,13 +44,17 @@ 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) ->
@@ -39,9 +62,6 @@ define([
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
+ # }
+
]
View
7 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
View
1  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
})
)
View
BIN  public/images/Sombraro.png 100755 → 100644
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
78 public/javascripts/libs/webgl/effects.js
@@ -1,9 +1,23 @@
(function() {
define(['jQuery', 'Kendo', 'libs/face/ccv', 'libs/face/face'], function($, kendo) {
- var buffer, draw, face, faceCore, pub, trackFace, trackHead;
- face = {};
- buffer = [];
+ var draw, face, faceCore, ghostBuffer, pub, timeStripsBuffer, trackFace, trackHead;
+ 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 = function(canvas, element, effect) {
var texture;
texture = canvas.texture(element);
@@ -20,20 +34,29 @@
}
face.ctx.drawImage(video, 0, 0, video.width, video.height);
face.backCtx.drawImage(video, 0, 0, face.backCanvas.width, face.backCanvas.height);
- return comp = ccv.detect_objects({
- canvas: face.backCanvas,
- cascade: cascade,
- interval: 4,
- min_neighbors: 1
- });
+ if (!pub.isPreview) {
+ return comp = ccv.detect_objects({
+ canvas: face.backCanvas,
+ cascade: cascade,
+ interval: 4,
+ min_neighbors: 1
+ });
+ } else {
+ return [
+ {
+ x: video.width * .375,
+ y: video.height * .375,
+ width: video.width / 4,
+ height: video.height / 4
+ }
+ ];
+ }
};
trackFace = function(video, canvas, prop, xoffset, yoffset, xscaler, yscaler) {
- var aspectHeight, aspectWidth, comp, i, m, w, _i, _len, _ref, _results;
+ var aspectHeight, aspectWidth, comp, i, _i, _len, _ref, _results;
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) face.comp = comp;
_ref = face.comp;
@@ -60,22 +83,17 @@
return _results;
};
return pub = {
+ isPreview: true,
clearBuffer: function() {
- return buffer = [];
+ timeStripsBuffer = [];
+ return ghostBuffer = [];
},
init: function() {
- 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();
- return face.props.hipster.src = "images/hipster.png";
+ face.props.hipster.src = "images/hipster.png";
+ return face.props.sombraro.src = "images/sombraro.png";
},
data: [
{
@@ -304,14 +322,14 @@
createBuffers = function(length) {
var _results;
_results = [];
- while (buffer.length < length) {
- _results.push(buffer.push(canvas.texture(element)));
+ while (timeStripsBuffer.length < length) {
+ _results.push(timeStripsBuffer.push(canvas.texture(element)));
}
return _results;
};
createBuffers(32);
- buffer[frame++ % buffer.length].loadContentsOf(element);
- canvas.timeStrips(buffer, frame);
+ timeStripsBuffer[frame++ % timeStripsBuffer.length].loadContentsOf(element);
+ canvas.timeStrips(timeStripsBuffer, frame);
return canvas.matrixWarp([-1, 0, 0, 1], false, true);
};
return draw(canvas, element, effect);
@@ -326,15 +344,15 @@
createBuffers = function(length) {
var _results;
_results = [];
- while (buffer.length < length) {
- _results.push(buffer.push(canvas.texture(element)));
+ while (ghostBuffer.length < length) {
+ _results.push(ghostBuffer.push(canvas.texture(element)));
}
return _results;
};
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);
return canvas.matrixWarp([-1, 0, 0, 1], false, true);
};
return draw(canvas, element, effect);
View
7 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 {
View
3  public/javascripts/mylibs/preview/selectPreview.js
@@ -51,7 +51,8 @@
show: true,
duration: 200
});
- return paused = false;
+ paused = false;
+ return effects.isPreview = true;
}
});
});
View
16 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;
}
View
2  views/index.jade
@@ -7,8 +7,8 @@
#main
.absolute
#previews
- h3 Select An Effect
.pager
+ h3 Select An Effect
button.button.more More
.pages
.current-page
Please sign in to comment.
Something went wrong with that request. Please try again.