Yue Bai 20.2.MDDN342 Assignment 3

.block

license: mit

README.md

2020 MDDN342 Assignment 3: Face Mappings

1.My inspiration is a character in Counter Strike. But in order to make the work more recognizable for different characters, I have made some changes.

2.To distinguish the genders, female characters wear crowns and male characters wear tie. (1==femae 2==male, in the coding)

3.Everyone’s skin tone will also change according to the character in the photo

4.In order to better distinguish the different characters, the eyes can also move left and right in this work.

5.I think for this kind of abstract work, the color should not be too rich, so it has only two colors

final: In the final work, in order to make the expression of the mouth look more comfortable, I made some compromises, which can be seen in my version 1.

This README should eventually explain your different paramaterised faces.

face.js

var DEBUG_MODE = false;
var NUM_SLIDERS =6;


function segment_average(segment) {
  let sum_x = 0;
  let sum_y = 0;
  let s_len = segment.length;
  for (let i=0; i<s_len; i++) {
    sum_x = sum_x + segment[i][0];
    sum_y = sum_y + segment[i][1];
  }
  return [sum_x / s_len , sum_y / s_len ];
}

const bg_color = [255,255,0];
//facecolor
const facecolor1 = "#C49987";
const facecolor2 = "#84685B";
const facecolor3 = "#634E44";
const facecolor4 = "#4A3B33";
const facecolor5 = "#382C26";

function Face() {
  this.eyeballs = 3;
  this.face_colour = 1;// color 1~5
    this.right_eye_Size = 0;
this.gender = 1; //1=female 2=male
  this.draw = function(positions) {
        rectMode(CENTER);
//<<positions>>
//face
let face1 = positions.left_eyebrow[0];
let face2 = positions.left_eyebrow[2];
let face3 = positions.left_eyebrow[4];
let face4 = positions.right_eyebrow[0];
let face5 = positions.right_eyebrow[2];
let face6 = positions.right_eyebrow[4];
let face7 = positions.chin[16];
let face8 = positions.chin[14];
let face9 = positions.chin[12];
let face10 = positions.chin[10];
let face11 = positions.chin[8];
let face12 = positions.chin[6];
let face13 = positions.chin[4];
let face14 = positions.chin[2];
let face15 = positions.chin[0];
let face16 = positions.chin[9];
let face17 = positions.chin[7];
let face18 = positions.nose_bridge[0];
//glasses
let glasses1 = positions.left_eye[0];
let glasses2 = positions.left_eye[1];
let glasses3 = positions.left_eye[2];
let glasses4 = positions.left_eye[3];
let glasses5 = positions.left_eye[4];
let glasses6 = positions.left_eye[5];
let glasses7 = positions.right_eye[0];
let glasses8 = positions.right_eye[1];
let glasses9 = positions.right_eye[2];
let glasses10 = positions.right_eye[3];
let glasses11 = positions.right_eye[4];
let glasses12 = positions.right_eye[5];
//mouth
let mouth1= positions.top_lip[0];
let mouth2= positions.top_lip[1];
let mouth3= positions.top_lip[2];
let mouth4= positions.top_lip[3];
let mouth5= positions.top_lip[4];
let mouth6= positions.top_lip[5];
let mouth7= positions.top_lip[6];
let mouth8= positions.top_lip[7];
let mouth9= positions.top_lip[8];
let mouth10= positions.top_lip[9];
let mouth11= positions.top_lip[10];
let mouth12= positions.top_lip[11];

let mouth13= positions.bottom_lip[0];
let mouth14= positions.bottom_lip[1];
let mouth15= positions.bottom_lip[2];
let mouth16= positions.bottom_lip[3];
let mouth17= positions.bottom_lip[4];
let mouth18= positions.bottom_lip[5];
let mouth19= positions.bottom_lip[6];
let mouth20= positions.bottom_lip[7];
let mouth21= positions.bottom_lip[8];
let mouth22= positions.bottom_lip[9];
let mouth23= positions.bottom_lip[10];
let mouth24= positions.bottom_lip[11];

//nose
let nose1 = positions.nose_bridge[1];
let nose2 = positions.nose_bridge[3];
let nose3 = positions.nose_tip[2];
let nose4 = positions.nose_tip[4];
let nose5 = positions.nose_tip[0];

//eye
let left_eye = segment_average(positions.left_eye);
let right_eye = segment_average(positions.right_eye);
let left_eye_size = map(this.righteye, 0, 10, 0.5, 0.8);
 let right_eye_size = map(this.lefteye, 0, 10, 0.5, 0.8);
 //eyeballs
     let right_eyeball_pos = map(this.eyeballs, 0,10, -0.1, 0.5);
     //eyebrow
     let eyebrow1 = positions.left_eyebrow[0];
     let eyebrow2 = positions.left_eyebrow[1];
     let eyebrow3 = positions.left_eyebrow[2];
     let eyebrow4 = positions.left_eyebrow[3];
     let eyebrow5 = positions.left_eyebrow[4];
     let eyebrow6 = positions.right_eyebrow[0];
     let eyebrow7 = positions.right_eyebrow[1];
     let eyebrow8 = positions.right_eyebrow[2];
     let eyebrow9 = positions.right_eyebrow[3];
     let eyebrow10 = positions.right_eyebrow[4];
//facecolor
    if(this.face_colour == 1){
         faceColour = facecolor1;
       }
       else if(this.face_colour == 2){
         faceColour = facecolor2;
       }
       else if(this.face_colour == 3){
         faceColour = facecolor3;
       }
       else if(this.face_colour == 4){
         faceColour = facecolor4;
       }
       else if(this.face_colour == 5){
         faceColour = facecolor5;
       }


       beginShape();


//head
         fill(faceColour);

         noStroke();

vertex(face15[0],face15[1]-1.5);
vertex(face2[0],face2[1]-1);
vertex(face5[0],face5[1]-1);
vertex(face7[0],face7[1]-1.5);
vertex(face8[0],face8[1]);
vertex(face16[0],face16[1]);
vertex(face17[0],face17[1]);
vertex(face14[0],face14[1]);
vertex(face15[0],face15[1]-1.5);




       endShape();

//middle glasses
stroke(0);

strokeWeight(0.08);
line(glasses4[0]+0.2,glasses4[1],glasses7[0]-0.3,glasses7[1])
//left glasses
fill(0);
noStroke();
beginShape();
vertex(glasses1[0]-0.3,glasses1[1]);

vertex(glasses2[0]-0.2,glasses2[1]+0.5);
vertex(glasses3[0]+0.2,glasses3[1]+0.5);
vertex(glasses4[0]+0.2,glasses4[1]);
vertex(glasses5[0]+0.2,glasses5[1]-0.5);
vertex(glasses6[0]-0.2,glasses6[1]-0.5);
vertex(glasses1[0]-0.3,glasses1[1]);

endShape();
//right glasses
fill(0);
noStroke();
beginShape();
vertex(glasses7[0]-0.3,glasses7[1]);

vertex(glasses8[0]-0.2,glasses8[1]+0.5);
vertex(glasses9[0]+0.2,glasses9[1]+0.5);
vertex(glasses10[0]+0.2,glasses10[1]);
vertex(glasses11[0]+0.2,glasses11[1]-0.5);
vertex(glasses12[0]-0.2,glasses12[1]-0.5);
vertex(glasses7[0]-0.3,glasses7[1]);

endShape();
//mouth
fill(0);
beginShape();
curveVertex(mouth1[0],mouth1[1]);
curveVertex(mouth2[0],mouth2[1]);
curveVertex(mouth3[0],mouth3[1]);
curveVertex(mouth4[0],mouth4[1]);
curveVertex(mouth5[0],mouth5[1]);
curveVertex(mouth6[0],mouth6[1]);
curveVertex(mouth7[0],mouth7[1]);
curveVertex(mouth8[0],mouth8[1]);
curveVertex(mouth9[0],mouth9[1]);
curveVertex(mouth10[0],mouth10[1]);
curveVertex(mouth11[0],mouth11[1]);
curveVertex(mouth12[0],mouth12[1]);
curveVertex(mouth1[0],mouth1[1]);
curveVertex(mouth2[0],mouth2[1]);
endShape();

beginShape();

strokeWeight(2);
curveVertex(mouth2[0],mouth2[1]);
curveVertex(mouth4[0],mouth4[1]);
curveVertex(mouth6[0],mouth6[1]);
curveVertex(mouth22[0]+0.2,mouth22[1]);
curveVertex(mouth22[0],mouth22[1]);
curveVertex(mouth22[0]-0.2,mouth22[1]);

endShape(CLOSE);



//<<gender>>

//female
if(this.gender == 1){

  beginShape();
fill(0);
vertex(face2[0],face2[1]-1);

vertex(face2[0]-0.1,face2[1]-2);
vertex(face5[0],face5[1]-1);


         endShape();
         beginShape();
      fill(0);
vertex(face5[0],face5[1]-1);
vertex(face5[0]+0.1,face5[1]-2);
vertex(face2[0],face2[1]-1);

                endShape();
                beginShape();
             fill(0);
       vertex(face5[0],face5[1]-1);
       vertex(face18[0]+0.1,face18[1]-2.6);
       vertex(face2[0],face2[1]-1);

                       endShape();
}
//male
if(this.gender == 2){

  beginShape();
fill(0);
vertex(face16[0]+0.5,face16[1]);

vertex(face17[0]-0.5,face17[1]+0.6);
vertex(face17[0]-0.5,face17[1]);
vertex(face16[0]+0.5,face16[1]+0.6);



         endShape();
}
noStroke();
   fill(255, 255);
ellipse(left_eye[0],left_eye[1],left_eye_size-0.1,left_eye_size-0.5)
ellipse(right_eye[0],right_eye[1],right_eye_size-0.1,right_eye_size-0.5)

line(left_eye[0],left_eye[1],right_eye[0],right_eye[1])
   fill(0);
   ellipse(left_eye[0]+right_eyeball_pos, left_eye[1], 0.2);
   ellipse(right_eye[0]+right_eyeball_pos, right_eye[1], 0.2);
//nose
   stroke(0);

   strokeWeight(0.1);
line(nose3[0],nose3[1],nose4[0],nose4[1]);
line(nose3[0],nose3[1],nose5[0],nose5[1]);
//eyebrow
stroke(0);

strokeWeight(0.15);
line(eyebrow3[0],eyebrow3[1]-0.2,eyebrow5[0],eyebrow5[1]-0.2);

line(eyebrow8[0],eyebrow8[1]-0.2,eyebrow6[0],eyebrow6[1]-0.2)
}

this.setProperties = function(settings) {
this.righteye = map(settings[0], 0, 100, 0, 10);
this.lefteye = map(settings[1], 0, 100, 0, 10);
this.face_colour = int(map(settings[2], 0, 100, 1, 5));
this.gender = int(map(settings[3], 0, 100, 1, 2));
this.eyeballs = map(settings[4], 0, 100, 0, 5);
  }

this.getProperties = function() {
let settings = new Array(5);
settings[0] = map(this.righteye, 0, 10, 0, 100);
settings[1] = map(this.lefteye, 0, 10, 0, 100);
settings[2] = map(this.face_colour, 1, 5, 0, 100);
settings[3] = map(this.gender, 1, 2, 0, 100);
settings[4] = map(this.eyeballs, 0, 5, 0, 100);
    return settings;
  }
}

index.html

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.3/seedrandom.min.js"></script>
    <script src="https://d3js.org/d3-random.v1.min.js"></script>
    <script src="z_clmtrackr.js"></script>
    <script src="z_model_pca_20_svm.js"></script>
    <script language="javascript" type="text/javascript" src="z_purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src="z_focused_random.js"></script>
    <script language="javascript" type="text/javascript" src="z_face_system.js"></script>
    <script language="javascript" type="text/javascript" src="z_kdTree.js"></script>
    <script language="javascript" type="text/javascript" src="z_face-api.js"></script>
    <script language="javascript" type="text/javascript" src="z_training_images.js"></script>
    <script language="javascript" type="text/javascript" src="z_testing_images.js"></script>
    <script language="javascript" type="text/javascript" src="face.js"></script>
    <script language="javascript" type="text/javascript" src="system_runner.js"></script>

    <style>
        body   { padding: 0; margin: 0; }
        .inner { position: absolute; }
        #controls {
            font: 300 12px "Helvetica Neue";
            padding: 5;
            margin: 5;
            background: #f0f0f0;
            opacity: 0.0;
            -webkit-transition: opacity 0.2s ease;
            -moz-transition: opacity 0.2s ease;
            -o-transition: opacity 0.2s ease;
            -ms-transition: opacity 0.2s ease;
        }
        #controls:hover { opacity: 0.9; }
    </style>

</head>
<body style="background-color:white">
    <div class="outer">
        <div class="inner" id="controls" height="500">
            <table>
                <tr>
                    <td>left_eye</td>
                    <td id="slider1Container"></td>
                </tr>
                <tr>
                    <td>right_eye</td>
                    <td id="slider2Container"></td>
                </tr>
                <tr>
                    <td>face color</td>
                    <td id="slider3Container"></td>
                </tr>
                <tr>
                    <td>gender</td>
                    <td id="slider4Container"></td>
                </tr>
                <tr>
                    <td>eyeballs</td>
                    <td id="slider5Container"></td>
                </tr>
                <tr>
                    <td>setting 6</td>
                    <td id="slider6Container"></td>
                </tr>
                <tr>
                    <td>setting 7</td>
                    <td id="slider7Container"></td>
                </tr>
                <tr>
                    <td>setting 8</td>
                    <td id="slider8Container"></td>
                </tr>
                <!-- YOU CAN ADD MORE SLIDERS HERE, LIKE THIS
                <tr>
                    <td>setting 9</td>
                    <td id="slider9Container"></td>
                </tr>
                <tr>
                    <td>setting 10</td>
                    <td id="slider10Container"></td>
                </tr>
                <tr>
                    <td>setting 11</td>
                    <td id="slider11Container"></td>
                </tr>
                <tr>
                    <td>setting 12</td>
                    <td id="slider12Container"></td>
                </tr>
                ... AND KEEP GOING
                 -->
                <tr>
                </tr>
                <tr>
                    <td>show target</td>
                    <td id="sliderTintContainer"></td>
                </tr>
                <tr>
                    <td>Draw function</td>
                    <td id="selector1Container"></td>
                </tr>
                <tr>
                    <td>Face Draw</td>
                    <td id="checkbox1Container"></td>
                </tr>
                <tr>
                    <td>Face Targets</td>
                    <td id="checkbox2Container"></td>
                </tr>
                <tr>
                    <td>Face Points</td>
                    <td id="checkbox3Container"></td>
                </tr>
                <tr>
                    <td></td>
                    <td id="button1Container"></td>
                </tr>
                <tr>
                    <td></td>
                    <td id="button2Container"></td>
                </tr>
                <tr>
                    <td></td>
                    <td id="button3Container"></td>
                </tr>
                <tr>
                    <td></td>
                    <td id="button4Container"></td>
                </tr>
            </table>
        </div>
        <div>
            <div id="canvasContainer"></div>
<a href="face.js">face code</a><br>
<a href="sketch.html">sketches</a>
        </div>
    </div>
    <pre>
        <p id="output">
        </p>
    </pre>
</body>

oscar_selfie.jpg

p1.jpg

p2.jpg

p3.jpg

preview.jpg

purview.json

{
  "commits": [
    {
      "sha": "ba90ca9bb90536e4b88e4236fe73252163123b3e",
      "name": "final version"
    },
    {
      "sha": "32afecac7e2e456f3e83e2184c6527a0b77ae6ff",
      "name": "version_2"
    },
    {
      "sha": "60e061447df97628d84b01251bc3f671ecd5510c",
      "name": "version_1"
    }
  ]
}

same_pose.jpg

same_subject.jpg

sample_images.json

sketch.html

system_runner.js

thumbnail.png

training_values.json

williams.jpg

z_clmtrackr.js

z_face-api.js

z_face-api.js.map

z_face_landmark_68_model-shard1

z_face_landmark_68_model-weights_manifest.json

z_face_recognition_model-shard1

z_face_recognition_model-shard2

z_face_recognition_model-weights_manifest.json

z_face_system.js

z_focused_random.js

z_kdTree.js

z_model_pca_20_svm.js

z_purview_helper.js

z_ssd_mobilenetv1_model-shard1

z_ssd_mobilenetv1_model-shard2

z_ssd_mobilenetv1_model-weights_manifest.json

z_testing_images.js

z_training_images.js