core/expressed
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

beep boop

Browse source
This commit is contained in:
core 2023-11-20 12:00:12 -05:00
parent 01bffecad2
commit f035b10f67
Signed by: core
GPG key ID: FDBF740DADDCEECF
1 changed files with 120 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

212
v_dl/sdk/www/lib/visageRendering.js
View file

@ -14,7 +14,7 @@ var IRIS_COLOR = "rgba(200,80,0,255)",
FEMALE_GENDER = "rgba(255,0,0,0.8)", FEMALE_GENDER = "rgba(255,0,0,0.8)",
GRAY_COLOR = "rgba(128,128,128,1)", GRAY_COLOR = "rgba(128,128,128,1)",
GREEN_COLOR = "rgba(0,255,0,1)"; GREEN_COLOR = "rgba(0,255,0,1)";
var CHIN_POINTS = "#8080FF", var CHIN_POINTS = "#8080FF",
INNER_LIP_POINTS = "#EC0000", INNER_LIP_POINTS = "#EC0000",
OUTER_LIP_POINTS = "#EC0000", OUTER_LIP_POINTS = "#EC0000",
@ -26,11 +26,11 @@ var CHIN_POINTS = "#8080FF",
EYEBROWS_COLOR = "#E3FE49", EYEBROWS_COLOR = "#E3FE49",
HAIR_COLOR = "#646464", HAIR_COLOR = "#646464",
GAZE_COLOR = "#00FF00"; GAZE_COLOR = "#00FF00";
var CALIB_COLOR = "#1d97e9", var CALIB_COLOR = "#1d97e9",
ESTIM_COLOR = "#37fd82"; ESTIM_COLOR = "#37fd82";
var styles = {'LINE' : 0, 'LINELOOP' : 1, 'POINT' : 2, 'SPLINE' : 3} var styles = {'LINE' : 0, 'LINELOOP' : 1, 'POINT' : 2, 'SPLINE' : 3}
var splineResolution = 5; var splineResolution = 5;
@ -87,7 +87,7 @@ function drawPoints2D(points, pointsNum, style, featurePoints2D, color, radius,
canCon.beginPath(); canCon.beginPath();
canCon.closePath(); canCon.closePath();
var n = 0; var n = 0;
for (var i = 0; i < pointsNum*2; i+=2){ for (var i = 0; i < pointsNum*2; i+=2){
if (featurePoints2D.FPIsDefined(points[i],points[i+1]) === true){ if (featurePoints2D.FPIsDefined(points[i],points[i+1]) === true){
@ -157,7 +157,7 @@ function drawPoints2D(points, pointsNum, style, featurePoints2D, color, radius,
} }
} }
} }
n++; n++;
} }
} }
@ -181,9 +181,9 @@ function drawPoints2D(points, pointsNum, style, featurePoints2D, color, radius,
} }
} }
} }
if (style == styles.LINELOOP){ if (style == styles.LINELOOP){
var x = featurePoints2D.getFPPos(points[0],points[1])[0]*canvas.width; var x = featurePoints2D.getFPPos(points[0],points[1])[0]*canvas.width;
var y = (1 - featurePoints2D.getFPPos(points[0],points[1])[1])*canvas.height; var y = (1 - featurePoints2D.getFPPos(points[0],points[1])[1])*canvas.height;
@ -195,19 +195,19 @@ function drawPoints2D(points, pointsNum, style, featurePoints2D, color, radius,
} }
/* /*
* Draw irises * Draw irises
*/ */
function drawIrises(faceData, width, height) function drawIrises(faceData, width, height)
{ {
var irisRadius = faceData.getIrisRadius(); var irisRadius = faceData.getIrisRadius();
if (irisRadius[0] > 0 || irisRadius[1] > 0) if (irisRadius[0] > 0 || irisRadius[1] > 0)
{ {
var featurePoints2D = faceData.getFeaturePoints2D(); var featurePoints2D = faceData.getFeaturePoints2D();
var fpGroup = 3; var fpGroup = 3;
var fpIndex = [5,6]; var fpIndex = [5,6];
for (var irisIndex = 0; irisIndex < 2; irisIndex+=1) for (var irisIndex = 0; irisIndex < 2; irisIndex+=1)
{ {
if (irisRadius[irisIndex] > 0) if (irisRadius[irisIndex] > 0)
@ -235,7 +235,7 @@ function drawIrises(faceData, width, height)
* Draw facial features * Draw facial features
* <br/><br/> * <br/><br/>
* @param {FaceDataVector} faceData - Array of {@link FaceData|FaceData} objects containing the tracking results * @param {FaceDataVector} faceData - Array of {@link FaceData|FaceData} objects containing the tracking results
* @param {bool} drawQuality * @param {bool} drawQuality
* Extracts location of feature points from faceData. Calls drawPoints2D() function for drawing feature points and lines between points on canvas. * Extracts location of feature points from faceData. Calls drawPoints2D() function for drawing feature points and lines between points on canvas.
*/ */
function drawFaceFeatures(faceData, drawQuality) function drawFaceFeatures(faceData, drawQuality)
@ -243,14 +243,14 @@ function drawFaceFeatures(faceData, drawQuality)
if (typeof drawQuality === 'undefined') drawQuality = false; if (typeof drawQuality === 'undefined') drawQuality = false;
var radius = (faceData.faceScale / mWidth) * 10; var radius = (faceData.faceScale / mWidth) * 10;
var chinPoints = [ var chinPoints = [
2, 1, 2, 1,
] ]
drawPoints2D(chinPoints, 1, styles.POINT, faceData.getFeaturePoints2D(),POINTS_COLOR, radius, drawQuality); drawPoints2D(chinPoints, 1, styles.POINT, faceData.getFeaturePoints2D(),POINTS_COLOR, radius, drawQuality);
var innerLipPoints = [ var innerLipPoints = [
2, 2, 2, 2,
17, 18, 17, 18,
@ -389,7 +389,7 @@ function drawFaceFeatures(faceData, drawQuality)
] ]
drawPoints2D(irisPoints, 1,styles.POINT, faceData.getFeaturePoints2D(),IRIS_COLOR,radius); drawPoints2D(irisPoints, 1,styles.POINT, faceData.getFeaturePoints2D(),IRIS_COLOR,radius);
} }
if(faceData.getEyeClosure()[1]) if(faceData.getEyeClosure()[1])
{ {
//if eye is open, draw the iris //if eye is open, draw the iris
@ -605,7 +605,7 @@ function drawFaceFeatures(faceData, drawQuality)
15, 4, 15, 4,
15, 2 15, 2
] ]
drawPoints2D(contourPointsPhysical, 17, styles.SPLINE, faceData.getFeaturePoints2D(), SPLINES_COLOR, true); drawPoints2D(contourPointsPhysical, 17, styles.SPLINE, faceData.getFeaturePoints2D(), SPLINES_COLOR, true);
drawPoints2D(contourPointsPhysical, 17, styles.POINT, faceData.getFeaturePoints2D(), POINTS_COLOR, radius, drawQuality, true); drawPoints2D(contourPointsPhysical, 17, styles.POINT, faceData.getFeaturePoints2D(), POINTS_COLOR, radius, drawQuality, true);
} }
@ -613,7 +613,7 @@ function drawFaceFeatures(faceData, drawQuality)
/** /**
* Draw tracking quality bar on canvas * Draw tracking quality bar on canvas
* <br/><br/> * <br/><br/>
* @param {float} quality - Estimated tracking quality level for the current frame. The value is between 0 and 1. * @param {float} quality - Estimated tracking quality level for the current frame. The value is between 0 and 1.
*/ */
function drawTrackingQualityBar(quality) function drawTrackingQualityBar(quality)
{ {
@ -626,7 +626,7 @@ function drawTrackingQualityBar(quality)
var barPosY = mHeight*0.9; var barPosY = mHeight*0.9;
var barColor = "rgba("+ (255 - quality*255).toFixed(0) + "," + (quality*255).toFixed(0) + ",0,1.0)"; var barColor = "rgba("+ (255 - quality*255).toFixed(0) + "," + (quality*255).toFixed(0) + ",0,1.0)";
var barColor var barColor
//background rectangle //background rectangle
canCon.beginPath(); canCon.beginPath();
canCon.rect(barPosX, barPosY, barWidth, barHeight); canCon.rect(barPosX, barPosY, barWidth, barHeight);
@ -664,7 +664,7 @@ function drawName(x,y,name)
canCon.fillText(""+ name, x+6, y+6); canCon.fillText(""+ name, x+6, y+6);
canCon.closePath(); canCon.closePath();
canCon.translate(mWidth, 0); canCon.translate(mWidth, 0);
canCon.scale(-1, 1); canCon.scale(-1, 1);
} }
/** /**
@ -682,54 +682,54 @@ function draw3DModel()
faceModelGeometry.dispose(); faceModelGeometry.dispose();
var texCoordsStatic = TfaceDataArray.get(0).getFaceModelTextureCoordsStatic(); var texCoordsStatic = TfaceDataArray.get(0).getFaceModelTextureCoordsStatic();
tempUV = [[]]; tempUV = [[]];
var triangles = TfaceDataArray.get(0).getFaceModelTriangles(); var triangles = TfaceDataArray.get(0).getFaceModelTriangles();
for(var i = 0; i < triangles.length; i += 3) for(var i = 0; i < triangles.length; i += 3)
{ {
face = [ face = [
new THREE.Vector2( new THREE.Vector2(
texCoordsStatic[ texCoordsStatic[
triangles[i] * 2 triangles[i] * 2
], ],
texCoordsStatic[ texCoordsStatic[
triangles[i] * 2 + 1 triangles[i] * 2 + 1
] ]
), ),
new THREE.Vector2( new THREE.Vector2(
texCoordsStatic[ texCoordsStatic[
triangles[i + 1] * 2 triangles[i + 1] * 2
], ],
texCoordsStatic[ texCoordsStatic[
triangles[i + 1] * 2 + 1 triangles[i + 1] * 2 + 1
] ]
), ),
new THREE.Vector2( new THREE.Vector2(
texCoordsStatic[ texCoordsStatic[
triangles[i + 2] * 2 triangles[i + 2] * 2
], ],
texCoordsStatic[ texCoordsStatic[
triangles[i + 2] * 2 + 1 triangles[i + 2] * 2 + 1
] ]
) )
]; ];
tempUV[0].push(face); tempUV[0].push(face);
} }
faceModelGeometry = new THREE.Geometry(); faceModelGeometry = new THREE.Geometry();
//faceModelTriangleCount //faceModelTriangleCount
var triangles = TfaceData.getFaceModelTriangles(); var triangles = TfaceData.getFaceModelTriangles();
for(i=0;i<TfaceData.faceModelTriangleCount*3;i+=3) for(i=0;i<TfaceData.faceModelTriangleCount*3;i+=3)
{ {
var testFace = new THREE.Face3(triangles[i],triangles[i+1], triangles[i+2] ) ; var testFace = new THREE.Face3(triangles[i],triangles[i+1], triangles[i+2] ) ;
faceModelGeometry.faces.push(testFace); faceModelGeometry.faces.push(testFace);
} }
var wireframeVertices = TfaceData.getFaceModelVertices(); var wireframeVertices = TfaceData.getFaceModelVertices();
for(i=0;i<TfaceData.faceModelVertexCount*3;i+=3) for(i=0;i<TfaceData.faceModelVertexCount*3;i+=3)
{ {
@ -739,21 +739,21 @@ function draw3DModel()
faceModelGeometry.faceVertexUvs = tempUV; faceModelGeometry.faceVertexUvs = tempUV;
faceModelGeometry.uvsNeedUpdate = true; faceModelGeometry.uvsNeedUpdate = true;
faceModelMesh = new THREE.Mesh(faceModelGeometry, materialTiger); faceModelMesh = new THREE.Mesh(faceModelGeometry, materialTiger);
faceModelMesh.position.set(TfaceData.getFaceTranslation()[0], TfaceData.getFaceTranslation()[1], -TfaceData.getFaceTranslation()[2]); faceModelMesh.position.set(TfaceData.getFaceTranslation()[0], TfaceData.getFaceTranslation()[1], -TfaceData.getFaceTranslation()[2]);
faceModelMesh.rotation.set(TfaceData.getFaceRotation()[0], -TfaceData.getFaceRotation()[1], -TfaceData.getFaceRotation()[2]); faceModelMesh.rotation.set(TfaceData.getFaceRotation()[0], -TfaceData.getFaceRotation()[1], -TfaceData.getFaceRotation()[2]);
scene.add(faceModelMesh); scene.add(faceModelMesh);
renderer.render(scene, v_camera); renderer.render(scene, v_camera);
if(statusWireframe) if(statusWireframe)
{ {
faceModelMesh.material = materialWireframe; faceModelMesh.material = materialWireframe;
faceModelMesh.material.needsUpdate = true; faceModelMesh.material.needsUpdate = true;
renderer.render(scene, v_camera); renderer.render(scene, v_camera);
} }
meshCreated = true; meshCreated = true;
} }
else else
@ -767,7 +767,7 @@ function draw3DModel()
} }
faceModelMesh.geometry.verticesNeedUpdate = true; faceModelMesh.geometry.verticesNeedUpdate = true;
faceModelMesh.position.set(TfaceData.getFaceTranslation()[0], TfaceData.getFaceTranslation()[1], -TfaceData.getFaceTranslation()[2]); faceModelMesh.position.set(TfaceData.getFaceTranslation()[0], TfaceData.getFaceTranslation()[1], -TfaceData.getFaceTranslation()[2]);
faceModelMesh.rotation.set(TfaceData.getFaceRotation()[0], -TfaceData.getFaceRotation()[1], -TfaceData.getFaceRotation()[2]); faceModelMesh.rotation.set(TfaceData.getFaceRotation()[0], -TfaceData.getFaceRotation()[1], -TfaceData.getFaceRotation()[2]);
faceModelMesh.rotation.order = "YXZ"; faceModelMesh.rotation.order = "YXZ";
@ -784,7 +784,7 @@ function draw3DModel()
*/ */
function drawFaceModelAxes(faceData) function drawFaceModelAxes(faceData)
{ {
var r = faceData.getFaceRotation(); var r = faceData.getFaceRotation();
var f = faceData.cameraFocus; var f = faceData.cameraFocus;
@ -793,20 +793,20 @@ function drawFaceModelAxes(faceData)
var fp1 = faceData.getFeaturePoints3D().getFP(4,1); var fp1 = faceData.getFeaturePoints3D().getFP(4,1);
var fp2 = faceData.getFeaturePoints3D().getFP(4,2); var fp2 = faceData.getFeaturePoints3D().getFP(4,2);
var t = [ var t = [
(fp1.getPos(0) + fp2.getPos(0)) / 2, (fp1.getPos(0) + fp2.getPos(0)) / 2,
(fp1.getPos(1) + fp2.getPos(1)) / 2, (fp1.getPos(1) + fp2.getPos(1)) / 2,
(fp1.getPos(2) + fp2.getPos(2)) / 2 (fp1.getPos(2) + fp2.getPos(2)) / 2
]; ];
var sinrx = Math.sin(r[0]); var sinrx = Math.sin(r[0]);
var sinry = Math.sin(r[1] + Math.PI); var sinry = Math.sin(r[1] + Math.PI);
var sinrz = Math.sin(r[2]); var sinrz = Math.sin(r[2]);
var cosrx = Math.cos(r[0]); var cosrx = Math.cos(r[0]);
var cosry = Math.cos(r[1] + Math.PI); var cosry = Math.cos(r[1] + Math.PI);
var cosrz = Math.cos(r[2]); var cosrz = Math.cos(r[2]);
//set the rotation matrix //set the rotation matrix
var R00 = cosry*cosrz+sinrx*sinry*sinrz; var R00 = cosry*cosrz+sinrx*sinry*sinrz;
var R01 = -cosry*sinrz+sinrx*sinry*cosrz; var R01 = -cosry*sinrz+sinrx*sinry*cosrz;
@ -817,7 +817,7 @@ function drawFaceModelAxes(faceData)
var R20 = -sinry*cosrz+sinrx*cosry*sinrz; var R20 = -sinry*cosrz+sinrx*cosry*sinrz;
var R21 = sinry*sinrz+sinrx*cosry*cosrz; var R21 = sinry*sinrz+sinrx*cosry*cosrz;
var R22 = cosrx*cosry; var R22 = cosrx*cosry;
var vertices = [ var vertices = [
0, 0, 0, 0, 0, 0,
-0.07, 0, 0, -0.07, 0, 0,
@ -828,7 +828,7 @@ function drawFaceModelAxes(faceData)
]; ];
var vertices2D = []; var vertices2D = [];
// variables for aspect correction // variables for aspect correction
var x_offset = 1; var x_offset = 1;
var y_offset = 1; var y_offset = 1;
@ -838,7 +838,7 @@ function drawFaceModelAxes(faceData)
x_offset = w / h; x_offset = w / h;
else if (w < h) else if (w < h)
y_offset = h / w; y_offset = h / w;
//loop over all vertices //loop over all vertices
for (var i = 0; i < 6; i++) for (var i = 0; i < 6; i++)
{ {
@ -858,7 +858,7 @@ function drawFaceModelAxes(faceData)
vertices2D[2*i+0] = ((x * -0.5 / x_offset) + 0.5) * w; vertices2D[2*i+0] = ((x * -0.5 / x_offset) + 0.5) * w;
vertices2D[2*i+1] = (1.0 - ((y * 0.5 / y_offset) + 0.5)) * h; vertices2D[2*i+1] = (1.0 - ((y * 0.5 / y_offset) + 0.5)) * h;
} }
//draw x axis //draw x axis
canCon.beginPath(); canCon.beginPath();
canCon.moveTo(vertices2D[0],vertices2D[1]); canCon.moveTo(vertices2D[0],vertices2D[1]);
@ -867,7 +867,7 @@ function drawFaceModelAxes(faceData)
canCon.lineWidth = 3; canCon.lineWidth = 3;
canCon.stroke(); canCon.stroke();
canCon.closePath(); canCon.closePath();
//draw y axis //draw y axis
canCon.beginPath(); canCon.beginPath();
canCon.moveTo(vertices2D[4],vertices2D[5]); canCon.moveTo(vertices2D[4],vertices2D[5]);
@ -885,7 +885,7 @@ function drawFaceModelAxes(faceData)
canCon.lineWidth = 3; canCon.lineWidth = 3;
canCon.stroke(); canCon.stroke();
canCon.closePath(); canCon.closePath();
fp1.delete(); fp1.delete();
fp2.delete(); fp2.delete();
} }
@ -897,21 +897,21 @@ function drawFaceModelAxes(faceData)
* Projects 3D gaze information (gazeDirectionGlobal) to 2D and draws on canvas. * Projects 3D gaze information (gazeDirectionGlobal) to 2D and draws on canvas.
*/ */
function drawGaze(faceData){ function drawGaze(faceData){
if (!faceData.getEyeClosure()[1]) if (!faceData.getEyeClosure()[1])
return; return;
var eye_r = faceData.getGazeDirectionGlobal(); var eye_r = faceData.getGazeDirectionGlobal();
var f = faceData.cameraFocus; var f = faceData.cameraFocus;
if(!faceData.getFeaturePoints3D()) if(!faceData.getFeaturePoints3D())
return; return;
var leye = faceData.getFeaturePoints3D().getFP(3,5); var leye = faceData.getFeaturePoints3D().getFP(3,5);
var reye = faceData.getFeaturePoints3D().getFP(3,6); var reye = faceData.getFeaturePoints3D().getFP(3,6);
var t = []; var t = [];
if (leye.defined && reye.defined) if (leye.defined && reye.defined)
{ {
//left eye vector origin //left eye vector origin
@ -931,14 +931,14 @@ function drawGaze(faceData){
t.push(reye.getPos(1)); t.push(reye.getPos(1));
t.push(reye.getPos(2)); t.push(reye.getPos(2));
} }
var sinrx = Math.sin(eye_r[0]); var sinrx = Math.sin(eye_r[0]);
var sinry = Math.sin(eye_r[1] + Math.PI); var sinry = Math.sin(eye_r[1] + Math.PI);
var sinrz = Math.sin(eye_r[2]); var sinrz = Math.sin(eye_r[2]);
var cosrx = Math.cos(eye_r[0]); var cosrx = Math.cos(eye_r[0]);
var cosry = Math.cos(eye_r[1] + Math.PI); var cosry = Math.cos(eye_r[1] + Math.PI);
var cosrz = Math.cos(eye_r[2]); var cosrz = Math.cos(eye_r[2]);
//set the rotation matrix //set the rotation matrix
var R00 = cosry*cosrz+sinrx*sinry*sinrz; var R00 = cosry*cosrz+sinrx*sinry*sinrz;
var R01 = -cosry*sinrz+sinrx*sinry*cosrz; var R01 = -cosry*sinrz+sinrx*sinry*cosrz;
@ -949,16 +949,16 @@ function drawGaze(faceData){
var R20 = -sinry*cosrz+sinrx*cosry*sinrz; var R20 = -sinry*cosrz+sinrx*cosry*sinrz;
var R21 = sinry*sinrz+sinrx*cosry*cosrz; var R21 = sinry*sinrz+sinrx*cosry*cosrz;
var R22 = cosrx*cosry; var R22 = cosrx*cosry;
var vertices = [ var vertices = [
0, 0, 0, //left eye vector origin 0, 0, 0, //left eye vector origin
0, 0, 0.04, //left eye vector end 0, 0, 0.04, //left eye vector end
0, 0, 0, //right eye vector origin 0, 0, 0, //right eye vector origin
0, 0, 0.04 //right eye vector end 0, 0, 0.04 //right eye vector end
]; ];
var vertices2D = []; var vertices2D = [];
// variables for aspect correction // variables for aspect correction
var x_offset = 1; var x_offset = 1;
var y_offset = 1; var y_offset = 1;
@ -968,7 +968,7 @@ function drawGaze(faceData){
x_offset = w / h; x_offset = w / h;
else if (w < h) else if (w < h)
y_offset = h / w; y_offset = h / w;
//loop over all vertices //loop over all vertices
for (var i = 0; i < 4; i++) for (var i = 0; i < 4; i++)
{ {
@ -988,7 +988,7 @@ function drawGaze(faceData){
vertices2D[2*i+0] = ((x * -0.5 / x_offset) + 0.5) * w; vertices2D[2*i+0] = ((x * -0.5 / x_offset) + 0.5) * w;
vertices2D[2*i+1] = (1.0 - ((y * 0.5 / y_offset) + 0.5)) * h; vertices2D[2*i+1] = (1.0 - ((y * 0.5 / y_offset) + 0.5)) * h;
} }
//draw left eye gaze //draw left eye gaze
canCon.beginPath(); canCon.beginPath();
canCon.moveTo(vertices2D[0],vertices2D[1]); canCon.moveTo(vertices2D[0],vertices2D[1]);
@ -997,7 +997,7 @@ function drawGaze(faceData){
canCon.lineWidth = 2; canCon.lineWidth = 2;
canCon.stroke(); canCon.stroke();
canCon.closePath(); canCon.closePath();
//draw right eye gaze //draw right eye gaze
canCon.beginPath(); canCon.beginPath();
canCon.moveTo(vertices2D[4],vertices2D[5]); canCon.moveTo(vertices2D[4],vertices2D[5]);
@ -1010,6 +1010,32 @@ function drawGaze(faceData){
reye.delete(); reye.delete();
} }
//if you have another AudioContext class use that one, as some browsers have a limit
var audioCtx = new (window.AudioContext || window.webkitAudioContext || window.audioContext);
//All arguments are optional:
//duration of the tone in milliseconds. Default is 500
//frequency of the tone in hertz. default is 440
//volume of the tone. Default is 1, off is 0.
//type of tone. Possible values are sine, square, sawtooth, triangle, and custom. Default is sine.
//callback to use on end of tone
function beep(duration, frequency, volume, type, callback) {
var oscillator = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);
if (volume){gainNode.gain.value = volume;}
if (frequency){oscillator.frequency.value = frequency;}
if (type){oscillator.type = type;}
if (callback){oscillator.onended = callback;}
oscillator.start(audioCtx.currentTime);
oscillator.stop(audioCtx.currentTime + ((duration || 500) / 1000));
};
/** /**
* Draws the box with gender, age and emotion estimation. * Draws the box with gender, age and emotion estimation.
* <br/><br/> * <br/><br/>
@ -1020,7 +1046,7 @@ function drawGaze(faceData){
* @param {int} mode - used to determine the operating mode * @param {int} mode - used to determine the operating mode
*/ */
function drawGenderAgeEmotions(emotion_values,gender,age,index,mode) function drawGenderAgeEmotions(emotion_values,gender,age,index,mode)
{ {
if (mode === MODE_TRACK) if (mode === MODE_TRACK)
{ {
fd = TfaceDataArray.get(index); fd = TfaceDataArray.get(index);
@ -1029,19 +1055,19 @@ function drawGenderAgeEmotions(emotion_values,gender,age,index,mode)
{ {
fd = DfaceDataArray.get(index); fd = DfaceDataArray.get(index);
} }
calculateBackgroundSize(); calculateBackgroundSize();
var x; var x;
var y; var y;
var xOffset = 5; var xOffset = 5;
var yOffset = 15 var yOffset = 15
var down = fd.getFeaturePoints2D().getFPPos(2,1); var down = fd.getFeaturePoints2D().getFPPos(2,1);
var left = fd.getFeaturePoints2D().getFPPos(4,5); var left = fd.getFeaturePoints2D().getFPPos(4,5);
var right = fd.getFeaturePoints2D().getFPPos(4,6); var right = fd.getFeaturePoints2D().getFPPos(4,6);
var up = fd.getFeaturePoints2D().getFPPos(11,1); var up = fd.getFeaturePoints2D().getFPPos(11,1);
if (up[1] * canvas.height - backgroundHeight < canvas.height) if (up[1] * canvas.height - backgroundHeight < canvas.height)
{ {
x = (1 - up[0])*canvas.width; x = (1 - up[0])*canvas.width;
@ -1070,10 +1096,10 @@ function drawGenderAgeEmotions(emotion_values,gender,age,index,mode)
var emotions = ["Anger", "Disgust", "Fear", "Happiness", "Sadness", "Surprise", "Neutral"]; var emotions = ["Anger", "Disgust", "Fear", "Happiness", "Sadness", "Surprise", "Neutral"];
canCon.fillStyle="rgba(255,255,255,0.5)"; canCon.fillStyle="rgba(255,255,255,0.5)";
canCon.fillRect(x,y,backgroundWidth,backgroundHeight); canCon.fillRect(x,y,backgroundWidth,backgroundHeight);
if(withinConstraints()) if(withinConstraints())
{ {
if(drawGender && drawAge) if(drawGender && drawAge)
{ {
@ -1123,9 +1149,9 @@ function drawGenderAgeEmotions(emotion_values,gender,age,index,mode)
else else
canCon.fillText("Age: -- ",x+xOffset,y+yOffset); canCon.fillText("Age: -- ",x+xOffset,y+yOffset);
canCon.closePath(); canCon.closePath();
} }
if(drawEmotions && (drawAge || drawGender)) if(drawEmotions && (drawAge || drawGender))
{ {
canCon.beginPath(); canCon.beginPath();
@ -1141,7 +1167,9 @@ function drawGenderAgeEmotions(emotion_values,gender,age,index,mode)
{ {
for(var j = 0; j < numberOfEmotions; ++j) for(var j = 0; j < numberOfEmotions; ++j)
{ {
var length = emotion_values[j] * (backgroundWidth-emotionsBarOffset-xOffset*3); console.log(emotion_values[j]);
beep(100, 500 + 500 * emotion_values[j], 1, "sine", () => {});
var length = emotion_values[j] * (backgroundWidth-emotionsBarOffset-xOffset*3);
canCon.beginPath(); canCon.beginPath();
canCon.fillStyle="black"; canCon.fillStyle="black";
canCon.font = fontSize.toString() + "px Arial"; canCon.font = fontSize.toString() + "px Arial";
@ -1165,7 +1193,7 @@ function drawGenderAgeEmotions(emotion_values,gender,age,index,mode)
canCon.fillText("only in frontal pose",x+xOffset,y+yOffset*backgroundHeight/backgroundHeightMax*3); canCon.fillText("only in frontal pose",x+xOffset,y+yOffset*backgroundHeight/backgroundHeightMax*3);
canCon.fillText("and if face is fairly",x+xOffset,y+yOffset*backgroundHeight/backgroundHeightMax*4); canCon.fillText("and if face is fairly",x+xOffset,y+yOffset*backgroundHeight/backgroundHeightMax*4);
canCon.fillText("close to the camera.",x+xOffset,y+yOffset*backgroundHeight/backgroundHeightMax*5); canCon.fillText("close to the camera.",x+xOffset,y+yOffset*backgroundHeight/backgroundHeightMax*5);
canCon.closePath(); canCon.closePath();
} }
} }
@ -1176,7 +1204,7 @@ function drawGenderAgeEmotions(emotion_values,gender,age,index,mode)
* Parameters: * Parameters:
*/ */
function calculateBackgroundSize() function calculateBackgroundSize()
{ {
backgroundWidthMax = 180; backgroundWidthMax = 180;
backgroundHeightMax = 120; backgroundHeightMax = 120;
@ -1184,8 +1212,8 @@ function calculateBackgroundSize()
{ {
if(drawEmotions) if(drawEmotions)
{ {
fontSizePerc = 15/backgroundWidthMax; fontSizePerc = 15/backgroundWidthMax;
} }
else else
{ {
@ -1199,25 +1227,25 @@ function calculateBackgroundSize()
backgroundWidthMax = 180; backgroundWidthMax = 180;
backgroundHeightMax = 80; backgroundHeightMax = 80;
fontSizePerc = 15/backgroundWidthMax; fontSizePerc = 15/backgroundWidthMax;
} }
backgroundPercW = backgroundWidthMax/canvas.width; backgroundPercW = backgroundWidthMax/canvas.width;
backgroundPercH = backgroundHeightMax/canvas.height; backgroundPercH = backgroundHeightMax/canvas.height;
backgroundWidth = canvas.width * backgroundPercW; backgroundWidth = canvas.width * backgroundPercW;
backgroundHeight = canvas.height * backgroundPercH; backgroundHeight = canvas.height * backgroundPercH;
verticalStepMax = 12; verticalStepMax = 12;
verticalStepPerc = verticalStepMax/backgroundHeightMax; verticalStepPerc = verticalStepMax/backgroundHeightMax;
verticalStep = backgroundHeight * verticalStepPerc; verticalStep = backgroundHeight * verticalStepPerc;
emotionsBarOffsetMax = 70; emotionsBarOffsetMax = 70;
emotionsBarOffsetPerc = emotionsBarOffsetMax/backgroundWidthMax; emotionsBarOffsetPerc = emotionsBarOffsetMax/backgroundWidthMax;
emotionsBarOffset = backgroundWidth * emotionsBarOffsetPerc + 1; emotionsBarOffset = backgroundWidth * emotionsBarOffsetPerc + 1;
backgroundLine = backgroundWidth * 0.9; backgroundLine = backgroundWidth * 0.9;
fontSize = backgroundWidth*fontSizePerc; fontSize = backgroundWidth*fontSizePerc;
} }
/** /**
@ -1238,9 +1266,9 @@ function withinConstraints()
// //
var CONSTRAINT_ANGLE = 40; var CONSTRAINT_ANGLE = 40;
// //
if (Math.abs(head_pitch_compensated_deg) > CONSTRAINT_ANGLE || if (Math.abs(head_pitch_compensated_deg) > CONSTRAINT_ANGLE ||
Math.abs(head_yaw_compensated_deg) > CONSTRAINT_ANGLE || Math.abs(head_yaw_compensated_deg) > CONSTRAINT_ANGLE ||
Math.abs(head_roll_deg) > CONSTRAINT_ANGLE || Math.abs(head_roll_deg) > CONSTRAINT_ANGLE ||
fd.faceScale < 40) fd.faceScale < 40)
{ {
return false; return false;
@ -1254,7 +1282,7 @@ function withinConstraints()
* Parameters: * Parameters:
* @param {float} x x coordinate of the point in normalized screen coordinates * @param {float} x x coordinate of the point in normalized screen coordinates
* @param {float} y y coordinate of the point in normalized screen coordinates * @param {float} y y coordinate of the point in normalized screen coordinates
* @param {int} inState - state of gaze estimator:<br/> * @param {int} inState - state of gaze estimator:<br/>
* - Estimator is off, inState is equal to 0.<br/> * - Estimator is off, inState is equal to 0.<br/>
* - Estimator is calibrating, inState is equal to 1.<br/> * - Estimator is calibrating, inState is equal to 1.<br/>
* - Estimator is estimating, inState is equal to 2. * - Estimator is estimating, inState is equal to 2.
@ -1267,7 +1295,7 @@ function drawScreenSpaceGaze(gazeCanCon, x, y, inState) {
gazeCanCon.closePath(); gazeCanCon.closePath();
gazeCanCon.fill(); gazeCanCon.fill();
} }
if (inState == 1 || inState == 2) { if (inState == 1 || inState == 2) {
gazeCanCon.beginPath(); gazeCanCon.beginPath();
gazeCanCon.fillStyle = '#070a0f'; gazeCanCon.fillStyle = '#070a0f';
@ -1275,7 +1303,7 @@ function drawScreenSpaceGaze(gazeCanCon, x, y, inState) {
gazeCanCon.closePath(); gazeCanCon.closePath();
gazeCanCon.fill(); gazeCanCon.fill();
} }
if (inState == 1) { if (inState == 1) {
gazeCanCon.beginPath(); gazeCanCon.beginPath();
gazeCanCon.fillStyle = CALIB_COLOR; gazeCanCon.fillStyle = CALIB_COLOR;
@ -1283,7 +1311,7 @@ function drawScreenSpaceGaze(gazeCanCon, x, y, inState) {
gazeCanCon.closePath(); gazeCanCon.closePath();
gazeCanCon.fill(); gazeCanCon.fill();
} }
if (inState == 2) { if (inState == 2) {
gazeCanCon.beginPath(); gazeCanCon.beginPath();
gazeCanCon.fillStyle = ESTIM_COLOR; gazeCanCon.fillStyle = ESTIM_COLOR;
@ -1298,7 +1326,7 @@ function drawScreenSpaceGaze(gazeCanCon, x, y, inState) {
* <br/><br/> * <br/><br/>
*/ */
function multiplyMatrix(m1, m2, M, N, P) { function multiplyMatrix(m1, m2, M, N, P) {
var res = []; var res = [];
for(var i = 0; i < M; ++i) for(var i = 0; i < M; ++i)
{ {
@ -1312,6 +1340,6 @@ function multiplyMatrix(m1, m2, M, N, P) {
res[i*P+j] = sum; res[i*P+j] = sum;
} }
} }
return res; return res;
} }