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 trackerTask;
	var trackerTask;

	var Controller,
		init,
		zones,
		track,
		tracker,
		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) Attachement de dat.GUI */
			Controller.addFolder('Source Picture');
			Controller.remember(this);
			Controller.add(this, 'src', this._images).listen();

			last = this.src;

			initialized = true;
		};

		/* (2) Gestion de tracking.js */
		zones;

		/* (3) Gestion du track de l'image */
		track = {
			track: function(){
				zones = [];
				trackerTask = tracking.track(_CAN, tracker);
			}
		};

		tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']);

		tracker.setStepSize(1.9);

		Controller.addFolder('Tracking.js');
		Controller.add(track, 'track');

		tracker.on('track', function(event){

			event.data.forEach(function(rect){

				zones.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` les zones trackées
			log('Recognition done', '[Tracking.js]');

			// On met à jour le rendu (affichage des zones)
			process.bind(DOM.imageLoader)();

		});

	}


	/* [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 = [];
			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) Sobel */
			filterManager.get('sobel').apply();

			/* (3) Gaussian Filter */
			filterManager.get('gaussian').apply();

			/* (4) Canny Filter */
			filterManager.get('canny').apply();
		}


		{ /* [4] Tracking.js
		  =========================================================*/

			/* (1) On reporte chaque zone trackée sur le `<canvas>` */
			for( var i in zones ){
				var x = zones[i].x * _CAN.width;
				var y = zones[i].y * _CAN.height;
				var w = zones[i].w * _CAN.width;
				var h = zones[i].h * _CAN.height;
				_CON.beginPath();
					_CON.moveTo( x,   y   );
					_CON.lineTo( x,   y+h );
					_CON.lineTo( x+w, y+h );
					_CON.lineTo( x+w, y   );
					_CON.lineTo( x,   y   );
				_CON.lineWidth = 5;
				_CON.strokeStyle = '#f00';
				_CON.stroke();
			}

		}


		{ /* [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('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('sobel'));
		Controller.remember(filterManager.get('canny'));
		Controller.remember(filterManager.get('gaussian'));

		/* (4) On attache tout à dat.GUI */
		Controller.addFolder('Image Resolution');
			Controller.add(filterManager.get('resolution'), 'width', 0, 2).step(0.1);//listen();
			Controller.add(filterManager.get('resolution'), 'height', 0, 2).step(0.1);//listen();
		Controller.addFolder('Basic Image Processing');
			Controller.add(filterManager.get('contrast'), 'contrast', 0, 100);//listen();
		Controller.addFolder('Gaussian Blur');
			Controller.add(filterManager.get('gaussian'), 'sigma', 0, 10).step(0.5);//listen();
			Controller.add(filterManager.get('gaussian'), 'radius', 1, 11).step(1);//listen();
		Controller.addFolder('Convolution Filters');
			Controller.add(filterManager.get('sobel'), 'sobelActive');//listen();
			Controller.add(filterManager.get('canny'), 'canny_radius');//listen();


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