-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
219 lines (193 loc) · 8.01 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<html>
<head>
<title>Pearson Hackathon 2014</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="js/three.min.js"></script>
<script src="js/headtrackr.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<canvas id="inputCanvas" width="320" height="240" style="display:none"></canvas>
<video id="inputVideo" autoplay loop></video>
<canvas id="overlay" width="320" height="240"></canvas>
<div id="character" class=""></div>
<div id="paths"></div>
<script type="text/javascript">
//Global variables that will be accessed in the functions below.
var currentKey; //records the current key pressed
var TimerWalk; //timer handle
var charStep = 2; //1=1st foot, 2=stand, 3=2nd foot, 4=stand
var charSpeed = 1000; //how fast the character will move
var maxHeight = window.innerHeight - 64;
var maxWidth = window.innnerWidth - 64;
//KeyDown Function
//if there is no currentKey down, execute charWalk
$(document).keydown(function(e) {
if (!currentKey) {
//set the currentKey to the key that is down
currentKey = e.keyCode;
//execute character movement function charWalk('direction')
switch(e.keyCode) {
case 38: charWalk('up'); break;
case 39: charWalk('right'); break;
case 40: charWalk('down'); break;
case 37: charWalk('left'); break;
}
}
});
//KeyUp Function
$(document).keyup(function(e) {
//don't stop the walk if the player is pushing other buttons
//only stop the walk if the key that started the walk is released
if (e.keyCode == currentKey) {
//set the currentKey to false, this will enable a new key to be pressed
currentKey = false;
//clear the walk timer
// clearInterval(TimerWalk);
//finish the character's movement
$('#character').stop(true, true);
}
});
function characterReset(){
// clearInterval(TimerWalk);
$('#character').stop(true, true);
//center character
$('#character').removeAttr('class');
$('#character').addClass(characterReset);
//clear path or transparent them!!!!
document.getElementsByClassName("path-pebbles").fadeTo( "slow", 0.33);
}
//Character Walk Function
function charWalk(dir) {
if (dir == 'up') dir = 'back';
if (dir == 'down') dir = 'front';
processWalk(dir);
}
//Process Character Walk Function
function processWalk(dir) {
//increment the charStep as we will want to use the next stance in the animation
//if the character is at the end of the animation, go back to the beginning
charStep++;
if (charStep == 5) charStep = 1;
//remove the current class
$('#character').removeAttr('class');
//add trail
var randomColor = Math.floor(Math.random()*16777215).toString(16);
$( "#paths" ).append("<div class=\"path-pebbles\"style=\"top:" + $('#character').position().top + "px; left:" +$('#character').position().left +"px; background-color:"+randomColor+";\"> </div>" );
//add the new class
switch(charStep) {
case 1: $('#character').addClass(dir+'-stand'); break;
case 2: $('#character').addClass(dir+'-right'); break;
case 3: $('#character').addClass(dir+'-stand'); break;
case 4: $('#character').addClass(dir+'-left'); break;
}
//move the char
//we will only want to move the character 32px (which is 1 unit) in any direction
console.log("before:" + $('#character').position().top + ", " + $('#character').position().left);
switch(dir) {
case'front':
$('#character').animate({top: '+=32'}, charSpeed);
break;
case'back':
//don't let the character move any further up if they are already at the top of the screen
if ($('#character').position().top > 0) {
$('#character').animate({top: '-=32'}, charSpeed);
}
break;
case'left':
//don't let the character move any further left if they are already at the left side of the screen
if ($('#character').position().left > 0) {
$('#character').animate({left: '-=32'}, charSpeed);
}
break;
case'right':
$('#character').animate({left: '+=32'}, charSpeed);
break;
}
//pull back from the brink
console.log("after:" + $('#character').position().top + ", " + $('#character').position().left);
if($('#character').position().left >= maxWidth){
$('#character').animate({left: '-=100'}, charSpeed);
}
if($('#character').position().top >= maxHeight){
$('#character').animate({top: '-=100'}, charSpeed);
}
}
</script>
<script type="text/javascript">
//globals to track face path
var lastFaceX = 0;
var lastFaceY = 0;
var currentFaceX = 0;
var currentFaceY = 0;
var onceEverySixtyFrames = 0;
var videoInput = document.getElementById('inputVideo');
var canvasInput = document.getElementById('inputCanvas');
var canvasOverlay = document.getElementById('overlay');
var overlayContext = canvasOverlay.getContext('2d');
canvasOverlay.style.position = "absolute";
canvasOverlay.style.top = '0px';
canvasOverlay.style.zIndex = '100001';
canvasOverlay.style.display = 'block';
var htracker = new headtrackr.Tracker({calcAngles : true });
htracker.init(videoInput, canvasInput);
htracker.start();
document.addEventListener("facetrackingEvent", function( event ) {
// clear canvas
overlayContext.clearRect(0,0,320,240);
// once we have stable tracking, draw rectangle
if (event.detection == "CS") {
currentFaceY = event.y;
currentFaceX = event.x;
//pretty square around face
// overlayContext.translate(event.x, event.y)
// overlayContext.rotate(event.angle-(Math.PI/2));
// overlayContext.strokeStyle = "#AFEEEE";
// overlayContext.strokeRect((-(event.width/2)) >> 0, (-(event.height/2)) >> 0, event.width, event.height);
// overlayContext.rotate((Math.PI/2)-event.angle);
// overlayContext.translate(-event.x, -event.y);
if (onceEverySixtyFrames >= 0)
{
//console.log("last xy: (" + lastFaceX + ", " + lastFaceY + ")");
//console.log("curr xy: (" + currentFaceX + ", " + currentFaceY + ")");
onceEverySixtyFrames = 0;
//move character based on last + current facePosition
if (currentFaceY > lastFaceY) {charWalk('up'); }
else if((currentFaceY < lastFaceY)){charWalk('down'); }
if (currentFaceX > lastFaceX) {charWalk('left'); }
else if(currentFaceX < lastFaceX){charWalk('right'); }
}
$('#character').stop(true, true);
lastFaceX = event.x;
lastFaceY = event.y;
onceEverySixtyFrames ++;
}
});
var drawIdent = function(cContext,x,y) {
// normalise values
x = (x/320)*canvasInput.width;
y = (y/240)*canvasInput.height;
// flip horizontally
x = canvasInput.width - x;
// clean canvas
cContext.clearRect(0,0,canvasInput.width,canvasInput.height);
// draw rectangle around canvas
//cContext.strokeRect(0,0,canvasInput.width,canvasInput.height);
// draw marker, from x,y position
cContext.beginPath();
cContext.moveTo(x-5,y);
cContext.lineTo(x+5,y);
cContext.closePath();
cContext.stroke();
cContext.beginPath();
cContext.moveTo(x,y-5);
cContext.lineTo(x,y+5);
cContext.closePath();
cContext.stroke();
};
document.addEventListener("facetrackingEvent", function(e) {
drawIdent(overlayContext, e.x, e.y);
}, false);
</script>
</body>
</html>