-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathface_mask.html
333 lines (294 loc) · 44.3 KB
/
face_mask.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
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
<!doctype html>
<html lang="en">
<head>
<title>Face mask</title>
<meta charset="utf-8">
<style>
@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);
body {
font-family: 'Lato';
background-color: #f0f0f0;
margin: 0px auto;
max-width: 1150px;
}
#overlay, #webgl {
position: absolute;
top: 0px;
left: 0px;
-o-transform : scaleX(-1);
-webkit-transform : scaleX(-1);
transform : scaleX(-1);
-ms-filter : fliph; /*IE*/
filter : fliph; /*IE*/
}
#videoel {
-o-transform : scaleX(-1);
-webkit-transform : scaleX(-1);
transform : scaleX(-1);
-ms-filter : fliph; /*IE*/
filter : fliph; /*IE*/
}
#container {
position : relative;
width : 370px;
/*margin : 0px auto;*/
}
#content {
margin-top : 70px;
margin-left : 100px;
margin-right : 100px;
max-width: 950px;
}
#sketch {
display: none;
}
#filter {
display: none;
}
h2 {
font-weight : 400;
}
.masks {
display: none;
}
.nogum {
display : none;
}
.btn {
font-family: 'Lato';
font-size: 16px;
}
.hide {
display : none;
}
.nohide {
display : block;
}
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32642923-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<script src="./js/dat.gui.min.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/numeric-1.2.6.min.js"></script>
<script src="./js/mosse.js"></script>
<script src="./js/jsfeat-min.js"></script>
<script src="./js/frontalface.js"></script>
<script src="./js/jsfeat_detect.js"></script>
<script src="./js/left_eye_filter.js"></script>
<script src="./js/right_eye_filter.js"></script>
<script src="./js/nose_filter.js"></script>
<script src="./models/model_pca_20_svm.js"></script>
<script src="./js/clm.js"></script>
<script src="./js/svmfilter_webgl.js"></script>
<script src="./js/svmfilter_fft.js"></script>
<script src="./js/mossefilter.js"></script>
<script src="./js/Stats.js"></script>
<script src="./js/face_deformer.js"></script>
<div id="content">
<h2>Face mask</h2>
<div id="container">
<!--<video id="videoel" width="500" height="375" preload="auto">-->
<video id="videoel" width="400" height="300" preload="auto">
<!--<source src="./media/Capture_1_092.ogv" type="video/ogg"/>-->
</video>
<canvas id="overlay" width="400" height="300"></canvas>
<canvas id="webgl" width="400" height="300"></canvas>
</div>
<br/>
<input class="btn" type="button" value="wait, loading video" disabled="disabled" onclick="startVideo()" id="startbutton"></input>
<select name="mask" id="selectmask">
<option value="0">Average face</option>
<option value="1">Mona Lisa</option>
<option value="2">Ironman</option>
<option value="3">Skull mask</option>
<option value="4">Sean Connery</option>
<option value="5">Audrey</option>
<option value="6">Cage</option>
</select>
<div id="text">
<p>This is an example of face masking using the javascript library <a href="https://github.com/auduno/clmtrackr"><em>clmtrackr</em></a>.</p>
<p>Note that this example needs support for WebGL, and works best in Google Chrome.</p>
<div id="gum" class="nohide">
<p>To try it out:
<ol>
<li>allow the page to use your webcamera</li>
<li>make sure that your face is clearly visible in the video, and click start</li>
<li>keep your face still, and wait till model fits your face and mask is applied</li>
<li>try out different masks from the dropdown</li>
<ol>
</p>
</div>
<div id="nogum" class="hide">
<p>
There was some problem trying to capture your webcamera, please check that your browser supports WebRTC. Using a fallback video instead. try it out:
<ol>
<li>click start</li>
<li>wait till model fits the face and a mask is applied</li>
<li>try out different masks from the dropdown</li>
</ol>
</p>
</div>
</div>
<a href="https://github.com/auduno/clmtrackr"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_green_007200.png" alt="Fork me on GitHub"></a>
<img id="average" class="masks" src="./media/average.bmp"></img>
<img id="monalisa" class="masks" src="./media/joconde.jpg"></img>
<img id="ironman" class="masks" src="./media/ironman.jpg"></img>
<img id="sean" class="masks" src="./media/SeanConnery.jpg"></img>
<img id="skull" class="masks" src="./media/skullmask.jpg"></img>
<img id="audrey" class="masks" src="./media/audrey.jpg"></img>
<img id="cage2" class="masks" src="./media/cage.jpg"></img>
<script>
var vid = document.getElementById('videoel');
var overlay = document.getElementById('overlay');
var overlayCC = overlay.getContext('2d');
var ctrack = new clm.tracker();
ctrack.init(pModel);
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
document.getElementById('container').appendChild( stats.domElement );
function enablestart() {
var startbutton = document.getElementById('startbutton');
startbutton.value = "start";
startbutton.disabled = null;
}
var insertAltVideo = function(video) {
if (supports_video()) {
if (supports_ogg_theora_video()) {
video.src = "./media/cap13_edit2.ogv";
} else if (supports_h264_baseline_video()) {
video.src = "./media/cap13_edit2.mp4";
} else {
return false;
}
//video.play();
return true;
} else return false;
}
// check whether browser supports webGL
var webGLContext;
var webGLTestCanvas = document.createElement('canvas');
if (window.WebGLRenderingContext) {
webGLContext = webGLTestCanvas.getContext('webgl') || webGLTestCanvas.getContext('experimental-webgl');
if (!webGLContext || !webGLContext.getExtension('OES_texture_float')) {
webGLContext = null;
}
}
if (webGLContext == null) {
alert("Your browser does not seem to support WebGL. Unfortunately this face mask example depends on WebGL, so you'll have to try it in another browser. :(");
}
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.msURL || window.mozURL;
// check for camerasupport
if (navigator.getUserMedia) {
// set up stream
// chrome 19 shim
var videoSelector = {video : true};
if (window.navigator.appVersion.match(/Chrome\/(.*?) /)) {
var chromeVersion = parseInt(window.navigator.appVersion.match(/Chrome\/(\d+)\./)[1], 10);
if (chromeVersion < 20) {
videoSelector = "video";
}
};
navigator.getUserMedia(videoSelector, function( stream ) {
if (vid.mozCaptureStream) {
vid.mozSrcObject = stream;
} else {
vid.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
}
vid.play();
}, function() {
insertAltVideo(vid);
document.getElementById('gum').className = "hide";
document.getElementById('nogum').className = "nohide";
alert("There was some problem trying to fetch video from your webcam, using a fallback video instead.");
});
} else {
insertAltVideo(vid)
document.getElementById('gum').className = "hide";
document.getElementById('nogum').className = "nohide";
alert("Your browser does not seem to support getUserMedia, using a fallback video instead.");
}
vid.addEventListener('canplay', enablestart, false);
document.getElementById('selectmask').addEventListener('change', updateMask, false);
function updateMask(el) {
currentMask = parseInt(el.target.value, 10);
switchMasks();
}
function startVideo() {
// start video
vid.play();
// start tracking
ctrack.start(vid);
// start drawing face grid
drawGridLoop();
}
var positions;
var fd = new faceDeformer();
fd.init(document.getElementById('webgl'));
//var bieberpos = [[115.9752686028232,328.6220466908972],[119.22873121946967,374.40858852922236],[131.1565130945076,417.23833371292824],[147.46691862513703,458.8532123608701],[169.12631494681284,491.1972025630235],[195.43904217855416,516.328978933631],[225.12865446493407,535.9062523012337],[262.04556382915666,540.3069324850155],[300.94141109040174,527.8502399147961],[332.9603108915372,502.45220152142446],[358.8360460728861,471.19379837598467],[376.30594053223126,432.7368076223554],[382.67017562895774,386.092455079847],[382.9572691840467,340.6309871594118],[373.9218117623584,294.7317621266673],[336.1771287095879,277.33615469931993],[309.0591744841313,265.48318334798023],[280.18008080721654,270.41133608650136],[256.43572723795205,288.00624486316775],[132.78340927208725,302.3508622540975],[152.12755213329575,285.64501141366554],[179.00521938859092,283.71128940592473],[205.2906738672715,295.0025921899086],[153.280095626718,326.6176205427562],[173.66825536827957,312.37635516179034],[200.5039461913669,321.80135395397144],[176.4252911165302,331.5053440165448],[175.60476729990694,320.7103852530686],[320.09549369069657,304.98353187039095],[293.8708067688545,296.76097677136033],[271.58562891677826,313.04623730551765],[297.0041924786207,316.0129930023768],[295.5198902690135,305.2334114426537],[219.39189145138596,322.52490657195426],[213.12903160458814,372.68944673895106],[204.25378527943315,395.19379951207986],[216.42423446106187,407.4119870829318],[242.53049164091706,409.5633258220383],[271.44166574243314,400.8594406366267],[281.0747413420262,385.33753840829905],[264.93761588662034,366.0082686027026],[248.4222279939238,318.65718124206103],[221.19696050353386,400.1917656470539],[261.194844263039,394.3039377608819],[205.58562543311808,454.0404194376248],[219.45570688767742,443.2933320382955],[235.11772368281123,437.7856722052561],[247.04484871943168,439.0481001020766],[258.89570167366736,434.78235106489905],[278.09912572601576,436.0808959514672],[299.3034775622639,442.54677422653293],[287.1187997918484,455.81576684891434],[271.34249957002703,465.51172329290904],[251.61268198682447,470.44097715445434],[232.73570674290363,470.1580146696677],[218.10425477812518,464.10041259051224],[228.1409097022435,453.68187695329203],[249.6936987242403,453.78342049724876],[272.6989984571775,448.2156278276872],[272.0110524437053,444.79167221837804],[248.77651531852348,448.8688363646738],[227.509537176152,450.245536680183],[237.9908602824163,390.1923398762123],[160.91646595859757,317.33744947123716],[188.7840782811474,313.8256705835899],[189.05067958859877,327.25046064429824],[163.55409188544704,330.4344482791597],[308.5376365048648,298.0766114500345],[279.84528286898836,302.2825309865559],[283.62066631586,315.20905218987537],[309.749050119264,311.6663773937525]];
//var bieberpos2 = [[101.56864876894927,233.18862451146063],[103.94483672830893,264.7046059637433],[111.5648760614713,292.9868982438346],[121.60817984472148,320.6033955384772],[135.51459988174054,341.80331615737293],[152.82503856414286,357.93865673417645],[172.7334093282495,369.7555151544583],[197.69694806265264,372.8908642984119],[222.8053964543867,365.21949767570914],[242.40546640781133,350.0527677685787],[258.17324630755496,330.75942632456844],[268.98805835003753,306.7477470070455],[273.6754505271187,277.0196300321007],[275.3901710230929,247.48473861432882],[271.2714775656604,215.8934681217882],[251.15119877990037,198.36333212940198],[234.28326532533939,188.2676120581345],[214.91026985241555,190.40117460122602],[198.6679929928869,201.45023631633967],[113.24438906376074,211.8970185132382],[126.5955563101671,199.09262449063715],[145.31468314556042,197.486438742565],[163.09221764806279,205.1520683730701],[127.17964196061948,227.10992859881242],[141.38730169612836,217.42084144199345],[159.0209030325747,224.43130850214425],[142.88433585096988,230.26811984682448],[142.42801267524905,223.0112485658692],[239.82517193206303,215.72308282543185],[223.10722684166518,209.15355699004294],[207.6055747620924,219.65927517951022],[224.48567680757435,222.06304887372107],[223.6233827552315,214.8262871250668],[172.9464171372352,224.49975510380557],[168.72197585961794,258.1441109647948],[162.13307850736825,273.39440853283276],[170.24957359495303,281.74585932415636],[187.8016126508577,282.47959683615136],[206.1033075074291,278.29177031601284],[212.68125741263046,268.3132850122465],[202.63241390815458,254.72497416605486],[192.46120586027132,222.49630587027653],[173.85800402580105,275.18188385366227],[200.1381924457317,272.3152852765038],[162.80837519080728,315.13375207511854],[171.69700670251132,306.3124074117097],[182.24834265233773,302.09650928467386],[190.09015922531339,303.10443614370354],[197.76209119445363,300.5509316338526],[209.73158516418792,302.5808407858005],[221.70573066253746,309.3661952909322],[214.09639912349064,316.65502145001835],[204.49078700810347,321.9636345043299],[192.41227407051437,324.6228636856393],[180.48451092393344,324.28794135030637],[170.93617926975094,320.82799785356144],[177.53238855284724,313.61914714385057],[191.3906735080654,313.8169220281628],[205.5802836644213,310.8720277253901],[205.38508820468905,308.14362791021006],[190.91511553259915,309.92223533784073],[177.0527695156715,310.91723936457345],[185.79856965529362,268.6105621853759],[132.6255950975479,220.70726211735987],[151.44519898035702,218.73721954002326],[151.293077203678,227.62310217433833],[134.17185610938265,229.51860587354747],[232.66973446011252,210.5605768611877],[213.57982756654985,212.53706063982744],[215.69031953459682,221.18112181145614],[233.0419228385137,219.58164400157239]];
//var averagec = [[121.92799191984679,184.19216240419755],[118.74113263254269,253.7017373484083],[128.07732840700828,314.0651648786312],[145.50341586402052,377.3404382903117],[175.0470179047746,428.3720278198884],[216.26268310246033,469.2344402538887],[267.42588166495466,502.128073946532],[323.6864139765614,512.5053811316307],[381.1889691089136,499.48530971536445],[429.71357990120225,463.4214900408549],[467.1292936657478,421.537754329594],[493.2308725208873,370.6466670145585],[507.3945907183312,305.3965374123],[514.1098885852615,238.51000761747102],[507.2009944162471,174.7364492942625],[465.59705810723074,136.75665747531139],[432.10874975324265,113.03896523029233],[384.15174446143584,115.68856721421743],[351.54488594535763,135.22963355336668],[162.16177451030518,144.72103952617107],[194.70376235949394,118.93611387780797],[247.33137756767314,121.17559172494758],[277.5198647210173,137.82992220884094],[192.5627380181407,182.35373455399292],[225.1658086004223,166.85817167285668],[262.9021389237093,184.72604899079232],[224.82421319031323,193.62679469584918],[224.9386274222809,179.73191446260716],[443.75218061508883,177.1556294105885],[407.36102478935464,162.1785032964798],[367.3426762945685,181.37362678808685],[405.2498567443763,188.75927101523848],[404.863153412407,173.65270066194788],[291.44098017957907,186.97025659182341],[277.2539320006613,252.0592473714927],[258.790607031229,284.0832945003201],[276.64778558874696,304.54255347445314],[317.4772090972725,307.7859653833357],[364.4959193923387,299.6561959465791],[377.27275089177823,279.043842539653],[357.1140334647449,250.14961061471956],[337.0544440446092,184.37243898300898],[296.770695143374,295.6331974142146],[350.24114846328195,290.942330984987],[248.8532880314441,372.38004806995957],[272.1557077756945,356.35352520595814],[302.9902196911147,350.59821534914704],[323.11457426149127,353.0358352022737],[338.3055779254553,347.5427982113969],[366.49269601972713,353.1538257295358],[392.63652105652415,368.4911974180641],[375.0778975047938,391.4413420753004],[352.32935954043757,405.19247889714825],[320.19499419206926,411.930992226806],[288.9192573286629,407.35752671668797],[267.61253113280924,394.527019223827],[286.6817714614754,382.82667526139215],[320.16223074694074,385.86502934549657],[359.1212544588326,380.7487964985724],[361.7270998810554,365.15603335898066],[322.91210334135167,367.2901736762333],[280.7920218316411,368.2798825278876],[320.66814785515174,277.11007275979364],[206.36606604411398,171.6086547538323],[247.5375468161923,170.29657636660522],[246.36866333618227,191.67729410789994],[205.19888043799355,189.99033691329964],[429.0603263358775,166.1691180598579],[386.8504393293843,166.2774220754911],[384.7938981921405,186.5701136634426],[426.9983448269614,184.45786533091854]];
//var cat = [[150.6001932850613,227.9951181570873],[141.89008850948386,284.75501551729855],[146.93652175473133,330.2528119066194],[165.13643537016765,370.2657204395882],[191.7602900198875,396.93549740902245],[222.86318888606525,421.7338236701245],[250.10195974421907,438.00195284557867],[285.9416362643025,454.8230092524781],[321.6791601361751,452.97361324785925],[352.40851339212884,447.8287857701009],[391.9157950035136,433.3937963293089],[424.7093533522854,408.2181919788503],[455.81590328086514,373.8418166206772],[475.6696211189559,340.00598692776714],[489.62856853297785,283.12036111598195],[458.7886246979456,264.0657344332377],[429.08284937885685,242.70655476150478],[386.79722632189043,238.7132662439077],[349.8876932795788,248.21633547184024],[178.21329271196907,225.22303282028489],[209.27712879577714,214.13835945729744],[256.51936365207786,220.3341994097934],[281.85267569104127,240.0888555682899],[199.50773843473326,263.87975325981057],[233.1001822944999,246.46227004616514],[260.41002678551536,279.8036051139961],[220.33559045933112,302.50425182036093],[231.41762845993,265.61175717123666],[432.30911489812183,302.3805337088972],[409.3676999691845,278.5929603289348],[367.39241275855267,293.6484316660696],[396.7321664402125,331.6551313473402],[400.5075763977512,297.7535345477887],[298.6740892060634,284.7181934025275],[282.68382454097065,321.16350624526655],[259.6521020904014,342.305734403727],[266.33322956544055,354.33559341751277],[296.9097623749709,381.2106729730044],[334.45562946043754,365.4529264948747],[343.63246793135585,357.22118594760343],[335.86436141618674,332.6679067055157],[331.7902015246156,291.324842551962],[287.60066328698633,367.0549625165994],[313.9108542347557,368.49852421569886],[247.5007436056582,417.6643167481912],[257.7333491252317,405.90810714935833],[276.0164369955125,395.9485960986041],[294.27284228990516,391.92091112443705],[306.4663169213994,400.6013046459878],[323.00925643524545,415.98462467985274],[334.7606548113434,430.1608259195054],[318.4262833660398,415.0800228641732],[304.94670103933333,407.03227374908556],[292.874932156233,403.35630505685776],[278.7771095071339,402.6239596600665],[264.15687945778745,408.19379145183206],[266.1987275233493,402.433703596171],[291.63717649802595,393.5654166069583],[316.0146798721538,410.73024314941136],[315.8070301011558,409.8320583467966],[293.4399050423277,393.31185267965253],[267.1430933970747,400.5068413985279],[302.5219480114296,353.8817190906611],[213.30383757995148,250.17117325135706],[254.25518448883656,260.1332214763917],[247.37254769207618,296.65451513845477],[200.4210200644895,284.6926551210971],[427.3384882589094,287.98688185003783],[386.3798835564063,282.62080726070684],[370.56242004280097,318.1523500775542],[419.52101636070836,322.51848086271053]];
//var jake = [[234.38099345630354,123.42494719483474],[222.2214564461309,144.0872835027847],[214.90510066091002,167.48766201665953],[213.16726435721944,195.82670444827474],[223.6730979360211,222.59066272143866],[239.23365112154602,240.84500325231835],[268.4475076403672,259.28313630193605],[301.5998477644837,268.6952132952639],[338.8479887885296,271.36540280326324],[368.9870966348582,266.1683102123557],[396.0167719938352,254.60676962364323],[417.346649654904,233.16407871805245],[433.3868847137596,207.37069921006477],[436.1139763587346,168.63731307965494],[429.0371231685856,147.85294070108733],[416.00040098296006,127.7218682643207],[396.7536035787854,111.21810284287348],[370.18865770559034,98.44639202675758],[347.5214963832025,109.7647606703939],[248.606213881761,110.4915609544193],[267.8370087437634,99.12715769053584],[295.8907022304993,92.53089931939547],[310.4711426895737,104.33854621500996],[264.82208511042757,129.94888584507447],[272.5790833087474,123.71712622619187],[275.1280002948981,131.99557912678358],[267.32717008145914,139.10583332803492],[269.8167396627076,131.2344512054223],[383.2829097072338,146.82347566034022],[380.5693784576177,135.57292568928986],[372.5857211923719,142.55687825159674],[374.766305369171,151.28250446417422],[377.73237204412504,144.07565750838378],[313.85911658041044,133.70585439048781],[312.2613882398354,138.33433176102892],[304.13977307736366,141.4341849642005],[300.50038926523024,144.5527967536452],[318.92387405804516,153.28441719693217],[337.7047544403404,152.2045384350659],[342.14662806333115,147.76186161149792],[332.3604223557127,142.20440747717106],[332.56860277377314,137.3017458595702],[304.4495296381421,148.5939356938822],[332.64841618884986,152.74223745844046],[281.9161746791266,160.58501548422777],[288.81595107073787,153.68436484524014],[304.9212258330618,158.96343148494978],[317.9013301906912,167.9076552725944],[335.7503963246223,164.96793804180746],[351.92972980464725,165.0624691531191],[359.9002802244111,174.7911234594563],[353.2338885235205,183.8054375458767],[330.7574571038555,188.30597330174191],[310.5555404584375,188.52117656584892],[297.15805487910404,182.3613266728687],[282.829485875428,172.75450158252914],[288.93800145709554,178.2493168991062],[311.1525643029315,188.05523216204233],[346.4395139815897,186.62042857639597],[345.5633832777238,163.5425977731078],[318.05299363286065,166.90893750240946],[294.8261801090658,154.04898179800017],[322.2491701153617,143.30196652241514],[267.19752987709984,126.33449422887833],[276.85129577529784,127.35638980980212],[272.2280492521963,138.0468370366501],[263.5697757835426,136.02737917378937],[383.9293952904134,141.20056048779244],[376.07977812687676,137.56432355244687],[372.17687628009185,146.41433942556017],[380.0281817368749,150.05244216639528]];
//var cage = [[62.844249212286726,275.00253672977243],[67.55510662019353,328.44167358535947],[75.11261772100842,377.3124712980347],[87.37774244481457,421.23173056086273],[113.9902951052712,453.1478586395097],[140.83171602345155,480.6373388543555],[167.5196005894719,501.2561788181624],[212.18010120694998,510.2344196312023],[253.45675406514755,498.3276258268832],[289.7215253857187,474.1530824891014],[312.6432334014449,446.4571552178683],[334.31093551238234,413.47929218022904],[342.82141716462615,367.06678718581435],[340.0787835321058,325.02433505948227],[344.03477716066624,276.1610436162956],[311.3105334335752,219.25058272399014],[281.1643998222319,201.85115398988745],[246.67360364777142,197.91015747771542],[221.74045178386638,211.73972584765107],[88.39685871965517,232.87057682782168],[119.65607817768387,206.69928143233432],[151.70208724138473,200.6297795897709],[182.1988161275458,214.14891146210013],[111.91291700126256,253.6797122349625],[136.92106035526825,239.9404956893577],[162.91467393699673,250.032069765119],[136.0236656014504,258.28678236447894],[137.0026767970992,247.0968006580872],[290.99608814360033,248.5656270489297],[266.2858860116553,236.49556260291146],[239.12111916914662,245.91281243818258],[263.05529224671415,252.12781036467007],[263.69541132990514,241.7440372965671],[185.79943781947387,252.86663379958435],[167.036525347904,300.10052708948666],[155.3798855699212,325.9510914090657],[166.6432477420878,339.3972885867414],[201.18979122083596,342.620961855605],[233.77487769512172,332.7824005320247],[245.46879766562955,319.97569840735036],[229.78121185656033,290.921333048562],[215.36151007417078,249.848556046143],[176.833684867132,331.4510944914906],[219.51569663621888,329.5475580109928],[150.44691614510197,393.9731247944999],[167.7923227215762,379.60307375221],[186.62468414252686,374.8421900119016],[203.70712368575602,377.10419473212465],[215.69484299340166,374.7441013708148],[238.64983301680508,375.65215297966955],[257.4458840569071,386.14371230397177],[248.0230873637346,409.9327639477665],[231.32451079815257,426.5631075934497],[203.7714090986988,430.95782701637],[175.9185408932064,427.7645785634805],[161.36390098288757,411.96116683185153],[176.95087018336454,406.946758431982],[204.01839602612762,408.2014093667243],[230.59006014506824,400.67533081324075],[227.96700934619196,382.1851505374937],[201.5722227074383,385.03028865614806],[178.2788927365379,386.1691344889883],[199.93330911993385,316.5892429114219],[121.91675481462666,244.81475573607864],[154.41505146086834,241.4873947901523],[150.9653978657209,255.659913009525],[121.46335898343057,255.98657922353812],[278.14173342084905,239.53501630515916],[250.20579871533653,238.2047381204274],[249.59087518454686,250.51941670260177],[279.52918882565444,250.84811178896496]];
var masks = {
"average" : [[121.92799191984679,184.19216240419755],[118.74113263254269,253.7017373484083],[128.07732840700828,314.0651648786312],[145.50341586402052,377.3404382903117],[175.0470179047746,428.3720278198884],[216.26268310246033,469.2344402538887],[267.42588166495466,502.128073946532],[323.6864139765614,512.5053811316307],[381.1889691089136,499.48530971536445],[429.71357990120225,463.4214900408549],[467.1292936657478,421.537754329594],[493.2308725208873,370.6466670145585],[507.3945907183312,305.3965374123],[514.1098885852615,238.51000761747102],[507.2009944162471,174.7364492942625],[465.59705810723074,136.75665747531139],[432.10874975324265,125],[384.15174446143584,125],[351.54488594535763,135.22963355336668],[162.16177451030518,144.72103952617107],[194.70376235949394,126],[241,130],[277.5198647210173,137.82992220884094],[192.5627380181407,182.35373455399292],[225.1658086004223,166.85817167285668],[262.9021389237093,184.72604899079232],[224.82421319031323,193.62679469584918],[224.9386274222809,179.73191446260716],[443.75218061508883,177.1556294105885],[407.36102478935464,162.1785032964798],[367.3426762945685,181.37362678808685],[405.2498567443763,188.75927101523848],[404.863153412407,173.65270066194788],[314, 170],[277.2539320006613,252.0592473714927],[258.790607031229,284.0832945003201],[276.64778558874696,304.54255347445314],[317.4772090972725,307.7859653833357],[364.4959193923387,299.6561959465791],[377.27275089177823,279.043842539653],[357.1140334647449,250.14961061471956],[324,222],[296.770695143374,295.6331974142146],[350.24114846328195,290.942330984987],[248.8532880314441,372.38004806995957],[272.1557077756945,356.35352520595814],[302.9902196911147,350.59821534914704],[323.11457426149127,353.0358352022737],[338.3055779254553,347.5427982113969],[366.49269601972713,353.1538257295358],[392.63652105652415,368.4911974180641],[375.0778975047938,391.4413420753004],[352.32935954043757,405.19247889714825],[320.19499419206926,411.930992226806],[288.9192573286629,407.35752671668797],[267.61253113280924,394.527019223827],[286.6817714614754,382.82667526139215],[320.16223074694074,385.86502934549657],[359.1212544588326,380.7487964985724],[361.7270998810554,365.15603335898066],[322.91210334135167,367.2901736762333],[280.7920218316411,368.2798825278876],[320.66814785515174,277.11007275979364],[206.36606604411398,171.6086547538323],[247.5375468161923,170.29657636660522],[246.36866333618227,191.67729410789994],[205.19888043799355,189.99033691329964],[429.0603263358775,166.1691180598579],[386.8504393293843,166.2774220754911],[384.7938981921405,186.5701136634426],[426.9983448269614,184.45786533091854]],
"monalisa" : [[266.539778613571,254.84378898872825],[266.3039097561577,285.302233189556],[271.19357329466345,316.3538789507933],[278.7139543521674,345.15573844972926],[293.15712497356776,368.9809024015706],[312.64193974141324,389.09850232246515],[322.13343587641253,398.3663601209212],[336.9858985066435,401.49456958745145],[356.87519225850986,398.5376499254816],[382.97232156668036,391.79752653535775],[421.61286401088506,373.50434543677886],[448.74322775690695,344.0259953810623],[464.77440099078314,310.71915538180275],[468.2775933241595,272.2241198406615],[466.74514645738424,247.20492682906303],[415.26964981149064,225.8370550250565],[390.13712322351404,222],[361.92175039938184,220.2582273389706],[342.2734356138508,232.04834635926073],[267.7624903928149,236.00873885152805],[280.88607721372824,229],[303.9033677258633,228],[316.6965360192193,234.20369314639848],[281.57998031880885,254.77971856631495],[298.953459306752,246.21641370334032],[315.75345517431316,254.4516165242651],[296.6631361379687,258.36486568494297],[301.63327656416925,252.0239926097512],[398.27491865673994,249.8954346966754],[380.22403819342355,243.83584281695727],[357.98660716766716,253.53119540181672],[378.25469629277825,255.99515336941278],[382.6139465907322,249.6433274231842],[328,253],[314.73794539936216,301.757722929817],[309.85213116736014,314.6797549304112],[313.1507370768973,321.4994076914073],[325.20473159190635,327.87953636258146],[350.1231795924951,324.5425216268138],[358.3783946629097,316.6717252774034],[352.7986254362873,299.5519517987678],[326,282],[314.75674487301336,318.32005216616164],[343.0322275619273,319.2819917007706],[307.87514392633693,346.0346979532304],[316.68926117981914,342.91320569661593],[321.7320399187087,341.45780089974846],[327.8558316510405,343.56649844038935],[336.18423231506125,341.74737597014604],[351.00603891713007,342.2560527375472],[367.88222498993025,344.3660717427479],[357.305053617142,354.4583428810625],[343.5761668856892,358.8848818975423],[328.82001419900075,359.1051832365163],[320.36190636746045,358.71759346010083],[312.61714975606304,353.5625007817836],[318.4988566294063,348.1744254793423],[328.6406599928464,349.73460503451736],[350.2480353796336,349.6831133201238],[349.5754234743516,349.5362145583936],[329.32557946752445,349.67345155068153],[318.2253756678819,347.9222277142419],[324.4964277572599,315.63122813643895],[288.26630901657126,248.99890899333045],[309.3536455351319,248.83485523505226],[307.7075352919804,256.40978560947974],[288.62032608071166,258.5736833679789],[390.2498028902113,244.8663932568382],[368.1047796233772,247.18427292360775],[368.62079313091925,255.76448975973483],[390.7655312307384,254.4464699123733]],
"ironman" : [[54.132994582809886,330.2447406482356],[53.94983737338171,411.6786947731232],[59.50117090734213,485.54290769879117],[69.05631570910228,577.6685769791815],[80.73400747239302,669.2047081882876],[156.52267192878207,721.5706883991684],[224.03761978834723,739.1269072358452],[301.4803537679236,738.2366874355024],[373.4196207112528,736.6185556997145],[445.4373067968218,720.1452812831552],[517.3056114476371,670.5474614197833],[531.7799053755264,574.1779931382804],[540.681172219442,487.967223266098],[542.4032150608897,399.64595333584305],[541.5099369565868,318.2177239885218],[484.00763535360403,311.3318445452918],[436.57616449858205,326.12885038303966],[386.214847801106,333.2043197182652],[344.39911403378784,336.7706741289662],[115.84864343665006,313.35525243241443],[152.60840318917894,322.7145050535586],[201.39783835228144,332.29526724516336],[249.58724826191298,336.53976562323317],[116.48023640991207,348.8633768136441],[167.9642886955806,350.9962302246727],[231.6749647028165,359.48349174177827],[168.11831577303042,375.4865728177492],[170.07462103025938,361.76575290725043],[480.7831200700384,348.57719399476593],[423.78106882269736,353.08381522791285],[369.5853199174605,360.3348770905004],[429.2517105029677,374.978498189726],[428.4672557696136,361.0310278167258],[298,363],[253.70821429640165,456.1515630753871],[232.81854206254127,493.52915431030885],[250.27449264190767,519.2760705851281],[294.9905749783811,522.6580485667231],[340.00710866420684,520.8077271147647],[357.28424845402884,493.1349774295837],[336.03221275387335,457.7253897416814],[296,407],[270.69780042635847,507.2277260957476],[320.8265507066314,506.90809731554305],[219.49207600124322,603.6108989555861],[236.4148918469843,589.8509195222699],[267.0123175575189,590.2653879517876],[302.37639394449644,589.4456339021824],[337.18338067155105,591.0755705685021],[366.9537080661368,591.1696362146871],[383.17030058050824,601.5027761622135],[366.07822563380967,614.8268645173376],[336.20759244137867,615.427540755917],[304.12597029775543,615.4777558918809],[270.01910167830954,615.9331065732697],[240.4271869365151,614.9063722445486],[255.5183417994636,603.9175341052295],[302.81892822034536,605.4895650711086],[350.74058301633727,604.2225054756758],[350.6655959742464,603.528118265738],[303.78446463916174,604.3090513544694],[256.409865954666,603.8790201634539],[298.25175247557996,482.7822436696597],[141.22182216936852,346.4270057321846],[206.31948949078424,356.7387529836485],[202.39427275621864,368.9872676086593],[136.2964448024117,368.67555898584044],[454.78000220898934,348.3276075895992],[398.6821272555564,355.2080431875895],[398.9194910642594,369.6579535284187],[466.01878775359233,368.7792910743897]],
"skull" : [[94.36614797199479,301.0803014941178],[103.3112341317163,370.94425891220794],[120.32682383634102,423.44019820073913],[136.47515990999432,479.5313526801685],[144.0368892689739,530.2345465095229],[172.36671158523987,580.3629853084399],[217.01976787749376,619.1929480747351],[269.34754914721543,625.5185645282593],[326.48254316405735,621.3861472887296],[367.5697682338512,588.2815093455445],[396.3225813396373,544.5241298700507],[423.17220298223486,485.34023789625417],[433.9843247454375,424.6310467376783],[459.5753658677024,376.88741971189734],[465.6871064619868,309.4410229689395],[439.2202424949693,261.17900856324786],[404.95656878888406,237.16839138607617],[349.4475953084992,224.72336816106127],[307.5262703136751,246.56374069983377],[111.59908955786085,255.73818792771897],[140.77843006651088,236.25905776423554],[198.25614310392174,221.75964368670276],[238.0607640650076,244.705502740957],[147.51722669161887,322.2920755920064],[179.96374258674177,303.20283557208495],[219.89652431504095,321.63741406437117],[181.93382178127874,336.62855114616417],[181.67029281471235,321.84674383355735],[409.08887297158253,319.49332724817634],[372.08555159755235,302.6637205310945],[332.21673690859785,314.25212117506817],[371.9034386455536,336.7928247239386],[370.73203771018734,318.2549362647991],[275,262],[241.49292248091808,382.6509156918952],[228.65540058230079,403.67602315679153],[246.4207645046435,428.633436281585],[281.6262637981823,429.7101230850766],[320.3090052424696,429.4111504923561],[337.71957018298144,408.9834145077307],[324.9443408840292,383.11655691739367],[277,336],[262.6247652804272,418.02062856158705],[305.62131595904475,419.9849042391749],[192.0888434079335,501.27870633434],[227.89330220055228,491.767986224554],[254.82152484033276,488.28172522414377],[274.58325738122585,496.93117201682657],[298.6427918040954,490.9689564164321],[325.48328507490595,499.3328015524256],[350.42668910649365,508.3776245292422],[327.3034449428819,532.1604992353581],[302.413708672554,539.1078344701017],[266.7645104587291,540.3023216343349],[237.0072802317868,530.3260142620247],[215.71258213035736,519.4068856743318],[222.47713501183063,502.96356939871526],[278.19882029298384,511.73001012850216],[321.89078331130554,511.2982898921548],[318.4792941712966,518.8634093151715],[277.74782145336667,522.9574136207773],[230.31017878122015,512.4917843225409],[281.2762389085891,407.8752450214805],[163.2415047021451,306.7465365446632],[202.42996875366381,307.91977418268493],[204.91393138279884,330.1328065429834],[161.72396129164846,332.9605656535211],[394.08708850976745,308.0776176192674],[354.1514690637372,305.45718896085043],[349.5616880820385,328.5223891568975],[391.4980892099413,331.1427807886423]],
"sean" : [[109.36614797199479,146.0803014941178],[113.3112341317163,166.94425891220794],[119.32682383634102,192.44019820073913],[124.47515990999432,218.53135268016848],[135.0368892689739,237.23454650952294],[153.36671158523987,258.3629853084399],[168.01976787749376,267.1929480747351],[187.34754914721543,269.51856452825933],[208.48254316405732,266.3861472887296],[230.56976823385122,254.28150934554446],[252.32258133963728,228.52412987005079],[257.17220298223486,206.3402378962542],[258.9843247454375,180.63104673767828],[258.5753658677024,155.88741971189734],[257.6871064619868,133.44102296893945],[239.22024249496928,123.17900856324786],[224,120],[202,129],[189.52627031367516,133.56374069983377],[117.59908955786086,139.73818792771897],[127.77843006651088,132],[146,132],[165.0607640650076,134.705502740957],[134.51722669161887,148.29207559200646],[147.96374258674177,143.20283557208495],[159.89652431504095,147.63741406437117],[147.93382178127874,150.62855114616417],[147.67029281471235,145.84674383355735],[225.08887297158256,140.49332724817637],[212.08555159755232,136.6637205310945],[200.21673690859785,143.2521211750682],[213.9034386455536,144.79282472393862],[212.73203771018734,139.25493626479908],[176,143],[165.49292248091808,175.6509156918952],[160.65540058230079,186.6760231567915],[167.4207645046435,192.63343628158498],[183.62626379818232,194.71012308507662],[202.3090052424696,190.41115049235611],[205.7195701829814,183.98341450773069],[198.9443408840292,173.11655691739367],[179,161],[168.6247652804272,189.02062856158705],[197.62131595904475,185.9849042391749],[161.0888434079335,217.27870633433994],[167.89330220055228,211.76798622455402],[176.82152484033276,209.28172522414377],[183.58325738122588,209.93117201682657],[188.6427918040954,207.96895641643206],[201.48328507490595,210.3328015524256],[211.42668910649365,215.3776245292422],[203.30344494288195,220.16049923535812],[195.41370867255398,222.10783447010172],[184.76451045872906,223.302321634335],[174.00728023178684,223.32601426202467],[167.71258213035736,222.40688567433176],[169.47713501183063,215.96356939871526],[182.19882029298384,215.73001012850216],[195.89078331130557,214.2982898921548],[195.47929417129663,213.86340931517145],[181.74782145336667,214.95741362077732],[170.31017878122015,216.49178432254084],[182.2762389085891,184.8752450214805],[140.2415047021451,145.7465365446632],[154.42996875366381,143.9197741826849],[154.91393138279884,149.13280654298345],[141.72396129164846,149.9605656535211],[220.08708850976743,138.07761761926741],[205.15146906373715,139.45718896085043],[206.5616880820385,144.52238915689745],[219.4980892099413,143.1427807886423]],
"audrey" : [[153.74201740403646,257.58838131299683],[153.1357402459916,291.61358072852295],[163.92648670097353,336.6674185987861],[169.05137634628016,385.1975110609068],[187.6238859708483,421.2108262322121],[216.686071409745,444.7519516586696],[252.3126606898006,465.32269819176895],[283.0811558461883,470.8182094669599],[310.01372611356055,468.19451253588267],[343.73964850426626,447.233158556066],[371.3765378504441,422.9947341112305],[387.5627292608278,382.0293105452122],[398.46785237450297,339.09243674243754],[410.7142207166049,294.2191807024135],[411.7724614993711,261.09373588344585],[397.08419909909355,252.94944754715868],[376,241],[347.88483875688155,246],[320.92763554902524,254.63591882122572],[174.20709387641796,237.53266499674754],[201,234],[231,239],[259.80324104447095,248.8385932134204],[203.20895380044172,279.4867045991428],[228.2843062554636,263.77563604011084],[254.37335751351947,287.3518288920658],[225.37155395907916,290.26869393942275],[227.77768051230873,272.55424007173355],[373.6963908872387,283.83985580081185],[349.2543124861655,273.37102031128484],[324.214351960891,292.0051557657032],[352.73999275494873,296.13681628226215],[350.0652800779458,278.7378813418683],[292,283],[262.7314015757042,344.55089637183414],[256.09382016348263,360.28137163294355],[265.43437220076765,373.7185311578347],[292.84018353954804,379.51893631975383],[319.5702417532398,374.9644468251393],[324.6370116978122,365.5029178767047],[318.03834636609736,339.5592633568763],[293,322],[275.91223102812063,365.3241223928343],[310.9988910215482,365.94139857304066],[241.36179100195926,404.57248720067804],[256.244097414399,399.79192498435566],[275.9545526341606,397.2506401446753],[289.6156500062133,402.18658812822247],[305.7363366162922,398.11786374216797],[318.71091994807995,402.09809058994574],[332.1507895390563,406.57790820835453],[317.07898694502654,420.6784334029229],[303.5975014688257,430.191159222479],[287.22005286691325,432.45845823523985],[269.1473100017029,428.92524246489165],[256.3562958006237,421.3232920714367],[269.4689541559383,409.5609803328374],[288.9859238876932,410.32998112652183],[306.1403256243275,411.3077976017484],[307.73772138569666,411.00947047307966],[288.5537974824452,410.51396287362655],[269.7179313684785,409.79854206584145],[293.13908085531165,360.2044576609231],[210.24669344926002,268.1362929595334],[244.33001418358253,272.06529726630106],[237.37014577148472,289.8158253810601],[212.28729137033707,286.8846525992707],[364.4764146636024,276.60992312858446],[332.73309300337735,280.1921291112648],[336.47694784065465,295.57941207015807],[365.2216557008562,291.9943008746264]],
"cage2" : [[96.81941282528646,268.6563333055432],[106.75675954633661,329.1587405365555],[119.76815459937384,379.4896985493418],[136.07940076941458,425.9492772057105],[161.2808692110661,457.61169473264835],[186.04894852923297,485.6759001579113],[218.4426767235838,511.0714335097357],[260.06499742347034,523.1545996578884],[300.06377090251993,510.61216792938615],[337.5694959005854,468.82896175985],[358.97922192378047,441.54181864835476],[379.42084177310676,403.390743126405],[388.7955321567646,351.3090658772298],[390.4262385647278,299.3698133324318],[384.11810900892965,242.91856536650718],[348.70738406950056,224.9829932049514],[321,222],[284,222],[248.86954256992664,228.19206802513366],[119.91233030390185,255.38702736145385],[138,245],[175,236],[211.38447558444696,237.17956241438634],[144.4884094882825,271.0334533280929],[166.20253053976617,258.5182260687953],[190.76818628874074,264.72493789715475],[166.3651367856651,273.4746395006701],[167.80450182394694,265.0556706110155],[324.5406048528901,251.04296112395667],[299.7419762994943,241.35048431345442],[272.0486344446429,254.37413342811146],[300.2779904213152,258.21350699061486],[299.7261402367746,247.52288292547877],[230,247],[202.82098590251388,333.63541920962166],[197.36529740216793,360.6074799565433],[211.93043020653712,374.7216105521087],[243.91457342932796,376.61574931741393],[273.7931176105319,368.54185553932047],[283.1924422789671,346.10700000116907],[273.21255878744284,326.3419941919277],[235,309],[216.08956463539755,366.1198047818831],[262.38157625268843,360.4765024368325],[200.65672420260339,425.7113072142362],[210.59591704137958,418.8310789950973],[226.72952280292276,414.1586736027959],[245.26202591934208,416.9013315273323],[261.6743086310934,412.2506112472961],[283.3509308337543,410.8975165060922],[302.2287007716769,414.3759049856237],[288.05687218005096,428.64611508851056],[272.9046262998521,439.81519003757444],[251.37714128101143,448.0168626101829],[229.03794885867393,446.9574815880215],[217.27491143676224,438.10808744290716],[225.27828463087235,425.86527765147576],[246.089531122415,426.43509210786846],[272.14938117327404,421.7534010147635],[271.81608729443224,421.5900960094701],[246.87299073434986,427.22889777615507],[225.65210985383266,426.21786917122313],[239.24882409629814,356.7923548552414],[152.34433274214945,262.7826049480205],[179.48599280195447,258.6243674505216],[180.06624281569137,269.6029915273643],[153.926296458539,274.75536491866694],[312.6407607999811,242.7049854510107],[282.89141140599133,245.36953091106633],[285.6577700037131,257.30455480892334],[314.4040909797777,256.634302341433]]
};
var currentMask = 0;
var animationRequest;
function drawGridLoop() {
// get position of face
positions = ctrack.getCurrentPosition(vid);
overlayCC.clearRect(0, 0, 500, 375);
if (positions) {
// draw current grid
ctrack.draw(overlay);
}
// check whether mask has converged
var pn = ctrack.getConvergence();
if (pn < 0.4) {
switchMasks();
requestAnimFrame(drawMaskLoop);
} else {
requestAnimFrame(drawGridLoop);
}
}
function switchMasks() {
// get mask
var maskname = Object.keys(masks)[currentMask];
fd.load(document.getElementById(maskname), masks[maskname], pModel);
}
function drawMaskLoop() {
// get position of face
positions = ctrack.getCurrentPosition();
overlayCC.clearRect(0, 0, 400, 300);
if (positions) {
// draw mask on top of face
fd.draw(positions);
}
animationRequest = requestAnimFrame(drawMaskLoop);
}
document.addEventListener("clmtrackrIteration", function(event) {
stats.update();
}, false);
</script>
</div>
</body>
</html>