veltman/gist:8721937

## gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Face forward</title>
    <style type="text/css">
        body {
            margin-top: 20px;
            margin-left: 0px;
            margin-right: 0px;
            padding: 0px;
            font-family: Arial,Helvetica,sans-serif;
            font-size: 14px;
            background-color: #fff;
        }

        div.container {
            width: 600px;
            margin: auto;
        }

        div.container div {
            text-align: center;
        }

        span.faceAngle {
            font-size: 16px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>faceAngle: <span id="faceAngle">&nbsp;</span></div>
        <div>
            <video id="playbackVideo" controls>
                <source src="http://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm">
            </video>
        </div>
        <div>
            <canvas id="inputCanvas" width="320" height="240" style="display:none"></canvas>
            <video id="inputVideo" autoplay loop></video>
            <svg width="320" height="240" id="rectCanvas" style="position: relative; bottom: 240px;">
                <rect x="0" y="0" width="0" height="0"
                  style="fill:none;stroke:red;stroke-width:3; stroke-dasharray: 3,3; fill-opacity:0;
                  stroke-opacity:1"/>
            </svg>
        </div>
    </div>
    <div id="debug">
        <div>initialArea: <span id="initialArea"></span></div>
        <div>currentArea: <span id="currentArea"></span></div>
        <div>ratio: <span id="ratio"></span></div>
        <div>sampleCount: <span id="sampleCount"></span></div>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="popcorn.js"></script>
    <script src="headtrackr.js"></script>
    <script type="text/javascript">
        var htracker;
        var totalArea = 320*240;
        var initialArea = false;
        var ratio = 1;
        var sampleCount = 0;
        var ctx,c;

        var rect = d3.select("rect");

        $(document).ready(function() {
            var videoInput = document.getElementById('inputVideo');
            var canvasInput = document.getElementById('inputCanvas');

            htracker = new headtrackr.Tracker({calcAngles: true});
            htracker.init(videoInput, canvasInput);
            htracker.start();
            var pop = Popcorn("#playbackVideo");
            var center = 1.57079632679;
            var slowScale = d3.scale.linear().domain([1.5,center]).range([0.25,1]);
            var fastScale = d3.scale.linear().domain([center,1.6]).range([1,4]);

            document.addEventListener("facetrackingEvent", function(e) {
                if (sampleCount < 5) {
                    if (!initialArea) {
                        initialArea = e.height*e.width;
                    } else {
                        initialArea = ((initialArea*sampleCount)+(e.height*e.width))/(sampleCount+1);
                    }
                } else {
                    if (sampleCount == 5) {
                        pop.play();
                    }
                    ratio = initialArea/(e.height*e.width);
                }
                sampleCount++;
                $("span#sampleCount").html(sampleCount);
                $("span#initialArea").html(initialArea);
                $("span#ratio").html(ratio);
                $("span#currentArea").html(e.height*e.width);
                $("span#faceAngle").html(e.angle);
                pop.playblackRate(ratio);
                //pop.playbackRate((e.angle > center) ? slowScale(e.angle) : fastScale(e.angle) );
                rect.attr("width",e.width);
                rect.attr("height",e.height);
                rect.attr("x",e.x-(e.width/2));
                rect.attr("y",e.y-(e.height/2));
            });

        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Face forward</title>
	<style type="text/css">
	body {
	margin-top: 20px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 14px;
	background-color: #fff;
	}

	div.container {
	width: 600px;
	margin: auto;
	}

	div.container div {
	text-align: center;
	}

	span.faceAngle {
	font-size: 16px;
	font-weight: bold;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div>faceAngle: <span id="faceAngle"> </span></div>
	<div>
	<video id="playbackVideo" controls>
	<source src="http://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm">
	</video>
	</div>
	<div>
	<canvas id="inputCanvas" width="320" height="240" style="display:none"></canvas>
	<video id="inputVideo" autoplay loop></video>
	<svg width="320" height="240" id="rectCanvas" style="position: relative; bottom: 240px;">
	<rect x="0" y="0" width="0" height="0"
	style="fill:none;stroke:red;stroke-width:3; stroke-dasharray: 3,3; fill-opacity:0;
	stroke-opacity:1"/>
	</svg>
	</div>
	</div>
	<div id="debug">
	<div>initialArea: <span id="initialArea"></span></div>
	<div>currentArea: <span id="currentArea"></span></div>
	<div>ratio: <span id="ratio"></span></div>
	<div>sampleCount: <span id="sampleCount"></span></div>
	</div>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="popcorn.js"></script>
	<script src="headtrackr.js"></script>
	<script type="text/javascript">
	var htracker;
	var totalArea = 320*240;
	var initialArea = false;
	var ratio = 1;
	var sampleCount = 0;
	var ctx,c;

	var rect = d3.select("rect");

	$(document).ready(function() {
	var videoInput = document.getElementById('inputVideo');
	var canvasInput = document.getElementById('inputCanvas');

	htracker = new headtrackr.Tracker({calcAngles: true});
	htracker.init(videoInput, canvasInput);
	htracker.start();
	var pop = Popcorn("#playbackVideo");
	var center = 1.57079632679;
	var slowScale = d3.scale.linear().domain([1.5,center]).range([0.25,1]);
	var fastScale = d3.scale.linear().domain([center,1.6]).range([1,4]);

	document.addEventListener("facetrackingEvent", function(e) {
	if (sampleCount < 5) {
	if (!initialArea) {
	initialArea = e.height*e.width;
	} else {
	initialArea = ((initialAreasampleCount)+(e.heighte.width))/(sampleCount+1);
	}
	} else {
	if (sampleCount == 5) {
	pop.play();
	}
	ratio = initialArea/(e.height*e.width);
	}
	sampleCount++;
	$("span#sampleCount").html(sampleCount);
	$("span#initialArea").html(initialArea);
	$("span#ratio").html(ratio);
	$("span#currentArea").html(e.height*e.width);
	$("span#faceAngle").html(e.angle);
	pop.playblackRate(ratio);
	//pop.playbackRate((e.angle > center) ? slowScale(e.angle) : fastScale(e.angle) );
	rect.attr("width",e.width);
	rect.attr("height",e.height);
	rect.attr("x",e.x-(e.width/2));
	rect.attr("y",e.y-(e.height/2));
	});

	});
	</script>
	</body>
	</html>