Facial Detection Squares

Facial_Detection_Processing.js

/* See the resulting screen:
https://snipboard.io/E3zOoM.jpg
*/

let cameraCheckStateSave = async(button, video, canvas, args, loop, resizedDetections ) => {
        video.pause();
        /* BLUE */
        /* put raw resizedDetections Box on canvas */ 
        faceapi.draw.drawDetections(canvas, resizedDetections);

        /* PINK */
        /* draw the given detections box to see if theres a difference from library auto-resizing */
        /* (should be close to BLUE - accounts for latency and differences between resizing methods) */
        
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.strokeStyle = "#FF69B4"; //PINK
        
        ctx.rect(args.left /* x */, args.top /* y */, args.width, args.height);
        ctx.stroke();
        ctx.closePath();

        /* RED */
        
        /* Now bring the given dimensions to a square */
        ctx.beginPath();
           
        //get orientation of facebox 
        let squareOrientation = (args.width === args.height) ? "square" : false;
        if(!squareOrientation) squareOrientation = (args.width > args.height) ? "landscape" : "portrait";
        //get the offset (total difference from short dimension to square / 2) and add (subtract but yknow) to short dimension
        let squareOffset = (Math.max(args.width, args.height) - Math.min(args.width, args.height) ) / 2;
        let travel = Math.max(args.width, args.height);
        console.log('orientation: '+squareOrientation);
        console.log('squareOffset: '+ squareOffset);
        let square_x = (squareOrientation === "portrait") ? args.left - squareOffset : args.left;
        let square_y = (squareOrientation === "landscape") ? args.top - squareOffset : args.top;
        console.log('x was '+args.left+ ' and is now '+ square_x);
        console.log('y was '+args.top+ ' and is now '+ square_y);
        ctx.rect(square_x, square_y, travel, travel );
        ctx.strokeStyle = "#FF0000";
        ctx.stroke();
        ctx.closePath();

        /*GREEN */
        /* now bring the square up to properly grab the face, because detections start around browline */
        /* this is somewhat arbitrary, but based on this ZBrush tutorial about human head anatomy
        and my observation on where the top of the box always lands
        - https://www.zbrushcentral.com/uploads/default/original/4X/f/3/4/f34ed1aa242bcbb64c507a93e7484f559ac0be87.jpeg
        
        (plus some good old trail & error)
        */
        
        square_y = square_y - travel * .29; //top equals top minus 29% the height (or width) of the square
        ctx.beginPath();
        ctx.rect(square_x, square_y, travel, travel);
        ctx.strokeStyle = "#7CFC00";
        ctx.stroke();
        ctx.closePath();

        /* PURPLE */
        /* now, finally, zoom out to 1.5X of the squared capture box and then walk back the x & y offsets */
        
       
        square_y = square_y - (travel * .25);
        square_x = square_x - (travel * .25);
        ctx.beginPath();
        ctx.rect(square_x, square_y, travel * 1.5, travel * 1.5);
        ctx.strokeStyle="#9932CC"; 
        ctx.stroke(); 
        ctx.closePath();


        /* end temp */
        button.innerHTML = "Save";
        let savecanvas = document.getElementById('selfiemode_canvas_save');
        savecanvas.setAttribute('data-top', args.top);
        savecanvas.setAttribute('data-left', args.left);
        savecanvas.setAttribute('data-width', args.width);
        savecanvas.setAttribute('data-height', args.height);
        lock_avatar_controls();
        clearInterval(loop) 

    }