/************************** * action-script.js * * 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 Controller, CFolder = {}, init, 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) Initialization */ last = this.src; initialized = true; /* (3) Attachment to dat.GUI */ CFolder.src = Controller.addFolder('Source Picture'); Controller.remember(this); CFolder.src.add(this, 'src', this._images).listen(); }; } /* [2] Routine principale =========================================================*/ LOADER.init(); process = function(){ // Si erreur de `bind()`, on quitte if( !initialized || !(this instanceof HTMLImageElement) ) return; console.time('PROCESS'); LOADER.start(); /* [0.0] Gestion du changement d'image =========================================================*/ if( this.src != last ){ reactiveFaceTracking.zones = []; reactiveFeatureTracking.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 `` =========================================================*/ _CON.clearRect(0, 0, _CAN.width, _CAN.height); { /* [2] Copie sur le `` =========================================================*/ /* (1) Resolution */ filterManager.get('resolution').apply(); } { /* [3] Filtrage pre-processing =========================================================*/ /* (1) Contraste */ filterManager.get('contrast').apply(); /* (2) Contraste */ filterManager.get('grayscale').apply(); /* (3) Sobel */ filterManager.get('sobel').apply(); /* (4) Gaussian Filter */ filterManager.get('gaussian').apply(); /* (5) Canny Filter */ filterManager.get('canny').apply(); } { /* [4] Tracking.js =========================================================*/ /* (1) On reporte chaque zone trackée sur le `` */ var i, x, y, w, h; for( i in reactiveFeatureTracking.zones ){ x = reactiveFeatureTracking.zones[i].x * _CAN.width; y = reactiveFeatureTracking.zones[i].y * _CAN.height; w = reactiveFeatureTracking.zones[i].w * _CAN.width; h = reactiveFeatureTracking.zones[i].h * _CAN.height; _CON.lineWidth = 5; _CON.strokeStyle = '#f00'; _CON.strokeRect(x, y, w, h); } for( i in reactiveFaceTracking.zones ){ x = reactiveFaceTracking.zones[i].x * _CAN.width; y = reactiveFaceTracking.zones[i].y * _CAN.height; w = reactiveFaceTracking.zones[i].w * _CAN.width; h = reactiveFaceTracking.zones[i].h * _CAN.height; _CON.lineWidth = 5; _CON.strokeStyle = '#ff0'; _CON.strokeRect(x, y, w, h); } } { /* [5] Filtrage post-processing =========================================================*/ } console.timeEnd('PROCESS'); LOADER.stop(); }; { /* [3] Gestion des `ReactiveFilter` =========================================================*/ /* (1) Création du Manager */ filterManager = new ReactiveFilterManager(DOM.imageLoader, _CAN, process); /* (2) Ajout des filtres */ filterManager.add('feature_tracking', reactiveFeatureTracking); filterManager.add('face_tracking', reactiveFaceTracking); filterManager.add('resolution', reactiveResolution); filterManager.add('contrast', reactiveContrast); filterManager.add('grayscale', reactiveGrayscale); filterManager.add('sobel', reactiveSobel); filterManager.add('gaussian', reactiveGaussianBlur); filterManager.add('canny', reactiveCanny); filterManager.add('haar_face', reactiveHaarFace); /* (3) Gestion des backups */ Controller.remember(filterManager.get('face_tracking')); Controller.remember(filterManager.get('feature_tracking')); Controller.remember(filterManager.get('resolution')); Controller.remember(filterManager.get('contrast')); Controller.remember(filterManager.get('grayscale')); Controller.remember(filterManager.get('sobel')); Controller.remember(filterManager.get('canny')); Controller.remember(filterManager.get('gaussian')); Controller.remember(filterManager.get('haar_face')); /* (4) On attache tout à dat.GUI */ CFolder.custom = Controller.addFolder('custom'); CFolder.resolution = CFolder.custom.addFolder('Image Resolution'); CFolder.resolution.add(filterManager.get('resolution'), 'width', 0, 2).step(0.1); CFolder.resolution.add(filterManager.get('resolution'), 'height', 0, 2).step(0.1); CFolder.basic = CFolder.custom.addFolder('Basic Image Processing'); CFolder.basic.add(filterManager.get('contrast'), 'contrast', 0, 100); CFolder.basic.add(filterManager.get('grayscale'), 'grayscale'); CFolder.tracking = Controller.addFolder('Tracking.js'); CFolder.face_tracking = CFolder.tracking.addFolder('Face tracking'); CFolder.face_tracking.add(filterManager.get('face_tracking'), 'apply'); CFolder.face_tracking.add(filterManager.get('face_tracking'), 'initial_scale', 1, 10).step(0.5); CFolder.face_tracking.add(filterManager.get('face_tracking'), 'step_size', -.1, 5).step(0.1); CFolder.face_tracking.add(filterManager.get('face_tracking'), 'edges_density', 0.1, 0.5).step(0.01); CFolder.feature_tracking = CFolder.tracking.addFolder('Feature tracking'); CFolder.feature_tracking.add(filterManager.get('feature_tracking'), 'apply'); CFolder.feature_tracking.add(filterManager.get('feature_tracking'), 'initial_scale', 1, 10).step(0.5); CFolder.feature_tracking.add(filterManager.get('feature_tracking'), 'step_size', -.1, 5).step(0.1); CFolder.feature_tracking.add(filterManager.get('feature_tracking'), 'edges_density', 0.1, 0.5).step(0.01); CFolder.jsfeat = Controller.addFolder('jsfeat'); CFolder.haar_face = CFolder.jsfeat.addFolder('Haar Face Detection'); CFolder.haar_face.add(filterManager.get('haar_face'), 'apply'); CFolder.haar_face.add(filterManager.get('haar_face'), 'min_scale', 1, 4).step(0.1); CFolder.haar_face.add(filterManager.get('haar_face'), 'scale_factor', 1.1, 2).step(0.025); CFolder.haar_face.add(filterManager.get('haar_face'), 'equalize_histogram'); CFolder.haar_face.add(filterManager.get('haar_face'), 'use_canny'); CFolder.haar_face.add(filterManager.get('haar_face'), 'edges_density', 0.01, 1.0).step(0.005); CFolder.gaussian = CFolder.jsfeat.addFolder('Gaussian Blur'); CFolder.gaussian.add(filterManager.get('gaussian'), 'active'); CFolder.gaussian.add(filterManager.get('gaussian'), 'sigma', 0, 10).step(0.5); CFolder.gaussian.add(filterManager.get('gaussian'), 'radius', 1, 11).step(1); CFolder.sobel = CFolder.jsfeat.addFolder('Sobel Filter'); CFolder.sobel.add(filterManager.get('sobel'), 'sobelActive'); CFolder.canny = CFolder.jsfeat.addFolder('Canny Filter'); CFolder.canny.add(filterManager.get('canny'), 'active'); CFolder.canny.add(filterManager.get('canny'), 'radius', 0, 4).step(1); CFolder.canny.add(filterManager.get('canny'), 'low_threshold', 1, 127).step(1); CFolder.canny.add(filterManager.get('canny'), 'high_threshold', 1, 127).step(1); CFolder.process = Controller.addFolder('Process'); CFolder.process.add({render: process}, 'render'); /* (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; });