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 trackerCallback;

	var Controller, CFolder = {},
		init,
		zones = {feature: []},
		track,
		featureTracker,
		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 */
			CFolder.src = Controller.addFolder('Source Picture');
			Controller.remember(this);
				CFolder.src.add(this, 'src', this._images).listen();
		};

		/* (2) Gestion de tracking.js */
		zones.feature = [];

		/* (3) Gestion du track de l'image */
		track = {
			trackFeatures: function(){
				LOADER.start();
				zones.feature = [];
				featureTrackerTask = tracking.track(_CAN, featureTracker);
				LOADER.stop();
			}

		};

		/* (4) Initializing `Tracking.js` */
		featureTracker = new tracking.ObjectTracker(['eye', 'mouth']);

		featureTracker.setInitialScale(1.0);
		featureTracker.setStepSize(1.2);
		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);
		}

		featureTracker.on('track', function(e){ return trackerCallback.apply(this, ['feature', e]); });

	}


	/* [2] Routine principale
	=========================================================*/
	LOADER.init();
	process = function(){

		// Si erreur de `bind()`, on quitte
		if( !initialized || !(this instanceof HTMLImageElement) )
			 return;

		console.time('PROCESS');
		LOADER.start();


		/* [0.0] Gestion du changement d'image
		=========================================================*/
		if( this.src != last ){
			reactiveFaceTracking.zones = [];
			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 reactiveFaceTracking.zones ){
				x = reactiveFaceTracking.zones[i].x * _CAN.width;
				y = reactiveFaceTracking.zones[i].y * _CAN.height;
				w = reactiveFaceTracking.zones[i].w * _CAN.width;
				h = reactiveFaceTracking.zones[i].h * _CAN.height;

				_CON.lineWidth = 5;
				_CON.strokeStyle = '#ff0';

				_CON.strokeRect(x, y, w, h);
			}
		}


		{ /* [5] Filtrage post-processing
		  =========================================================*/

		}

		console.timeEnd('PROCESS');
		LOADER.stop();
	};



	{ /* [3] Gestion des `ReactiveFilter`
	  =========================================================*/
		/* (1) Création du Manager */
		filterManager = new ReactiveFilterManager(DOM.imageLoader, _CAN, process);

		/* (2) Ajout des filtres */
		filterManager.add('face_tracking', reactiveFaceTracking);
		filterManager.add('resolution',    reactiveResolution);
		filterManager.add('contrast',      reactiveContrast);
		filterManager.add('grayscale',     reactiveGrayscale);
		filterManager.add('sobel',         reactiveSobel);
		filterManager.add('gaussian',      reactiveGaussianBlur);
		filterManager.add('canny',         reactiveCanny);
		filterManager.add('haar_face',     reactiveHaarFace);

		/* (3) Gestion des backups */
		Controller.remember(filterManager.get('face_tracking'));
		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'));
		Controller.remember(filterManager.get('haar_face'));

		/* (4) On attache tout à dat.GUI */
		CFolder.custom = Controller.addFolder('custom');
			CFolder.resolution = CFolder.custom.addFolder('Image Resolution');
				CFolder.resolution.add(filterManager.get('resolution'), 'width', 0, 2).step(0.1);
				CFolder.resolution.add(filterManager.get('resolution'), 'height', 0, 2).step(0.1);
			CFolder.basic = CFolder.custom.addFolder('Basic Image Processing');
				CFolder.basic.add(filterManager.get('contrast'), 'contrast', 0, 100);
				CFolder.basic.add(filterManager.get('grayscale'), 'grayscale');

		CFolder.tracking = Controller.addFolder('Tracking.js');
		CFolder.face_tracking = CFolder.tracking.addFolder('Face tracking');
			CFolder.face_tracking.add(filterManager.get('face_tracking'), 'apply');
			CFolder.face_tracking.add(filterManager.get('face_tracking'), 'initial_scale', 1, 10).step(0.5);
			CFolder.face_tracking.add(filterManager.get('face_tracking'), 'step_size', 1, 5).step(0.5);
			CFolder.face_tracking.add(filterManager.get('face_tracking'), 'edges_density', 0.1, 0.5).step(0.01);

		CFolder.jsfeat = Controller.addFolder('jsfeat');
			CFolder.haar_face = CFolder.jsfeat.addFolder('Haar Face Detection');
				CFolder.haar_face.add(filterManager.get('haar_face'), 'apply');
				CFolder.haar_face.add(filterManager.get('haar_face'), 'min_scale', 1, 4).step(0.1);
				CFolder.haar_face.add(filterManager.get('haar_face'), 'scale_factor', 1.1, 2).step(0.025);
				CFolder.haar_face.add(filterManager.get('haar_face'), 'equalize_histogram');
				CFolder.haar_face.add(filterManager.get('haar_face'), 'use_canny');
				CFolder.haar_face.add(filterManager.get('haar_face'), 'edges_density', 0.01, 1.0).step(0.005);
			CFolder.gaussian = CFolder.jsfeat.addFolder('Gaussian Blur');
				CFolder.gaussian.add(filterManager.get('gaussian'), 'active');
				CFolder.gaussian.add(filterManager.get('gaussian'), 'sigma', 0, 10).step(0.5);
				CFolder.gaussian.add(filterManager.get('gaussian'), 'radius', 1, 11).step(1);
			CFolder.sobel = CFolder.jsfeat.addFolder('Sobel Filter');
				CFolder.sobel.add(filterManager.get('sobel'), 'sobelActive');
			CFolder.canny = CFolder.jsfeat.addFolder('Canny Filter');
				CFolder.canny.add(filterManager.get('canny'), 'active');
				CFolder.canny.add(filterManager.get('canny'), 'radius', 0, 4).step(1);
				CFolder.canny.add(filterManager.get('canny'), 'low_threshold', 1, 127).step(1);
				CFolder.canny.add(filterManager.get('canny'), 'high_threshold', 1, 127).step(1);

		CFolder.process = Controller.addFolder('Process');
			CFolder.process.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;
});