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

{ /* [0] Initialisation
  =========================================================*/

	/* (1) Elements du DOM */
	var DOM = {
		body: $('body'),
		canvas: $('canvas'),
		imageLoader:  $('#image-loader')
	};

	/* (2) dat.GUI initialization */
	var Controller = new dat.GUI();

	/* (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;
	var exec = false;
	var last;
	var trackerTask;

}


{ /* [1] Initialisation du process
  =========================================================*/


	var init = function(){
		/* (1) Image par défaut */
		this.src = 'front:male:1.jpg';

		/* (2) Attachement de dat.GUI */
		Controller.addFolder('image source');
		Controller.add(this, 'src', this._images).listen();

		last = this.src;
	};

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

	/* (3) Gestion du track de l'image */
	var track = new (function(){
		this._update = false;
		this.__defineGetter__('update', function( ){ return this._update;                               });
		this.__defineSetter__('update', function(v){ this._update = v; process.bind(DOM.imageLoader)(); });
	})();

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

	tracker.setStepSize(1.5);

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

}


/* [2] Routine principale
=========================================================*/
process = function(){
	// Si erreur de `bind()`, on quitte
	if( !(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;
	}


	/* [0.2] Si `track.update` et aucun résultat
	=========================================================*/
	if( zones.length === 0 && track.update ){

		/* (1) On initialise la liste des zones */
		zones = [];

		trakerTask = tracking.track(DOM.imageLoader, tracker);
		/* (2) On lance le tracking */

		/* (3) Routine exécutée quand le tracking est terminé */
		tracker.on('track', function(event){

			event.data.forEach(function(rect){ zones.push({ x: rect.x     / DOM.imageLoader.width, y: rect.y      / DOM.imageLoader.height,
				w: rect.width / DOM.imageLoader.width, h: rect.height / DOM.imageLoader.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)();
		});
	}

	// sinon on supprime le tracking
	!track.update && (zones = []);


	/* [1] On initialise/efface le `<canvas>`
	=========================================================*/
	_CON.clearRect(0, 0, _CAN.width, _CAN.height);





	{ /* [2] Copie sur le `<canvas>`
	  =========================================================*/
		/* (1) Ratio */
		filterManager.get('ratio').apply();

	}


	{ /* [3] Filtrage pre-processing
	  =========================================================*/
		/* (1) Contraste */
		filterManager.get('contrast').apply();

		/* (2) Sobel */
		filterManager.get('sobel').apply();
	}


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

		/* (1) On reporte chaque zone trackée sur le `<canvas>` */
		for( var i in zones ){
			var x = zones[i].x * this.width;
			var y = zones[i].y * this.height;
			var w = zones[i].w * this.width;
			var h = zones[i].h * this.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.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('ratio',    reactiveRatio);
	filterManager.add('contrast', reactiveContrast);
	filterManager.add('sobel',    reactiveSobel);

	/* (3) On attache tout à dat.GUI */
	Controller.addFolder('Image Ratio');
		Controller.add(filterManager.get('ratio'), 'width', 0, 2).listen();
		Controller.add(filterManager.get('ratio'), 'height', 0, 2).listen();
	Controller.addFolder('Image Processing');
		Controller.add(filterManager.get('contrast'), 'contrast', 0, 100).listen();
		Controller.add(filterManager.get('sobel'), 'sobelActive').listen();

}


/* [x] Chargement image
=========================================================*/
iL = new ImageLoader( DOM.imageLoader, init, process );