Intégration de la reconnaissance (tracking.js) + Gestion de la modification de ratio sans relancer le tracking + Code clean/comment/explain/etc [public_html/js/action-script.js]

public_html/js/action-script.js

@@ -19,6 +19,8 @@ var _CON = _CAN.getContext('2d');
 var iL;
 
 var process;
+var exec = false;
+var last;
 
 
 
@@ -32,12 +34,14 @@ var init = function(){
 	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,
@@ -66,33 +70,118 @@ var pixelRatio = {
 
 };
 
+/* (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
 =========================================================*/
-var count = 0;
 process = function(){
-	console.warn('PROCESS');
+	// Si erreur de `bind()`, on quitte
+	if( !(this instanceof HTMLImageElement) )
+		 return;
 
-	if( !count ){
+	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]');
-	}
-	count++;
 
-	/* [0] On efface le 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);
 
-	/* [1] Copie sur le canvas
+
+	{ /* [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');
 };
 
 

public_html/js/min/action-script.js

@@ -1,4 +1,6 @@
 var DOM={body:$("body"),canvas:$("canvas"),imageLoader:$("#image-loader")},Controller=new dat.GUI,_CAN=DOM.canvas;_CAN.width=_CAN.height=1E3;
-var _CON=_CAN.getContext("2d"),iL,process,init=function(){this.src="front:male:1.jpg";Controller.addFolder("image source");Controller.add(this,"src",this._images).listen()},pixelRatio={initialized:!1,init:function(){this.initialized||(this.initialized=!0,this._w=this._h=.9,this.width=this.height=null,this.__defineGetter__("width",function(){return this._w}),this.__defineGetter__("height",function(){return this._h}),this.__defineSetter__("width",function(a){this._w=a;process.bind(iL._wrapper)()}),
+var _CON=_CAN.getContext("2d"),iL,process,exec=!1,last,init=function(){this.src="front:male:1.jpg";Controller.addFolder("image source");Controller.add(this,"src",this._images).listen();last=this.src},pixelRatio={initialized:!1,init:function(){this.initialized||(this.initialized=!0,this._w=this._h=.9,this.width=this.height=null,this.__defineGetter__("width",function(){return this._w}),this.__defineGetter__("height",function(){return this._h}),this.__defineSetter__("width",function(a){this._w=a;process.bind(iL._wrapper)()}),
-this.__defineSetter__("height",function(a){this._h=a;process.bind(iL._wrapper)()}),Controller.addFolder("Image Ratio"),Controller.add(this,"width",0,2).listen(),Controller.add(this,"height",0,2).listen())}},count=0;
+this.__defineSetter__("height",function(a){this._h=a;process.bind(iL._wrapper)()}),Controller.addFolder("Image Ratio"),Controller.add(this,"width",0,2).listen(),Controller.add(this,"height",0,2).listen())}},zones,track={update:!0},tracker=new tracking.ObjectTracker(["face","eye","mouth"]);tracker.setStepSize(1.5);Controller.addFolder("Tracking.js");Controller.add(track,"update");
-process=function(){console.warn("PROCESS");count||(this.defaultWidth=this.width,this.defaultHeight=this.height,log("Image copied","[Canvas]"));count++;_CON.clearRect(0,0,_CAN.width,_CAN.height);pixelRatio.init();this.width=pixelRatio.width*_CAN.width/this.defaultWidth*this.defaultWidth;this.height=pixelRatio.height*_CAN.height/this.defaultHeight*this.defaultHeight;_CON.drawImage(this,0,0,this.width,this.height)};iL=new ImageLoader(DOM.imageLoader,init,process);
+process=function(){if(this instanceof HTMLImageElement){console.time("PROCESS");this.src!=last&&(exec=!1,last=this.src);exec||(this.defaultWidth=this.width,this.defaultHeight=this.height,log("Image copied","[Canvas]"),track.update&&(zones=[],tracking.track(DOM.imageLoader,tracker),tracker.on("track",function(a){a.data.forEach(function(a){zones.push({x:a.x/DOM.imageLoader.defaultWidth,y:a.y/DOM.imageLoader.defaultHeight,w:a.width/DOM.imageLoader.defaultWidth,h:a.height/DOM.imageLoader.defaultHeight})});
+log("Recognition done","[Tracking.js]");process.bind(DOM.imageLoader)()})),exec=!0);_CON.clearRect(0,0,_CAN.width,_CAN.height);pixelRatio.init();this.width=pixelRatio.width*_CAN.width/this.defaultWidth*this.defaultWidth;this.height=pixelRatio.height*_CAN.height/this.defaultHeight*this.defaultHeight;_CON.drawImage(this,0,0,this.width,this.height);for(var a in zones){var b=zones[a].x*this.width,c=zones[a].y*this.height,d=zones[a].w*this.width,e=zones[a].h*this.height;_CON.beginPath();_CON.moveTo(b,
+c);_CON.lineTo(b,c+e);_CON.lineTo(b+d,c+e);_CON.lineTo(b+d,c);_CON.lineTo(b,c);_CON.lineWidth=5;_CON.stroke()}console.timeEnd("PROCESS")}};iL=new ImageLoader(DOM.imageLoader,init,process);