310 lines
8.5 KiB
JavaScript
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;
|
|
});
|