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 process;
var exec = false;
var last;



/* [1] Initialisation
=========================================================*/
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;
};



/* (x) Variables globales
---------------------------------------------------------*/
/* (1) Gestion du ration de l'image */
var pixelRatio = {

	initialized: false,

	init: function(){
		if( this.initialized )
			return;

		this.initialized = true;


		this._w = this._h = 0.9;
		this.width = this.height = null;

		this.__defineGetter__('width',  function(){ return this._w;                            });
		this.__defineGetter__('height', function(){ return this._h;                            });

		this.__defineSetter__('width',  function(v){ this._w = v; process.bind(iL._wrapper)(); });
		this.__defineSetter__('height', function(v){ this._h = v; process.bind(iL._wrapper)(); });


		Controller.addFolder('Image Ratio');
		Controller.add(this, 'width', 0, 2).listen();
		Controller.add(this, 'height', 0, 2).listen();
	}

};

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

/* (3) Gestion du track de l'image */
var track = {update: true};
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 ){
		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]');


		/* (2) Si `track.update` est TRUE, on lance `Tracking.js`
		---------------------------------------------------------*/
		if( track.update ){

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

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

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

				// On enregistre dans `zones` les zones trackées
				event.data.forEach(function(rect){ zones.push({ x: rect.x     / DOM.imageLoader.defaultWidth, y: rect.y      / DOM.imageLoader.defaultHeight,
																w: rect.width / DOM.imageLoader.defaultWidth, h: rect.height / DOM.imageLoader.defaultHeight }); });
				log('Recognition done', '[Tracking.js]');

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

		// 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) Initialisation du gestionnaire de `ratio` */
		pixelRatio.init();

		/* (2) Calcul de la taille de l'image en fonction du `ratio` */
		this.width  = this.defaultWidth  * (pixelRatio.width  * _CAN.width / this.defaultWidth);
		this.height = this.defaultHeight * (pixelRatio.height * _CAN.height / this.defaultHeight);

		/* (3) Copie de l'image sur le `<canvas>` */
		_CON.drawImage(this, 0, 0, this.width, this.height);
	}


	{ /* [3] 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();
		}

	}


	console.timeEnd('PROCESS');
};



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