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

/**************************
*     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;
});