face-recognition.js/public_html/js/action-script.js

310 lines
8.5 KiB
JavaScript

/**************************
* PermanentStorage *
* 08-09-16 *
***************************
* Designed & Developed by *
* xdrm-brackets *
* & *
* SeekDaSky *
***************************
* https://xdrm.io/ *
* http://seekdasky.ovh/ *
**************************/
{ /* [0] Initialisation
=========================================================*/
/* (1) Elements du DOM */
var DOM = {
body: $('body'),
canvas: $('canvas'),
imageLoader: $('#image-loader')
};
/* (3) Canvas initialisation */
var _CAN = DOM.canvas;
_CAN.width = _CAN.height = 1000;
var _CON = _CAN.getContext('2d');
/* (4) Image Loader + Définitions */
var iL;
var filterManager;
var process = function(){};
var exec = false;
var last;
var featureTrackerTask;
var faceTrackerTask;
var trackerCallback;
var Controller,
init,
zones = {feature: [], face: []},
track,
featureTracker,
faceTracker,
initialized = false;
}
var ControllerRememberer = new PermanentStorage();
ControllerRememberer.fetch(function(loaded_data){
log('Preset loaded.', '[PermanentStorage]')
{ /* [1] Initialisation du process
=========================================================*/
/* (1) dat.GUI initialization */
Controller = new dat.GUI({ load: JSON.parse(loaded_data), preset: 'default' });
init = function(){
/* (1) Image par défaut */
this.src = 'front/male/1.jpg';
/* (2) Initialization */
last = this.src;
initialized = true;
/* (3) Attachment to dat.GUI */
Controller.addFolder('Source Picture');
Controller.remember(this);
Controller.add(this, 'src', this._images).listen();
};
/* (2) Gestion de tracking.js */
zones.feature = [];
zones.face = [];
/* (3) Gestion du track de l'image */
track = {
trackFeatures: function(){
zones.feature = [];
featureTrackerTask = tracking.track(_CAN, featureTracker);
},
trackFace: function(){
zones.face = [];
faceTrackerTask = tracking.track(_CAN, faceTracker);
}
};
/* (4) Initializing `Tracking.js` */
faceTracker = new tracking.ObjectTracker(['face']);
featureTracker = new tracking.ObjectTracker(['eye', 'mouth']);
faceTracker.setInitialScale(1.0);
featureTracker.setInitialScale(1.0);
faceTracker.setStepSize(1.2);
featureTracker.setStepSize(1.2);
faceTracker.setEdgesDensity(0.1);
featureTracker.setEdgesDensity(0.1);
trackerCallback = function(z, e){
zones[z].length = 0;
e.data.forEach(function(rect){
zones[z].push({
x: rect.x / _CAN.width,
y: rect.y / _CAN.height,
w: rect.width / _CAN.width,
h: rect.height / _CAN.height
});
});
// On enregistre dans `zones.feature` les zones.feature trackées
if( zones[z].length > 0 )
log(z+' recognition done', '[Tracking.js]');
else
log(z+' recognition failed', '[Tracking.js]');
// On met à jour le rendu (affichage des zones.feature)
process.apply(DOM.imageLoader);
}
faceTracker.on('track', function(e){ return trackerCallback.apply(this, ['face', e]); });
featureTracker.on('track', function(e){ return trackerCallback.apply(this, ['feature', e]); });
}
/* [2] Routine principale
=========================================================*/
process = function(){
// Si erreur de `bind()`, on quitte
if( !initialized || !(this instanceof HTMLImageElement) )
return;
console.time('PROCESS');
/* [0.0] Gestion du changement d'image
=========================================================*/
if( this.src != last ){
zones.face = [];
zones.feature = [];
exec = false;
last = this.src;
}
/* [0.1] Gestion de la première exécution (par image)
=========================================================*/
if( !exec ){
/* (1) On enregistre les dimensions par défaut
---------------------------------------------------------*/
this.defaultWidth = this.width;
this.defaultHeight = this.height;
log('Image copied', '[Canvas]');
// On change la valeur de `exec` pour qu'il n'entre plus dans ce `if`
exec = true;
}
/* [1] On initialise/efface le `<canvas>`
=========================================================*/
_CON.clearRect(0, 0, _CAN.width, _CAN.height);
{ /* [2] Copie sur le `<canvas>`
=========================================================*/
/* (1) Resolution */
filterManager.get('resolution').apply();
}
{ /* [3] Filtrage pre-processing
=========================================================*/
/* (1) Contraste */
filterManager.get('contrast').apply();
/* (2) Contraste */
filterManager.get('grayscale').apply();
/* (3) Sobel */
filterManager.get('sobel').apply();
/* (4) Gaussian Filter */
filterManager.get('gaussian').apply();
/* (5) Canny Filter */
filterManager.get('canny').apply();
}
{ /* [4] Tracking.js
=========================================================*/
/* (1) On reporte chaque zone trackée sur le `<canvas>` */
var i, x, y, w, h;
for( i in zones.feature ){
x = zones.feature[i].x * _CAN.width;
y = zones.feature[i].y * _CAN.height;
w = zones.feature[i].w * _CAN.width;
h = zones.feature[i].h * _CAN.height;
_CON.lineWidth = 5;
_CON.strokeStyle = '#f00';
_CON.strokeRect(x, y, w, h);
}
for( i in zones.face ){
x = zones.face[i].x * _CAN.width;
y = zones.face[i].y * _CAN.height;
w = zones.face[i].w * _CAN.width;
h = zones.face[i].h * _CAN.height;
_CON.lineWidth = 5;
_CON.strokeStyle = '#ff0';
_CON.strokeRect(x, y, w, h);
}
}
{ /* [5] Filtrage post-processing
=========================================================*/
}
console.timeEnd('PROCESS');
};
{ /* [3] Gestion des `ReactiveFilter`
=========================================================*/
/* (1) Création du Manager */
filterManager = new ReactiveFilterManager(DOM.imageLoader, _CAN, process);
/* (2) Ajout des filtres */
filterManager.add('resolution', reactiveResolution);
filterManager.add('contrast', reactiveContrast);
filterManager.add('grayscale', reactiveGrayscale);
filterManager.add('sobel', reactiveSobel);
filterManager.add('gaussian', reactiveGaussianBlur);
filterManager.add('canny', reactiveCanny);
/* (3) Gestion des backups */
Controller.remember(filterManager.get('resolution'));
Controller.remember(filterManager.get('contrast'));
Controller.remember(filterManager.get('grayscale'));
Controller.remember(filterManager.get('sobel'));
Controller.remember(filterManager.get('canny'));
Controller.remember(filterManager.get('gaussian'));
/* (4) On attache tout à dat.GUI */
Controller.addFolder('Tracking.js');
Controller.add(track, 'trackFace');
Controller.add(track, 'trackFeatures');
Controller.addFolder('Image Resolution');
Controller.add(filterManager.get('resolution'), 'width', 0, 2).step(0.1);
Controller.add(filterManager.get('resolution'), 'height', 0, 2).step(0.1);
Controller.addFolder('Basic Image Processing');
Controller.add(filterManager.get('contrast'), 'contrast', 0, 100);
Controller.add(filterManager.get('grayscale'), 'grayscale');
Controller.addFolder('Gaussian Blur');
Controller.add(filterManager.get('gaussian'), 'active');
Controller.add(filterManager.get('gaussian'), 'sigma', 0, 10).step(0.5);
Controller.add(filterManager.get('gaussian'), 'radius', 1, 11).step(1);
Controller.addFolder('Sobel Filter');
Controller.add(filterManager.get('sobel'), 'sobelActive');
Controller.addFolder('Canny Filter');
Controller.add(filterManager.get('canny'), 'active');
Controller.add(filterManager.get('canny'), 'radius', 0, 4).step(1);
Controller.add(filterManager.get('canny'), 'low_threshold', 1, 127).step(1);
Controller.add(filterManager.get('canny'), 'high_threshold', 1, 127).step(1);
Controller.addFolder('Process');
Controller.add({render: process}, 'render');
/* (5) Gestion du @PermanentStorage */
Controller.__save_row.children[2].addEventListener('click', function(){
/* (1) Update properties */
Controller.save();
/* (2) Get stored data */
try{
var stored = JSON.stringify( Controller.getSaveObject() );
ControllerRememberer.store(stored, function(){ log('dat.GUI preset stored.', '[PermanentStorage]'); return true; });
}catch(e){ log('Corrupted data.', '[PermanentStorage]'); }
}, false);
}
/* [x] Chargement image
=========================================================*/
iL = new ImageLoader( DOM.imageLoader, init, process );
return true;
});