From 7dfe16bf49f9f067714a8f540fca76f6a1c8888d Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Thu, 6 Oct 2016 19:15:29 +0200 Subject: [PATCH] =?UTF-8?q?Int=C3=A9gration=20de=20la=20reconnaissance=20(?= =?UTF-8?q?tracking.js)=20+=20Gestion=20de=20la=20modification=20de=20rati?= =?UTF-8?q?o=20sans=20relancer=20le=20tracking=20+=20Code=20clean/comment/?= =?UTF-8?q?explain/etc=20[public=5Fhtml/js/action-script.js]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public_html/js/action-script.js | 113 +++++++++++++++++++++++++--- public_html/js/min/action-script.js | 8 +- 2 files changed, 106 insertions(+), 15 deletions(-) diff --git a/public_html/js/action-script.js b/public_html/js/action-script.js index d897c53..9054b48 100644 --- a/public_html/js/action-script.js +++ b/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 `` =========================================================*/ _CON.clearRect(0, 0, _CAN.width, _CAN.height); - /* [1] Copie sur le canvas - =========================================================*/ - pixelRatio.init(); - this.width = this.defaultWidth * (pixelRatio.width * _CAN.width / this.defaultWidth); - this.height = this.defaultHeight * (pixelRatio.height * _CAN.height / this.defaultHeight); + { /* [2] Copie sur le `` + =========================================================*/ + /* (1) Initialisation du gestionnaire de `ratio` */ + pixelRatio.init(); - _CON.drawImage(this, 0, 0, this.width, this.height); + /* (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 `` */ + _CON.drawImage(this, 0, 0, this.width, this.height); + } + + + { /* [3] Tracking.js + =========================================================*/ + + /* (1) On reporte chaque zone trackée sur le `` */ + 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'); }; diff --git a/public_html/js/min/action-script.js b/public_html/js/min/action-script.js index 4f49848..e2ae2fc 100644 --- a/public_html/js/min/action-script.js +++ b/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)()}), -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; -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); +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())}},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(){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);