block by dribnet c33d5d9b552222b9adf87327975ddb07

2021 MDDN 342 Runner

Full Screen

2021 MDDN342 Runner

index.html

<head>
    <script language="javascript" type="text/javascript" src="p5.js"></script>
    <script language="javascript" type="text/javascript" src="seedrandom.min.js"></script>
    <script language="javascript" type="text/javascript" src="d3-random.v1.min.js"></script>
    <script language="javascript" type="text/javascript" src="z_clmtrackr.js"></script>
    <script language="javascript" type="text/javascript" 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="p5.func.js"></script>
    <script language="javascript" type="text/javascript" src="simplex-noise.js"></script>
    <script language="javascript" type="text/javascript" src="z_focused_random.js"></script>
<!-- 2021 -->
    <script language="javascript" type="text/javascript" src="boylesz_face.js"></script>
    <script language="javascript" type="text/javascript" src="boylesz_anim.js"></script>
    <script language="javascript" type="text/javascript" src="bruwer_face.js"></script>
    <script language="javascript" type="text/javascript" src="bruwer_anim.js"></script>
    <script language="javascript" type="text/javascript" src="gambles_face.js"></script>
    <script language="javascript" type="text/javascript" src="gambles_anim.js"></script>
    <script language="javascript" type="text/javascript" src="garcia_face.js"></script>
    <script language="javascript" type="text/javascript" src="garcia_anim.js"></script>
    <script language="javascript" type="text/javascript" src="ge_face.js"></script>
    <script language="javascript" type="text/javascript" src="ge_anim.js"></script>
    <script language="javascript" type="text/javascript" src="huang_face.js"></script>
    <script language="javascript" type="text/javascript" src="huang_anim.js"></script>
    <script language="javascript" type="text/javascript" src="obrien_face.js"></script>
    <script language="javascript" type="text/javascript" src="obrien_anim.js"></script>
    <script language="javascript" type="text/javascript" src="palmer_face.js"></script>
    <script language="javascript" type="text/javascript" src="palmer_anim.js"></script>
    <script language="javascript" type="text/javascript" src="sapsford_face.js"></script>
    <script language="javascript" type="text/javascript" src="sapsford_anim.js"></script>
    <script language="javascript" type="text/javascript" src="wei_face.js"></script>
    <script language="javascript" type="text/javascript" src="wei_anim.js"></script>
<!-- 2020 -->
    <script language="javascript" type="text/javascript" src="chen_face.js"></script>
    <script language="javascript" type="text/javascript" src="cooper_face.js"></script>
    <script language="javascript" type="text/javascript" src="hill_face.js"></script>
    <script language="javascript" type="text/javascript" src="ho_face.js"></script>
    <script language="javascript" type="text/javascript" src="howard_face.js"></script>
    <script language="javascript" type="text/javascript" src="hu_face.js"></script>
    <script language="javascript" type="text/javascript" src="idris_face.js"></script>
    <script language="javascript" type="text/javascript" src="lee_face.js"></script>
    <script language="javascript" type="text/javascript" src="luo_face.js"></script>
    <script language="javascript" type="text/javascript" src="mckendry_face.js"></script>
    <script language="javascript" type="text/javascript" src="mcsweeney_face.js"></script>
    <script language="javascript" type="text/javascript" src="ng_face.js"></script>
    <script language="javascript" type="text/javascript" src="nuesca_face.js"></script>
    <script language="javascript" type="text/javascript" src="park_face.js"></script>
    <script language="javascript" type="text/javascript" src="ruan_face.js"></script>
    <script language="javascript" type="text/javascript" src="to_face.js"></script>
    <script language="javascript" type="text/javascript" src="truong_face.js"></script>
    <script language="javascript" type="text/javascript" src="tuala_face.js"></script>
    <script language="javascript" type="text/javascript" src="wang_face.js"></script>
    <script language="javascript" type="text/javascript" src="yee_face.js"></script>
    <script language="javascript" type="text/javascript" src="zhang_face.js"></script>
    <script language="javascript" type="text/javascript" src="zhao_face.js"></script>
<!-- 2019 -->
    <script language="javascript" type="text/javascript" src="jaegers_face.js"></script>
    <script language="javascript" type="text/javascript" src="kelly19_face.js"></script>
    <script language="javascript" type="text/javascript" src="trewavas_face.js"></script>
<!-- 2018 -->
    <script language="javascript" type="text/javascript" src="felizardo_face.js"></script>
    <script language="javascript" type="text/javascript" src="jordan_face.js"></script>
    <script language="javascript" type="text/javascript" src="joy_face.js"></script>
    <script language="javascript" type="text/javascript" src="salazar_face.js"></script>
<!-- 2017 -->
    <script language="javascript" type="text/javascript" src="campbell_face.js"></script>
    <script language="javascript" type="text/javascript" src="dockerty_face.js"></script>
    <script language="javascript" type="text/javascript" src="kelly_face.js"></script>
    <script language="javascript" type="text/javascript" src="petris_face.js"></script>

    <script language="javascript" type="text/javascript" src="prezo_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>Lash Thickness</td>
                    <td id="slider1Container"></td>
                </tr>
                <tr>
                    <td>Eye Shade</td>
                    <td id="slider2Container"></td>
                </tr>
                <tr>
                    <td>Lip Style</td>
                    <td id="slider3Container"></td>
                </tr>
                <tr>
                    <td>Face Shade</td>
                    <td id="slider4Container"></td>
                </tr>
                <tr>
                    <td>Face Hue</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>
                <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>
                <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>

boylesz_anim.js

function Boyles_draw_one_frame(cur_frac) {
  angleMode(DEGREES);

  // Background
  noStroke();
  fill(45, 93, 94);
  rect(0, 0, width, height);

  // Moon
  fill(226, 252, 249);
  noStroke();
  ellipse(760, 100, 170);

  // Bottom wave
  fill(25, 67, 55);
  stroke(16, 43, 36);
  strokeWeight(3)
  beginShape();
  vertex(width + 10, height - height / 5);
  vertex(width + 10, height + 10);
  vertex(-10, height + 10);
  vertex(-10, height - height / 5);
  for (let i = 0; i < width; i++) {
    let phase = cur_frac * 360 + 100;
    let y = 5 * sin(i + phase) + 4 * sin(i);
    vertex(i, height - height / 5 + y);
  }
  endShape(CLOSE);

  // Trees
  let treeKeyFrames = [
    -0.45 * width,
    0.0 * width,
    0.45 * width,
    0.9 * width,
    1.35 * width
  ];
  for (let i = 0; i < treeKeyFrames.length - 1; i++) {
    let curTreeX = map(cur_frac, 0, 1, treeKeyFrames[i + 1], treeKeyFrames[i]);
    tree(curTreeX, height - height / 8, height);
  }

  fill(25, 67, 55);
  noStroke();
  beginShape();
  vertex(width + 10, height - height / 5);
  vertex(width + 10, height + 10);
  vertex(-10, height + 10);
  vertex(-10, height - height / 5);
  for (let i = 0; i < width; i++) {
    let phase = cur_frac * 360 + 100;
    let y = 5 * sin(i + phase) + 4 * sin(i * 1.5);
    vertex(i, height - height / 7 + y);
  }
  endShape(CLOSE);

  // Top wave
  fill(47, 84, 97, 150);
  noStroke();
  beginShape();
  vertex(width + 10, height / 15);
  vertex(width + 10, -10);
  vertex(-10, -10);
  vertex(-10, height / 15);
  for (let i = 0; i < width; i++) {
    let phase = cur_frac * 360;
    let y = 10 * sin(i + phase) + 4 * sin(i * 2.5 + 70);
    vertex(i, height / 2 + y);
  }
  endShape(CLOSE);
  beginShape();
  vertex(width + 10, height / 15);
  vertex(width + 10, -10);
  vertex(-10, -10);
  vertex(-10, height / 15);
  for (let i = 0; i < width; i++) {
    let phase = cur_frac * 360;
    let y = 10 * sin(i + phase + 140) + 4 * sin(i * 3.5 + 70);
    vertex(i, height / 5 + y);
  }
  endShape(CLOSE);

  // Mist
  fill(210, 10);
  noStroke();
  for (let i = 0; i < 20; i++) {
    rect(0, height - 110 - 5 * i, width, 100);
  }
}

function tree(x, y, ch) {
  let th = ch / 1.3;
  push();
  translate(x, y);
  // Trunk
  stroke(12, 30, 40);
  strokeWeight(th / 15);
  line(0, 0, -th / 7, -th / 4);
  strokeWeight(th / 17);
  line(-th / 7, -th / 4, -th / 10, -3 * th / 5);
  strokeWeight(th / 19);
  line(-th / 10, -3 * th / 5, th / 6, -7 * th / 9);
  branch(th / 6, -7 * th / 9, 3 * th / 10, -th, th, 21);
  // Left branch
  strokeWeight(th / 23);
  line(-th / 10, -3 * th / 5, -th / 4, -5 * th / 7);
  branch(-th / 4, -5 * th / 7, -3 * th / 8, -4.5 * th / 8, th, 25);
  strokeWeight(th / 25);
  line(-th / 4, -5 * th / 7, -3 * th / 10, -7 * th / 8);
  strokeWeight(th / 27);
  line(-3 * th / 10, -7 * th / 8, -th / 6, -th);
  branch(-3 * th / 10, -7 * th / 8, -4.7 * th / 10, -7.4 * th / 8, th, 27);
  branch(-th / 6, -th, -th / 30, -19 * th / 20, th, 29);
  strokeWeight(th / 25);
  line(th / 6, -7 * th / 9, 3.5 * th / 10, -5.5 * th / 8);
  strokeWeight(th / 27);
  branch(3.5 * th / 10, -5.5 * th / 8, 4 * th / 10, -th / 2, th, 27);
  pop();
}

function branch(x1, y1, x2, y2, th, startW) {
  let start = createVector(x1, y1);
  let end = createVector(x2, y2);
  let p1, p2;
  for (let i = 0; i < 10; i++) {
      p1 = p5.Vector.lerp(start, end, i * 0.1);
      p2 = p5.Vector.lerp(start, end, (i + 1) * 0.1);
      strokeWeight(th / (startW + i * 3));
      line(p1.x, p1.y, p2.x, p2.y);
  }
}

boylesz_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */

// remove this or set to false to enable full program (load will be slower)
// var DEBUG_MODE = false;

// this can be used to set the number of sliders to show
var NUM_SLIDERS = 3;

// other variables can be in here too
// here's some examples for colors used
// const bg_color_boy = [225, 206, 187];
// const fg_color = [151, 102, 52];
// const stroke_color = [95, 52, 8];

// example of a global function
// given a segment, this returns the average point [x, y]
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];
}

function BoylesFace() {

  this.line_color = 0; // can be either 0 (purple = masculine) or 1 (blue = feminine)
  this.line_colors_arr = [[146, 9, 173], [64, 245, 233]];
  this.face_color = 100; // range is 80 to 230
  this.eye_color = 0; // range is 0 to 1 (darkness of hair)

  /*
   * Draw the face with position lists that include:
   *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
   *    bottom_lip, top_lip, nose_tip, nose_bridge,
   */
  this.draw = function(positions) {
    // Draw mask backing
    fill(this.face_color);
    noStroke();
    beginShape();
    vertex(-2, -1);
    bezierVertex(
      -2, 1,
      -1, 2,
      0, 2
    );
    bezierVertex(
      1, 2,
      2, 1,
      2, -1
    );
    bezierVertex(
      2, -2,
      1.7, -3,
      0, -3
    );
    bezierVertex(
      -1.7, -3,
      -2, -2,
      -2, -1
    );
    endShape(CLOSE);

    // Draw eyes
    fill(20);
    noStroke();
    for (let i = -1; i <= 1; i += 2) {
      push();
      scale(1.15);
      beginShape();
      vertex(i * 0.35, -0.8);
      bezierVertex(
        i * 0.32, -0.8,
        i * 0.48, -1.08,
        i * 0.69, -1.17
      );
      bezierVertex(
        i * 0.9, -1.25,
        i * 1.2, -1.19,
        i * 1.25, -1.1
      );
      bezierVertex(
        i * 1.27, -1.04,
        i * 1.16, -0.92,
        i * 1.13, -0.89
      );
      bezierVertex(
        i * 0.86, -0.65,
        i * 0.36, -0.78,
        i * 0.35, -0.8
      );
      endShape();
      pop();
    }
    // Pupils
    let pupilColor = lerpColor(color(255), color(148, 15, 6), this.eye_color);
    fill(pupilColor);
    noStroke();
    ellipse(0.9, -1.1, 0.3);
    ellipse(-0.9, -1.1, 0.3);
    // Irises
    fill(0);
    ellipse(0.9, -1.1, 0.15);
    ellipse(-0.9, -1.1, 0.15);

    // Draw lines
    noFill()
    let centre = this.calcBezierPoint([2, -1], [2, 1], [1, 2], [0, 2], 0.9);
    let topSide = this.calcBezierPoint([0, -3], [-1.7, -3], [-2, -2], [-2, -1], 0.27);
    let bottomSide = this.calcBezierPoint([-2, -1], [-2, 1], [-1, 2], [0, 2], 0.47);

    let mouthOpeness = positions.bottom_lip[3][1] - positions.top_lip[3][1];
    let lineBrightness = int(map(mouthOpeness, 0.3, 0.7, 2, 5));
    let c = this.line_colors_arr[this.line_color];

    for (let j = lineBrightness + 1; j > -1; j--) {
      if (j == 0) {
        stroke(c[0], c[1], c[2]);
        strokeWeight(0.03);
      } else if (j > lineBrightness) {
        stroke(20);
        strokeWeight(0.05);
      } else {
        stroke(c[0], c[1], c[2], 100 - 15 * j);
        strokeWeight(0.05 + j * 0.03);
      }
      line(0, -3, 0, -2.25);
      for (let i = -1; i <= 1; i += 2) {
        // Centre lines
        beginShape();
        vertex(0, -2.25);
        vertex(i * 0.17, -2);
        vertex(i * 0.17, -0.3);
        vertex(i * 0.5, -0.4);
        vertex(i * 0.5, 0);
        vertex(i * 0.17, 0.1);
        vertex(i * centre.x, 0.4);
        vertex(i * centre.x, centre.y);
        endShape();

        // Top side lines
        beginShape();
        vertex(i * topSide.x, topSide.y);
        vertex(i * topSide.x, -1.85);
        vertex(i * -1.65, -1.55);
        vertex(i * -1.65, -1);
        endShape();
        let p = p5.Vector.lerp(createVector(i * topSide.x, -1.85), createVector(i * -1.65, -1.55), 0.6);
        line(p.x, p.y, p.x, -2.2);

        // Bottom side lines
        beginShape();
        vertex(i * bottomSide.x, bottomSide.y);
        vertex(i * topSide.x, 1);
        vertex(i * topSide.x, 0.3);
        vertex(i * -1.65, 0);
        endShape();
      }
    }
  }

  // This function returns a point along a cubic bezier curve
  this.calcBezierPoint = function(p0, p1, p2, p3, t) {
    p0 = createVector(p0[0], p0[1]);
    p1 = createVector(p1[0], p1[1]);
    p2 = createVector(p2[0], p2[1]);
    p3 = createVector(p3[0], p3[1]);

    p0.mult(-1 * pow(t, 3) + 3 * pow(t, 2) - 3 * t + 1);
    p1.mult(3 * pow(t, 3) - 6 * pow(t, 2) + 3 * t);
    p2.mult(-3 * pow(t, 3) + 3 * pow(t, 2));
    p3.mult(pow(t, 3));
    return p0.add(p1.add(p2.add(p3)));
  }

  /* set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
    this.line_color = int(map(settings[0], 0, 100, 0, 1));
    this.face_color = map(settings[1], 0, 100, 80, 230);
    this.eye_color = map(settings[2], 0, 100, 0, 1);
  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    let settings = new Array(3);
    settings[0] = map(this.line_color, 0, 1, 0, 100);
    settings[1] = map(this.face_color, 80, 230, 0, 100);
    settings[2] = map(this.eye_color, 0, 1, 0, 100);
    return settings;
  }
}

boylesz_training_values.json

{
  "000001": [
    100,
    83,
    68
  ],
  "000002": [
    100,
    95,
    54
  ],
  "000005": [
    100,
    98,
    81
  ],
  "000006": [
    100,
    76,
    36
  ],
  "000007": [
    0,
    95,
    0
  ],
  "000009": [
    100,
    94,
    30
  ],
  "000010": [
    100,
    94,
    73
  ],
  "000013": [
    0,
    100,
    100
  ],
  "000014": [
    100,
    33,
    0
  ],
  "000015": [
    0,
    97,
    48
  ],
  "000016": [
    0,
    95,
    21
  ],
  "000018": [
    100,
    100,
    89
  ],
  "000020": [
    0,
    97,
    32
  ],
  "000023": [
    0,
    94,
    30
  ],
  "000025": [
    0,
    92,
    39
  ],
  "000028": [
    100,
    93,
    61
  ],
  "000029": [
    100,
    99,
    100
  ],
  "000030": [
    0,
    96,
    68
  ],
  "000031": [
    100,
    89,
    59
  ],
  "000032": [
    0,
    96,
    46
  ],
  "000035": [
    100,
    98,
    0
  ],
  "000037": [
    0,
    43,
    0
  ],
  "000038": [
    0,
    91,
    23
  ],
  "000040": [
    100,
    94,
    10
  ],
  "000041": [
    0,
    96,
    5
  ],
  "000042": [
    100,
    90,
    25
  ],
  "000043": [
    100,
    91,
    20
  ],
  "000044": [
    100,
    23,
    0
  ],
  "000045": [
    100,
    91,
    26
  ],
  "000047": [
    100,
    91,
    10
  ],
  "000048": [
    0,
    98,
    24
  ],
  "000050": [
    0,
    95,
    7.000000000000001
  ],
  "000051": [
    0,
    88,
    100
  ],
  "000052": [
    0,
    96,
    28.000000000000004
  ],
  "000054": [
    100,
    93,
    100
  ],
  "000055": [
    0,
    94,
    4
  ],
  "000056": [
    100,
    90,
    3
  ],
  "000058": [
    100,
    96,
    0
  ],
  "000060": [
    0,
    32,
    25
  ],
  "000064": [
    0,
    98,
    24
  ],
  "000065": [
    0,
    69,
    0
  ],
  "000068": [
    0,
    95,
    50
  ],
  "000069": [
    0,
    95,
    8
  ],
  "000071": [
    100,
    92,
    87
  ],
  "000073": [
    100,
    96,
    21
  ],
  "000076": [
    0,
    92,
    8
  ],
  "000077": [
    100,
    91,
    0
  ],
  "000078": [
    100,
    82,
    0
  ],
  "000079": [
    0,
    90,
    73
  ],
  "000080": [
    0,
    94,
    0
  ],
  "000081": [
    0,
    82,
    2
  ],
  "000083": [
    100,
    88,
    43
  ],
  "000085": [
    100,
    82,
    32
  ],
  "000086": [
    100,
    87,
    25
  ],
  "000088": [
    100,
    91,
    49
  ],
  "000091": [
    0,
    94,
    8
  ],
  "000092": [
    100,
    95,
    68
  ],
  "000096": [
    100,
    92,
    10
  ],
  "000097": [
    100,
    90,
    32
  ],
  "000099": [
    100,
    87,
    43
  ],
  "000100": [
    100,
    85,
    67
  ],
  "000103": [
    100,
    93,
    18
  ],
  "000104": [
    0,
    96,
    70
  ],
  "000106": [
    100,
    87,
    31
  ],
  "000108": [
    100,
    94,
    78
  ],
  "000109": [
    0,
    93,
    45
  ],
  "000110": [
    100,
    91,
    26
  ],
  "000111": [
    100,
    77,
    79
  ],
  "000114": [
    0,
    95,
    6
  ],
  "000115": [
    0,
    90,
    100
  ],
  "000116": [
    0,
    96,
    21
  ],
  "000117": [
    100,
    47,
    0
  ],
  "000118": [
    100,
    79,
    10
  ],
  "000121": [
    100,
    80,
    6
  ],
  "000122": [
    100,
    100,
    100
  ],
  "000125": [
    0,
    90,
    28.000000000000004
  ],
  "000126": [
    100,
    81,
    100
  ],
  "000129": [
    0,
    94,
    12
  ],
  "000131": [
    100,
    56.00000000000001,
    6
  ],
  "000132": [
    100,
    71,
    13
  ],
  "000133": [
    100,
    86,
    59
  ],
  "000134": [
    0,
    23,
    6
  ],
  "000135": [
    0,
    68,
    11
  ],
  "000137": [
    0,
    96,
    21
  ],
  "000140": [
    100,
    90,
    100
  ],
  "000142": [
    100,
    93,
    25
  ],
  "000143": [
    0,
    95,
    25
  ],
  "000145": [
    100,
    88,
    15
  ],
  "000146": [
    100,
    88,
    31
  ],
  "000147": [
    100,
    92,
    67
  ],
  "000148": [
    100,
    90,
    26
  ],
  "000150": [
    0,
    94,
    63
  ],
  "000151": [
    100,
    62,
    14.000000000000002
  ],
  "000152": [
    0,
    94,
    41
  ],
  "000153": [
    0,
    95,
    24
  ],
  "000155": [
    100,
    81,
    15
  ],
  "000156": [
    100,
    91,
    87
  ],
  "000157": [
    100,
    92,
    85
  ],
  "000160": [
    0,
    94,
    12
  ],
  "000161": [
    100,
    93,
    18
  ]
}

bruwer_anim.json

bruwer_training_values.json

{
  "000001": [
    7.000000000000028,
    74.00000000000003,
    0,
    100,
    0,
    60,
    100
  ],
  "000002": [
    0,
    71,
    0,
    80.00000000000001,
    0,
    40,
    40
  ],
  "000005": [
    0,
    0,
    0,
    100,
    0,
    0,
    23
  ],
  "000006": [
    0,
    47.000000000000064,
    20,
    100,
    100,
    60,
    100
  ],
  "000007": [
    0,
    100,
    0,
    100,
    0,
    80,
    0
  ],
  "000009": [
    46,
    71,
    0,
    88.00000000000003,
    0,
    60,
    100
  ],
  "000010": [
    0,
    0,
    0,
    100,
    0,
    0,
    100
  ],
  "000013": [
    11.000000000000032,
    79,
    0,
    100,
    0,
    0,
    0
  ],
  "000014": [
    0,
    98.00000000000004,
    0,
    100,
    75,
    80,
    46
  ],
  "000015": [
    16.999999999999993,
    79.99999999999999,
    0,
    100,
    0,
    60,
    0
  ],
  "000016": [
    11.000000000000032,
    30.99999999999996,
    0,
    76.00000000000001,
    0,
    60,
    0
  ],
  "000018": [
    0,
    24.00000000000002,
    11.999999999999995,
    100,
    0,
    0,
    100
  ],
  "000020": [
    40.000000000000036,
    0,
    0,
    100,
    0,
    60,
    12
  ],
  "000023": [
    0,
    24.00000000000002,
    0,
    100,
    0,
    60,
    19
  ],
  "000025": [
    58.00000000000001,
    79.99999999999999,
    0,
    100,
    0,
    60,
    0
  ],
  "000028": [
    8.999999999999986,
    100,
    0,
    100,
    100,
    60,
    100
  ],
  "000029": [
    0,
    0,
    0,
    100,
    0,
    0,
    100
  ],
  "000030": [
    20.999999999999996,
    41.99999999999999,
    0,
    100,
    0,
    0,
    0
  ],
  "000031": [
    23.000000000000043,
    79,
    0,
    71,
    0,
    0,
    18
  ],
  "000032": [
    40.000000000000036,
    33.00000000000001,
    18.000000000000004,
    63.00000000000002,
    0,
    60,
    12
  ],
  "000035": [
    0,
    67,
    0,
    100,
    0,
    80,
    38
  ],
  "000037": [
    29.000000000000004,
    67,
    0,
    100,
    100,
    80,
    0
  ],
  "000038": [
    8.999999999999986,
    40.000000000000036,
    9.000000000000004,
    100,
    0,
    60,
    0
  ],
  "000040": [
    0,
    25,
    0,
    100,
    66.66666666666666,
    80,
    21.999999999999996
  ],
  "000041": [
    0,
    100,
    0,
    100,
    33.33333333333333,
    80,
    18
  ],
  "000042": [
    0,
    68.99999999999994,
    0,
    88.00000000000003,
    0,
    80,
    89.00000000000001
  ],
  "000043": [
    0,
    32.00000000000003,
    13.000000000000004,
    69,
    0,
    60,
    100
  ],
  "000044": [
    0,
    100,
    0,
    100,
    100,
    80,
    72
  ],
  "000045": [
    0,
    79.99999999999999,
    15,
    86,
    0,
    60,
    100
  ],
  "000047": [
    50,
    29.000000000000004,
    15,
    25,
    66.66666666666666,
    80,
    48
  ],
  "000048": [
    0,
    0,
    41.99999999999999,
    100,
    0,
    80,
    14.000000000000002
  ],
  "000050": [
    11.000000000000032,
    82.00000000000003,
    4.0000000000000036,
    83.99999999999999,
    0,
    80,
    0
  ],
  "000051": [
    59.999999999999964,
    36.00000000000003,
    20.000000000000004,
    100,
    66.66666666666666,
    100,
    14.000000000000002
  ],
  "000052": [
    0,
    100,
    0,
    83,
    0,
    60,
    0
  ],
  "000054": [
    0,
    0,
    0,
    64,
    0,
    0,
    100
  ],
  "000055": [
    0,
    62.000000000000014,
    10.000000000000002,
    86,
    0,
    80,
    0
  ],
  "000056": [
    0,
    0,
    5,
    100,
    0,
    80,
    17.000000000000004
  ],
  "000058": [
    12.00000000000001,
    0,
    0,
    100,
    0,
    80,
    100
  ],
  "000060": [
    71.99999999999997,
    0,
    0,
    100,
    100,
    80,
    9.999999999999998
  ],
  "000064": [
    9.999999999999964,
    8.000000000000007,
    0,
    72.00000000000001,
    0,
    60,
    0
  ],
  "000065": [
    37.999999999999986,
    71.99999999999997,
    0,
    86,
    0,
    60,
    0
  ],
  "000068": [
    0,
    58.999999999999986,
    5.999999999999997,
    61,
    0,
    100,
    15.000000000000002
  ],
  "000069": [
    8.999999999999986,
    0,
    0,
    67,
    0,
    80,
    0
  ],
  "000071": [
    0,
    50.99999999999998,
    8,
    72.00000000000001,
    0,
    0,
    68
  ],
  "000073": [
    0,
    44.00000000000004,
    0,
    100,
    0,
    60,
    100
  ],
  "000076": [
    0,
    0,
    0,
    61.99999999999998,
    0,
    80,
    13
  ],
  "000077": [
    0,
    0,
    0,
    58.00000000000001,
    0,
    80,
    100
  ],
  "000078": [
    8.999999999999986,
    25,
    0,
    94,
    0,
    80,
    61
  ],
  "000079": [
    0,
    82.00000000000003,
    0,
    61.99999999999998,
    0,
    80,
    10.999999999999998
  ],
  "000080": [
    0,
    100,
    0,
    100,
    0,
    80,
    0
  ],
  "000081": [
    0,
    82.00000000000003,
    6.999999999999999,
    76.00000000000001,
    0,
    80,
    0
  ],
  "000083": [
    0,
    65.00000000000003,
    0,
    80.00000000000001,
    0,
    20,
    100
  ],
  "000085": [
    45.000000000000014,
    0,
    0,
    81,
    0,
    60,
    100
  ],
  "000086": [
    0,
    0,
    0,
    100,
    0,
    60,
    15.000000000000002
  ],
  "000088": [
    0,
    15.000000000000036,
    0,
    89,
    0,
    20,
    64
  ],
  "000091": [
    0,
    0,
    0,
    77.99999999999999,
    0,
    80,
    0
  ],
  "000092": [
    0,
    0,
    0,
    85,
    0,
    0,
    67
  ],
  "000096": [
    0,
    0,
    0,
    89,
    0,
    60,
    67
  ],
  "000097": [
    0,
    20.999999999999996,
    0,
    52.99999999999999,
    0,
    60,
    47
  ],
  "000099": [
    0,
    84.99999999999997,
    5.999999999999997,
    83,
    0,
    60,
    95
  ],
  "000100": [
    0,
    50,
    0,
    79,
    0,
    0,
    24
  ],
  "000103": [
    0,
    16.999999999999993,
    0,
    82,
    0,
    80,
    80
  ],
  "000104": [
    0,
    65.00000000000003,
    0,
    100,
    0,
    0,
    0
  ],
  "000106": [
    0,
    87.00000000000001,
    0,
    77.00000000000001,
    0,
    60,
    95
  ],
  "000108": [
    11.000000000000032,
    28.999999999999915,
    0,
    100,
    0,
    0,
    95
  ],
  "000109": [
    0,
    100,
    0,
    81,
    0,
    60,
    0
  ],
  "000110": [
    12.99999999999999,
    0,
    0,
    100,
    0,
    60,
    20.999999999999996
  ],
  "000111": [
    12.99999999999999,
    33.999999999999986,
    0,
    100,
    100,
    60,
    12
  ],
  "000114": [
    0,
    47.000000000000064,
    0,
    100,
    33.33333333333333,
    80,
    0
  ],
  "000115": [
    0,
    100,
    0,
    69,
    0,
    80,
    17.000000000000004
  ],
  "000116": [
    12.00000000000001,
    67,
    0,
    77.00000000000001,
    0,
    60,
    0
  ],
  "000117": [
    0,
    67,
    5.999999999999997,
    77.00000000000001,
    100,
    80,
    100
  ],
  "000118": [
    0,
    45.000000000000014,
    0,
    86.99999999999997,
    66.66666666666666,
    80,
    100
  ],
  "000121": [
    0,
    0,
    0,
    79,
    66.66666666666666,
    80,
    72
  ],
  "000122": [
    0,
    51.99999999999996,
    0,
    80.00000000000001,
    0,
    100,
    7.000000000000001
  ],
  "000125": [
    16.999999999999993,
    0,
    0,
    91.00000000000001,
    0,
    100,
    13
  ],
  "000126": [
    0,
    23.000000000000043,
    0,
    77.00000000000001,
    66.66666666666666,
    0,
    100
  ],
  "000129": [
    0,
    100,
    0,
    77.00000000000001,
    0,
    80,
    0
  ],
  "000131": [
    0,
    0,
    0,
    67,
    66.66666666666666,
    80,
    60
  ],
  "000132": [
    24.00000000000002,
    53.00000000000003,
    0,
    91.00000000000001,
    100,
    80,
    100
  ],
  "000133": [
    0,
    46.99999999999997,
    0,
    73.99999999999999,
    0,
    0,
    21.999999999999996
  ],
  "000134": [
    0,
    70.00000000000001,
    0,
    77.99999999999999,
    100,
    80,
    6
  ],
  "000135": [
    0,
    25.99999999999998,
    1.0000000000000009,
    92,
    100,
    80,
    6
  ],
  "000137": [
    49.00000000000002,
    46.99999999999997,
    10.000000000000002,
    83.99999999999999,
    0,
    60,
    0
  ],
  "000140": [
    0,
    0,
    13.000000000000004,
    75,
    0,
    0,
    85.00000000000001
  ],
  "000142": [
    0,
    42.99999999999997,
    12.999999999999998,
    100,
    0,
    80,
    80
  ],
  "000143": [
    0,
    50,
    0,
    77.00000000000001,
    0,
    0,
    18
  ],
  "000145": [
    0,
    50,
    0,
    82,
    0,
    80,
    96
  ],
  "000146": [
    0,
    50,
    0,
    86,
    66.66666666666666,
    60,
    96
  ],
  "000147": [
    29.000000000000004,
    0,
    0,
    82,
    66.66666666666666,
    0,
    80
  ],
  "000148": [
    0,
    45.000000000000014,
    19.000000000000004,
    77.99999999999999,
    0,
    80,
    23
  ],
  "000150": [
    0,
    29.000000000000004,
    11.999999999999995,
    67,
    0,
    40,
    16.000000000000004
  ],
  "000151": [
    0,
    100,
    16,
    92,
    66.66666666666666,
    80,
    81.99999999999999
  ],
  "000152": [
    45.000000000000014,
    48.00000000000004,
    0,
    67,
    0,
    60,
    15.000000000000002
  ],
  "000153": [
    0,
    50.99999999999998,
    0,
    69.99999999999999,
    0,
    60,
    15.000000000000002
  ],
  "000155": [
    0,
    100,
    0,
    86,
    33.33333333333333,
    40,
    100
  ],
  "000156": [
    0,
    0,
    0,
    79,
    0,
    0,
    20.999999999999996
  ],
  "000157": [
    25,
    7.000000000000028,
    0,
    79,
    0,
    0,
    60
  ],
  "000160": [
    0,
    100,
    0,
    83.99999999999999,
    0,
    80,
    0
  ],
  "000161": [
    0,
    74.00000000000003,
    0,
    72.99999999999999,
    0,
    80,
    42.99999999999999
  ]
}

campbell_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */  

// these control the colors used

  ch3_bodyPrimary = [204, 204, 204];
  ch3_bodySecondary = [128, 128, 128];
  ch3_detailPrimary = [0, 0, 0];
  ch3_detailSecondary = [0, 0, 255];

function CampbellFace() {

  // draw strokes with rounded joints  
  // strokeJoin(ROUND);

  // set colour mode to HSB

  /*
   * Draw a face with position lists that include:
   *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
   *    bottom_lip, top_lip, nose_tip, nose_bridge, 
   */  
  this.draw = function(positions) {
    colorMode(HSB);
    strokeJoin(ROUND);
    // variables of facial structure
    var nose_pos = average_point(positions.nose_bridge);
    var eye1_pos = average_point(positions.left_eye);
    var eye2_pos = average_point(positions.right_eye);
    var upperLip = average_point(positions.top_lip);
    var bottomLip = average_point(positions.bottom_lip);
    var face_pos = average_point(positions.chin);
    var half_height = positions.chin[7][1] - nose_pos[1];
    var face_width = positions.chin[positions.chin.length-1][0] - positions.chin[0][0];

    var x = nose_pos[0];
    var y = nose_pos[1];
    var w = 2 * face_width;
    var h = 2.5 * half_height;

    // bolleans for whether face is looking left or right
    var lookingLeft = false;
    var lookingRight = false;

    // compare nose landmarks to check if looking left or right
    if(Math.abs(positions.nose_bridge[3][0] - positions.nose_bridge[0][0]) > 0.03){
      if(positions.nose_bridge[3][0] < positions.nose_bridge[0][0])
        lookingLeft = true;

      if(positions.nose_bridge[3][0] > positions.nose_bridge[0][0])
        lookingRight = true;
    } 
    else {
        lookingLeft = true;
    }

    // adjustable variables of character identity
    var gender = map(this.genderValue, 0, 100, 0, 1); 
    var hair = map(this.hairValue, 0, 100, 80, 200);
    var curlookDirection = map(this.lookDirection, 0, 100, -15, 15);
    var curEyelidTop_height = map(this.eyelidTop_height, 0, 100, 0, 70);
    var curEyelidBottom_height = map(this.eyelidBottom_height, 0, 100, 0, 70);
    var curHue = map(this.hue, 0, 100, 0, 360);
    var curSaturation = map(this.saturation, 0, 100, 0, 100);
    var curBrightnessPrimary = map(this.brightness, 0, 100, 50, 100);
    var curBrightnessSecondary = map(this.brightness, 0, 100, 20, 70);

    // sets object scale
    var extent = 0;
    if(h < w) {
      extent = h / 2;
    }
    else {
      extent = w / 2;
    }
    var scale = extent / 220.0;

    // draw left ear if male
    // draw rectangle from a centre point
    rectMode(CENTER)

    // if male face and is looking left
    if(gender == 1 & lookingLeft == true) { 
      // draw ear
      stroke(ch3_detailPrimary)
      strokeWeight(10 * scale);
      fill(curHue, curSaturation, curBrightnessPrimary);
      rect(face_pos[0] - (10 * scale), eye2_pos[1] - (100 * scale), 50 * scale, hair * scale, 100 * scale, 100 * scale, 0, 0);
    }

    // if male and is looking right
    if(gender == 1 & lookingRight == true) { 
      // draw ear
      stroke(ch3_detailPrimary)
      strokeWeight(10 * scale);
      fill(curHue, curSaturation, curBrightnessPrimary);
      rect(face_pos[0] + (10 * scale), eye1_pos[1] - (100 * scale), 50 * scale, hair * scale, 100 * scale, 100 * scale, 0, 0);
    }

    // head
    // draw rectangle from a centre point
    rectMode(CENTER);

    // draw face
    stroke(ch3_detailPrimary)
    strokeWeight(10 * scale);
    fill(curHue, curSaturation, curBrightnessPrimary);
    rect(face_pos[0], face_pos[1] - (70 * scale), 300 * scale, 320 * scale, 200 * scale, 200 * scale, 0, 0);
    
    // draw dissection
    fill(curHue, curSaturation, curBrightnessSecondary);
    ellipse(face_pos[0], face_pos[1] + (90 * scale), 300 * scale, 80 * scale);
    // draw bone
    strokeWeight(7 * scale);
    fill(ch3_detailSecondary);
    ellipse(face_pos[0], face_pos[1] + (90 * scale), 150 * scale, 30 * scale);

    // draw right ear if male
    rectMode(CENTER);

    // if male and looking left
    if(gender == 1 & lookingLeft == true) { 
      // draw ear
      stroke(ch3_detailPrimary)
      strokeWeight(10 * scale);
      fill(curHue, curSaturation, curBrightnessPrimary);
      rect(face_pos[0] + (30 * scale), eye2_pos[1] - (100 * scale), 50 * scale, hair * scale, 100 * scale, 100 * scale, 0, 0);

      //cover
      noStroke();
      fill(curHue, curSaturation, curBrightnessPrimary);
      rectMode(CENTER);
      rect(face_pos[0] + (30 * scale), eye2_pos[1] - (5 * scale), 70 * scale, 150 * scale);
      }

    // if male and looking right
    if(gender == 1 & lookingRight == true) { 
      // draw ear
      stroke(ch3_detailPrimary)
      strokeWeight(10 * scale);
      fill(curHue, curSaturation, curBrightnessPrimary);
      rect(face_pos[0] - (30 * scale), eye1_pos[1] - (100 * scale), 50 * scale, hair * scale, 100 * scale, 100 * scale, 0, 0);

      //cover
      noStroke();
      fill(curHue, curSaturation, curBrightnessPrimary);
      rectMode(CENTER);
      rect(face_pos[0] - (30 * scale), eye1_pos[1] - (5 * scale), 70 * scale, 150 * scale);
      }
    
    // features for when looking left
    if(lookingLeft == true) {

      // left eye

      stroke(ch3_detailPrimary);
      strokeWeight(7 * scale);
      fill(ch3_detailSecondary);
      ellipse(eye1_pos[0], eye1_pos[1], 80 * scale, 80 * scale);
      // pupil
      noStroke();
      fill(ch3_detailPrimary);
      arc(eye1_pos[0] + curlookDirection * scale, eye1_pos[1], (30) * scale, (50) * scale, 20, 340, PIE);
      // eyelid
      strokeWeight(7 * scale);
      stroke(ch3_detailPrimary);
      fill(curHue, curSaturation, curBrightnessSecondary);
      // top eyelid
      arc(eye1_pos[0], eye1_pos[1], 80 * scale, 80 * scale, 265 - curEyelidTop_height, 275 + curEyelidTop_height, CHORD);
      // bottom eyelid
      arc(eye1_pos[0], eye1_pos[1], 80 * scale, 80 * scale, 85 - curEyelidBottom_height, 95 + curEyelidBottom_height, CHORD);
      // eyebrow
      stroke(ch3_detailPrimary)
      noFill();
      arc(eye1_pos[0], (eye1_pos[1]), 130 * scale, 110 * scale, 240, 300);

      // nose
      // if female draw bird style
      if(gender < 1) {
        // translate to an offset of the centre of the face
        push();
        translate(face_pos[0] - (100 * scale), face_pos[1] - (70 * scale));

        // draw beak
        stroke(ch3_detailPrimary)
        strokeWeight(7 * scale);
        fill(curHue, curSaturation, curBrightnessSecondary);
        arc(0, 0, 250 * scale, 150 * scale, 335, 385, PIE);

        // draw mouth
        stroke(ch3_detailPrimary);
        strokeWeight(7 * scale);
        line(5 * scale, 0 * scale, 80 * scale, 0 * scale);
        stroke(ch3_detailPrimary)
        strokeWeight(7 * scale);
        noFill();
        arc(110 * scale, 0 * scale, 50 * scale, 50 * scale, 140, 210);

        // teeth
        stroke(ch3_detailPrimary)
        strokeWeight(7 * scale);
        fill(ch3_detailSecondary);
        // check teeth value
        if(Math.abs(upperLip[1] - bottomLip[1]) > 0.28) {
          arc(40 * scale, 0 * scale, 20 * scale, 40 * scale, 0, 180, CHORD);
        } if(Math.abs(upperLip[1] - bottomLip[1]) > 0.2) {
          arc(60 * scale, 0 * scale, 20 * scale, 40 * scale, 0, 180, CHORD);
        } if(Math.abs(upperLip[1] - bottomLip[1]) < 0.2) {
        }

        pop();
      }

      // if male draw dog style
      if(gender == 1) { 
        // translate to an offset of centre of the face

        push();
        translate(face_pos[0] - (130 * scale), face_pos[1] - (100 * scale));

        // draw snout
        stroke(ch3_detailPrimary)
        strokeWeight(10 * scale);
        fill(curHue, curSaturation, curBrightnessPrimary);
        // top snout
        rectMode(CORNER);
        rect(0, 0, 140 * scale, 45 * scale, 18 * scale, 0, 0, 18 * scale);

        stroke(ch3_detailPrimary)
        strokeWeight(10 * scale);
        fill(curHue, curSaturation, curBrightnessPrimary);
        // bottom snout
        rect(30 * scale, 45 * scale, 110 * scale, 35 * scale, 14 * scale, 0, 0, 14 * scale);

        noStroke();
        fill(curHue, curSaturation, curBrightnessPrimary);
        // re-fill / cover
        rect(130 * scale, -7 * scale, 60 * scale, 100 * scale);

        // draw nose
        noStroke();
        fill(ch3_detailPrimary);
        push();
        rotate(10);
        ellipse(0 * scale, 0 * scale, 40 * scale, 28 * scale);
        pop();

        // mouth
        stroke(ch3_detailPrimary)
        strokeWeight(7 * scale);
        noFill();
        arc(155 * scale, 40 * scale, 50 * scale, 50 * scale, 140, 210);

        // teeth
        stroke(ch3_detailPrimary)
        strokeWeight(7 * scale);
        fill(ch3_detailSecondary);
        // check teeth value
        if(Math.abs(upperLip[1] - bottomLip[1]) > 0.28) {
          arc(70 * scale, 45 * scale, 20 * scale, 40 * scale, 0, 180, CHORD);
        } if(Math.abs(upperLip[1] - bottomLip[1]) > 0.2) {
          arc(90 * scale, 45 * scale, 20 * scale, 40 * scale, 0, 180, CHORD);
        } if(Math.abs(upperLip[1] - bottomLip[1]) < 0.2) {
        }

        pop();
      }

      // right eye
      // eye
      stroke(ch3_detailPrimary);
      strokeWeight(7 * scale);
      fill(ch3_detailSecondary);
      ellipse(eye2_pos[0], eye2_pos[1], 80 * scale, 80 * scale);
      // pupil
      noStroke();
      fill(ch3_detailPrimary);
      arc(eye2_pos[0] + curlookDirection * scale, eye2_pos[1], (30) * scale, (50) * scale, 20, 340, PIE);
      // eyelid
      strokeWeight(7 * scale);
      stroke(ch3_detailPrimary);
      fill(curHue, curSaturation, curBrightnessSecondary);
      // top eyelid
      arc(eye2_pos[0], eye2_pos[1], 80 * scale, 80 * scale, 265 - curEyelidTop_height, 275 + curEyelidTop_height, CHORD);
      // bottom eyelid
      arc(eye2_pos[0], eye2_pos[1], 80 * scale, 80 * scale, 85 - curEyelidBottom_height, 95 + curEyelidBottom_height, CHORD);
      // eyebrow
      stroke(ch3_detailPrimary)
      noFill();
      arc(eye2_pos[0], (eye2_pos[1]), 130 * scale, 110 * scale, 240, 300);

    }

  // facial feature if looking right  
  if(lookingRight == true) {

     // right eye

    stroke(ch3_detailPrimary);
    strokeWeight(7 * scale);
    fill(ch3_detailSecondary);
    ellipse(eye2_pos[0], eye2_pos[1], 80 * scale, 80 * scale);
    // pupil
    noStroke();
    fill(ch3_detailPrimary);
    arc(eye2_pos[0] + curlookDirection * scale, eye2_pos[1], (30) * scale, (50) * scale, 20, 340, PIE);
    // eyelid
    strokeWeight(7 * scale);
    stroke(ch3_detailPrimary);
    fill(curHue, curSaturation, curBrightnessSecondary);
    // top eyelid
    arc(eye2_pos[0], eye2_pos[1], 80 * scale, 80 * scale, 265 - curEyelidTop_height, 275 + curEyelidTop_height, CHORD);
    // bottom eyelid
    arc(eye2_pos[0], eye2_pos[1], 80 * scale, 80 * scale, 85 - curEyelidBottom_height, 95 + curEyelidBottom_height, CHORD);
    // eyebrow
    stroke(ch3_detailPrimary)
    noFill();
    arc(eye2_pos[0], (eye2_pos[1]), 130 * scale, 110 * scale, 240, 300);

    
    // nose
    // if female draw bird style
    if(gender < 1) {
      // translate to an offset of the centre of the face
      push();
      translate(face_pos[0] + (120 * scale), face_pos[1] - (70 * scale));

      // draw beak
      stroke(ch3_detailPrimary)
      strokeWeight(7 * scale);
      fill(curHue, curSaturation, curBrightnessSecondary);
      arc(0, 0, 250 * scale, 150 * scale, 155, 205, PIE);

      // draw mouth
      stroke(ch3_detailPrimary);
      strokeWeight(7 * scale);
      line(-5 * scale, 0 * scale, -80 * scale, 0 * scale);
      stroke(ch3_detailPrimary)
      strokeWeight(7 * scale);
      noFill();
      arc(-110 * scale, 0 * scale, 50 * scale, 50 * scale, 320, 390);

      // teeth
      stroke(ch3_detailPrimary)
      strokeWeight(7 * scale);
      fill(ch3_detailSecondary);
      // check teeth value
      if(Math.abs(upperLip[1] - bottomLip[1]) > 0.28) {
        arc(-40 * scale, 0 * scale, 20 * scale, 40 * scale, 0, 180, CHORD);
      } if(Math.abs(upperLip[1] - bottomLip[1]) > 0.2) {
        arc(-60 * scale, 0 * scale, 20 * scale, 40 * scale, 0, 180, CHORD);
      } if(Math.abs(upperLip[1] - bottomLip[1]) < 0.2) {
      }

      pop();
    }

    // if male draw dog style
    if(gender == 1) {
      // translate to an offset of the centre of the face
      push();
      translate(face_pos[0], face_pos[1] - (100 * scale));

      // draw snout
      stroke(ch3_detailPrimary)
      strokeWeight(10 * scale);
      fill(curHue, curSaturation, curBrightnessPrimary);
      // top snout
      rectMode(CORNER);
      rect(0, 0, 140 * scale, 45 * scale, 0, 18 * scale, 18 * scale, 0);

      stroke(ch3_detailPrimary)
      strokeWeight(10 * scale);
      fill(curHue, curSaturation, curBrightnessPrimary);
       // bottom snout
      rect(0 * scale, 45 * scale, 110 * scale, 35 * scale, 0, 14 * scale, 14 * scale, 0);

      noStroke();
      fill(curHue, curSaturation, curBrightnessPrimary);
      // re-fill / cover
      rect(-50 * scale, -7 * scale, 60 * scale, 100 * scale);

      // draw nose
      noStroke();
      fill(ch3_detailPrimary);
      push();
      rotate(-10);
      ellipse(140 * scale, 30 * scale, 40 * scale, 28 * scale);
      pop();

      // mouth
      stroke(ch3_detailPrimary)
      strokeWeight(7 * scale);
      noFill();
      arc(-15 * scale, 50 * scale, 50 * scale, 50 * scale, 320, 390);

      // teeth
      stroke(ch3_detailPrimary)
      strokeWeight(7 * scale);
      fill(ch3_detailSecondary);
      // check teeth value
      if(Math.abs(upperLip[1] - bottomLip[1]) > 0.28) {
        arc(40 * scale, 45 * scale, 20 * scale, 40 * scale, 0, 180, CHORD);
      } if(Math.abs(upperLip[1] - bottomLip[1]) > 0.2) {
          arc(60 * scale, 45 * scale, 20 * scale, 40 * scale, 0, 180, CHORD);
      } if(Math.abs(upperLip[1] - bottomLip[1]) < 0.2) {
      }

      pop();
    }

    // left eye

    stroke(ch3_detailPrimary);
    strokeWeight(7 * scale);
    fill(ch3_detailSecondary);
    ellipse(eye1_pos[0], eye1_pos[1], 80 * scale, 80 * scale);
    // pupil
    noStroke();
    fill(ch3_detailPrimary);
    arc(eye1_pos[0] + curlookDirection * scale, eye1_pos[1], (30) * scale, (50) * scale, 20, 340, PIE);
    // eyelid
    strokeWeight(7 * scale);
    stroke(ch3_detailPrimary);
    fill(curHue, curSaturation, curBrightnessSecondary);
    // top eyelid
    arc(eye1_pos[0], eye1_pos[1], 80 * scale, 80 * scale, 265 - curEyelidTop_height, 275 + curEyelidTop_height, CHORD);
    // bottom eyelid
    arc(eye1_pos[0], eye1_pos[1], 80 * scale, 80 * scale, 85 - curEyelidBottom_height, 95 + curEyelidBottom_height, CHORD);
    // eyebrow
    stroke(ch3_detailPrimary)
    noFill();
    arc(eye1_pos[0], (eye1_pos[1]), 130 * scale, 110 * scale, 240, 300);

  }
      // colorMode(RGB);
  }

  /* set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
    this.genderValue = settings[0];
    this.hairValue = settings[1];
    this.lookDirection = settings[2];
    this.eyelidTop_height = settings[3];
    this.eyelidBottom_height = settings[4];
    this.hue = settings[5];
    this.saturation = settings[6];
    this.brightness = settings[7];
  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    properties = new Array(8);
    properties[0] = this.genderValue;
    properties[1] = this.hairValue;
    properties[2] = this.lookDirection;
    properties[3] = this.eyelidTop_height;
    properties[4] = this.eyelidBottom_height;
    properties[5] = this.hue;
    properties[6] = this.saturation;
    properties[7] = this.brightness;
    return properties;
  }
}

// given a point, return the average
function average_point(list) {
  var sum_x = 0;
  var sum_y = 0;
  var num_points = 0;
  for(var i=0; i<list.length; i++) {
    sum_x += list[i][0];
    sum_y += list[i][1];
    num_points += 1; 
  }
  return [sum_x / num_points, sum_y / num_points];
}

campbell_training_values.json

{
  "000001": [
    65,
    57,
    51,
    68,
    87,
    5,
    29,
    42
  ],
  "000002": [
    50,
    50,
    36,
    50,
    87,
    0,
    50,
    50
  ],
  "000058": [
    50,
    50,
    76,
    71,
    78,
    4,
    0,
    0
  ],
  "000005": [
    50,
    50,
    50,
    85,
    62,
    10,
    45,
    77
  ],
  "000006": [
    50,
    50,
    93,
    59,
    55,
    8,
    41,
    22
  ],
  "000007": [
    100,
    49,
    50,
    71,
    38,
    50,
    0,
    0
  ],
  "000009": [
    50,
    50,
    31,
    50,
    100,
    5,
    41,
    29
  ],
  "000010": [
    50,
    50,
    50,
    87,
    70,
    10,
    31,
    74
  ],
  "000013": [
    100,
    33,
    76,
    47,
    89,
    13,
    33,
    78
  ],
  "000014": [
    50,
    50,
    50,
    73,
    85,
    50,
    0,
    0
  ],
  "000015": [
    100,
    65,
    62,
    89,
    100,
    7,
    33,
    13
  ],
  "000016": [
    100,
    27,
    99,
    50,
    100,
    5,
    37,
    16
  ],
  "000018": [
    50,
    50,
    50,
    70,
    93,
    11,
    32,
    65
  ],
  "000020": [
    100,
    100,
    77,
    71,
    100,
    6,
    33,
    3
  ],
  "000023": [
    100,
    17,
    100,
    51,
    100,
    5,
    23,
    0
  ],
  "000025": [
    100,
    0,
    48,
    66,
    66,
    6,
    32,
    15
  ],
  "000028": [
    50,
    50,
    50,
    56,
    100,
    4,
    44,
    36
  ],
  "000029": [
    50,
    50,
    50,
    87,
    70,
    10,
    31,
    74
  ],
  "000030": [
    100,
    79,
    76,
    59,
    94,
    9,
    33,
    40
  ],
  "000031": [
    50,
    50,
    50,
    85,
    62,
    10,
    45,
    77
  ],
  "000032": [
    100,
    50,
    77,
    71,
    100,
    6,
    33,
    3
  ],
  "000035": [
    50,
    50,
    50,
    50,
    50,
    50,
    0,
    0
  ],
  "000037": [
    100,
    0,
    83,
    50,
    71,
    50,
    0,
    0
  ],
  "000038": [
    100,
    49,
    50,
    71,
    91,
    50,
    0,
    0
  ],
  "000041": [
    100,
    100,
    0,
    45,
    100,
    50,
    0,
    0
  ],
  "000042": [
    50,
    50,
    50,
    66,
    67,
    10,
    43,
    74
  ],
  "000043": [
    50,
    50,
    38,
    43,
    62,
    4,
    26,
    2
  ],
  "000044": [
    50,
    50,
    50,
    73,
    85,
    50,
    0,
    0
  ],
  "000045": [
    50,
    50,
    50,
    56,
    100,
    4,
    47,
    52
  ],
  "000050": [
    100,
    49,
    50,
    57,
    100,
    50,
    0,
    0
  ],
  "000051": [
    100,
    0,
    59,
    60,
    85,
    0,
    0,
    49
  ],
  "000048": [
    100,
    82,
    50,
    88,
    77,
    50,
    0,
    0
  ],
  "000047": [
    50,
    50,
    50,
    77,
    50,
    6,
    18,
    0
  ],
  "000040": [
    50,
    50,
    50,
    65,
    70,
    4,
    19,
    6
  ],
  "000052": [
    100,
    65,
    70,
    57,
    84,
    2,
    20,
    0
  ],
  "000054": [
    50,
    50,
    44,
    50,
    100,
    9,
    27,
    57
  ],
  "000055": [
    100,
    53,
    42,
    61,
    78,
    38,
    0,
    0
  ],
  "000056": [
    50,
    50,
    41,
    81,
    66,
    5,
    0,
    0
  ],
  "000060": [
    100,
    0,
    0,
    50,
    90,
    4,
    28,
    0
  ],
  "000064": [
    100,
    59,
    52,
    75,
    89,
    6,
    28,
    8
  ],
  "000065": [
    100,
    76,
    41,
    81,
    78,
    5,
    0,
    0
  ],
  "000068": [
    100,
    82,
    72,
    63,
    65,
    15,
    0,
    50
  ],
  "000069": [
    100,
    41,
    63,
    0,
    90,
    31,
    0,
    0
  ],
  "000071": [
    50,
    50,
    50,
    85,
    62,
    10,
    45,
    77
  ],
  "000073": [
    50,
    50,
    27,
    85,
    62,
    2,
    45,
    21
  ],
  "000076": [
    100,
    94,
    25,
    75,
    89,
    6,
    16,
    0
  ],
  "000077": [
    50,
    50,
    76,
    71,
    78,
    4,
    0,
    0
  ],
  "000078": [
    50,
    50,
    50,
    73,
    85,
    50,
    0,
    0
  ],
  "000079": [
    100,
    0,
    63,
    66,
    66,
    5,
    37,
    48
  ],
  "000080": [
    100,
    59,
    18,
    53,
    79,
    34,
    0,
    0
  ],
  "000081": [
    100,
    34,
    58,
    60,
    94,
    46,
    0,
    0
  ],
  "000083": [
    50,
    50,
    39,
    55,
    81,
    4,
    46,
    30
  ],
  "000085": [
    50,
    50,
    62,
    53,
    42,
    3,
    34,
    19
  ],
  "000086": [
    50,
    50,
    50,
    64,
    92,
    6,
    33,
    18
  ],
  "000088": [
    50,
    50,
    64,
    61,
    90,
    5,
    53,
    61
  ],
  "000091": [
    100,
    45,
    45,
    95,
    100,
    33,
    0,
    0
  ],
  "000092": [
    50,
    50,
    45,
    65,
    58,
    11,
    38,
    67
  ],
  "000096": [
    50,
    50,
    50,
    40,
    71,
    0,
    38,
    0
  ],
  "000097": [
    50,
    50,
    52,
    44,
    40,
    6,
    37,
    43
  ],
  "000099": [
    50,
    50,
    50,
    53,
    100,
    3,
    30,
    10
  ],
  "000100": [
    50,
    50,
    74,
    48,
    41,
    7,
    35,
    31
  ],
  "000103": [
    50,
    50,
    27,
    51,
    85,
    5,
    30,
    5
  ],
  "000104": [
    100,
    18,
    50,
    44,
    83,
    8,
    44,
    54
  ],
  "000108": [
    50,
    50,
    37,
    59,
    76,
    10,
    38,
    75
  ],
  "000106": [
    50,
    50,
    27,
    50,
    100,
    5,
    40,
    0
  ],
  "000109": [
    100,
    50,
    57,
    50,
    70,
    5,
    31,
    21
  ],
  "000110": [
    50,
    50,
    50,
    50,
    88,
    5,
    37,
    23
  ],
  "000111": [
    50,
    50,
    74,
    50,
    94,
    11,
    27,
    68
  ],
  "000114": [
    100,
    29,
    49,
    51,
    63,
    5,
    19,
    0
  ],
  "000115": [
    100,
    0,
    50,
    67,
    79,
    7,
    18,
    71
  ],
  "000116": [
    100,
    59,
    58,
    52,
    91,
    3,
    26,
    28
  ],
  "000117": [
    50,
    50,
    66,
    85,
    78,
    23,
    0,
    0
  ],
  "000118": [
    50,
    50,
    23,
    61,
    90,
    0,
    18,
    0
  ],
  "000121": [
    50,
    50,
    63,
    49,
    81,
    4,
    30,
    0
  ],
  "000122": [
    50,
    50,
    52,
    57,
    85,
    8,
    22,
    56
  ],
  "000125": [
    100,
    0,
    48,
    53,
    76,
    20,
    0,
    26
  ],
  "000126": [
    50,
    50,
    54,
    62,
    54,
    11,
    16,
    70
  ],
  "000129": [
    100,
    53,
    72,
    53,
    81,
    20,
    0,
    0
  ],
  "000131": [
    50,
    50,
    100,
    63,
    89,
    4,
    4,
    0
  ],
  "000132": [
    50,
    50,
    64,
    66,
    89,
    18,
    0,
    0
  ],
  "000133": [
    50,
    50,
    66,
    49,
    73,
    8,
    28,
    42
  ],
  "000134": [
    100,
    0,
    0,
    55,
    80,
    51,
    0,
    0
  ],
  "000135": [
    100,
    28,
    100,
    52,
    96,
    19,
    0,
    0
  ],
  "000137": [
    100,
    62,
    91,
    65,
    86,
    6,
    23,
    15
  ],
  "000140": [
    50,
    50,
    38,
    55,
    82,
    10,
    33,
    61
  ],
  "000142": [
    50,
    50,
    44,
    60,
    83,
    6,
    39,
    0
  ],
  "000143": [
    100,
    39,
    64,
    63,
    80,
    7,
    22,
    28
  ],
  "000145": [
    50,
    50,
    46,
    58,
    100,
    5,
    26,
    0
  ],
  "000146": [
    50,
    50,
    100,
    43,
    89,
    0,
    37,
    0
  ],
  "000147": [
    50,
    50,
    72,
    53,
    53,
    8,
    37,
    64
  ],
  "000148": [
    50,
    50,
    100,
    59,
    74,
    0,
    13,
    0
  ],
  "000150": [
    100,
    74,
    49,
    100,
    52,
    0,
    50,
    52
  ],
  "000151": [
    62,
    53,
    51,
    66,
    89,
    6,
    21,
    0
  ],
  "000152": [
    100,
    39,
    44,
    64,
    100,
    5,
    23,
    33
  ],
  "000153": [
    100,
    23,
    54,
    60,
    85,
    4,
    26,
    0
  ],
  "000155": [
    50,
    50,
    49,
    51,
    75,
    0,
    49,
    50
  ],
  "000156": [
    50,
    50,
    52,
    58,
    62,
    8,
    30,
    45
  ],
  "000157": [
    50,
    50,
    43,
    62,
    77,
    8,
    22,
    63
  ],
  "000160": [
    100,
    44,
    50,
    56,
    75,
    38,
    0,
    0
  ],
  "000161": [
    50,
    50,
    31,
    62,
    73,
    5,
    0,
    0
  ]
}

chen_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */  

// remove this or set to false to enable full program (load will be slower)
//var DEBUG_MODE = true;

// this can be used to set the number of sliders to show
var NUM_SLIDERS = 6;

// other variables can be in here too

//helmet colors 
const chen_red = [197, 17, 18];
const lime = [100, 255, 51];
const cyan = [0, 255, 232];
const yellow = [255, 243, 0];
const brown = [95, 60, 12]; 
const chen_black = [50];
const white = [210];
//eye colors 
const eye_blue = [0, 182, 255, 75];
const eye_black = [4, 27, 30, 30];
const eye_green = [20, 135, 49, 75];
const eye_brown = [74, 35, 6, 50];
//mask colors
const mask = [157, 200, 217];
const mask_shade = [76, 95, 109];

// example of a global function
// given a segment, this returns the average point [x, y]
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 ];
}

// This where you define your own face object
function ChenFace() {
  // these are state variables for a face
  // (your variables should be different!)

  this.helmet_color = 2;    // variations of hair colors
  this.eye_color = 4;  // variations of eye colors
  this.gender = 1;  
  this.ref_shift = 1.5; //location of reflection
  this.ref_shift_2 = 1;

  // example of a function *inside* the face object.
  // this draws a segment, and do_loop will connect the ends if true
  this.draw_segment = function(segment, do_loop) {
    for(let i=0; i<segment.length; i++) {
        let px = segment[i][0];
        let py = segment[i][1];
        ellipse(px, py, 0.1);
        if(i < segment.length - 1) {
          let nx = segment[i+1][0];
          let ny = segment[i+1][1];
          line(px, py, nx, ny);
        }
        else if(do_loop) {
          let nx = segment[0][0];
          let ny = segment[0][1];
          line(px, py, nx, ny);
        }
    }
  };

  /*
   * Draw the face with position lists that include:
   *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
   *    bottom_lip, top_lip, nose_tip, nose_bridge, 
   */  
  this.draw = function(positions) {

    //helmet
    stroke(0, 150);
    strokeWeight(0.2);
    if (this.helmet_color >= 0 && this.helmet_color <= 1){
        fill(chen_black);

    } else if (this.helmet_color > 1 && this.helmet_color <= 2){
        fill(brown);

    } else if (this.helmet_color > 2 && this.helmet_color <= 3){
        fill(chen_red);

    } else if (this.helmet_color > 3 && this.helmet_color <= 4){
        fill(yellow);

    } else if (this.helmet_color > 4 && this.helmet_color <= 5){
        fill(white);

    }
    beginShape();
    curveVertex(positions.chin[0][0]-0.2, positions.chin[0][1]-0.5);
    curveVertex(positions.chin[0][0]-0.2, positions.chin[0][1]-0.5);
    curveVertex(positions.chin[0][0]-0.2, positions.chin[0][1]+2.5);
    curveVertex(positions.chin[16][0]+0.2, positions.chin[16][1]+2.5);
    curveVertex(positions.chin[16][0]+0.2, positions.chin[16][1]-0.5);
    curveVertex(positions.chin[16][0]+0.2, positions.chin[16][1]-0.5);
    endShape();
    beginShape();
    vertex(positions.chin[0][0]-0.2, positions.chin[0][1]-0.45);
    quadraticVertex(0, positions.nose_bridge[0][1]-4, positions.chin[16][0]+0.2, positions.chin[16][1]-0.45)
    endShape();

    //mask
    noStroke();
    fill(mask);
    beginShape();
    curveVertex(positions.chin[0][0], positions.chin[0][1]);
    curveVertex(positions.chin[2][0], positions.chin[2][1]);
    curveVertex(positions.chin[3][0]-0.1, positions.chin[3][1]);
    curveVertex(positions.nose_tip[2][0], positions.nose_tip[2][1]+0.6);
    curveVertex(positions.chin[13][0]-0.1, positions.chin[13][1]);
    curveVertex(positions.chin[14][0], positions.chin[14][1]);
    curveVertex(positions.chin[16][0], positions.chin[16][1]);
    curveVertex(positions.right_eyebrow[4][0]-0.2, positions.right_eyebrow[4][1]);
    curveVertex(positions.nose_bridge[0][0], positions.nose_bridge[0][1]-1);
    curveVertex(positions.left_eyebrow[0][0]+0.2, positions.left_eyebrow[0][1]);
    curveVertex(positions.chin[0][0], positions.chin[0][1]);
    curveVertex(positions.chin[2][0], positions.chin[2][1]);
    curveVertex(positions.chin[3][0], positions.chin[3][1]);
    endShape();

    //eyes
    noStroke();
    let left_eye_pos = segment_average(positions.left_eye);
    let right_eye_pos = segment_average(positions.right_eye);
    if (this.eye_color > 0 && this.eye_color <= 1){
        fill(eye_black);

    } else if (this.eye_color >1 && this.eye_color <= 2){
        fill(eye_brown);

    } else if (this.eye_color >2 && this.eye_color <= 3){
        fill(eye_green);

    } else if (this.eye_color >3 && this.eye_color <= 4) {
        fill(eye_blue);
    }
    if (this.gender >= 0 && this.gender <= 0.5){      //softer edges for female
        ellipse(left_eye_pos[0], left_eye_pos[1]+0.25, 0.38, 0.28);
        ellipse(right_eye_pos[0], right_eye_pos[1]+0.25, 0.38, 0.28);
        fill(255, 50);       // eye reflection
        ellipse(left_eye_pos[0]+0.1, left_eye_pos[1]+0.2, 0.1);
        ellipse(right_eye_pos[0]+0.1, right_eye_pos[1]+0.2, 0.1);

    } else{     //harder edges for male
    beginShape();       //left eye
    vertex(positions.left_eye[0][0], positions.left_eye[0][1]+0.25);
    vertex(positions.left_eye[1][0],positions.left_eye[1][1]+0.25);
    vertex(positions.left_eye[2][0], positions.left_eye[2][1]+0.25);
    vertex(positions.left_eye[3][0], positions.left_eye[3][1]+0.25);
    vertex(positions.left_eye[4][0], positions.left_eye[4][1]+0.25);
    vertex(positions.left_eye[5][0], positions.left_eye[5][1]+0.25);
    endShape();
    beginShape();       //right eye
    vertex(positions.right_eye[0][0], positions.right_eye[0][1]+0.25);
    vertex(positions.right_eye[1][0],positions.right_eye[1][1]+0.25);
    vertex(positions.right_eye[2][0], positions.right_eye[2][1]+0.25);
    vertex(positions.right_eye[3][0], positions.right_eye[3][1]+0.25);
    vertex(positions.right_eye[4][0], positions.right_eye[4][1]+0.25);
    vertex(positions.right_eye[5][0], positions.right_eye[5][1]+0.25);
    endShape();
    // eye reflection
    fill(255, 25);
    ellipse(left_eye_pos[0]-0.08, left_eye_pos[1]+0.21, 0.15, 0.11);
    ellipse(right_eye_pos[0]-0.08, right_eye_pos[1]+0.21, 0.15, 0.11);   

    }
    
    //blush
    if (this.gender >= 0 && this.gender <= 0.5){
        fill(255, 222, 254);
        ellipse(positions.left_eye[0][0], positions.left_eye[0][1]+0.6, 0.5, 0.1);
        ellipse(positions.right_eye[3][0], positions.right_eye[3][1]+0.6, 0.5, 0.1);

    } else {
        fill(255, 222, 254, 150);
        ellipse(positions.left_eye[0][0], positions.left_eye[0][1]+0.6, 0.4, 0.08);
        ellipse(positions.right_eye[3][0], positions.right_eye[3][1]+0.6, 0.4, 0.08);
    }

    //nose
    let nose_top = positions.nose_bridge[1];
    let nose_bottom = positions.nose_bridge[3];
    let nose_end = null;
    stroke(76, 95, 109, 25);
    strokeWeight(0.08);
    line(nose_top[0], nose_top[1], nose_bottom[0], nose_bottom[1]-0.15);

    //mouth
    noStroke();
    fill(255, 25);
    beginShape();
    vertex(positions.top_lip[1][0],positions.top_lip[1][1]-0.2);
    vertex(positions.top_lip[2][0], positions.top_lip[2][1]-0.2);
    vertex(positions.top_lip[3][0], positions.top_lip[3][1]-0.2);
    vertex(positions.top_lip[4][0], positions.top_lip[4][1]-0.2);
    vertex(positions.top_lip[5][0], positions.top_lip[5][1]-0.2);
    vertex(positions.bottom_lip[10][0], positions.bottom_lip[10][1]-0.3);
    vertex(positions.bottom_lip[9][0], positions.bottom_lip[9][1]-0.3);
    vertex(positions.bottom_lip[8][0], positions.bottom_lip[8][1]-0.3);
    endShape();

    //reflection
    let curRefShift = this.ref_shift;
    let curRefShift_2 = this.ref_shift_2;
    fill(254, 252, 255, 220);
    if(nose_top[0] > nose_bottom[0]){
        ellipse(positions.nose_bridge[3][0] + curRefShift, right_eye_pos[1]+0.22, 1, 0.5);
        ellipse(positions.top_lip[3][0] - curRefShift_2 , positions.top_lip[1][1]-0.2, 0.2, 0.1);

    } else{
        ellipse(positions.nose_bridge[3][0] - curRefShift, right_eye_pos[1]+0.22, 1, 0.5);
        ellipse(positions.top_lip[3][0] + curRefShift_2 , positions.top_lip[1][1]-0.2, 0.2, 0.1);
    }
    
    //mask outline
    noFill();
    stroke(0, 200);
    strokeWeight(0.2);
    beginShape();
    curveVertex(positions.chin[0][0], positions.chin[0][1]);
    curveVertex(positions.chin[2][0], positions.chin[2][1]);
    curveVertex(positions.chin[3][0]-0.1, positions.chin[3][1]);
    curveVertex(positions.nose_tip[2][0], positions.nose_tip[2][1]+0.6);
    curveVertex(positions.chin[13][0]-0.1, positions.chin[13][1]);
    curveVertex(positions.chin[14][0], positions.chin[14][1]);
    curveVertex(positions.chin[16][0], positions.chin[16][1]);
    curveVertex(positions.right_eyebrow[4][0]-0.2, positions.right_eyebrow[4][1]);
    curveVertex(positions.nose_bridge[0][0], positions.nose_bridge[0][1]-1);
    curveVertex(positions.left_eyebrow[0][0]+0.2, positions.left_eyebrow[0][1]);
    curveVertex(positions.chin[0][0], positions.chin[0][1]);
    curveVertex(positions.chin[2][0], positions.chin[2][1]);
    curveVertex(positions.chin[3][0], positions.chin[3][1]);
    endShape();

    //decorations
    if (this.gender >= 0 && this.gender <= 0.5){      //flower hat for female
        stroke(0, 200);
        strokeWeight(0.1);
        fill(255, 192, 183);
        push();
        angleMode(DEGREES);
        if (nose_top[0] > nose_bottom[0]){
            translate(positions.chin[16][0]-0.1, positions.chin[16][1]-0.5);

        } else {
            translate(positions.chin[0][0]+0.1, positions.chin[0][1]-0.5);
        }
        for (let i = 0; i < 5; i++){
            ellipse(0, 0.35, 0.37, 0.75);
            rotate(360/5);

        }
        noStroke();
        fill(236, 180, 172, 200);
        ellipse(0, 0, 0.3);
        pop();

    } else {        //plant hat for male
        stroke(0, 200);
        strokeWeight(0.1);
        push();
        translate(positions.nose_bridge[0][0], positions.nose_bridge[0][1]-1.3);
        fill(3, 77, 13);
        if (nose_top[0] > nose_bottom[0]){
            beginShape();
            vertex(-0.2, -0.4);
            vertex(-0.2, -0.7);
            quadraticVertex(-1.1, -0.85, -1.5, -1.4);
            quadraticVertex(-0.6, -1.9, -0.1, -1.05);
            quadraticVertex(0.55, -2.4, 1.4, -1.8);
            quadraticVertex(0.9, -0.7, 0.2, -0.7);
            vertex(0.2, -0.4);
            vertex(-0.2, -0.4);
            endShape();

        } else {
            beginShape();
            vertex(0.2, -0.4);
            vertex(0.2, -0.7);
            quadraticVertex(1.1, -0.85, 1.5, -1.4);
            quadraticVertex(0.6, -1.9, 0.1, -1.05);
            quadraticVertex(-0.55, -2.4, -1.4, -1.8);
            quadraticVertex(-0.9, -0.7, -0.2, -0.7);
            vertex(-0.2, -0.4);
            vertex(0.2, -0.4);
            endShape();
        } 
        pop();
    }

   
  }

  /* set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
    this.helmet_color = map(settings[0], 0, 100, 0, 5);
    this.eye_color = map(settings[1], 0, 100, 1, 4);
    this.gender = map(settings[2], 0, 100, 0, 1);
    this.ref_shift = map(settings[3], 0, 100, 1, 1.8);
    this.ref_shift_2 = map(settings[4], 0, 100, 0.3, 1.2);
  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    let settings = new Array(6);
    settings[0] = map(this.helmet_color, 0, 5, 0, 100);
    settings[1] = map(this.eye_color, 1, 4, 0, 100);
    settings[2] = map(this.gender, 0, 1, 0, 100);
    settings[3] = map(this.ref_shift, 1, 1.8, 0, 100);
    settings[4] = map(this.ref_shift_2, 0.3, 1.2, 0, 100);
    return settings;
  }
}

chen_training_values.json

{
  "000001": [
    63,
    26,
    0,
    100,
    33,
    null
  ],
  "000002": [
    46,
    11.000000000000004,
    0,
    68,
    21.000000000000004,
    null
  ],
  "000005": [
    68,
    16,
    0,
    68,
    85.99999999999999,
    null
  ],
  "000006": [
    21.000000000000004,
    11.000000000000004,
    0,
    68,
    21.000000000000004,
    null
  ],
  "000007": [
    0,
    15,
    100,
    69,
    30,
    null
  ],
  "000009": [
    23,
    13.000000000000004,
    0,
    100,
    30,
    null
  ],
  "000010": [
    65,
    81,
    0,
    56.99999999999999,
    48.00000000000001,
    null
  ],
  "000013": [
    69,
    98,
    100,
    81.00000000000001,
    52.99999999999999,
    null
  ],
  "000014": [
    0,
    0,
    0,
    81.00000000000001,
    26.999999999999996,
    null
  ],
  "000015": [
    27,
    0,
    100,
    59,
    67,
    null
  ],
  "000016": [
    14.000000000000002,
    15,
    100,
    80.00000000000001,
    61.999999999999986,
    null
  ],
  "000018": [
    71,
    33,
    0,
    46.999999999999986,
    61.999999999999986,
    null
  ],
  "000020": [
    16.000000000000004,
    0,
    100,
    50.99999999999999,
    61.999999999999986,
    null
  ],
  "000023": [
    11.000000000000002,
    2.0000000000000018,
    100,
    56.99999999999999,
    59.999999999999986,
    null
  ],
  "000025": [
    28.000000000000004,
    0,
    100,
    84.00000000000001,
    61.999999999999986,
    null
  ],
  "000028": [
    21.999999999999996,
    0,
    0,
    48.999999999999986,
    61.999999999999986,
    null
  ],
  "000029": [
    64,
    75,
    0,
    55.99999999999999,
    57.999999999999986,
    null
  ],
  "000030": [
    64,
    17,
    100,
    94,
    23.000000000000004,
    null
  ],
  "000031": [
    63,
    83,
    0,
    30,
    74.99999999999999,
    null
  ],
  "000032": [
    72,
    0,
    100,
    34,
    42,
    null
  ],
  "000035": [
    0,
    24,
    0,
    30,
    40,
    null
  ],
  "000037": [
    0,
    16,
    100,
    100,
    1.000000000000001,
    null
  ],
  "000038": [
    19,
    80.00000000000001,
    100,
    55.99999999999999,
    30,
    null
  ],
  "000040": [
    0,
    18.000000000000004,
    0,
    73.00000000000001,
    30,
    null
  ],
  "000041": [
    0,
    17,
    100,
    100,
    0,
    null
  ],
  "000042": [
    75,
    69.99999999999999,
    0,
    68,
    9.000000000000002,
    null
  ],
  "000043": [
    40,
    13.999999999999998,
    0,
    40.00000000000001,
    46,
    null
  ],
  "000044": [
    0,
    0,
    0,
    40.00000000000001,
    46,
    null
  ],
  "000045": [
    43,
    20.000000000000004,
    0,
    40.00000000000001,
    46,
    null
  ],
  "000047": [
    0,
    0,
    0,
    53.99999999999999,
    52.99999999999999,
    null
  ],
  "000048": [
    0,
    0,
    100,
    53.99999999999999,
    52.99999999999999,
    null
  ],
  "000050": [
    0,
    13.000000000000004,
    100,
    86.00000000000001,
    52.99999999999999,
    null
  ],
  "000051": [
    100,
    11.000000000000004,
    100,
    53.99999999999999,
    52.99999999999999,
    null
  ],
  "000052": [
    32,
    80.00000000000001,
    100,
    53.99999999999999,
    52.99999999999999,
    null
  ],
  "000054": [
    67,
    79,
    0,
    53.99999999999999,
    52.99999999999999,
    null
  ],
  "000055": [
    0,
    17,
    100,
    68,
    61.999999999999986,
    null
  ],
  "000056": [
    0,
    24,
    0,
    68,
    46.99999999999999,
    null
  ],
  "000058": [
    0,
    77.99999999999999,
    0,
    56.99999999999999,
    67,
    null
  ],
  "000060": [
    32,
    20.000000000000004,
    100,
    100,
    67,
    null
  ],
  "000064": [
    25,
    8,
    100,
    56.99999999999999,
    67,
    null
  ],
  "000065": [
    0,
    13.000000000000004,
    100,
    56.99999999999999,
    67,
    null
  ],
  "000068": [
    100,
    11.000000000000004,
    100,
    71.00000000000001,
    40,
    null
  ],
  "000069": [
    0,
    24,
    100,
    28.999999999999996,
    94,
    null
  ],
  "000071": [
    62,
    45,
    0,
    84.00000000000001,
    50.000000000000014,
    null
  ],
  "000073": [
    32,
    24,
    0,
    100,
    28.000000000000007,
    null
  ],
  "000076": [
    0,
    8,
    100,
    57.99999999999999,
    46.99999999999999,
    null
  ],
  "000077": [
    31,
    0,
    0,
    89.00000000000003,
    46,
    null
  ],
  "000078": [
    9.999999999999998,
    4.0000000000000036,
    0,
    56.99999999999999,
    70,
    null
  ],
  "000079": [
    100,
    24,
    100,
    87.00000000000003,
    34,
    null
  ],
  "000080": [
    0,
    82,
    100,
    70,
    17,
    null
  ],
  "000081": [
    0,
    20.000000000000004,
    100,
    78.00000000000001,
    50.000000000000014,
    null
  ],
  "000083": [
    25,
    23,
    0,
    72.00000000000001,
    50.000000000000014,
    null
  ],
  "000085": [
    26,
    10.000000000000002,
    0,
    72.00000000000001,
    50.000000000000014,
    null
  ],
  "000086": [
    35,
    11.999999999999995,
    0,
    100,
    18,
    null
  ],
  "000088": [
    36,
    23,
    0,
    79.00000000000001,
    18,
    null
  ],
  "000091": [
    0,
    0,
    100,
    61,
    18,
    null
  ],
  "000092": [
    66,
    67,
    0,
    84.00000000000001,
    43,
    null
  ],
  "000096": [
    27,
    9.000000000000002,
    0,
    61,
    48.00000000000001,
    null
  ],
  "000097": [
    25,
    90,
    0,
    61,
    48.00000000000001,
    null
  ],
  "000099": [
    25,
    100,
    0,
    61,
    48.00000000000001,
    null
  ],
  "000100": [
    70,
    1.0000000000000009,
    0,
    89.00000000000003,
    30,
    null
  ],
  "000103": [
    25,
    41,
    0,
    62,
    30,
    null
  ],
  "000104": [
    62,
    23,
    100,
    51.99999999999999,
    39.00000000000001,
    null
  ],
  "000106": [
    25,
    17,
    0,
    82.00000000000001,
    28.000000000000007,
    null
  ],
  "000108": [
    69,
    8,
    0,
    82.00000000000001,
    28.000000000000007,
    null
  ],
  "000109": [
    68,
    50,
    100,
    67,
    28.000000000000007,
    null
  ],
  "000110": [
    21.999999999999996,
    48,
    0,
    67,
    28.000000000000007,
    null
  ],
  "000111": [
    69,
    8,
    0,
    100,
    28.000000000000007,
    null
  ],
  "000114": [
    0,
    20.999999999999996,
    100,
    52.99999999999999,
    39.00000000000001,
    null
  ],
  "000115": [
    100,
    45,
    100,
    52.99999999999999,
    39.00000000000001,
    null
  ],
  "000116": [
    27,
    19.000000000000004,
    100,
    52.99999999999999,
    39.00000000000001,
    null
  ],
  "000117": [
    0,
    27,
    0,
    87.00000000000003,
    28.000000000000007,
    null
  ],
  "000118": [
    19,
    6.999999999999999,
    0,
    100,
    15.999999999999998,
    null
  ],
  "000121": [
    0,
    15,
    0,
    45.000000000000014,
    46.99999999999999,
    null
  ],
  "000122": [
    66,
    13.999999999999998,
    0,
    42.00000000000001,
    65,
    null
  ],
  "000125": [
    100,
    72.00000000000001,
    100,
    84.00000000000001,
    52.99999999999999,
    null
  ],
  "000126": [
    61,
    83,
    0,
    68,
    43,
    null
  ],
  "000129": [
    0,
    4.9999999999999964,
    100,
    56.99999999999999,
    43,
    null
  ],
  "000131": [
    0,
    0,
    0,
    90.00000000000003,
    43,
    null
  ],
  "000132": [
    0,
    11.000000000000004,
    0,
    90.00000000000003,
    43,
    null
  ],
  "000133": [
    61,
    69.99999999999999,
    0,
    51.99999999999999,
    35,
    null
  ],
  "000134": [
    0,
    0,
    100,
    100,
    23.000000000000004,
    null
  ],
  "000135": [
    0,
    0,
    100,
    85.00000000000001,
    23.000000000000004,
    null
  ],
  "000137": [
    100,
    0,
    100,
    100,
    3.9999999999999982,
    null
  ],
  "000140": [
    70,
    75,
    0,
    68,
    24.999999999999993,
    null
  ],
  "000142": [
    20.999999999999996,
    24,
    0,
    51.99999999999999,
    8.000000000000002,
    null
  ],
  "000143": [
    24,
    77.99999999999999,
    100,
    75.00000000000001,
    26.000000000000007,
    null
  ],
  "000145": [
    0,
    10.000000000000002,
    0,
    82.00000000000001,
    26.000000000000007,
    null
  ],
  "000146": [
    49.00000000000001,
    4.0000000000000036,
    0,
    100,
    0,
    null
  ],
  "000147": [
    64,
    71,
    0,
    55.99999999999999,
    0,
    null
  ],
  "000148": [
    0,
    48.99999999999999,
    0,
    100,
    0,
    null
  ],
  "000150": [
    51,
    0,
    100,
    86.00000000000001,
    12,
    null
  ],
  "000151": [
    28.000000000000004,
    0,
    0,
    36.00000000000001,
    54.99999999999999,
    null
  ],
  "000152": [
    22.000000000000004,
    57.99999999999999,
    100,
    45.000000000000014,
    72.99999999999999,
    null
  ],
  "000153": [
    0,
    18.000000000000004,
    100,
    45.000000000000014,
    72.99999999999999,
    null
  ],
  "000155": [
    54,
    13.000000000000004,
    0,
    77.00000000000001,
    61,
    null
  ],
  "000156": [
    72,
    0,
    0,
    98,
    61,
    null
  ],
  "000157": [
    69,
    69,
    0,
    51.99999999999999,
    61,
    null
  ],
  "000160": [
    0,
    6.999999999999999,
    100,
    51.99999999999999,
    31,
    null
  ],
  "000161": [
    0,
    77.99999999999999,
    0,
    51.99999999999999,
    54.000000000000014,
    null
  ]
}

cooper_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */

// remove this or set to false to enable full program (load will be slower)
//var DEBUG_MODE = true;

// this can be used to set the number of sliders to show
// var NUM_SLIDERS = 7;

// other variables can be in here too
// here's some examples for colors used
// const bg_color = [225, 206, 187];
// const fg_color = [151, 102, 52];
// const stroke_color = [95, 52, 8];

const cooper_brown =[250, 155, 117];
const brown1 =[209, 131, 100];
const brown2 =[135, 85, 65];
const brown3 = [79, 50, 38];
const brown4 = [43, 29, 21];

const lip = [247, 134, 89];
const lip1 = [204, 108, 69];
const lip2 = [107, 67, 51];
const lip3 = [79, 40, 25];
const lip4 = [33, 19, 10];

this.show_points = function (segment){
      for(let i=0; i<segment.length; i++) {
        let px = segment[i][0];
        let py = segment[i][1];
        var number = i.toString();
        textAlign(CENTER, CENTER);
        textSize(0.2);
        fill(0);
        text(number, px, py, 0.1);
      }
  }

// example of a global function
// given a segment, this returns the average point [x, y]
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 ];
}

// This where you define your own face object
function CooperFace() {
  // these are state variables for a face
  // (your variables should be different!)
   this.faceSize = 3;
   this.eye = 0.5;
   this.lip = 1 ;
   this.tooth = 2;
   this.mouth = 1;
   this.num_eyes = 2;
   this.eye_shift = -1;
   this.face_colour = 1;


  // example of a function *inside* the face object.
  // this draws a segment, and do_loop will connect the ends if true
  this.draw_segment = function(segment, do_loop) {
    for(let i=0; i<segment.length; i++) {
        let px = segment[i][0];
        let py = segment[i][1];
        ellipse(px, py, 0.1);
        if(i < segment.length - 1) {
          let nx = segment[i+1][0];
          let ny = segment[i+1][1];
          line(px, py, nx, ny);
        }
        else if(do_loop) {
          let nx = segment[0][0];
          let ny = segment[0][1];
          line(px, py, nx, ny);
        }
    }
  };
  /*
   * Draw the face with position lists that include:
   *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
   *    bottom_lip, top_lip, nose_tip, nose_bridge,
   */

  this.draw = function(positions) {

   let left_eye = segment_average(positions.left_eye);
   let right_eye = segment_average(positions.right_eye);
   let nose_tip = positions.nose_tip[2];
   let top_lip = positions.top_lip[3];
   let bottom_lip = positions.bottom_lip[0];
   let whiskers = positions.nose_bridge[2];
   let nostrils = positions.nose_bridge[2];
   let tooth =  positions.nose_bridge[3];
   
   noStroke();

    //head
      if(this.face_colour == 0){
      fill(cooper_brown);
    }else
      if(this.face_colour == 1){
      fill(brown1);
    }else
    if(this.face_colour == 2){
      fill(brown2);
    }else
    if(this.face_colour == 3){
      fill(brown3);
    }else
    if(this.face_colour == 4){
      fill(brown4);
    }

    ellipse(0, -0.3,this.faceSize,4);    
 
    // eyes
    fill(255);
    ellipse(left_eye[0], left_eye[1], 1,this.eye);
    ellipse(right_eye[0], right_eye[1],1, this.eye);

        let curEyeShift = 0.04 * this.eye_shift;
    if(this.num_eyes == 2) {

      fill(0);
      ellipse(left_eye[0] + curEyeShift, left_eye[1], 0.5);
      ellipse(right_eye[0] + curEyeShift, right_eye[1], 0.5);
    }
    else {
      let eyePosX = (left_eye[0] + right_eye[0]) / 2;
      let eyePosY = (left_eye[1] + right_eye[1]) / 2;

      fill(0);
      ellipse(eyePosX, eyePosY, 0.45, 0.27);

      fill(0);
      ellipse(eyePosX - 0.1 + curEyeShift, eyePosY, 0.18);
    }
  
    //mouth
    fill(255, 201, 251);
    ellipse(top_lip[0],top_lip[1],bottom_lip[0],this.mouth);

   //teeth
   if(this.tooth == 2){
    noStroke();
    push();
    translate(tooth[0],tooth[1]);
    fill(255);
    triangle(0.25, 0.5, 0.5, 2, 0.75, 0.5);
    triangle(-0.75, 0.5, -0.5, 2, -0.25, 0.5);
     pop();
   }else
    if(this.tooth == 0){
         noStroke();
    push();
    translate(tooth[0],tooth[1]);
    fill(255);
    triangle(0.25, 0.5, 0.5, 0, 0.75, 0.5);
    triangle(-0.75, 0.5, -0.5, 0, -0.25, 0.5);
     pop();
    }


    //lip
    if(this.face_colour == 0){
      fill(lip);
    }else
      if(this.face_colour == 1){
      fill(lip1);
    }else
    if(this.face_colour == 2){
      fill(lip2);
    }else
    if(this.face_colour == 3){
      fill(lip3);
    }else
    if(this.face_colour == 4){
      fill(lip4);
    }

    ellipse(nose_tip[0],nose_tip[1], 4, 1);
 
    //nostrils
     fill(0);
    ellipse(nostrils[0],nostrils[1],this.lip, 0.5);
 
    //whiskers
    noFill();
    stroke(255, 194, 115);
    push();
    translate(whiskers[0],whiskers[1]);
    angleMode(DEGREES);
    strokeWeight(0.05);
    arc(0.4, 1, 1.6, 1.2, 290, 50);
    arc(0.6, 1, 1.6, 1.2, 290, 50);
    arc(0.8, 1, 1.6, 1.2, 290, 50);
    arc(0, 1, 1.6, 1.2, 320, 50);
    arc(0, 0.52, 0.8, 1.2, 360, 50);
    arc(0, 0.6, 0.4, 1.2, 340, 50);
    arc(-0.2, 0.6, 0.4, 1.2, 340, 50);
    arc(-0.4, 0.6, 0.4, 1.2, 340, 50);

    arc(-0.4, 1, 1.6, 1.2, 135, 250);
    arc(-0.6, 1, 1.6, 1.2, 135, 250);
    arc(-0.8, 1, 1.6, 1.2, 135, 250);
    arc(-0.32, 0.96,1, 1.08, 120, 250);
    arc(-0.2, 0.88, 0.4, 1.2, 180, 250);
    pop();


  }

  /* set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
    this.faceSize = map(settings[0], 0, 100, 2.8, 4);
    this.eye = map(settings[1], 0, 100, 0.5, 0.8);
    this.lip = map(settings[2], 0, 100, 0.5, 2);
    this.tooth = int(map(settings[3], 0, 100, 0, 2));
    this.mouth = map(settings[4], 0, 100, 0.5, 1.5);
    this.eye_shift = map(settings[5], 0, 100, -2, 2);
    this.face_colour = int(map(settings[6], 0, 100, 0, 4));
  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    let settings = new Array(3);
    settings[0] = map(this.faceSize, 2.8, 4, 0, 100);
    settings[1] = map(this.eye, 0.5, 0.8, 0, 100);
    settings[2] = map(this.lip, 0.5, 2, 0, 100);
    settings[3] = int(map(this.tooth, 0, 2, 0, 100));
    settings[4] = map(this.mouth,0.5,1.5,0,100);
    settings[5] = map(this.eye_shift, -2, 2, 0, 100);
    settings[6] = int(map(this.face_colour, 0, 4, 0, 100));

    return settings;
  }
}

cooper_training_values.json

{
  "000001": [
  63.000000000000014,
  18.000000000000014,
  17,
  0,
  5.000000000000004,
  60,
  0
],
  "000002": [
    77.99999999999999,
    24.999999999999982,
    4.0000000000000036,
    0,
    49,
    38,
    0
  ],
  "000005": [
    100,
    13.000000000000009,
    10.000000000000002,
    0,
    39,
    46,
    0
  ],
  "000006": [
    52,
    16.00000000000001,
    0,
    0,
    33.00000000000001,
    95,
    50
  ],
  "000007": [
    54,
    22.000000000000018,
    11.000000000000004,
    100,
    0,
    60,
    0
  ],
  "000009": [
    75.00000000000003,
    20.99999999999998,
    1.0000000000000009,
    0,
    37,
    42,
    0
  ],
  "000010": [
    100,
    0,
    16,
    0,
    0,
    41,
    0
  ],
  "000013": [
    100,
    0,
    0,
    100,
    14.000000000000002,
    75,
    0
  ],
  "000014": [
    100,
    14.000000000000009,
    9.000000000000002,
    0,
    0,
    37,
    75
  ],
  "000015": [
    54,
    0,
    20.999999999999996,
    100,
    7.000000000000006,
    57.99999999999999,
    0
  ],
  "000016": [
    50,
    13.000000000000009,
    8,
    100,
    0,
    100,
    25
  ],
  "000018": [
    81.00000000000003,
    14.000000000000009,
    19.000000000000004,
    0,
    30.000000000000004,
    45,
    0
  ],
  "000020": [
    60.00000000000001,
    0,
    17,
    100,
    19.999999999999996,
    77,
    0
  ],
  "000023": [
    58.00000000000001,
    20.000000000000014,
    20.999999999999996,
    100,
    6.000000000000005,
    100,
    0
  ],
  "000025": [
    66.00000000000001,
    6.000000000000004,
    4.9999999999999964,
    100,
    0,
    44,
    0
  ],
  "000028": [
    63.000000000000014,
    11.000000000000009,
    44.000000000000014,
    0,
    87.99999999999999,
    54,
    25
  ],
  "000029": [
    81.99999999999999,
    17.00000000000001,
    0,
    0,
    55.00000000000001,
    45,
    0
  ],
  "000030": [
    95,
    14.000000000000009,
    0,
    100,
    0,
    43,
    0
  ],
  "000031": [
    66.00000000000001,
    5.0000000000000036,
    22.000000000000007,
    0,
    25,
    43,
    0
  ],
  "000032": [
    61.00000000000001,
    28.999999999999986,
    4.0000000000000036,
    100,
    44.99999999999999,
    54,
    0
  ],
  "000035": [
    65.00000000000001,
    39.99999999999999,
    0,
    0,
    7.000000000000006,
    53,
    0
  ],
  "000037": [
    73.00000000000001,
    51,
    60,
    100,
    0,
    94,
    50
  ],
  "000038": [
    62.000000000000014,
    3.000000000000002,
    32,
    100,
    20.999999999999996,
    71,
    0
  ],
  "000040": [
    73.99999999999997,
    33.999999999999986,
    0,
    0,
    0,
    66,
    25
  ],
  "000041": [
    54,
    26.000000000000018,
    56.99999999999999,
    100,
    83,
    0,
    25
  ],
  "000042": [
    67.00000000000001,
    13.000000000000009,
    0,
    0,
    0,
    34,
    0
  ],
  "000043": [
    49,
    23.000000000000018,
    4.0000000000000036,
    0,
    56.999999999999986,
    30,
    0
  ],
  "000044": [
    34.999999999999986,
    22.000000000000018,
    23,
    0,
    0,
    48,
    100
  ],
  "000045": [
    56.00000000000001,
    7.000000000000004,
    6.999999999999999,
    0,
    66.00000000000001,
    70,
    25
  ],
  "000047": [
    66.00000000000001,
    0,
    5.999999999999997,
    0,
    23,
    74,
    25
  ],
  "000048": [
    83.99999999999999,
    0,
    11.000000000000004,
    100,
    0,
    50,
    0
  ],
  "000050": [
    75.00000000000003,
    0,
    28.000000000000004,
    100,
    79,
    62,
    25
  ],
  "000051": [
    92,
    18.000000000000014,
    38.99999999999999,
    100,
    0,
    62,
    25
  ],
  "000052": [
    64.00000000000001,
    14.000000000000009,
    31,
    100,
    0,
    69,
    25
  ],
  "000054": [
    71.00000000000001,
    14.000000000000009,
    6.999999999999999,
    0,
    55.00000000000001,
    71,
    0
  ],
  "000055": [
    71.00000000000001,
    31.999999999999986,
    16,
    100,
    0,
    56.99999999999999,
    25
  ],
  "000056": [
    77.00000000000003,
    30.99999999999999,
    11.000000000000004,
    100,
    0,
    50,
    0
  ],
  "000058": [
    77.00000000000003,
    24.999999999999982,
    5.999999999999997,
    0,
    0,
    71,
    0
  ],
  "000060": [
    100,
    26.000000000000018,
    20.000000000000004,
    100,
    20.999999999999996,
    0,
    100
  ],
  "000064": [
    100,
    6.000000000000004,
    18.000000000000004,
    100,
    0,
    57.99999999999999,
    0
  ],
  "000065": [
    75.99999999999997,
    6.000000000000004,
    40.00000000000001,
    100,
    23,
    57.99999999999999,
    25
  ],
  "000068": [
    61.00000000000001,
    14.000000000000009,
    13.000000000000004,
    100,
    20.999999999999996,
    44,
    0
  ],
  "000069": [
    61.00000000000001,
    14.000000000000009,
    13.000000000000004,
    100,
    20.999999999999996,
    44,
    0
  ],
  "000071": [
    81.00000000000003,
    24.000000000000018,
    1.0000000000000009,
    0,
    17.999999999999993,
    62,
    0
  ],
  "000073": [
    84.99999999999999,
    26.999999999999986,
    11.000000000000004,
    0,
    12,
    20.999999999999996,
    25
  ],
  "000076": [
    100,
    26.999999999999986,
    18.000000000000004,
    100,
    0,
    15.000000000000002,
    25
  ],
  "000077": [
    96,
    18.000000000000014,
    6.999999999999999,
    0,
    0,
    79,
    25
  ],
  "000078": [
    96,
    0,
    5.999999999999997,
    0,
    0,
    39,
    0
  ],
  "000079": [
    53,
    13.000000000000009,
    24,
    100,
    0,
    80,
    25
  ],
  "000080": [
    65.00000000000001,
    16.00000000000001,
    11.000000000000004,
    100,
    0,
    54,
    0
  ],
  "000081": [
    59.00000000000001,
    17.00000000000001,
    32,
    100,
    37,
    100,
    25
  ],
  "000083": [
    38.99999999999999,
    18.000000000000014,
    4.9999999999999964,
    0,
    0,
    52,
    0
  ],
  "000085": [
    95,
    47,
    5.999999999999997,
    0,
    0,
    63,
    0
  ],
  "000086": [
    100,
    31.999999999999986,
    5.999999999999997,
    0,
    27,
    27,
    0
  ],
  "000088": [
    87.99999999999999,
    24.999999999999982,
    10.000000000000002,
    0,
    18.999999999999993,
    78,
    25
  ],
  "000091": [
    79.00000000000003,
    0,
    13.000000000000004,
    100,
    0,
    17.000000000000004,
    0
  ],
  "000092": [
    73.00000000000001,
    10.000000000000007,
    5.999999999999997,
    0,
    0,
    46,
    0
  ],
  "000096": [
    100,
    28.999999999999986,
    23,
    0,
    0,
    46,
    0
  ],
  "000097": [
    100,
    31.999999999999986,
    17,
    0,
    19.999999999999996,
    56.99999999999999,
    0
  ],
  "000099": [
    52,
    0,
    23,
    0,
    47,
    50,
    0
  ],
  "000100": [
    79.99999999999999,
    26.999999999999986,
    23,
    0,
    0,
    91,
    0
  ],
  "000103": [
    75.99999999999997,
    30.99999999999999,
    1.0000000000000009,
    0,
    0,
    43,
    0
  ],
  "000104": [
    54,
    0,
    38.00000000000001,
    100,
    36,
    61,
    0
  ],
  "000106": [
    43.99999999999999,
    20.99999999999998,
    18.000000000000004,
    0,
    49,
    46,
    0
  ],
  "000108": [
    58.00000000000001,
    22.000000000000018,
    0,
    0,
    40.99999999999999,
    51,
    0
  ],
  "000109": [
    28.000000000000018,
    13.000000000000009,
    0,
    100,
    21.999999999999996,
    60,
    0
  ],
  "000110": [
    100,
    19.000000000000014,
    52,
    0,
    50,
    50,
    0
  ],
  "000111": [
    100,
    19.000000000000014,
    38.00000000000001,
    0,
    47,
    100,
    100
  ],
  "000114": [
    56.00000000000001,
    31.999999999999986,
    20.000000000000004,
    100,
    44.99999999999999,
    60,
    0
  ],
  "000115": [
    29.99999999999999,
    10.000000000000007,
    6.999999999999999,
    100,
    0,
    68,
    0
  ],
  "000116": [
    39.99999999999999,
    0,
    6.999999999999999,
    100,
    37,
    76,
    0
  ],
  "000117": [
    32.999999999999986,
    0,
    34.99999999999999,
    0,
    27,
    68,
    100
  ],
  "000118": [
    64.00000000000001,
    19.000000000000014,
    8,
    0,
    0,
    34,
    25
  ],
  "000121": [
    51,
    23.000000000000018,
    15,
    0,
    0,
    56.99999999999999,
    25
  ],
  "000122": [
    69.99999999999997,
    36.999999999999986,
    22.000000000000007,
    0,
    29.000000000000004,
    66,
    0
  ],
  "000125": [
    69.99999999999997,
    24.999999999999982,
    22.000000000000007,
    100,
    0,
    50,
    0
  ],
  "000126": [
    60.00000000000001,
    24.999999999999982,
    6.999999999999999,
    0,
    29.000000000000004,
    80,
    0
  ],
  "000129": [
    30.99999999999999,
    17.00000000000001,
    0,
    100,
    31.000000000000007,
    80,
    0
  ],
  "000131": [
    63.000000000000014,
    0,
    6.999999999999999,
    0,
    25,
    100,
    50
  ],
  "000132": [
    84.99999999999999,
    24.000000000000018,
    23,
    0,
    49,
    82,
    50
  ],
  "000133": [
    84.99999999999999,
    24.000000000000018,
    13.999999999999998,
    0,
    33.00000000000001,
    53,
    0
  ],
  "000134": [
    51,
    20.000000000000014,
    41.99999999999999,
    100,
    36,
    0,
    100
  ],
  "000135": [
    37.999999999999986,
    22.000000000000018,
    17,
    100,
    0,
    100,
    50
  ],
  "000137": [
    66.00000000000001,
    3.000000000000002,
    16,
    100,
    30.000000000000004,
    100,
    0
  ],
  "000140": [
    61.00000000000001,
    22.000000000000018,
    0,
    0,
    0,
    38,
    0
  ],
  "000142": [
    42.99999999999999,
    20.000000000000014,
    8,
    0,
    10.999999999999998,
    38,
    0
  ],
  "000143": [
    81.99999999999999,
    19.000000000000014,
    11.999999999999995,
    100,
    7.9999999999999964,
    54,
    0
  ],
  "000145": [
    67.00000000000001,
    0,
    8,
    0,
    76,
    57.99999999999999,
    0
  ],
  "000146": [
    79.00000000000003,
    17.00000000000001,
    8,
    0,
    56.999999999999986,
    88,
    25
  ],
  "000147": [
    81.99999999999999,
    23.000000000000018,
    5.999999999999997,
    0,
    8.999999999999996,
    92,
    0
  ],
  "000148": [
    47,
    32.999999999999986,
    2.0000000000000018,
    0,
    24,
    100,
    0
  ],
  "000150": [
    58.00000000000001,
    13.000000000000009,
    0,
    100,
    0,
    55.00000000000001,
    0
  ],
  "000151": [
    61.00000000000001,
    13.000000000000009,
    27,
    0,
    53,
    59,
    25
  ],
  "000152": [
    68.00000000000001,
    0,
    20.999999999999996,
    100,
    39,
    41,
    0
  ],
  "000153": [
    38.99999999999999,
    14.000000000000009,
    11.999999999999995,
    100,
    40.99999999999999,
    50,
    0
  ],
  "000155": [
    71.99999999999997,
    20.99999999999998,
    13.999999999999998,
    0,
    40,
    59,
    25
  ],
  "000156": [
    66.00000000000001,
    20.99999999999998,
    6.999999999999999,
    0,
    24,
    69,
    0
  ],
  "000157": [
    100,
    20.99999999999998,
    16,
    0,
    0,
    52,
    0
  ],
  "000160": [
    62.000000000000014,
    13.000000000000009,
    11.999999999999995,
    100,
    0,
    63,
    0
  ],
  "000161": [
    75.99999999999997,
    15.00000000000001,
    11.000000000000004,
    0,
    40,
    39,
    0
  ]
}

d3-random.v1.min.js

// https://d3js.org/d3-random/ v1.1.2 Copyright 2018 Mike Bostock
!function(n,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports):"function"==typeof define&&define.amd?define(["exports"],r):r(n.d3=n.d3||{})}(this,function(n){"use strict";function r(){return Math.random()}var t=function n(r){function t(n,t){return n=null==n?0:+n,t=null==t?1:+t,1===arguments.length?(t=n,n=0):t-=n,function(){return r()*t+n}}return t.source=n,t}(r),u=function n(r){function t(n,t){var u,e;return n=null==n?0:+n,t=null==t?1:+t,function(){var o;if(null!=u)o=u,u=null;else do{u=2*r()-1,o=2*r()-1,e=u*u+o*o}while(!e||e>1);return n+t*o*Math.sqrt(-2*Math.log(e)/e)}}return t.source=n,t}(r),e=function n(r){function t(){var n=u.source(r).apply(this,arguments);return function(){return Math.exp(n())}}return t.source=n,t}(r),o=function n(r){function t(n){return function(){for(var t=0,u=0;u<n;++u)t+=r();return t}}return t.source=n,t}(r),i=function n(r){function t(n){var t=o.source(r)(n);return function(){return t()/n}}return t.source=n,t}(r),c=function n(r){function t(n){return function(){return-Math.log(1-r())/n}}return t.source=n,t}(r);n.randomUniform=t,n.randomNormal=u,n.randomLogNormal=e,n.randomBates=i,n.randomIrwinHall=o,n.randomExponential=c,Object.defineProperty(n,"__esModule",{value:!0})});

dockerty_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */  

//color variables 

skinMidtone_color = ["#ffd5be","#ebcebb", "#ffd5be", "#CAA288", "#8c6652"];
skinLowlight_color = ["#f4c4b0", "#e5bbac","#e5b6a2", "#b78c79", "#775041"]


n1= [244, 200, 176, 50];
n2= [229, 187, 172, 50];
n3 = [232, 188, 169, 40];
n4 = [188, 149, 126, 50];
n5 = [124, 84, 68, 50];
noseColor = [n1, n2,n3, n4, n5];

h1= [255, 255, 255, 10];
h2= [249, 245, 239, 10];
h3 = [249, 245, 239, 10];
h4 = [255, 231, 216, 10];
h5 = [255, 231, 216, 10];

noseHighlight = [h1, h2, h3, h4, h5];
skinShadow_color = ["#d6a995", "#d6a995","#ba9584", "#9b7768", "#725241"]
// stroke_color = [skinLowlight_color[1]];

upperLip_color = ["#ba8080", "#d1a3a1", "#dba69b", "#a5776b","#6d453d", "#54322b"]; // 1 longer than the rest for stroke
lowerLip_color = ["#db9d9d", "#ebbdbb", "#ffc9be", "#ca9588", "#8c5c52"];

teeth_color = ["#fcfaf4", "#fff", "#f2ece3", "#f7f2ea",  "#efe6da"];

eye_color = ["#3e7191", "#22323d", "#3d4722", "#543f14", "#493127", "#000"];

pupil_color = "#000";

function DockertyFace() {
  this.lookPos = 50;
  this.eyeAngle = 100;
  this.skinColor = 50;
  this.eyeColor = 50;
  this.eyeSize = 50;
 
  this.draw = function(positions) {
    var nose_pos = average_point(positions.nose_bridge);
    var eye1_pos = average_point(positions.left_eye);
    var eye2_pos = average_point(positions.right_eye);
    var half_height = positions.chin[7][1] - nose_pos[1];
    var face_width = positions.chin[positions.chin.length-1][0] - positions.chin[0][0];
    var eye_squish = map(this.eyeAngle, 0, 100, 50, 100);
    var skin_color_value = int(map(this.skinColor, 0, 100, 2, 4.9));
    var eye_color_value = int(map(this.eyeColor, 0, 100, 0, 5.9));
    var eye_size = map(this.eyeSize, 0, 100, 0.7, 1.5);

    var x = nose_pos[0];
    var y = nose_pos[1];
    var w = 2 * face_width;
    var h = 2.5 * half_height;

    var extent = 0;
    if(h < w) {
      extent = h / 2;
    }
    else {
      extent = w / 2;
    }
    var size = extent / 220.0;


    // head
    stroke(0, 0, 0, 100);
    fill(skinMidtone_color[skin_color_value]);
    beginShape();
    curveVertex(positions.left_eyebrow[0][0], positions.left_eyebrow[0][1]);
    for(var i=0; i<positions.chin.length;i++) {

      curveVertex(positions.chin[i][0], positions.chin[i][1]);
    }
    for(var i=positions.right_eyebrow.length-1; i>=0;i--) {
      curveVertex(positions.right_eyebrow[i][0], positions.right_eyebrow[i][1]);
    }
    for(var i=positions.left_eyebrow.length-1; i>=0;i--) {
      curveVertex(positions.left_eyebrow[i][0], positions.left_eyebrow[i][1]);
    }
    curveVertex(positions.chin[0][0], positions.chin[0][1]);

    endShape(CLOSE);

    /////////////////////////////////////////// mouth
    //inner mouth
    stroke(upperLip_color[skin_color_value+1]);
    strokeWeight(0.005);

    fill(teeth_color[skin_color_value]);
     beginShape();
     for(var i=0; i<positions.top_lip.length/2;i++) {
      vertex(positions.top_lip[i][0], positions.top_lip[i][1]);
    }
      for(var i=0; i<6;i++) {
    		if (i!=3 && i!=9){
      vertex(positions.bottom_lip[i][0], positions.bottom_lip[i][1]);
 	  }
    }
    endShape(CLOSE);

    //lips
    fill(upperLip_color[skin_color_value]);
    beginShape();
     for(var i=0; i<positions.top_lip.length;i++) {
      curveVertex(positions.top_lip[i][0], positions.top_lip[i][1]);
    }
    endShape(CLOSE);

        fill(lowerLip_color[skin_color_value]);
    beginShape();
           for(var i=0; i<positions.bottom_lip.length;i++) {
    	if (i!=3 && i!=9){
      curveVertex(positions.bottom_lip[i][0], positions.bottom_lip[i][1]);
  	}
    }
    endShape(CLOSE);
    noStroke();



    ///////////////////////////////////////////left eye
    eyeball_color = teeth_color[skin_color_value];
    iris_color = eye_color[eye_color_value];

    push();
    scale(1.4);
    translate(0.2, 0.4);

    //eyeball
    beginShape();
    fill(eyeball_color)
    for(var i=0; i<positions.left_eye.length;i++) {
      curveVertex(positions.left_eye[i][0], positions.left_eye[i][1]);
    }
    endShape(CLOSE);

    //eye center
    push();
    translate((eye1_pos[0]-0.1)+(this.lookPos/500), eye1_pos[1]-0.03);
    scale(eye_squish/100, 1);

    fill(iris_color);

    ellipse(0, 0, 20 * size *eye_size, 20 * size*eye_size);

    
    if (eye_color_value == 5){
    	 fill(255, 144, 96, 20);
    } else if (eye_color_value == 4){
    	 fill(255, 183, 96, 20);
    }else {
    	fill(230, 250, 200, 20);
    }
    for(var i=0; i<8;i++) {
      ellipse(0, 0, (12+i) * size*eye_size, (12+i) * size*eye_size);
    }
     fill(pupil_color);
    ellipse(0, 0, 8 * size*eye_size, 8 * size*eye_size);
  pop();

  //eye highlights

     fill(255, 255, 255, 5);
    for (var i=4; i>0;i-=0.02) {
    	ellipse((eye1_pos[0]-0.03), eye1_pos[1]-0.07, i * size, i* size)
 	 }
 	 push();

 	 translate(eye1_pos[0], eye1_pos[1]);
    rotate(-30);
    for (var i=6; i>0;i-=0.02) {
      ellipse(0, 0, i * (size/2), i*size);
    }
  pop();

  //lower lid shadow

       for(var j=0.04; j>0; j-= 0.02){
    push();
    translate(-0.02, -j);
    scale(0.98, 1)
    fill(0, 0, 0, (20/(j*30)));
    beginShape();
    	curveVertex(positions.left_eye[0][0], positions.left_eye[0][1]);
  	 	for(var i=5; i>=3;i--) {
        	curveVertex(positions.left_eye[i][0], positions.left_eye[i][1]);
    	}
    	for(var i=3; i<=5;i++) {
        	curveVertex(positions.left_eye[i][0], (positions.left_eye[i][1])+0.1);
 
    	}
    endShape(CLOSE);
    pop();
    }

    //lower lid shape

beginShape();
	fill(skinMidtone_color[skin_color_value]);
    curveVertex(positions.left_eye[0][0], positions.left_eye[0][1]);
  	 	for(var i=5; i>=3;i--) {
        	curveVertex(positions.left_eye[i][0], positions.left_eye[i][1]);
    	}
    	for(var i=3; i<=5;i++) {
        	curveVertex(positions.left_eye[i][0], (positions.left_eye[i][1])+0.15);
 
    	}
endShape(CLOSE);

//eyelid shadow
    for(var j=0.01; j<0.1; j+= 0.01){
    push();
    translate(-0.02, j);
    scale(0.98, 1)
     beginShape();
     fill(0, 0, 0, (20/(j*20)));
 		curveVertex((positions.left_eye[0][0]), (positions.left_eye[0][1]));  
       for(var i=0; i<4;i++) {
        var eyelid_value_y = ((positions.left_eye[i][1] + positions.left_eyebrow[i+1][1])/2.2);
        var eyelid_value_x = ((positions.left_eye[i][0] + positions.left_eyebrow[i][0])/2.3);
        curveVertex((eyelid_value_x), (eyelid_value_y));
    }
     for(var i=3; i>=0;i--) {
        curveVertex((positions.left_eye[i][0]), (positions.left_eye[i][1]));   
      }
    endShape(CLOSE);
    pop();
}
//eyelid shape
    beginShape();

     fill(skinLowlight_color[skin_color_value]);
 		curveVertex((positions.left_eye[0][0]), (positions.left_eye[0][1]));  
       for(var i=0; i<4;i++) {
        var eyelid_value_y = ((positions.left_eye[i][1] + positions.left_eyebrow[i+1][1])/2.2);
        var eyelid_value_x = ((positions.left_eye[i][0] + positions.left_eyebrow[i][0])/2.3);
        curveVertex((eyelid_value_x), (eyelid_value_y));
    }
     for(var i=3; i>=0;i--) {
        curveVertex((positions.left_eye[i][0]), (positions.left_eye[i][1]));   
      }

    endShape(CLOSE);   

//browbone shape
        beginShape();

     fill(skinMidtone_color[skin_color_value]);
 		vertex((positions.left_eye[0][0]), (positions.left_eye[0][1]));  
       for(var i=0; i<4;i++) {
        var eyelid_value_y = ((positions.left_eye[i][1] + positions.left_eyebrow[i+1][1])/2.2);
        var eyelid_value_x = ((positions.left_eye[i][0] + positions.left_eyebrow[i][0])/2.3);
        curveVertex((eyelid_value_x), (eyelid_value_y));
    }
curveVertex((positions.left_eyebrow[4][0]+positions.left_eyebrow[3][0])/2.5, (positions.left_eyebrow[3][1]+0.2)); 

   curveVertex((positions.left_eyebrow[1][0]+0.2), (positions.left_eyebrow[1][1])+0.1);

  	
        

    endShape(CLOSE);  
     
   	pop(); 


    //////////////////////////////////////////////////right eye
    push();
    scale(1.4);
    translate(-0.2, 0.4);

    //eyeball
    beginShape();
    fill(eyeball_color)
    for(var i=0; i<positions.right_eye.length;i++) {
      curveVertex(positions.right_eye[i][0], positions.right_eye[i][1]);
    }

    endShape(CLOSE);

    push();
    translate((eye2_pos[0]-0.1)+(this.lookPos/500), eye2_pos[1]-0.03);
    scale(eye_squish/100, 1);

    //iris
       fill(iris_color);
    ellipse(0, 0, 20 * size*eye_size, 20 * size*eye_size);

        if (eye_color_value == 5){
    	 fill(255, 144, 96, 20);
    } else if (eye_color_value == 4){
    	 fill(255, 183, 96, 20);
    }else {
    	fill(230, 250, 200, 20);
    }
    for(var i=0; i<8;i++) {
      ellipse(0, 0, (12+i) * size*eye_size, (12+i) * size*eye_size);
    }
    //pupil
        fill(pupil_color);
    ellipse(0, 0, 8 * size*eye_size, 8 * size*eye_size);

  pop();

  //eye highlights
      fill(255, 255, 255, 5);
    for (var i=4; i>0;i-=0.02) {
    ellipse((eye2_pos[0]-0.1)+0.07, eye2_pos[1]-0.07, i * size, i* size)
  }
  push();

  translate(eye2_pos[0], eye2_pos[1]);
    rotate(-30);
      for (var i=6; i>0;i-=0.01) {
    ellipse(0, 0, i * (size/2), i*size);
  }
  pop();

  //lower lid shadow

       for(var j=0.04; j>0; j-= 0.02){
    push();
    translate(0.02, -j);
    scale(0.98, 1)
    fill(0, 0, 0, (20/(j*30)));
    beginShape();
    	curveVertex(positions.right_eye[0][0], positions.right_eye[0][1]);
  	 	for(var i=5; i>=3;i--) {
        	curveVertex(positions.right_eye[i][0], positions.right_eye[i][1]);
    	}
    	for(var i=3; i<=5;i++) {
        	curveVertex(positions.right_eye[i][0], (positions.right_eye[i][1])+0.1);
 
    	}
    endShape(CLOSE);
    pop();
    }

//lower lid shape
beginShape();
	fill(skinMidtone_color[skin_color_value]);
    curveVertex(positions.right_eye[0][0], positions.right_eye[0][1]);
  	 	for(var i=5; i>=3;i--) {
        	curveVertex(positions.right_eye[i][0], positions.right_eye[i][1]);
    	}
    	for(var i=3; i<=5;i++) {
        	curveVertex(positions.right_eye[i][0], (positions.right_eye[i][1])+0.15);
 
    	}
endShape(CLOSE);


//eyelid shadow
    for(var j=0.01; j<0.1; j+= 0.02){
    push();
    translate(0.02, j);
    scale(0.98, 1)
     beginShape();
     fill(0, 0, 0, (20/(j*20)));	 
 		curveVertex((positions.right_eye[0][0]), (positions.right_eye[0][1]));  
       for(var i=0; i<4;i++) {
        var eyelid_value_y = ((positions.right_eye[i][1] + positions.right_eyebrow[i][1])/2.2);
        var eyelid_value_x = ((positions.right_eye[i][0] + positions.right_eyebrow[i+1][0])/2.3);
        curveVertex((eyelid_value_x), (eyelid_value_y));
    }
     for(var i=3; i>=0;i--) {
        curveVertex((positions.right_eye[i][0]), (positions.right_eye[i][1]));   
      }

    endShape(CLOSE);   

    endShape(CLOSE);   
    pop();
}

//eyelid shape

  beginShape();

     fill(skinLowlight_color[skin_color_value]);
 		curveVertex((positions.right_eye[0][0]), (positions.right_eye[0][1]));  
       for(var i=0; i<4;i++) {
        var eyelid_value_y = ((positions.right_eye[i][1] + positions.right_eyebrow[i][1])/2.2);
        var eyelid_value_x = ((positions.right_eye[i][0] + positions.right_eyebrow[i+1][0])/2.3);
        curveVertex((eyelid_value_x), (eyelid_value_y));
    }
     for(var i=3; i>=0;i--) {
        curveVertex((positions.right_eye[i][0]), (positions.right_eye[i][1]));   
      }

    endShape(CLOSE);      

//browbone shape
        beginShape();

     fill(skinMidtone_color[skin_color_value]);
       for(var i=3; i>=0;i--) {
        var eyelid_value_y = ((positions.right_eye[i][1] + positions.right_eyebrow[i][1])/2.2);
        var eyelid_value_x = ((positions.right_eye[i][0] + positions.right_eyebrow[i+1][0])/2.3);
        curveVertex((eyelid_value_x), (eyelid_value_y));
    }
	curveVertex((positions.right_eyebrow[0][0]+0.15), (positions.right_eyebrow[0][1])+0.1);
  	curveVertex((positions.right_eyebrow[1][0]+0.15), (positions.right_eyebrow[1][1])+0.1);
        curveVertex((positions.right_eyebrow[2][0]+positions.right_eyebrow[3][0])/2.5, (positions.right_eyebrow[2][1]+0.15));   
   
    endShape(CLOSE);  

   	pop(); 

   	////////////////////////////////////////eyebrows
   	//left eyebrow
     	var browScale = 0.2
    for (var j=0; j<10; j++){
    	browScale-=0.02;
        beginShape();
	    
	    fill(0, 0, 0, 30);
	    
    for(var i=1; i<3;i++) {
        vertex((positions.left_eyebrow[i+1][0]), (positions.left_eyebrow[i+1][1]+0.2));   
    }
    vertex((positions.left_eyebrow[4][0]-browScale), (positions.left_eyebrow[4][1]+0.2)-(browScale/2));  
	vertex((positions.left_eyebrow[4][0]-browScale), (positions.left_eyebrow[4][1])-(browScale/2));   
    for(var i=3; i>=0;i--) {
    	if (i!=1){
        vertex((positions.left_eyebrow[i][0]), (positions.left_eyebrow[i][1]));   
    }
    }
    endShape(CLOSE);
}


    //right eyebrow
 	var browScale = 0
    for (var j=0; j<10; j++){
    	browScale-=0.02;
        beginShape();
	    
	
	    vertex((positions.right_eyebrow[0][0]-browScale), (positions.right_eyebrow[0][1]+0.2)+(browScale/2));
	    for(var i=1; i<4;i++) {
	        vertex((positions.right_eyebrow[i-1][0]), (positions.right_eyebrow[i-1][1]+0.2));   
	    }
	    for(var i=4; i>=0;i--) {
	    	if (i!= 3){
	        vertex((positions.right_eyebrow[i][0]), (positions.right_eyebrow[i][1]));   
	    }
	    }
	    vertex((positions.right_eyebrow[0][0]-browScale), (positions.right_eyebrow[0][1])+(browScale/2));

	    endShape(CLOSE);
	  
	}

	    ////////////////////////////////////////////// nose

	 //bottom of nose

    beginShape();
    fill(skinShadow_color[skin_color_value]);
    stroke(0, 0, 0, 80)
    strokeWeight(0.02);
    vertex(positions.nose_tip[positions.nose_tip.length-1][0], positions.nose_tip[positions.nose_tip.length-1][1]);
     vertex(positions.nose_bridge[positions.nose_bridge.length-1][0], positions.nose_bridge[positions.nose_bridge.length-1][1]);
    for(var i=0; i<positions.nose_tip.length;i++) {
      vertex(positions.nose_tip[i][0], positions.nose_tip[i][1]);
    }
	vertex(positions.nose_bridge[positions.nose_bridge.length-1][0], positions.nose_bridge[positions.nose_bridge.length-1][1]);
    endShape(CLOSE);

    //nose bridge

noStroke();
    fill(skinMidtone_color[skin_color_value]);
    beginShape();
    vertex(((positions.nose_bridge[0][0]+positions.right_eye[4][0])/2)-0.3, positions.nose_bridge[0][1]);
    vertex(((positions.nose_bridge[0][0]+positions.left_eye[4][0])/2)+0.3, positions.nose_bridge[0][1]);
	vertex(positions.nose_tip[0][0], positions.nose_tip[0][1]);
	vertex(positions.nose_tip[2][0], positions.nose_bridge[positions.nose_bridge.length-1][1]+0.3);
     vertex(positions.nose_tip[4][0], positions.nose_tip[4][1]);
    endShape(CLOSE);
     
    fill(noseColor[skin_color_value]);
    var noseWidth = 0;
    for (var j=0; j<20; j++){
    	noseWidth+=0.02
    beginShape();
    vertex(((positions.nose_bridge[0][0]+positions.right_eye[4][0])/2)-0.3, positions.nose_bridge[0][1]+noseWidth);
    vertex(((positions.nose_bridge[0][0]+positions.left_eye[4][0])/2)+0.3, positions.nose_bridge[0][1]+noseWidth);
	vertex(positions.nose_tip[0][0]+noseWidth, positions.nose_tip[0][1]);
	vertex(positions.nose_tip[2][0], positions.nose_bridge[positions.nose_bridge.length-1][1]+0.3);
     vertex(positions.nose_tip[4][0]-noseWidth, positions.nose_tip[4][1]);
    endShape(CLOSE);
}

	//nose highlight
     fill(noseHighlight[skin_color_value]);
     var highlightWidth = 0.2;
     for (var j=0; j<20; j++){
     	highlightWidth -= 0.01;
    beginShape();
  vertex(((positions.nose_bridge[1][0]+positions.right_eye[4][0])/2)-0.4, positions.nose_bridge[1][1]+highlightWidth);
    vertex(((positions.nose_bridge[1][0]+positions.left_eye[4][0])/2)+0.4, positions.nose_bridge[1][1]+highlightWidth);
  vertex(positions.nose_tip[1][0]+highlightWidth, positions.nose_bridge[positions.nose_bridge.length-1][1]+0.2);
        vertex(positions.nose_tip[2][0], positions.nose_bridge[positions.nose_bridge.length-1][1]+0.3);
      
      vertex(positions.nose_tip[3][0]-highlightWidth, positions.nose_bridge[positions.nose_bridge.length-1][1]+0.2);
    endShape(CLOSE);
}
}


  /*// set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
    this.lookPos = settings[0];
    this.eyeAngle = settings[1];
    this.skinColor = settings[2];
    this.eyeColor = settings[3];
    this.eyeSize = settings[4];
  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    properties = new Array(4);
    properties[0] = this.lookPos;
    properties[1] = this.eyeAngle;
    properties[2] = this.skinColor;
    properties[3] = this.eyeColor;
    properties[4] = this.eyeSize;
    return properties;
  }
}

// given a point, return the average
function average_point(list) {
  var sum_x = 0;
  var sum_y = 0;
  var num_points = 0;
  for(var i=0; i<list.length; i++) {
    sum_x += list[i][0];
    sum_y += list[i][1];
    num_points += 1; 
  }
  return [sum_x / num_points, sum_y / num_points];
}

dockerty_training_values.json


        
{
 "000001": [
    100,
    90,
    14,
    100,
    47
  ],
  "000002": [
    44,
    72,
    0,
    66,
    42
  ],
  "000058": [
    75,
    100,
    0,
    0,
    31
  ],
  "000005": [
    50,
    100,
    23,
    61,
    30
  ],
  "000006": [
    64,
    84,
    51,
    100,
    36
  ],
  "000007": [
    50,
    100,
    39,
    72,
    23
  ],
  "000009": [
    8,
    100,
    24,
    64,
    34
  ],
  "000010": [
    50,
    100,
    19,
    0,
    73
  ],
  "000013": [
    76,
    82,
    11,
    0,
    28
  ],
  "000014": [
    21,
    100,
    69,
    100,
    42
  ],
  "000015": [
    36,
    84,
    20,
    23,
    0
  ],
  "000016": [
    100,
    100,
    23,
    76,
    30
  ],
  "000018": [
    17,
    100,
    0,
    26,
    20
  ],
  "000020": [
    73,
    100,
    21,
    15,
    9
  ],
  "000023": [
    100,
    72,
    28,
    0,
    33
  ],
  "000025": [
    58,
    100,
    50,
    54,
    23
  ],
  "000028": [
    50,
    100,
    32,
    86,
    71
  ],
  "000029": [
    36,
    100,
    19,
    0,
    31
  ],
  "000030": [
    9,
    100,
    50,
    80,
    50
  ],
  "000031": [
    50,
    100,
    23,
    0,
    6
  ],
  "000032": [
    58,
    92,
    9,
    59,
    23
  ],
  "000035": [
    44,
    100,
    0,
    58,
    31
  ],
  "000037": [
    65,
    62,
    50,
    100,
    50
  ],
  "000038": [
    50,
    100,
    0,
    0,
    12
  ],
  "000040": [
    50,
    100,
    26,
    71,
    47
  ],
  "000041": [
    28,
    38,
    50,
    75,
    64
  ],
  "000042": [
    31,
    100,
    0,
    0,
    43
  ],
  "000043": [
    37,
    100,
    0,
    57,
    44
  ],
  "000044": [
    45,
    100,
    69,
    100,
    65
  ],
  "000045": [
    59,
    100,
    32,
    75,
    57
  ],
  "000047": [
    90,
    100,
    38,
    80,
    74
  ],
  "000048": [
    82,
    100,
    0,
    80,
    38
  ],
  "000050": [
    39,
    69,
    25,
    75,
    38
  ],
  "000051": [
    73,
    100,
    23,
    100,
    32
  ],
  "000052": [
    62,
    100,
    0,
    0,
    37
  ],
  "000054": [
    23,
    100,
    24,
    0,
    64
  ],
  "000055": [
    37,
    84,
    22,
    60,
    31
  ],
  "000056": [
    29,
    90,
    20,
    0,
    38
  ],
  "000060": [
    65,
    62,
    50,
    100,
    43
  ],
  "000064": [
    48,
    96,
    21,
    22,
    29
  ],
  "000065": [
    49,
    100,
    38,
    70,
    50
  ],
  "000068": [
    25,
    100,
    14,
    76,
    21
  ],
  "000069": [
    45,
    100,
    25,
    65,
    22
  ],
  "000071": [
    50,
    100,
    23,
    61,
    45
  ],
  "000073": [
    29,
    61,
    23,
    29,
    61
  ],
  "000076": [
    4,
    100,
    21,
    78,
    26
  ],
  "000077": [
    100,
    79,
    0,
    0,
    74
  ],
  "000078": [
    7,
    100,
    31,
    100,
    60
  ],
  "000079": [
    85,
    100,
    40,
    82,
    40
  ],
  "000080": [
    26,
    100,
    21,
    24,
    36
  ],
  "000081": [
    51,
    82,
    37,
    77,
    23
  ],
  "000083": [
    43,
    100,
    27,
    55,
    20
  ],
  "000085": [
    52,
    100,
    24,
    32,
    88
  ],
  "000086": [
    8,
    100,
    31,
    63,
    59
  ],
  "000088": [
    90,
    94,
    23,
    89,
    63
  ],
  "000091": [
    54,
    88,
    11,
    20,
    44
  ],
  "000092": [
    17,
    100,
    10,
    25,
    45
  ],
  "000096": [
    33,
    100,
    16,
    15,
    53
  ],
  "000097": [
    57,
    100,
    30,
    0,
    62
  ],
  "000099": [
    27,
    100,
    0,
    26,
    50
  ],
  "000100": [
    58,
    77,
    27,
    72,
    58
  ],
  "000103": [
    27,
    100,
    18,
    30,
    49
  ],
  "000104": [
    36,
    100,
    32,
    19,
    37
  ],
  "000106": [
    9,
    100,
    50,
    63,
    80
  ],
  "000108": [
    43,
    100,
    21,
    0,
    45
  ],
  "000109": [
    66,
    100,
    29,
    24,
    33
  ],
  "000110": [
    27,
    87,
    27,
    54,
    100
  ],
  "000111": [
    83,
    100,
    35,
    22,
    70
  ],
  "000114": [
    44,
    100,
    30,
    80,
    46
  ],
  "000115": [
    60,
    82,
    30,
    56,
    22
  ],
  "000116": [
    45,
    100,
    26,
    80,
    31
  ],
  "000117": [
    64,
    89,
    71,
    94,
    71
  ],
  "000118": [
    17,
    100,
    37,
    98,
    79
  ],
  "000121": [
    48,
    100,
    16,
    100,
    55
  ],
  "000122": [
    43,
    91,
    27,
    57,
    55
  ],
  "000125": [
    50,
    100,
    30,
    20,
    36
  ],
  "000126": [
    79,
    100,
    14,
    0,
    86
  ],
  "000129": [
    72,
    97,
    34,
    27,
    31
  ],
  "000131": [
    100,
    100,
    16,
    100,
    66
  ],
  "000132": [
    52,
    100,
    48,
    87,
    67
  ],
  "000133": [
    48,
    100,
    19,
    26,
    57
  ],
  "000134": [
    21,
    69,
    79,
    85,
    48
  ],
  "000135": [
    96,
    79,
    38,
    100,
    70
  ],
  "000137": [
    80,
    93,
    19,
    66,
    17
  ],
  "000140": [
    29,
    100,
    30,
    0,
    59
  ],
  "000142": [
    38,
    96,
    25,
    27,
    41
  ],
  "000143": [
    66,
    100,
    24,
    2,
    43
  ],
  "000145": [
    46,
    100,
    7,
    72,
    68
  ],
  "000146": [
    45,
    56,
    37,
    100,
    34
  ],
  "000147": [
    67,
    100,
    10,
    0,
    66
  ],
  "000148": [
    75,
    47,
    10,
    28,
    37
  ],
  "000150": [
    40,
    100,
    19,
    11,
    39
  ],
  "000151": [
    34,
    100,
    38,
    100,
    48
  ],
  "000152": [
    41,
    94,
    25,
    57,
    23
  ],
  "000153": [
    44,
    98,
    17,
    68,
    33
  ],
  "000155": [
    50,
    100,
    29,
    100,
    88
  ],
  "000156": [
    50,
    75,
    24,
    49,
    74
  ],
  "000160": [
    40,
    100,
    26,
    70,
    36
  ],
  "000161": [
    45,
    100,
    14,
    23,
    34
  ],
  "000157": [
    50,
    100,
    50,
    50,
    71
  ]
}



    

felizardo_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */
// other variables can be in here too
// these control the colors used

function FelizardoFace() {
    const bg_color = [225, 206, 187];
    const fg_color = [151, 102, 52];
    const stroke_color = [95, 52, 8];

    // these are state variables for a face
    // (your variables may be different)
    this.tilt_value = 0;
    this.mouth_value = 1;
    this.eye_size = 0;
    this.eyelid = 0;
    this.mouth_open = 1;

    /*
     * Draw a face with position lists that include:
     *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
     *    bottom_lip, top_lip, nose_tip, nose_bridge, 
     */
    this.draw = function(positions) {

        colorMode(HSL, 360, 100, 100, 1);

        //head
        let head_location = average_point(positions.chin)

        //eyes
        let eye_L = average_point(positions.left_eye)
        let eye_R = average_point(positions.right_eye)

        //mouth points 
        
        //*top
        let m_left = positions.top_lip[0];
        let m_m_left = positions.top_lip[1];
        let m_top = positions.top_lip[3];
        let m_m_right = positions.top_lip[5]
        let m_right = positions.top_lip[6];
        let m_bot = positions.bottom_lip[9];

        //bottom
        let m_b1 = positions.bottom_lip[0];
        let m_b2 = positions.bottom_lip[1];
        let m_b3 = positions.bottom_lip[4];
        let m_b4 = positions.bottom_lip[6];
        //mouth pts for teeth
        let m_teeth = positions.top_lip[10];
        let m_teeth2 = positions.top_lip[8];
        let m_teeth3 = positions.top_lip[7];
        let m_teeth4 = positions.top_lip[11];

        //brow points
        let b_r1 = positions.right_eyebrow[0];
        let b_r2 = positions.right_eyebrow[4];
        let b_l1 = positions.left_eyebrow[0];
        let b_l2 = positions.left_eyebrow[4];

        //cheek pts
        let ch_1 = positions.chin[2];
        let ch_2 = positions.chin[14];

        //CHIN PTS

        let b_ch_1 = positions.chin[5];
        let b_ch_2 = positions.chin[7];
        let b_ch_3 = positions.chin[8];
        let b_ch_4 = positions.chin[9];
        let b_ch_5 = positions.chin[11];



        //*******************************************************************************
        //**********************		E 	Y 	E 	S 		************************************
        //*******************************************************************************



        //**************** e 	y 	e 	 s 	h 	a 	p 	e **************************

        noStroke();
        fill(255);
        ellipse(eye_L[0], eye_L[1], .9 * this.eye_size, .9 * this.eye_size);
        ellipse(eye_R[0], eye_R[1], .9 * this.eye_size, .9 * this.eye_size);

        //**************** e 	y 	e 	 c 	o 	l 	o 	u 	r  **************************

        //******cornea
        fill(1 * this.eye_colour, 75, 50, 1); // eye colour
        ellipse(eye_L[0], eye_L[1], .6 * this.eye_size, .6 * this.eye_size);
        ellipse(eye_R[0], eye_R[1], .6 * this.eye_size, .6 * this.eye_size);

        //********* iris
        fill(0);
        ellipse(eye_L[0], eye_L[1], .2 * this.eye_size, .2 * this.eye_size);
        ellipse(eye_R[0], eye_R[1], .2 * this.eye_size, .2 * this.eye_size);

        //************* e 	y 	e 	l 	i 	d 	s 	*******************

        //**********	SURPRISED

        if (this.eyelid == 0) {
            fill(0);
            arc(eye_L[0], eye_L[1], 1 * this.eye_size, 1 * this.eye_size, 15, 165, CHORD);
            arc(eye_R[0], eye_R[1], 1 * this.eye_size, 1 * this.eye_size, 15, 165, CHORD);
        }

        //*********** MELLOW
        if (this.eyelid == 1) {
            fill(0);
            arc(eye_L[0], eye_L[1], 1 * this.eye_size, 1 * this.eye_size, -180, 0, CHORD);
            arc(eye_R[0], eye_R[1], 1 * this.eye_size, 1 * this.eye_size, -180, 0, CHORD);
        }

        //*********** ANGRY
        if (this.eyelid == 2) {
            fill(0);
            arc(eye_L[0], eye_L[1], 1 * this.eye_size, 1 * this.eye_size, -150, 20, CHORD);
            arc(eye_R[0], eye_R[1], 1 * this.eye_size, 1 * this.eye_size, 160, -30, CHORD);
            //lower lids
            arc(eye_L[0], eye_L[1], 1 * this.eye_size, 1 * this.eye_size, -150, 20, CHORD);
            arc(eye_R[0], eye_R[1], 1 * this.eye_size, 1 * this.eye_size, 160, -30, CHORD);
        }
        //*********** SCHLEEP
        if (this.eyelid == 3) {
            fill(0);
            arc(eye_L[0], eye_L[1], 1 * this.eye_size, 1 * this.eye_size, -180, 0, CHORD);
            arc(eye_R[0], eye_R[1], 1 * this.eye_size, 1 * this.eye_size, -180, 0, CHORD);
            //lower lids
            arc(eye_L[0], eye_L[1], 1 * this.eye_size, 1 * this.eye_size, 20, 160, CHORD);
            arc(eye_R[0], eye_R[1], 1 * this.eye_size, 1 * this.eye_size, 20, 160, CHORD);

        }

        //*******************************************************************************
        //**********************		C 	H 	I 	N 		******************************
        //*******************************************************************************



        stroke(0);
        strokeWeight(.02);
        line(b_ch_2[0], b_ch_2[1], ch_1[0], ch_1[1]); //cheek to jaw connector
        line(b_ch_4[0], b_ch_4[1], ch_2[0], ch_2[1]);

        fill(20, 0, this.skin);
        noStroke();
        beginShape();
        vertex(b_ch_1[0], b_ch_1[1]);
        vertex(b_ch_2[0], b_ch_2[1] + 1 * this.chin);
        vertex(b_ch_3[0], b_ch_3[1] + 1 * this.chin);
        vertex(b_ch_4[0], b_ch_4[1] + 1 * this.chin);
        vertex(b_ch_5[0], b_ch_5[1]);
        endShape();

        fill(0);
        ellipse(b_ch_2[0], b_ch_2[1] - .08, .07, .07); //peg
        ellipse(b_ch_4[0], b_ch_4[1] - .08, .07, .07);



        //*******************************************************************************
        //**********************		M 	O 	U 	T 	H 		**************************
        //*******************************************************************************



        //********** bottom lip *check if working properly.


        //cheek pivot
        fill(0);
        ellipse(ch_2[0], ch_2[1], .2, .2);
        ellipse(ch_1[0], ch_1[1], .2, .2);

        //cheek wires
        strokeWeight(.02);
        stroke(0);
        noFill();
        line(ch_2[0], ch_2[1], m_b1[0], m_b1[1]);
        line(ch_2[0], ch_2[1], m_b1[0], (m_b1[1] * this.mouth_open) + .05);
        line(ch_1[0], ch_1[1], m_b4[0], m_b4[1]);
        line(ch_1[0], ch_1[1], m_b4[0], (m_b4[1] * this.mouth_open) + .05);
      
        stroke(360, 70, 60, 1); //bottom lip colour
        strokeWeight(.4);
        noFill();
        bezier(m_b1[0], m_b1[1], m_b2[0], m_b2[1] * this.mouth_open, m_b3[0], m_b3[1] * this.mouth_open, m_b4[0], m_b4[1]);

        //********** top_lip

        noFill();
        strokeWeight(.5);
        stroke(360, 100, 60, 1); //thick top lip colour
        bezier(m_left[0], m_left[1], m_m_left[0], m_m_left[1] - .2, m_m_right[0], m_m_right[1] - .2, m_right[0], m_right[1]);
        strokeWeight(.3);
        stroke(360, 100, 40, 1); //top lip shade
        bezier(m_left[0], m_left[1] + .1, m_m_left[0], m_m_left[1], m_m_right[0], m_m_right[1], m_right[0], m_right[1] + .1);


        //************* top teeth

        fill(225);
        noStroke();
        arc(m_teeth3[0], m_teeth3[1], .45 * .5, .7 * .5, 15 + 20, 165, CHORD); //right back
        arc(m_teeth3[0] - .2, m_teeth3[1], .45 * .5, .7 * .5, 15, 165, CHORD); //right back 2
		arc(m_teeth4[0], m_teeth4[1], .45 * .5, .7 * .5, 15 - 20, 165 - 10, CHORD); //left back
        arc(m_teeth4[0] + .2, m_teeth4[1], .45 * .5, .7 * .5, 15, 165, CHORD); //left back 2
        fill(255);
        arc(m_teeth[0], m_teeth[1] - .15, .45, .7, 15, 165, CHORD);
        arc(m_teeth2[0], m_teeth2[1] - .15, .45, .7, 15, 165, CHORD);



        //*******************************************************************************
        //**********************		M or F		**************************************
        //*******************************************************************************


        if (this.horn == 0) {
            fill(100, 0, 50);

            ellipse(head_location[0], head_location[1] - 3.29, .5, .25);
            fill(20, 0, this.skin);
            ellipse(head_location[0], head_location[1] - 3.31, .5, .2);
            stroke(200, 0, this.skin - 10);
            strokeWeight(.1);
            line(head_location[0], head_location[1] - 3.4, head_location[0], head_location[1] - 4.5)
            noStroke(0);
            fill(20, 0, this.skin + 10);
            ellipse(head_location[0], head_location[1] - 4.5, .3, .3);

        }

        //*******************************************************************************
        //**********************		B 	R 	O 	W 	S		**************************
        //*******************************************************************************


        //eyebrow background mechanics
        fill(0);
        strokeWeight(.02);
        stroke(0);
        ellipse(head_location[0], head_location[1] - 3, .2, .2);
        line(head_location[0], head_location[1] - 3, b_l1[0] * .8, b_l1[1] * 1.4 * this.eyebrows);
        line(head_location[0], head_location[1] - 3, b_l2[0] * .8, b_l2[1] * 1.1 * this.eyebrows);
        line(head_location[0], head_location[1] - 3, b_r1[0] * .8, b_r1[1] * 1.1 * this.eyebrows);
        line(head_location[0], head_location[1] - 3, b_r2[0] * .8, b_r2[1] * 1.4 * this.eyebrows);

        strokeWeight(.55);
        stroke(20, 0, this.skin);
        line(b_l1[0] * .8, b_l1[1] * 1.4 * this.eyebrows, b_l2[0] * .8, b_l2[1] * 1.1 * this.eyebrows); // left eyebrow
        line(b_r1[0] * .8, b_r1[1] * 1.1 * this.eyebrows, b_r2[0] * .8, b_r2[1] * 1.4 * this.eyebrows); // right eyebrow


        fill(0)
        noStroke();
        ellipse(b_l1[0] * .8, b_l1[1] * 1.4 * this.eyebrows, .06, .06);
        ellipse(b_l2[0] * .8, b_l2[1] * 1.1 * this.eyebrows, .06, .06);
        ellipse(b_r1[0] * .8, b_r1[1] * 1.1 * this.eyebrows, .06, .06);
        ellipse(b_r2[0] * .8, b_r2[1] * 1.4 * this.eyebrows, .06, .06);



        //*******************************************************************************
        //*******************************************************************************
        //*******************************************************************************
    }




    /* set internal properties based on list numbers 0-100 */
    //put all slider elements here first
    this.setProperties = function(settings) {
        this.eye_size = map(settings[0], 0, 100, .9, 1.1);
        this.eyelid = int(map(settings[1], 0, 100, 0, 4));
        this.eyebrows = map(settings[2], 0, 100, .9, 1.1);
        this.mouth_open = map(settings[4], 0, 100, 1, 1.5);
        this.eye_colour = map(settings[3], 0, 100, 1, 359);
        this.horn = int(map(settings[5], 0, 100, 0, 1));
        this.skin = map(settings[6], 0, 100, 100, 50);
        this.chin = map(settings[7], 0, 100, 0, 1);

    }

    /* get internal properties as list of numbers 0-100 */
    //then wire them up here in this order (flip it round)

    this.getProperties = function() {
        let settings = new Array(8);

        settings[0] = map(this.eye_size, .9, 1.1, 0, 100);
        settings[1] = map(this.eyelid, 0, 4, 0, 100);
        settings[2] = map(this.eyebrows, 1, 1.5, 0, 100);
        settings[4] = map(this.mouth_open, 1, 1.5, 0, 100);
        settings[3] = map(this.eye_colour, 1, 359, 0, 100);
        settings[5] = map(this.horn, 0, 1, 0, 100);
        settings[6] = map(this.skin, 100, 50, 0, 100);
        settings[7] = map(this.chin, 0, 1, 0, 100);

        return settings;
    }
}

function average_point(list) {
    var sum_x = 0;
    var sum_y = 0;
    var num_points = 0;
    for (var i = 0; i < list.length; i++) {
        sum_x += list[i][0];
        sum_y += list[i][1];
        num_points += 1;
    }
    return [sum_x / num_points, sum_y / num_points];
}

felizardo_training_values.json

{
  "000001": [
    24,
    56,
    -12,
    27,
    42,
    100,
    69,
    1
  ],
  "000002": [
    50.999999999999964,
    0,
    -19.999999999999996,
    0,
    33.00000000000001,
    100,
    100,
    12
  ],
  "000058": [
    51.99999999999997,
    75,
    -14.79999999999999,
    56.00000000000001,
    29.000000000000004,
    100,
    81,
    2
  ],
  "000005": [
    49.99999999999997,
    50,
    -19.999999999999996,
    28.000000000000004,
    10.999999999999988,
    100,
    76,
    32
  ],
  "000006": [
    48.99999999999997,
    50,
    -19.999999999999996,
    91,
    50,
    100,
    50,
    26
  ],
  "000007": [
    49.99999999999997,
    25,
    -19.999999999999996,
    70,
    22.00000000000002,
    0,
    73,
    50
  ],
  "000009": [
    49.99999999999997,
    50,
    -19.999999999999996,
    0,
    78.00000000000003,
    100,
    63,
    0
  ],
  "000010": [
    49.99999999999997,
    50,
    -19.999999999999996,
    16,
    50,
    100,
    62,
    24
  ],
  "000013": [
    49.99999999999997,
    0,
    -14.399999999999991,
    18,
    50,
    0,
    50,
    50
  ],
  "000014": [
    49.99999999999997,
    50,
    -19.999999999999996,
    65,
    50,
    100,
    32,
    50
  ],
  "000015": [
    0,
    75,
    -19.999999999999996,
    97,
    100,
    0,
    82,
    38
  ],
  "000016": [
    49.99999999999997,
    50,
    -19.999999999999996,
    96,
    50,
    0,
    56.00000000000001,
    22
  ],
  "000018": [
    0,
    75,
    -19.999999999999996,
    17,
    18.000000000000014,
    100,
    77,
    2
  ],
  "000020": [
    8.000000000000004,
    75,
    -19.999999999999996,
    92,
    100,
    0,
    67,
    34
  ],
  "000028": [
    0,
    50,
    -19.999999999999996,
    22,
    50,
    100,
    50,
    3
  ],
  "000023": [
    0,
    50,
    -15.199999999999992,
    90,
    50,
    0,
    87,
    20
  ],
  "000025": [
    0,
    50,
    -19.999999999999996,
    89,
    50,
    0,
    42,
    0
  ],
  "000029": [
    0,
    75,
    -11.99999999999999,
    20,
    29.000000000000004,
    100,
    86,
    26
  ],
  "000030": [
    100,
    100,
    11.20000000000001,
    51,
    8.000000000000007,
    0,
    70,
    19
  ],
  "000031": [
    15.000000000000007,
    75,
    -15.999999999999993,
    30,
    50,
    100,
    32,
    64
  ],
  "000032": [
    0,
    25,
    20.000000000000018,
    98,
    89.00000000000001,
    0,
    63,
    48
  ],
  "000035": [
    100,
    100,
    -19.999999999999996,
    69,
    45.000000000000014,
    100,
    100,
    13
  ],
  "000037": [
    61.99999999999998,
    50,
    -19.999999999999996,
    75,
    41.99999999999999,
    0,
    31,
    60
  ],
  "000038": [
    100,
    0,
    20.000000000000018,
    86,
    37.999999999999986,
    0,
    75,
    31
  ],
  "000040": [
    49.99999999999997,
    50,
    10.000000000000009,
    67,
    54,
    100,
    82,
    0
  ],
  "000041": [
    70.99999999999999,
    0,
    20.000000000000018,
    69,
    50.99999999999998,
    0,
    59,
    45
  ],
  "000042": [
    100,
    100,
    8.000000000000007,
    8,
    50,
    100,
    62,
    0
  ],
  "000043": [
    48.99999999999997,
    100,
    15.600000000000014,
    56.00000000000001,
    23,
    100,
    69,
    0
  ],
  "000044": [
    100,
    25,
    0,
    66,
    14.000000000000012,
    100,
    20,
    18
  ],
  "000045": [
    22.00000000000001,
    0,
    4.400000000000004,
    11,
    46,
    100,
    66,
    9
  ],
  "000047": [
    49.99999999999997,
    50,
    0,
    68,
    50,
    100,
    28.999999999999996,
    0
  ],
  "000048": [
    100,
    75,
    1.200000000000001,
    61,
    43.000000000000014,
    0,
    100,
    57.99999999999999
  ],
  "000050": [
    100,
    100,
    20.000000000000018,
    70,
    98,
    0,
    73,
    83
  ],
  "000051": [
    49.99999999999997,
    0,
    -16.39999999999999,
    46,
    50,
    0,
    57.99999999999999,
    0
  ],
  "000052": [
    55.99999999999997,
    25,
    12.800000000000011,
    71,
    58.999999999999986,
    0,
    56.00000000000001,
    46
  ],
  "000054": [
    100,
    75,
    20.000000000000018,
    25,
    66.00000000000001,
    100,
    61,
    0
  ],
  "000055": [
    100,
    25,
    2.400000000000002,
    72,
    39.000000000000014,
    0,
    70,
    44
  ],
  "000056": [
    100,
    25,
    4.800000000000004,
    65,
    62.000000000000014,
    0,
    80,
    0
  ],
  "000060": [
    19.00000000000001,
    100,
    -19.999999999999996,
    67,
    100,
    0,
    11,
    36
  ],
  "000064": [
    0,
    0,
    4.800000000000004,
    88,
    69,
    0,
    63,
    32
  ],
  "000065": [
    0,
    25,
    -5.999999999999983,
    64,
    41.99999999999999,
    0,
    28.000000000000004,
    23
  ],
  "000068": [
    97,
    25,
    18.000000000000014,
    40,
    79.99999999999999,
    0,
    22,
    37
  ],
  "000069": [
    100,
    100,
    20.000000000000018,
    69,
    100,
    0,
    67,
    44
  ],
  "000071": [
    62.99999999999998,
    0,
    -19.199999999999996,
    23,
    50,
    100,
    72,
    0
  ],
  "000073": [
    100,
    75,
    -6.799999999999984,
    67,
    66.00000000000001,
    100,
    70,
    0
  ],
  "000076": [
    100,
    75,
    20.000000000000018,
    74,
    81.99999999999999,
    0,
    65,
    55.00000000000001
  ],
  "000077": [
    49.99999999999997,
    75,
    -7.999999999999985,
    60,
    25.99999999999998,
    100,
    71,
    0
  ],
  "000078": [
    100,
    75,
    5.200000000000005,
    74,
    64.99999999999999,
    100,
    77,
    18
  ],
  "000079": [
    15.000000000000007,
    100,
    10.000000000000009,
    46,
    50,
    0,
    33,
    30
  ],
  "000080": [
    100,
    25,
    6.000000000000005,
    72,
    23,
    0,
    57.99999999999999,
    26
  ],
  "000081": [
    100,
    0,
    12.400000000000011,
    65,
    50.99999999999998,
    0,
    77,
    50
  ],
  "000083": [
    100,
    75,
    10.80000000000001,
    0,
    50,
    100,
    91,
    0
  ],
  "000085": [
    93,
    100,
    12.00000000000001,
    0,
    22.00000000000002,
    100,
    74,
    0
  ],
  "000086": [
    100,
    75,
    18.400000000000016,
    0,
    62.000000000000014,
    100,
    88,
    0
  ],
  "000088": [
    0,
    100,
    3.600000000000003,
    79,
    20.999999999999996,
    100,
    100,
    0
  ],
  "000091": [
    49.99999999999997,
    50,
    14.400000000000013,
    70,
    25.99999999999998,
    0,
    64,
    23
  ],
  "000092": [
    12.000000000000007,
    0,
    15.200000000000014,
    23,
    50,
    100,
    50,
    0
  ],
  "000096": [
    57.99999999999997,
    25,
    10.40000000000001,
    91,
    69,
    100,
    26,
    0
  ],
  "000097": [
    69.99999999999999,
    75,
    8.800000000000008,
    40,
    14.999999999999991,
    100,
    50,
    0
  ],
  "000099": [
    100,
    75,
    20.000000000000018,
    87,
    52,
    100,
    60,
    23
  ],
  "000100": [
    100,
    100,
    5.600000000000005,
    28.000000000000004,
    37.000000000000014,
    100,
    81,
    0
  ],
  "000103": [
    51.99999999999997,
    50,
    0,
    66,
    50,
    100,
    50,
    0
  ],
  "000104": [
    100,
    75,
    2.8000000000000025,
    85,
    33.00000000000001,
    0,
    50,
    50
  ],
  "000106": [
    93,
    0,
    20.000000000000018,
    90,
    66.00000000000001,
    100,
    30,
    0
  ],
  "000108": [
    49.99999999999997,
    50,
    -8.399999999999984,
    20,
    50,
    100,
    73,
    0
  ],
  "000109": [
    49.99999999999997,
    100,
    8.400000000000007,
    74,
    49.00000000000002,
    0,
    54,
    27
  ],
  "000110": [
    100,
    75,
    1.200000000000001,
    91,
    58.00000000000001,
    100,
    76,
    0
  ],
  "000111": [
    100,
    75,
    20.000000000000018,
    33,
    69,
    100,
    0,
    0
  ],
  "000114": [
    49.99999999999997,
    50,
    0,
    71,
    50,
    0,
    50,
    50
  ],
  "000115": [
    49.99999999999997,
    50,
    0,
    46,
    0,
    0,
    50,
    50
  ],
  "000116": [
    100,
    100,
    0,
    68,
    50,
    0,
    79,
    36
  ],
  "000117": [
    100,
    25,
    -15.59999999999999,
    73,
    35.00000000000001,
    100,
    0,
    0
  ],
  "000118": [
    49.99999999999997,
    50,
    9.200000000000008,
    69,
    50,
    100,
    33,
    2
  ],
  "000121": [
    49.99999999999997,
    0,
    0,
    62,
    50,
    100,
    50,
    0
  ],
  "000122": [
    100,
    25,
    2.0000000000000018,
    42,
    75,
    100,
    100,
    0
  ],
  "000125": [
    96,
    0,
    20.000000000000018,
    53,
    60.999999999999986,
    0,
    43,
    27
  ],
  "000126": [
    49.99999999999997,
    50,
    0,
    50,
    50,
    100,
    76,
    0
  ],
  "000129": [
    49.99999999999997,
    50,
    0.40000000000000036,
    62,
    24.00000000000002,
    0,
    73,
    43
  ],
  "000131": [
    100,
    75,
    6.000000000000005,
    72,
    54,
    100,
    26,
    0
  ],
  "000132": [
    100,
    75,
    7.600000000000007,
    71,
    41.99999999999999,
    100,
    0,
    0
  ],
  "000133": [
    92,
    75,
    17.200000000000017,
    22,
    28.000000000000025,
    100,
    33,
    0
  ],
  "000134": [
    49.99999999999997,
    50,
    7.200000000000006,
    65,
    41.000000000000014,
    0,
    0,
    50
  ],
  "000135": [
    100,
    0,
    0,
    63,
    10.999999999999988,
    0,
    24,
    37
  ],
  "000137": [
    0,
    75,
    -7.5999999999999845,
    46,
    29.000000000000004,
    0,
    85,
    17
  ],
  "000140": [
    100,
    100,
    -2.39999999999998,
    22,
    20.999999999999996,
    100,
    100,
    0
  ],
  "000142": [
    88.99999999999999,
    75,
    4.400000000000004,
    90,
    56.999999999999986,
    100,
    100,
    0
  ],
  "000143": [
    100,
    25,
    20.000000000000018,
    86,
    69,
    0,
    50,
    35
  ],
  "000145": [
    100,
    75,
    20.000000000000018,
    76,
    50,
    100,
    75,
    0
  ],
  "000146": [
    93,
    100,
    20.000000000000018,
    89,
    37.000000000000014,
    100,
    67,
    0
  ],
  "000147": [
    94,
    100,
    20.000000000000018,
    50,
    50,
    100,
    67,
    0
  ],
  "000148": [
    100,
    75,
    5.200000000000005,
    76,
    62.999999999999986,
    100,
    67,
    2
  ],
  "000150": [
    49.99999999999997,
    50,
    0,
    100,
    28.000000000000025,
    0,
    100,
    14.000000000000002
  ],
  "000151": [
    0,
    100,
    14.000000000000012,
    68,
    50,
    100,
    79,
    0
  ],
  "000152": [
    100,
    75,
    7.200000000000006,
    71,
    50,
    0,
    92,
    40
  ],
  "000153": [
    49.99999999999997,
    50,
    0,
    85,
    50,
    0,
    83,
    36
  ],
  "000155": [
    93,
    100,
    12.800000000000011,
    0,
    49.00000000000002,
    100,
    65,
    0
  ],
  "000156": [
    100,
    100,
    20.000000000000018,
    26,
    33.00000000000001,
    100,
    74,
    0
  ],
  "000157": [
    49.99999999999997,
    75,
    6.000000000000005,
    16,
    23,
    100,
    81,
    0
  ],
  "000160": [
    49.99999999999997,
    50,
    0,
    69,
    25.99999999999998,
    0,
    79,
    83
  ],
  "000161": [
    100,
    75,
    8.000000000000007,
    70,
    33.999999999999986,
    100,
    93,
    0
  ]
}

gambles_anim.js

function gambles_draw_one_frame(cur_frac) {
  // note: to clear the screen draw a rectangle
  // that is width x height - like this
  noStroke();
  fill(10);
  rect(0, 0, width, height);

  // note: all shape sizes, line widths, etc. should be a
  // function of width and height
  let rect_width = height / 10.0;
  let half_width = rect_width / 2;

  // note: animation should progress depending on the 
  // value of cur_frac which goes from 0 to 1, and it
  // should loop seamlessly
  let cur_x = map(cur_frac, 0, 1, 0, width) - half_width;

  fill(200);
  // draw the rect moving across the screen
  rect(cur_x, 0, rect_width, height);
  // a second version (offscreen) for when it loops back around
  rect(cur_x+width, 0, rect_width, height);
  rect(cur_x-width, 0, rect_width, height);

  // note: you can draw optional things depending on "debugView"
  if (debugView) {
    // we'll draw our "keyframes"
    noFill();
    stroke(255, 0, 0);
    strokeWeight(height/100);
    // here we "plug in" the values when cur_frac is 0
    rect(-half_width, 0, rect_width, height);
    rect( width - half_width, 0, rect_width, height);
    rect(-width - half_width, 0, rect_width, height);
  }
}

gambles_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */

// remove this or set to false to enable full program (load will be slower)
var DEBUG_MODE = false;

// this can be used to set the number of sliders to show
var NUM_SLIDERS = 8;

// other variables can be in here too

// const fg_color = [255];

// example of a global function
// given a segment, this returns the average point [x, y]
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];
}

// This where you define your own face object
function GamblesFace() {

  // these are state variables for a face
  // (your variables should be different!)

  this.eye_type = .2; // changes between different styles range is 0 to 1 with 3 different styles of eye
  this.right_eyeBrow_height = .5; // Low, Middle, or High range is 0 to 1 with 3 different positions
  this.left_eyeBrow_height = .5; // Low, Middle, or High range is 0 to 1 with 3 different positions
  this.mouth_type = .2; // changes between different styles range is 0 to 1 with 5 different positions
  this.bridge_direction = .2; // left or right range is 0 to 1 with 2 different positions

  // example of a function *inside* the face object.
  // this draws a segment, and do_loop will connect the ends if true
  this.draw_segment = function (segment, do_loop) {
    for (let i = 0; i < segment.length; i++) {
      let px = segment[i][0];
      let py = segment[i][1];

      if (i < segment.length - 1) {
        let nx = segment[i + 1][0];
        let ny = segment[i + 1][1];
        ellipse(px, py, .1)

        line(px, py, nx, ny);
      } else if (do_loop) {
        let nx = segment[0][0];
        let ny = segment[0][1];
        line(px, py, nx, ny);
      }
    }
  };

  /*
   * Draw the face with position lists that include:
   *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
   *    bottom_lip, top_lip, nose_tip, nose_bridge, 
   */
  this.draw = function (positions) {

    rectMode(CENTER);

    noStroke()

    // average the location of some of the facepart to be used to determine if they are in one or another

    let nose_tip_pos = segment_average(positions.nose_tip);
    let top_lip_pos = segment_average(positions.top_lip);
    let left_eye_pos = segment_average(positions.left_eye);
    let right_eye_pos = segment_average(positions.right_eye);

    // size and number of cells in the grid

    var gridSize = 3;
    var cellSize = .75;

    /*** TOM ADDED THIS LOOP #1 to "color in" the face ***/
    // this is a lookup table that keeps track of previous cells
    for (let y = -gridSize; y < gridSize; y += cellSize) {
      // each row we'll draw one line from left_x to right_x
      let left_x = null;
      let right_x = null;
      for (let x = -gridSize; x < gridSize; x += cellSize) {
        let lastX = null;
        let lastY = null;
        for (let i = 0; i < positions.chin.length; i++) {
          if (positions.chin[i][0] > (x - cellSize / 2) && positions.chin[i][0] < (x + cellSize / 2) && positions.chin[i][1] > (y - cellSize / 2) && positions.chin[i][1] < (y + cellSize / 2)) {
            if (x != lastX && y != lastY) {
              lastX = x;
              lastY = y;
              // first check if this is the first one
              if (left_x == null) {
                // just record this for both left and right
                left_x = x;
                right_x = x;
              } else if (x < left_x) {
                // new left_x
                left_x = x;
              } else if (x > right_x) {
                right_x = x;
              }
            }
          }
        }
      }
      if (left_x != null) {
        // now draw the line (series of cells)
        for (let j = left_x; j <= right_x; j += cellSize) {
          let selectFill = random(0, 1)
          if (selectFill >= 0 && selectFill < .33) {
            gridGradient(j, y);
          } else if (selectFill >= .33 && selectFill < .66) {
            circles(j, y)
          } else if (selectFill >= .66 && selectFill < 1) {
            triangles(j, y);
          }
        }
      }
    }
    /*** END OF TOM'S ADDITONS ***/


    // Main loop, logic gates that check if the given point of the facial feature is within the bounds of a cell, if it is then go through another set of logic gates to determine which 'style' of that facepart to draw

    for (let x = -gridSize; x < gridSize; x += cellSize) {
      for (let y = -gridSize; y < gridSize; y += cellSize) {
        if (left_eye_pos[0] > (x - cellSize / 2) && left_eye_pos[0] < (x + cellSize / 2) && left_eye_pos[1] > (y - cellSize / 2) && left_eye_pos[1] < (y + cellSize / 2)) {
          if (this.eye_type >= 0 && this.eye_type <= .33) {
            eye1(x, y);
          } else if (this.eye_type > .33 && this.eye_type <= .66) {
            eye2(x, y);
          } else if (this.eye_type > .66 && this.eye_type <= 1) {
            eye3(x, y);
          }
        } else if (right_eye_pos[0] > (x - cellSize / 2) && right_eye_pos[0] < (x + cellSize / 2) && right_eye_pos[1] > (y - cellSize / 2) && right_eye_pos[1] < (y + cellSize / 2)) {
          if (this.eye_type >= 0 && this.eye_type <= .33) {
            eye1(x, y);
          } else if (this.eye_type > .33 && this.eye_type <= .66) {
            eye2(x, y);
          } else if (this.eye_type > .66 && this.eye_type <= 1) {
            eye3(x, y);
          }
        } else if (positions.nose_bridge[3][0] > (x - cellSize / 2) && positions.nose_bridge[3][0] < (x + cellSize / 2) && positions.nose_bridge[3][1] > (y - cellSize / 2) && positions.nose_bridge[3][1] < (y + cellSize / 2)) {
          noseTip(x, y)
        } else if (positions.nose_bridge[0][0] > (x - cellSize / 2) && positions.nose_bridge[0][0] < (x + cellSize / 2) && positions.nose_bridge[0][1] > (y - cellSize / 2) && positions.nose_bridge[0][1] < (y + cellSize / 2)) {
          if (this.bridge_direction >= 0 && this.bridge_direction <= .5) {
            noseBridge1(x,y);
          } else if (this.bridge_direction > .5 && this.bridge_direction <= 1) {
            noseBridge2(x,y);
          }
        } else if (top_lip_pos[0] > (x - cellSize / 2) && top_lip_pos[0] < (x + cellSize / 2) && top_lip_pos[1] > (y - cellSize / 2) && top_lip_pos[1] < (y + cellSize / 2)) {
          if (this.mouth_type >= 0 && this.mouth_type <=.2) {
            mouth1(x, y);
          } else if (this.mouth_type > .2 && this.mouth_type <=.4) {
            mouth2(x, y);
          } else if (this.mouth_type > .4 && this.mouth_type <=.6) {
            mouth3(x, y);
          } else if (this.mouth_type > .6 && this.mouth_type <=.8) {
            mouth4(x, y);
          } else if (this.mouth_type > .8 && this.mouth_type <=1) {
            mouth5(x, y);
          }
        } else if (positions.left_eyebrow[3][0] > (x - cellSize / 2) && positions.left_eyebrow[3][0] < (x + cellSize / 2) && positions.left_eyebrow[3][1] > (y - cellSize / 2) && positions.left_eyebrow[3][1] < (y + cellSize / 2)) {
          if (this.left_eyeBrow_height >= 0 && this.left_eyeBrow_height <= .33) {
            eyebrowLow(x, y);
          } else if (this.left_eyeBrow_height > .33 && this.left_eyeBrow_height <= .66) {
            eyebrowMiddle(x, y);
          } else if (this.left_eyeBrow_height > .66 && this.left_eyeBrow_height <= 1) {
            eyebrowHigh(x, y);
          }
        } else if (positions.left_eyebrow[1][0] > (x - cellSize / 2) && positions.left_eyebrow[1][0] < (x + cellSize / 2) && positions.left_eyebrow[1][1] > (y - cellSize / 2) && positions.left_eyebrow[1][1] < (y + cellSize / 2)) {
          if (this.left_eyeBrow_height >= 0 && this.left_eyeBrow_height <= .33) {
            eyebrowLow(x, y);
          } else if (this.left_eyeBrow_height > .33 && this.left_eyeBrow_height <= .66) {
            eyebrowMiddle(x, y);
          } else if (this.left_eyeBrow_height > .66 && this.left_eyeBrow_height <= 1) {
            eyebrowHigh(x, y);
          } 
        } else if (positions.right_eyebrow[1][0] > (x - cellSize / 2) && positions.right_eyebrow[1][0] < (x + cellSize / 2) && positions.right_eyebrow[1][1] > (y - cellSize / 2) && positions.right_eyebrow[1][1] < (y + cellSize / 2)) {
          if (this.right_eyeBrow_height >= 0 && this.right_eyeBrow_height <= .33) {
            eyebrowLow(x, y);
          } else if (this.right_eyeBrow_height > .33 && this.right_eyeBrow_height <= .66) {
            eyebrowMiddle(x, y);
          } else if (this.right_eyeBrow_height > .66 && this.right_eyeBrow_height <= 1) {
            eyebrowHigh(x, y);
          } 
        } else if (positions.right_eyebrow[3][0] > (x - cellSize / 2) && positions.right_eyebrow[3][0] < (x + cellSize / 2) && positions.right_eyebrow[3][1] > (y - cellSize / 2) && positions.right_eyebrow[3][1] < (y + cellSize / 2)) {
          if (this.right_eyeBrow_height >= 0 && this.right_eyeBrow_height <= .33) {
            eyebrowLow(x, y);
          } else if (this.right_eyeBrow_height > .33 && this.right_eyeBrow_height <= .66) {
            eyebrowMiddle(x, y);
          } else if (this.right_eyeBrow_height > .66 && this.right_eyeBrow_height <= 1) {
            eyebrowHigh(x, y);
          }
        }
      }
    }


    // eye type 1

    function eye1(x, y) {

      fill(128, 155, 194);

      rect(x, y, cellSize, cellSize);

      fill(255);

      beginShape();
      vertex(x - cellSize / 2, y);
      bezierVertex(x - cellSize / 4, y, x - cellSize / 4, y + cellSize / 4, x, y + cellSize / 4);
      bezierVertex(x + cellSize / 4, y + cellSize / 4, x + cellSize / 4, y, x + cellSize / 2, y);
      bezierVertex(x + cellSize / 4, y, x + cellSize / 4, y - cellSize / 4, x, y - cellSize / 4);
      bezierVertex(x - cellSize / 4, y - cellSize / 4, x - cellSize / 4, y, x - cellSize / 2, y);
      endShape();

      fill(0)

      ellipse(x, y, cellSize / 4)

    }

    // eye type 2

    function eye2(x, y) {

      fill(128, 155, 194);

      rect(x, y, cellSize, cellSize);

      fill(255);

      ellipse(x, y, cellSize / 2);

      fill(0);

      ellipse(x, y, cellSize / 4);

    }

    // eye type 3

    function eye3(x, y) {

      fill(128, 155, 194);

      rect(x, y, cellSize, cellSize);

      fill(108, 135, 174);

      arc(x, y, cellSize / 2, cellSize / 2, 180, 360, PIE);

      fill(255);

      arc(x, y, cellSize / 2, cellSize / 2, 0, 180, PIE);

      fill(0)

      arc(x, y, cellSize / 4, cellSize / 4, 0, 180, PIE);

    }

    // nose bridge with shadow to the left

    function noseBridge1(x, y) {

      fill(128, 155, 194)

      rect(x - cellSize / 4, y, cellSize / 2, cellSize);

      fill(108, 135, 174);
      rect(x + cellSize / 4, y, cellSize / 2, cellSize);

    }

    // nose bridge with shadow to the right

    function noseBridge2(x, y) {


      fill(108, 135, 174);

      rect(x - cellSize / 4, y, cellSize / 2, cellSize);

      fill(128, 155, 194);
      rect(x + cellSize / 4, y, cellSize / 2, cellSize);

    }

    // nose tile, only one style

    function noseTip(x, y) {

      fill(128, 155, 194);
      rect(x, y, cellSize, cellSize);

      fill(108, 135, 174);

      ellipse(x - cellSize / 6, y + cellSize/6, cellSize / 4, cellSize / 4);
      ellipse(x + cellSize / 6, y + cellSize/6, cellSize / 4, cellSize / 4);

    }

    // mouth style 1

    function mouth1(x, y) {

      fill(0);

      rect(x,y,cellSize,cellSize)

      fill(255)
      rect(x, y - cellSize / 2 + cellSize/8, cellSize, cellSize / 4);
    }

    // mouth style 2

    function mouth2(x, y) {

      fill(0);

      rect(x, y, cellSize, cellSize);

      fill(255)
      rect(x, y - cellSize / 2 + cellSize / 8, cellSize, cellSize / 4);

      rect(x, y + cellSize / 2 - cellSize / 8, cellSize, cellSize / 4);
    }

    // mouth style 3

    function mouth3(x, y) {

      fill(0);

      rect(x, y + cellSize/8, cellSize, cellSize/4);

      fill(108, 135, 174);
      rect(x, y - cellSize/2 + cellSize / 8, cellSize, cellSize / 4);

      fill(255);
      rect(x, y - cellSize / 8, cellSize, cellSize / 4);

      fill(128, 155, 194);
      rect(x, y + cellSize / 2 - cellSize / 8, cellSize, cellSize / 4);
    }

    // mouth style 4

    function mouth4(x, y) {

      fill(0);

      rect(x, y + cellSize/8, cellSize, cellSize/4);

      fill(108, 135, 174);
      rect(x, y - cellSize / 2 + cellSize / 4, cellSize, cellSize / 2);

      fill(128, 155, 194);
      rect(x, y + cellSize / 2 - cellSize / 8, cellSize, cellSize / 4);
    }

    // mouth style 5

    function mouth5(x, y) {

      fill(108, 135, 174);
      rect(x, y - cellSize / 2 + cellSize / 4, cellSize, cellSize / 2);

      fill(128, 155, 194);
      rect(x, y + cellSize / 2 - cellSize / 4, cellSize, cellSize / 2);

      fill(108, 135, 174);
      rect(x, y + cellSize / 2 - cellSize / 8, cellSize, cellSize / 4);
    }

    // eyebrow middle

    function eyebrowMiddle(x, y) {

      fill(128, 155, 194);
      rect(x, y, cellSize, cellSize);
      fill(108, 135, 174)
      rect(x, y, cellSize, cellSize / 4);
    }

    // eyebrow high

    function eyebrowHigh(x, y) {

      fill(128, 155, 194);

      rect(x, y, cellSize, cellSize);

      fill(108, 135, 174)

      rect(x, y - cellSize / 2 + cellSize / 8, cellSize, cellSize / 4);
    }

    // eyebrow low

    function eyebrowLow(x, y) {

      fill(128, 155, 194);

      rect(x, y, cellSize, cellSize);

      fill(108, 135, 174)

      rect(x, y + cellSize / 2 - cellSize / 8, cellSize, cellSize / 4);
    }

    // grid gradient tile, includes the various different directions that can be drawn

    function gridGradient(x, y) {

      fill(128, 155, 194);
      rect(x, y, cellSize, cellSize)

      // size and number of cells within each gradient cell. (gradient is made of a grid of squares)

      var gradientGridSize = gridSize / 8;
      var gradientCellSize = gradientGridSize / 15;

      // variable to pick a random direction for the gradient to be drawn in (left, right, up, or down)

      let directionSwitch = random(0, 1);

      // draws the grid

      for (let cellX = -gradientGridSize; cellX < gradientGridSize; cellX += gradientCellSize) {
        for (let cellY = -gradientGridSize; cellY < gradientGridSize; cellY += gradientCellSize) {

          // logic gates for the direction

          if (directionSwitch >= 0 && directionSwitch < .25) {

            // as Y or X value changes increase or decrease the chance for the cell to change colour

            if (cellY + random(-.4, .4) < 0) {
              fill(108, 135, 174)
            } else {
              fill(128, 155, 194)
            }
          } else if (directionSwitch >= .25 && directionSwitch < .5) {
            if (cellY + random(-.4, .4) > 0) {
              fill(108, 135, 174)
            } else {
              fill(128, 155, 194)
            }
          } else if (directionSwitch >= .5 && directionSwitch < .75) {
            if (cellX + random(-.4, .4) > 0) {
              fill(108, 135, 174)
            } else {
              fill(128, 155, 194)
            }
          } else if (directionSwitch >= .75 && directionSwitch < 1) {
            if (cellX + random(-.4, .4) < 0) {
              fill(108, 135, 174)
            } else {
              fill(128, 155, 194)
            }
          }

          // draws the cell

          beginShape()
          vertex(x + cellX, y + cellY);
          vertex(x + cellX + gradientCellSize, y + cellY);
          vertex(x + cellX + gradientCellSize, y + cellY + gradientCellSize);
          vertex(x + cellX, y + cellY + gradientCellSize);
          endShape(CLOSE);
        }
      }
    }

    // circles cell style, includes the two versions with inverted colours

    function circles(x, y) {

      // size of circle

      let circleSize = 4;

      // variable to randomise the colours

      let circleColourSwitch = random(0, 1);

      // logic gate for the fill

      if (circleColourSwitch < .5) {
        fill(128, 155, 194);
      } else {
        fill(108, 135, 174);
      }

      rect(x, y, cellSize, cellSize);

      if (circleColourSwitch < .5) {
        fill(108, 135, 174);
      } else {

        fill(128, 155, 194);
      }

      // arcs are drawn in the corner and on the sides of the cell so that they don't overlap with the edges

      arc(x - cellSize / 2, y - cellSize / 2, cellSize / circleSize, cellSize / circleSize, 0, 90, PIE);
      arc(x - cellSize / 6, y - cellSize / 2, cellSize / circleSize, cellSize / circleSize, 0, 180, PIE);
      arc(x + cellSize / 6, y - cellSize / 2, cellSize / circleSize, cellSize / circleSize, 0, 180, PIE);
      arc(x + cellSize / 2, y - cellSize / 2, cellSize / circleSize, cellSize / circleSize, 90, 180, PIE);
      arc(x + cellSize / 2, y - cellSize / 6, cellSize / circleSize, cellSize / circleSize, 90, 270, PIE);
      arc(x + cellSize / 2, y + cellSize / 6, cellSize / circleSize, cellSize / circleSize, 90, 270, PIE);
      arc(x + cellSize / 2, y + cellSize / 2, cellSize / circleSize, cellSize / circleSize, 180, 270, PIE);
      arc(x - cellSize / 6, y + cellSize / 2, cellSize / circleSize, cellSize / circleSize, 180, 360, PIE);
      arc(x + cellSize / 6, y + cellSize / 2, cellSize / circleSize, cellSize / circleSize, 180, 360, PIE);
      arc(x - cellSize / 2, y + cellSize / 2, cellSize / circleSize, cellSize / circleSize, 270, 360, PIE);
      arc(x - cellSize / 2, y - cellSize / 6, cellSize / circleSize, cellSize / circleSize, 270, 450, PIE);
      arc(x - cellSize / 2, y + cellSize / 6, cellSize / circleSize, cellSize / circleSize, 270, 450, PIE);

      // ellipses in the centre

      ellipse(x - cellSize / 6, y - cellSize / 6, cellSize / circleSize, cellSize / circleSize);
      ellipse(x + cellSize / 6, y - cellSize / 6, cellSize / circleSize, cellSize / circleSize);
      ellipse(x + cellSize / 6, y + cellSize / 6, cellSize / circleSize, cellSize / circleSize);
      ellipse(x - cellSize / 6, y + cellSize / 6, cellSize / circleSize, cellSize / circleSize);
    }

    // draws the triangular styled cell in its two inverted variants

    function triangles(x, y) {

      // same as the other functions, randomises the two variants

      let triangleColourSwitch = random(0, 1);

      // logic gates for fill

      if (triangleColourSwitch < .5) {
        fill(128, 155, 194);
      } else {
        fill(108, 135, 174);
      }
      rect(x, y, cellSize, cellSize);

      if (triangleColourSwitch < .5) {
        
        fill(108, 135, 174);
      } else {
        fill(128, 155, 194);
      }

      // draw the triangles using a custom shape

      beginShape();
      vertex(x - cellSize / 2, y + cellSize / 2);
      vertex(x - cellSize / 2, y - cellSize / 2);
      vertex(x, y + cellSize / 2);
      vertex(x, y - cellSize / 2);
      vertex(x + cellSize / 2, y + cellSize / 2);
      endShape(CLOSE)
    }
  }


  /* set internal properties based on list numbers 0-100 */
  this.setProperties = function (settings) {
    this.eye_type = map(settings[0], 0, 100, 0, 1);
    this.right_eyeBrow_height = map(settings[1], 0, 100, 0, 1);
    this.left_eyeBrow_height = map(settings[2], 0, 100, 0, 1);
    this.mouth_type = map(settings[3], 0, 100, 0, 1);
    this.bridge_direction = map(settings[4], 0, 100, 0, 1);
  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function () {
    let settings = new Array(3);
    settings[0] = map(this.eye_type, 0, 1, 0, 100);
    settings[1] = map(this.right_eyeBrow_height, 0, 1, 0, 100);
    settings[2] = map(this.left_eyeBrow_height, 0, 1, 0, 100);
    settings[3] = map(this.mouth_type, 0, 1, 0, 100);
    settings[4] = map(this.bridge_direction, 0, 1, 0, 100);
    return settings;
  }
}

gambles_training_values.json

{
    "000001": [
      20,
      50,
      50,
      20,
      20
    ],
    "000002": [
      43,
      84,
      72,
      11,
      20
    ],
    "000005": [
      17,
      84,
      72,
      71,
      20
    ],
    "000006": [
      17,
      84,
      72,
      56.00000000000001,
      20
    ],
    "000007": [
      100,
      0,
      0,
      100,
      53
    ],
    "000009": [
      2,
      47,
      86,
      48,
      53
    ],
    "000010": [
      20,
      0,
      0,
      92,
      53
    ],
    "000013": [
      60,
      0,
      0,
      45,
      0
    ],
    "000014": [
      22,
      100,
      100,
      100,
      53
    ],
    "000015": [
      100,
      0,
      0,
      50,
      50
    ],
    "000016": [
      54,
      44,
      38,
      100,
      50
    ],
    "000018": [
      0,
      100,
      100,
      7.000000000000001,
      50
    ],
    "000020": [
      97,
      42,
      38,
      25,
      50
    ],
    "000023": [
      56.99999999999999,
      42,
      38,
      57.99999999999999,
      100
    ],
    "000025": [
      93,
      0,
      0,
      100,
      100
    ],
    "000028": [
      0,
      100,
      100,
      13,
      0
    ],
    "000029": [
      0,
      43,
      46,
      48,
      0
    ],
    "000030": [
      60,
      0,
      0,
      100,
      0
    ],
    "000031": [
      0,
      46,
      51,
      41,
      0
    ],
    "000032": [
      75,
      46,
      51,
      72,
      0
    ],
    "000035": [
      0,
      100,
      100,
      67,
      0
    ],
    "000037": [
      100,
      0,
      60,
      97,
      0
    ],
    "000038": [
      47,
      54,
      60,
      46,
      0
    ],
    "000040": [
      17,
      84,
      72,
      71,
      20
    ],
    "000041": [
      47,
      5,
      46,
      46,
      0
    ],
    "000042": [
      0,
      43,
      46,
      100,
      0
    ],
    "000043": [
      17,
      84,
      72,
      0,
      56.99999999999999
    ],
    "000044": [
      0,
      50,
      50,
      76,
      50
    ],
    "000045": [
      0,
      100,
      100,
      13,
      0
    ],
    "000047": [
      92,
      65,
      79,
      59,
      36
    ],
    "000048": [
      38,
      95,
      100,
      85,
      10
    ],
    "000050": [
      76,
      0,
      0,
      46,
      0
    ],
    "000051": [
      54,
      42,
      38,
      99,
      50
    ],
    "000052": [
      42,
      74,
      80,
      65,
      5
    ],
    "000054": [
      0,
      50,
      50,
      0,
      50
    ],
    "000055": [
      53,
      33,
      46,
      100,
      1
    ],
    "000056": [
      30,
      84,
      72,
      41,
      20
    ],
    "000058": [
      0,
      0,
      50,
      100,
      50
    ],
    "000060": [
      77,
      21,
      49,
      98,
      25
    ],
    "000064": [
      100,
      48,
      50,
      73,
      87
    ],
    "000065": [
      65,
      42,
      66,
      42,
      10
    ],
    "000068": [
      100,
      30,
      50,
      31,
      100
    ],
    "000069": [
      48,
      0,
      0,
      72,
      26
    ],
    "000071": [
      17,
      84,
      72,
      45,
      20
    ],
    "000073": [
      15,
      89,
      81,
      59,
      13
    ],
    "000076": [
      74,
      24,
      25,
      100,
      56.00000000000001
    ],
    "000077": [
      0,
      0,
      50,
      100,
      50
    ],
    "000078": [
      22,
      100,
      100,
      100,
      53
    ],
    "000079": [
      52,
      23,
      42,
      96,
      50
    ],
    "000080": [
      73,
      24,
      24,
      81,
      32
    ],
    "000081": [
      98,
      12,
      50,
      14.000000000000002,
      100
    ],
    "000083": [
      0,
      73,
      75,
      89,
      0
    ],
    "000085": [
      1,
      48,
      68,
      82,
      51
    ],
    "000086": [
      0,
      100,
      100,
      76,
      100
    ],
    "000088": [
      0,
      61,
      84,
      59,
      50
    ],
    "000091": [
      100,
      0,
      0,
      100,
      0
    ],
    "000092": [
      0,
      50,
      75,
      83,
      25
    ],
    "000096": [
      13,
      43,
      52,
      70,
      42
    ],
    "000097": [
      15,
      92,
      86,
      57.99999999999999,
      60
    ],
    "000099": [
      10,
      75,
      75,
      17,
      60
    ],
    "000100": [
      7.000000000000001,
      96,
      93,
      67,
      80
    ],
    "000103": [
      6,
      61,
      80,
      100,
      56.00000000000001
    ],
    "000104": [
      0,
      100,
      100,
      13,
      0
    ],
    "000106": [
      20,
      50,
      50,
      20,
      20
    ],
    "000108": [
      0,
      43,
      46,
      0,
      0
    ],
    "000109": [
      49,
      14.000000000000002,
      44,
      71,
      25
    ],
    "000110": [
      13,
      94,
      90,
      0,
      56.99999999999999
    ],
    "000111": [
      100,
      72,
      64,
      0,
      30
    ],
    "000114": [
      50,
      11,
      21,
      84,
      38
    ],
    "000115": [
      60,
      0,
      0,
      100,
      0
    ],
    "000116": [
      68,
      39,
      54,
      0,
      24
    ],
    "000117": [
      0,
      68,
      62,
      44,
      33
    ],
    "000118": [
      10,
      75,
      75,
      84,
      60
    ],
    "000121": [
      0,
      100,
      100,
      72,
      96
    ],
    "000122": [
      10,
      75,
      74,
      44,
      37
    ],
    "000125": [
      55.00000000000001,
      18,
      20,
      63,
      0
    ],
    "000126": [
      19,
      44,
      40,
      57.99999999999999,
      31
    ],
    "000129": [
      52,
      9,
      27,
      56.00000000000001,
      6
    ],
    "000131": [
      6,
      48,
      63,
      56.99999999999999,
      59
    ],
    "000132": [
      14.000000000000002,
      83,
      83,
      0,
      56.99999999999999
    ],
    "000133": [
      9,
      66,
      67,
      36,
      40
    ],
    "000134": [
      91,
      11,
      53,
      53,
      100
    ],
    "000135": [
      66,
      0,
      0,
      82,
      48
    ],
    "000137": [
      64,
      59,
      57.99999999999999,
      56.00000000000001,
      80
    ],
    "000140": [
      0,
      0,
      2,
      100,
      80
    ],
    "000142": [
      9,
      84,
      85,
      69,
      2
    ],
    "000143": [
      82,
      36,
      40,
      76,
      73
    ],
    "000145": [
      12,
      78,
      74,
      34,
      13
    ],
    "000146": [
      9,
      69,
      71,
      31,
      23
    ],
    "000147": [
      10,
      73,
      68,
      67,
      26
    ],
    "000148": [
      4,
      56.99999999999999,
      73,
      51,
      42
    ],
    "000150": [
      67,
      3,
      11,
      100,
      100
    ],
    "000151": [
      22,
      62,
      68,
      33,
      44
    ],
    "000152": [
      67,
      28.000000000000004,
      35,
      56.99999999999999,
      8
    ],
    "000153": [
      61,
      28.000000000000004,
      35,
      50,
      51
    ],
    "000155": [
      9,
      68,
      73,
      43,
      49
    ],
    "000156": [
      19,
      53,
      51,
      57.99999999999999,
      26
    ],
    "000157": [
      15,
      62,
      56.00000000000001,
      65,
      39
    ],
    "000160": [
      79,
      1,
      11,
      73,
      38
    ],
    "000161": [
      11,
      86,
      79,
      6,
      13
    ]
  }

garcia_anim.js

const ease_gar = new p5.Ease();

//Leafs variables
let leafCount = 8; // number of leafs to draw
let LEAFS = []; // leaf array

let first_draw = true;

function garcia_draw_one_frame(cur_frac) {

  if(first_draw) {
    first_draw = false;

    for (let leafFall = 0; leafFall < leafCount; leafFall++) {
      LEAFS.push({
        x1: random(-1, width / 3),
        x2: random(width / 1.5, width + width / 50),
        y: 0,
        variation: random(-width / 50, +width / 20),
        rotation: random(-20, 20),
        size: random(.15, .4)
      });
    }
  }

  angleMode(DEGREES);

  let sun_size = canvasHeight / 3.5;

  let halfWidth = width / 2;
  let thirdWidth = width / 3
  let quarterWidth = width / 4;
  let fifthWidth = width / 5;

  let halftHeight = height / 2;
  let thirdHeight = height / 3;
  let quarterHeight = height / 4;
  let fifthHeight = height / 5;

  let customStrokeWeight = width / 550;

  //set up colours
  let orange = '#E6703D';
  let darkOrange = '#ae473f';
  let brown = '#A87338';

  let yellow = '#ffc039';
  let darkYellow = '#f7a61e';

  let beige = '#faf8e6';
  let white = '#ffffff';

  let green = '#4c806c';

  let skyColor = '#F0B79E';
  let waterColor = '#ffedd9';

  let lightPink = '#FE95A1';
  let middlePink = '#FF8795';
  let darkPink = '#FF7181';
  let darkerPink = '#80163C';

  let magenta = '#dd455a';

  let purple = '#9e2754';
  let middlePurple = '#7b3759';
  let darkPurple = '#400522';


  /*********STAR FUNCTION************/
  // function to draw a star reference : https://p5js.org/examples/form-star.html
  function star(x, y, min, max, end) {
    const angle = 360 / 4;
    const halfAngle = angle / 2;
    const radius1 = width / 350;
    const radius2 = width / 90;
    let starSize;

    push();
    translate(x, y);

    //animate star in
    if (cur_frac < max && cur_frac >= min) {
      starSize = map(cur_frac, 0, max, 0, 1);
      scale(starSize);
      beginShape();
      for (let a = 0; a < 360; a += angle) {
        let sx = cos(a) * radius1;
        let sy = sin(a) * radius1;

        vertex(sx, sy);

        sx = cos(a + halfAngle) * radius2;
        sy = sin(a + halfAngle) * radius2;
        vertex(sx, sy);
      }
      endShape(CLOSE);
    }
    // animate star out
    else if (cur_frac < end && cur_frac >= max) {
      starSize = map(cur_frac, max, end, 1, 0);
      scale(starSize);
      beginShape();
      for (let a = 0; a < 360; a += angle) {
        let sx = cos(a) * radius1;
        let sy = sin(a) * radius1;

        vertex(sx, sy);

        sx = cos(a + halfAngle) * radius2;
        sy = sin(a + halfAngle) * radius2;
        vertex(sx, sy);
      }
      endShape(CLOSE);
    }
    pop();
  }


  /********FUNCTION TO ADD AN OFFSET TO ANIMATIONS*********/
  //function created by Hazel and modified by me
  function offsetAnimation(cur_frac, offsetAMT, number) {
    let newFrac;

    if (number == 1) {
      newFrac = ease_gar.maclaurinCosine(cur_frac); // bird animation
    } else if (number == 2) {
      newFrac = ease_gar.gompertz(cur_frac); // ripples animation
    } else if (number == 3) {
      newFrac = ease_gar.linear(cur_frac); // leafs animation
    }

    for (let i = 0; i <= offsetAMT; i += 0.01) {
      newFrac += 0.01;
      if (newFrac >= 1) {
        newFrac = 0;
      }
    }
    return newFrac;
  }


  /*****************SKY***************/
  noStroke();
  fill(skyColor);

  push();
  rectMode(CORNER);
  rect(0, 0, width, height);
  pop();


  /**********BIRDS FUNCTION*********/
  function bird(birdX, birdY, birdSize, animationOffset) {
    let birdWingY;
    let newFrac = offsetAnimation(cur_frac, animationOffset, 1); // add an offset

    stroke(white);
    noFill();
    strokeWeight(customStrokeWeight);

    //draw the bird
    push();
    translate(birdX, birdY);
    scale(birdSize); // add scale to change the bird size

    // animate the wings Y position
    if (newFrac < .5) {
      birdWingY = map(newFrac, 0, 0.5, height / 100, -height / 60);
    } else {
      birdWingY = map(newFrac, 0.5, 1, -height / 60, height / 100);
    }

    //draw birds
    beginShape();
    vertex(-width / 100, birdWingY);
    vertex(0, 0);
    vertex(width / 100, birdWingY);
    endShape();
    pop();
  }

  bird(width / 2.3, height / 4.5, 1.7, 0.5);

  bird(width / 2.5, height / 6, 1.3, 0.3);

  bird(width / 2.1, height / 5.5, 1.3, 0.4)

  bird(width / 1.95, height / 7, 1, 0.2);


  /*******************SUN********************/
  noStroke();
  fill(lightPink);
  ellipse(halfWidth, halftHeight - width / 35, sun_size + width / 15);

  fill(middlePink);
  ellipse(halfWidth, halftHeight - width / 35, sun_size + width / 30);

  fill(darkPink);
  ellipse(halfWidth, halftHeight - width / 35, sun_size);


  /*****************MOUNTAINS*************/
  //mountain back
  fill('#caa291');

  beginShape();
  curveVertex(-quarterWidth, height / 1.5); //left
  curveVertex(width / 1.5, height / 1.5); //right
  curveVertex(thirdWidth, height / 2.5); //top
  endShape(CLOSE);

  //shadow
  fill('#D4B0A0')
  beginShape();
  curveVertex(width / 1.5, height / 1.8); //right
  curveVertex(width / 2.5, height / 2.25); //top
  curveVertex(width / 3.5, height / 1.9); // middle
  curveVertex(width / 5, height / 1.8); // left
  curveVertex(width / 6, height / 1.5); // bottom
  endShape(CLOSE);

  // mountain front
  fill("#bd9384");

  beginShape();
  curveVertex(width * 1.25, height / 1.25); //right
  curveVertex(width / 6, height / 1.45); //left
  curveVertex(thirdWidth, height / 1.75) //top right
  curveVertex(width / 1.25, height / 2.75); //top
  endShape(CLOSE);

  //shadow
  fill('#B08778');

  beginShape();
  curveVertex(width / 6, height / 1.5); //left
  curveVertex(width / 3.5, height / 1.6) //top right
  curveVertex(width / 1.4, height / 2.45); //top
  curveVertex(width / 1.5, height / 1.5);
  endShape(CLOSE);


  /***************WATER**********************/
  fill(waterColor);
  noStroke();
  push();
  rectMode(CORNER);
  rect(0, height / 1.5, width, thirdHeight);
  pop();

  //sun reflection / ripples
  function ripples(x1, Y, x2, offset) {
    let waterChange;
    let newFrac = offsetAnimation(cur_frac, offset, 2);

    if (newFrac < 0.5) {
      waterChange = map(newFrac, 0, .5, 0, width / 150);
    } else {
      waterChange = map(newFrac, 0.5, 1, width / 150, 0);
    }

    stroke(lightPink);
    strokeWeight(width / 200);
    line(x1 - waterChange, Y, x2 - waterChange, Y);
  }

  //draw ripples
  ripples(width / 2 - width / 12, height / 1.45, width / 2 + width / 25, 0.5);

  ripples(width / 2 + width / 14, height / 1.45, width / 2 + width / 10, .2);

  ripples(width / 2 - width / 14, height / 1.4, width / 2 + width / 15, .5);
  ripples(width / 2 + width / 11, height / 1.4, width / 2 + width / 10, 0);

  ripples(width / 2 - width / 20, height / 1.35, width / 2 - width / 50, 0.8);
  ripples(width / 2, height / 1.35, width / 2 + width / 13, .9);

  ripples(width / 2 - width / 50, height / 1.3, width / 2 + width / 20.1, .4);

  //sparkles
  fill(white);
  noStroke();
  star(width / 2 + width / 50, height / 1.45, 0, .25, .5);
  star(width / 2 - width / 25, height / 1.4, .28, .6, .8);
  star(width / 2 + width / 20, height / 1.35, .15, .35, .7);


  /*********************BOAT***************/
  function boat() {
    // sails
    noStroke();
    fill(purple);
    triangle(width / 200, 0, 0, -height / 5, -width / 12, -height / 90);
    triangle(width / 100, 0, width / 300, -height / 5, width / 20, -height / 70);

    //boat base
    fill(magenta);
    push();
    rectMode(CORNER);
    rect(-width / 10.1, 0, width / 10, height / 20);
    arc(0, 0, width / 7, height / 10, 0, 90);
    rect(width / 15, -height / 90, width / 200, height / 80);
    pop();

    //boat wood detail
    noFill();
    stroke(middlePink);
    strokeWeight(customStrokeWeight);
    line(width / 14.5, height / 120, -width / 10.2, height / 120);
    line(width / 15, height / 120 + height / 120, -width / 10.2, height / 120 + height / 120);
    line(width / 16.5, height / 120 + (2 * height / 120), -width / 10.2, height / 120 + (2 * height / 120));
    line(width / 19.5, height / 120 + (3 * height / 120), -width / 10.2, height / 120 + (3 * height / 120));
    line(width / 22, height / 120 + (4 * height / 120), -width / 10.2, height / 120 + (4 * height / 120));

    // small windows
    strokeWeight(height / 300);
    fill(purple);
    circle(width / 50, height / 60, height / 80);
    circle(width / 50 + width / 80, height / 60, height / 80);
    circle(width / 50 + (2 * width / 80), height / 60, height / 80);

  }


  //draw boat
  push();
  translate(width / 3.25, height / 1.45);

  //animate the boat angle
  let boatAngle;
  let boatFAngleMovement = ease_gar.backInOut(cur_frac);

  if (cur_frac < .5) {
    boatAngle = map(boatFAngleMovement, 0, 0.5, 0, 2);
  } else {
    boatAngle = map(boatFAngleMovement, 0.5, 1, 2, 0);
  }

  rotate(boatAngle);

  //draw the boat
  boat();
  pop();

  //water in front of the boat to hide the bottom of the hull
  fill("#ffedd9");
  push();
  rectMode(CORNER);
  rect(width / 5, height / 1.37, width / 6, height / 20);
  pop();


  /***************LEFT FLOOR***********/
  noStroke();
  fill(middlePurple);

  beginShape();
  curveVertex(width - width / 10, height + height / 10); // right
  curveVertex(0, height); //left bottom
  curveVertex(-quarterWidth, height / 1.3); // left
  curveVertex(width / 10, height / 1.4); // top middle
  curveVertex(halfWidth, height / 1.1); //bottom middle
  endShape(CLOSE);


  /**************TREE FUNCTION*************/
  function tree(x, y) {
    fill(beige);
    rectMode(CENTER);

    //draw the base of the tree trunc
    rect(x, y, width / 20, halftHeight);
    arc(x, y + height / 4.015, width / 20, height / 40, 0, 180);

    // draw the circles
    stroke(green);
    strokeWeight(customStrokeWeight);
    ellipse(x, y + width / 150, width / 50, height / 20);
    ellipse(x, y + width / 150, width / 150, height / 45);

    // draw the stripes
    for (let i = 1; i < 5; i++) {
      noFill();
      arc(x, y + (height / 18) * i, width / 20.25, height / 40, 0, 180);
      arc(x, y - (height / 18) * i, width / 20.25, height / 40, 0, 180);
    }
  }


  /*********SMALL LEAF FUNCTION*********/
  function leaf(x, y, s, angle) {
    push();
    translate(x, y);
    scale(s);
    rotate(angle);
    bezier(0, 0, -width / 20, -height / 6, -width / 40, -height / 6, 0, -height / 4);
    bezier(0, 0, width / 20, -height / 6, width / 40, -height / 6, 0, -height / 4);
    pop();
  }


  /***********MOVING LEAF FUNCTION*******/
  function movingLeaf(Num) {
    let jvalue;
    let Value;
    let min = 0.1;

    // start the for loop at different values depending on the Num value to split the leafs from the left and the right of the screen
    if (Num == 1) {
      jvalue = 0;
      Value = LEAFS.length / 2; // half array
    } else {
      jvalue = 3;
      Value = LEAFS.length; // full array
    }

    for (let j = jvalue; j < Value; j++) {
      const leafs = LEAFS[j]; // assign the each value of the LEAFS array to a variable
      let leafX;
      let newFrac = offsetAnimation(cur_frac, min, 3); //offset the animation of the leafs
      let XValue;

      // assign different X value to the different side
      if (Num == 1) {
        XValue = leafs.x1
      } else {
        XValue = leafs.x2
      }

      // wiggle the leafs from left to right
      if (cur_frac < .25) {
        leafX = map(cur_frac, 0, .25, XValue, XValue + leafs.variation);
      } else if (cur_frac >= .25 && cur_frac <= .5) {
        leafX = map(cur_frac, .25, .5, XValue + leafs.variation, XValue);
      } else if (cur_frac > .5 && cur_frac < .75) {
        leafX = map(cur_frac, .5, .75, XValue, XValue - leafs.variation);
      } else {
        leafX = map(cur_frac, .75, 1, XValue - leafs.variation, XValue);
      }

      // animate the leafs from top to bottom
      let leafY = map(newFrac, 0, 1, height / 4, height + height / 10);

      // animate the rotation of the leafs
      let leafRotation = ease_gar.linear(cur_frac);
      let leafAngle;

      if (cur_frac < 0.25) {
        leafAngle = map(leafRotation, 0, .25, 0, 15);
      } else if (cur_frac >= 0.25 && leafRotation <= 0.5) {
        leafAngle = map(leafRotation, .25, .5, 15, 0);
      } else if (cur_frac > 0.5 && leafRotation < 0.75) {
        leafAngle = map(leafRotation, .5, .75, 0, -15);
      } else {
        leafAngle = map(leafRotation, .75, 1, -15, 0);
      }

      // draw the leafs
      push();
      translate(leafX, leafY);
      rotate(leafAngle);
      scale(leafs.size);

      fill(yellow);
      noStroke();

      bezier(0, 0, -width / 20, -height / 6, -width / 40, -height / 6, 0, -height / 4);
      bezier(0, 0, width / 20, -height / 6, width / 40, -height / 6, 0, -height / 4);
      pop();

      min += 0.3; // add more offset to each leaf
    }
  }


  /*************LEFT TREE************/
  //back leafs
  fill(darkYellow)
  push();
  ellipseMode(CORNER)
  ellipse(0 - width / 15, height / 3.25, width / 6, quarterHeight);
  ellipse(width / 6, height / 15, fifthWidth, thirdHeight);
  ellipse(width / 15, height / 4, width / 5.5, quarterHeight);
  pop();

  //tree base
  tree(width / 10, halftHeight);

  // moving leafs
  movingLeaf(1);

  //front leafs
  fill(yellow);
  noStroke();
  push();
  ellipseMode(CORNER);
  ellipse(0 - width / 12, 0 - height / 50, width / 5, height / 2.5);
  ellipse(width / 5, 0 - height / 20, width / 5, height / 5);
  ellipse(width / 30, 0 - height / 15, width / 5, height / 3);
  ellipse(width / 6, 0, width / 5, height / 3);
  pop();

  // small leaf detail
  fill(darkYellow);
  leaf(width / 4, height / 4, .25, 25);
  leaf(width / 8, height / 8, .2, -45);
  leaf(width / 3.5, height / 10, .15, 70);
  leaf(width / 15, height / 4.5, .35, -30);
  leaf(width / 5, height / 8, .4, 20);
  leaf(width / 18, height / 15, .2, 18);

  //floor front
  noStroke();
  fill(darkPurple);

  beginShape();
  curveVertex(0, height); // left
  curveVertex(width + width / 20, height); // right
  curveVertex(width / 1.005, height / 1.35); // right top
  curveVertex(width / 1.3, height / 1.4) // right middle
  curveVertex(width / 2.5, height / 1.1);
  endShape(CLOSE);

  /************TREE FOREGROUND********/
  //back leafs
  fill(darkYellow)
  push();
  ellipseMode(CORNER);
  ellipse(width - width / 9, thirdHeight, width / 6, height / 3.5); //bottom right
  ellipse(width / 1.5, height / 15, fifthWidth, thirdHeight);
  ellipse(width / 1.3, height / 3.5, width / 6, height / 3.5);
  pop();
  //tree base
  tree(width - width / 8, height / 2.05);

  //moving leafs
  movingLeaf(2);

  //front leafs
  fill(yellow);
  noStroke();
  push();
  ellipseMode(CORNER);
  ellipse(width / 1.18, 0 - height / 50, fifthWidth, height / 2.5);
  ellipse(width / 1.5, 0 - height / 20, fifthWidth, fifthHeight);
  ellipse(width / 1.4, 0 - height / 15, fifthWidth, thirdHeight);
  ellipse(width / 1.4, 0, fifthWidth, thirdHeight);
  pop();

  // small leaf detail
  fill(darkYellow);
  leaf(width - width / 5, height / 8, .25, 20);
  leaf(width - width / 4.5, height / 4, .2, -45);
  leaf(width - width / 8, height / 15, .15, -40);
  leaf(width - width / 15, height / 3, .35, 30);
  leaf(width - width / 3.5, height / 10, .38, -10);
  leaf(width - width / 18, height / 15, .2, 18);
  leaf(width - width / 9, height / 4.5, .4, 15);

  /********FOREGROUND BERRY BUSH*********/
  //berry function
  function berry(x, y, color, side) {
    if (color == 1) {
      fill(orange)
    } else if (color == 2) {
      fill(brown)
    } else {
      fill(darkOrange)
    }

    let w = width / 50;

    circle(x, y, w);

    //shine
    fill(lightPink);

    if (side == 1) {
      circle(x - width / 300, y - height / 300, w - width / 70);
    } else {
      circle(x + width / 300, y - height / 300, w - width / 70);
    }
  }

  //right leafs
  fill(darkerPink);
  leaf(width, height, 1, -10);
  leaf(width, height, 1, -80);
  leaf(width - width / 200, height, 1, -35);

  //right side berries
  berry(width - width / 25, height - height / 18, 1, 1);
  berry(width - width / 9.5, height - height / 9, 1, 1);
  berry(width - width / 8, height - height / 40, 1, 1);

  berry(width - width / 50, height - height / 20, 2, 1);
  berry(width - width / 30, height - height / 8, 2, 1);
  berry(width - width / 12, height - height / 10, 2, 1);
  berry(width - width / 11, height - height / 35, 2, 1);

  berry(width - width / 18, height - height / 10, 3, 1);
  berry(width - width / 12, height - height / 7, 3, 1);
  berry(width - width / 9, height - height / 15, 3, 1);
  berry(width - width / 23, height - height / 40, 3, 1);
  berry(width - width / 15, height - height / 20, 3, 1);
  berry(width - width / 70, height - height / 11, 3, 1);

  //left leafs
  fill(purple);
  leaf(width / 400, height, 1, 5);
  leaf(0, height, 1, 90);
  leaf(0, height, 1, 45);

  //left side
  berry(width / 9, height - height / 9, 1, 2);
  berry(width / 40, height - height / 14, 1, 2);
  berry(width / 8, height - height / 40, 1, 2);

  berry(width / 50, height - height / 20, 2, 2);
  berry(width / 25, height - height / 9, 2, 2);
  berry(width / 12, height - height / 10, 2, 2);
  berry(width / 11, height - height / 35, 2, 2);

  berry(width / 18, height - height / 10, 3, 2);
  berry(width / 12, height - height / 7, 3, 2);
  berry(width / 9, height - height / 15, 3, 2);
  berry(width / 25, height - height / 40, 3, 2);
  berry(width / 15, height - height / 20, 3, 2);
}

garcia_training_values.json

{
  "000001": [
    0,
    40,
    100,
    100,
    0,
    50,
    75,
    25
  ],
  "000002": [
    0,
    0,
    100,
    100,
    0,
    100,
    0,
    0
  ],
  "000005": [
    0,
    0,
    0,
    0,
    100,
    67,
    0,
    100
  ],
  "000006": [
    0,
    100,
    66.00000000000001,
    100,
    0,
    0,
    100,
    0
  ],
  "000007": [
    100,
    0,
    55.49999999999999,
    100,
    100,
    0,
    100,
    0
  ],
  "000009": [
    0,
    0,
    62.999999999999986,
    100,
    0,
    100,
    100,
    0
  ],
  "000010": [
    0,
    0,
    0,
    0,
    0,
    67,
    100,
    0
  ],
  "000013": [
    100,
    0,
    0,
    0,
    100,
    66.66666666666666,
    100,
    100
  ],
  "000014": [
    0,
    100,
    66.00000000000001,
    100,
    100,
    0,
    100,
    100
  ],
  "000015": [
    100,
    0,
    62.999999999999986,
    100,
    100,
    0,
    0,
    100
  ],
  "000016": [
    100,
    0,
    57.00000000000001,
    100,
    100,
    0,
    100,
    100
  ],
  "000018": [
    0,
    0,
    0,
    0,
    0,
    55.00000000000001,
    100,
    100
  ],
  "000020": [
    100,
    0,
    58.999999999999986,
    100,
    100,
    0,
    100,
    0
  ],
  "000023": [
    100,
    0,
    66.00000000000001,
    100,
    100,
    0,
    100,
    100
  ],
  "000025": [
    100,
    0,
    62.999999999999986,
    100,
    100,
    0,
    100,
    100
  ],
  "000028": [
    0,
    50,
    58.999999999999986,
    100,
    100,
    100,
    100,
    100
  ],
  "000029": [
    0,
    0,
    0,
    0,
    0,
    50,
    100,
    100
  ],
  "000030": [
    100,
    50,
    100,
    100,
    100,
    0,
    0,
    100
  ],
  "000031": [
    0,
    0,
    62.999999999999986,
    0,
    100,
    100,
    0,
    100
  ],
  "000032": [
    100,
    0,
    54,
    100,
    100,
    0,
    100,
    100
  ],
  "000035": [
    0,
    0,
    56.999999999999986,
    100,
    0,
    54,
    100,
    0
  ],
  "000037": [
    100,
    100,
    62.000000000000014,
    100,
    100,
    0,
    100,
    100
  ],
  "000038": [
    100,
    0,
    60.00000000000001,
    0,
    100,
    0,
    100,
    100
  ],
  "000040": [
    0,
    0,
    54,
    100,
    100,
    66.66666666666666,
    0,
    0
  ],
  "000041": [
    100,
    56.999999999999986,
    58.999999999999986,
    100,
    100,
    0,
    100,
    0
  ],
  "000042": [
    0,
    0,
    55.00000000000001,
    0,
    0,
    100,
    100,
    0
  ],
  "000043": [
    0,
    54,
    95,
    100,
    0,
    0,
    100,
    0
  ],
  "000044": [
    0,
    100,
    81,
    100,
    100,
    67,
    0,
    0
  ],
  "000045": [
    0,
    53,
    100,
    100,
    0,
    0,
    100,
    0
  ],
  "000047": [
    0,
    56.00000000000001,
    58.999999999999986,
    100,
    0,
    0,
    100,
    0
  ],
  "000048": [
    100,
    0,
    58.5,
    100,
    0,
    66.66666666666666,
    100,
    100
  ],
  "000050": [
    100,
    0,
    52.49999999999999,
    100,
    0,
    66.66666666666666,
    100,
    100
  ],
  "000051": [
    100,
    56.00000000000001,
    100,
    100,
    100,
    67,
    100,
    100
  ],
  "000052": [
    100,
    62.000000000000014,
    62.000000000000014,
    100,
    100,
    67,
    0,
    100
  ],
  "000054": [
    0,
    0,
    0,
    0,
    0,
    0,
    100,
    100
  ],
  "000055": [
    100,
    0,
    54,
    100,
    100,
    0,
    0,
    100
  ],
  "000056": [
    0,
    0,
    58.5,
    100,
    0,
    66.66666666666666,
    100,
    100
  ],
  "000058": [
    0,
    0,
    55.00000000000001,
    0,
    0,
    100,
    100,
    100
  ],
  "000060": [
    100,
    100,
    64.99999999999999,
    0,
    100,
    67,
    100,
    100
  ],
  "000064": [
    100,
    0,
    54,
    0,
    0,
    67,
    100,
    0
  ],
  "000065": [
    100,
    0,
    83,
    100,
    100,
    67,
    100,
    100
  ],
  "000068": [
    100,
    51,
    100,
    100,
    0,
    67,
    100,
    100
  ],
  "000069": [
    100,
    0,
    64.5,
    100,
    0,
    66.66666666666666,
    100,
    100
  ],
  "000071": [
    0,
    0,
    0,
    0,
    0,
    66.66666666666666,
    100,
    100
  ],
  "000073": [
    0,
    60.00000000000001,
    83,
    100,
    0,
    0,
    100,
    0
  ],
  "000076": [
    100,
    58.00000000000001,
    54,
    100,
    0,
    0,
    100,
    0
  ],
  "000077": [
    0,
    0,
    60.00000000000001,
    100,
    0,
    51,
    100,
    100
  ],
  "000078": [
    0,
    0,
    60.00000000000001,
    100,
    0,
    0,
    100,
    100
  ],
  "000079": [
    100,
    54,
    60.00000000000001,
    100,
    100,
    0,
    100,
    100
  ],
  "000080": [
    100,
    0,
    54,
    100,
    100,
    0,
    100,
    100
  ],
  "000081": [
    100,
    0,
    55.00000000000001,
    100,
    100,
    0,
    100,
    100
  ],
  "000083": [
    0,
    0,
    100,
    0,
    0,
    52,
    100,
    100
  ],
  "000085": [
    0,
    0,
    100,
    100,
    0,
    0,
    100,
    100
  ],
  "000086": [
    0,
    0,
    56.999999999999986,
    100,
    100,
    56.00000000000001,
    100,
    100
  ],
  "000088": [
    0,
    0,
    100,
    100,
    100,
    0,
    100,
    100
  ],
  "000091": [
    100,
    0,
    64.99999999999999,
    0,
    100,
    0,
    100,
    100
  ],
  "000092": [
    0,
    0,
    0,
    0,
    0,
    100,
    0,
    100
  ],
  "000096": [
    0,
    0,
    55.00000000000001,
    100,
    0,
    0,
    0,
    0
  ],
  "000097": [
    0,
    0,
    56.999999999999986,
    0,
    0,
    67,
    100,
    0
  ],
  "000099": [
    0,
    0,
    60.00000000000001,
    0,
    0,
    66.66666666666666,
    100,
    0
  ],
  "000100": [
    0,
    0,
    66.00000000000001,
    100,
    100,
    67,
    0,
    100
  ],
  "000103": [
    0,
    10.999999999999998,
    51,
    50,
    0,
    33.00000000000001,
    100,
    100
  ],
  "000104": [
    100,
    0,
    0,
    0,
    100,
    100,
    0,
    0
  ],
  "000106": [
    0,
    0,
    64.99999999999999,
    100,
    0,
    100,
    0,
    100
  ],
  "000108": [
    0,
    54,
    0,
    0,
    0,
    0,
    0,
    100
  ],
  "000109": [
    100,
    53,
    58.999999999999986,
    100,
    100,
    0,
    0,
    100
  ],
  "000110": [
    0,
    0,
    62.000000000000014,
    50,
    50,
    55.00000000000001,
    0,
    0
  ],
  "000111": [
    0,
    100,
    0,
    100,
    0,
    0,
    100,
    0
  ],
  "000114": [
    100,
    0,
    60.00000000000001,
    100,
    50,
    0,
    0,
    100
  ],
  "000115": [
    100,
    0,
    89.99999999999999,
    0,
    100,
    0,
    100,
    100
  ],
  "000116": [
    100,
    0,
    52,
    0,
    50,
    0,
    100,
    100
  ],
  "000117": [
    0,
    100,
    56.999999999999986,
    100,
    50,
    100,
    100,
    0
  ],
  "000118": [
    0,
    51,
    61.5,
    100,
    0,
    100,
    100,
    0
  ],
  "000121": [
    0,
    0,
    55.00000000000001,
    100,
    50,
    1.0000000000000009,
    100,
    0
  ],
  "000122": [
    0,
    0,
    0,
    100,
    50,
    50,
    100,
    100
  ],
  "000125": [
    100,
    0,
    0,
    0,
    100,
    0,
    100,
    100
  ],
  "000126": [
    0,
    52,
    0,
    0,
    0,
    0,
    100,
    100
  ],
  "000129": [
    100,
    0,
    58.999999999999986,
    0,
    100,
    0,
    0,
    0
  ],
  "000131": [
    0,
    100,
    62.000000000000014,
    100,
    0,
    100,
    100,
    100
  ],
  "000132": [
    0,
    53,
    60.00000000000001,
    100,
    0,
    0,
    100,
    100
  ],
  "000133": [
    0,
    53,
    0,
    0,
    0,
    68.00000000000001,
    0,
    100
  ],
  "000134": [
    100,
    100,
    51,
    100,
    100,
    0,
    100,
    100
  ],
  "000135": [
    100,
    53,
    64.99999999999999,
    100,
    100,
    0,
    100,
    100
  ],
  "000137": [
    100,
    0,
    51,
    100,
    100,
    0,
    100,
    0
  ],
  "000140": [
    0,
    58.999999999999986,
    0,
    50,
    0,
    0,
    100,
    0
  ],
  "000142": [
    0,
    0,
    60.00000000000001,
    0,
    0,
    62.999999999999986,
    100,
    100
  ],
  "000143": [
    100,
    0,
    60.00000000000001,
    0,
    100,
    0,
    100,
    0
  ],
  "000145": [
    0,
    56.999999999999986,
    51,
    100,
    0,
    100,
    100,
    0
  ],
  "000146": [
    0,
    58.999999999999986,
    150,
    100,
    50,
    0,
    100,
    0
  ],
  "000147": [
    0,
    46,
    15.000000000000002,
    0,
    0,
    64.00000000000001,
    100,
    0
  ],
  "000148": [
    0,
    46,
    66.00000000000001,
    100,
    0,
    33.00000000000001,
    100,
    100
  ],
  "000150": [
    100,
    46,
    100,
    100,
    100,
    0,
    0,
    100
  ],
  "000151": [
    0,
    46,
    55.00000000000001,
    100,
    0,
    100,
    100,
    100
  ],
  "000152": [
    100,
    60.00000000000001,
    83,
    100,
    100,
    0,
    100,
    100
  ],
  "000153": [
    100,
    46,
    52,
    100,
    100,
    0,
    100,
    100
  ],
  "000155": [
    0,
    46,
    150,
    100,
    0,
    0,
    100,
    100
  ],
  "000156": [
    0,
    46,
    0,
    0,
    0,
    69,
    100,
    100
  ],
  "000157": [
    0,
    46,
    0,
    0,
    0,
    0,
    100,
    100
  ],
  "000160": [
    100,
    0,
    62.000000000000014,
    100,
    100,
    0,
    0,
    0
  ],
  "000161": [
    0,
    0,
    51,
    0,
    0,
    0,
    100,
    0
  ]
}

ge_anim.js

let noise_01 = 1;
let noise_02 = 1;
let noise_03 = 1;
let opacity = 1;
let smoothVal = 100;
const ease_ge = new p5.Ease();

function ge_draw_one_frame(cur_frac) {
  // draw the background every time
  drawBG();

  // initialize the values
  let blue = color(99, 176, 242);
  let purple = color('#D02E9D');
  let frame = floor(map(cur_frac, 0, 1, 0, 24)); // get an integer from 0 to 23 as integers (current frame)
  // set an array of 24 values going up and down
  let arr1 = linspace(0, 1, 12);
  let arr2 = (linspace(1, 0, 12));
  let arr = concat(arr1, arr2);

  // if not the debug view, draw the wallpaper
  if(!debugView) {
    strokeWeight(width*0.001);
    // initialize the values, and make sure they all fit in different size of canvas
    let die_size = width * 0.06; gap_y = height/4-die_size*2, gap_x = die_size*0.2;
    let set_width = die_size * 2 * 6 + gap_x * 6;
    let row = 0;

    // draw dice to fill the screen
    for (var y = die_size+gap_y*2; y <= height-die_size; y += die_size*2+gap_y) { // y position of the dice
      for (var i = 0; i < width/set_width; i++) { // how many sets will be drawn
        let gap = set_width / 6 + gap_x, x = die_size + i * (set_width+die_size+gap_x); // set the gap between die and x position
        if (row % 2 == 0) { x = die_size*2 + i * (set_width+die_size+gap_x);} // every line with even numbers will have an x offset
        drawD4(x+gap_x, y+getEaseValue(arr, 0+i*6, frame, die_size), die_size, cur_frac, blue, purple, i*row, true);
        drawD6(x+gap, y+getEaseValue(arr, 1+i*6, frame, die_size), die_size, cur_frac, blue, purple, i*row, true);
        drawD8(x+gap*2, y+getEaseValue(arr, 2+i*6, frame, die_size), die_size, cur_frac, blue, purple, i*row, true);
        drawD10(x+gap*3, y+getEaseValue(arr, 3+i*6, frame, die_size), die_size, cur_frac, blue, purple, i*row, true);
        drawD12(x+gap*4, y+getEaseValue(arr, 4+i*6, frame, die_size), die_size, cur_frac, blue, purple, i*row, true);
        drawD20(x+gap*5, y+getEaseValue(arr, 5+i*6, frame, die_size), die_size, cur_frac, blue, purple, i*row, true);
      }
      row++;
    }
  }

  // if debug view, draw only two set
  if (debugView) {
    strokeWeight(height*0.01);

    // here we draw three set of dice
    let die_size = width*0.07, gap_y = height*0.015, gap_x = width*0.005;
    let set_width = die_size * 2 * 6 + gap_x * 6;
    let row = 0;

    for (var y = die_size*1.5; y <= height-die_size; y += die_size*2+gap_y) {
      for (var i = 0; i < width/set_width; i++) {
        let gap = set_width / 6 + gap_x, x = die_size + i * (set_width+die_size+gap_x);
        if (row % 2 == 0) { x = die_size*2 + i * (set_width+die_size+gap_x);}
        drawD4(x+gap_x, y+getEaseValue(arr, 0+i*6, frame, die_size), die_size, cur_frac, blue, purple, i*row, true);
        drawD6(x+gap, y+getEaseValue(arr, 1+i*6, frame, die_size), die_size, cur_frac, blue, purple, i*row, true);
        drawD8(x+gap*2, y+getEaseValue(arr, 2+i*6, frame, die_size), die_size, cur_frac, blue, purple, i*row, true);
        drawD10(x+gap*3, y+getEaseValue(arr, 3+i*6, frame, die_size), die_size, cur_frac, blue, purple, i*row, true);
        drawD12(x+gap*4, y+getEaseValue(arr, 4+i*6, frame, die_size), die_size, cur_frac, blue, purple, i*row, true);
        drawD20(x+gap*5, y+getEaseValue(arr, 5+i*6, frame, die_size), die_size, cur_frac, blue, purple, i*row, true);
      }
      row++;
    }
  }
}

/* draw a die with 4 faces */
function drawD4(x, y, size, step, c1, c2, str, isGrad) {
  if(!checkWidBounds(x, size) || !checkHeightBounds(y, size)) return;
  arr = setNoise(x, y, c1, c2, step, "d4_0", str, isGrad);
  c1 = arr[0]; c2 = arr[1];
  let br = p5.Vector.fromAngle(radians(30), size*noise_01); // bottom right
  let bl = p5.Vector.fromAngle(radians(150), size*noise_02); // bottom left
  let t = p5.Vector.fromAngle(radians(270), size*noise_03); // top
  let cols = [color('#9C4F96'), color('#FF6355'), color('#FBA949'), color('#FAE442'), color('#8BD448'), color('#2AA8F2')];
  push();
    translate(x, y);
    gradientLine(0, 0, br.x, br.y, c1, c2, step);
    gradientLine(0, 0, bl.x, bl.y, c1, c2, step);
    gradientLine(0, 0, t.x, t.y, c1, c2, step);
    gradientLine(bl.x, bl.y, br.x, br.y, c1, c2, step);
    gradientLine(t.x, t.y, bl.x, bl.y, c1, c2, step);
    gradientLine(br.x, br.y, t.x, t.y, c1, c2, step);
  pop();
}

/* draw a die with 6 faces */
function drawD6(x, y, size, step, c1, c2, str, isGrad) {
  if(!checkWidBounds(x, size) || !checkHeightBounds(y, size)) return;
  setNoise(x, y, c1, c2, step, "d6_0", str, isGrad);
  let len = size * 0.92;
  let b = p5.Vector.fromAngle(radians(90), len*noise_01); // bottom
  let tl = p5.Vector.fromAngle(radians(210), len*noise_02); // top left
  let tr = p5.Vector.fromAngle(radians(-30), len*noise_03); // top right
  let t = p5.Vector.fromAngle(radians(-90), len*noise_02); // top
  let br = p5.Vector.fromAngle(radians(30), len*noise_01); // bottom right
  let bl = p5.Vector.fromAngle(radians(150), len*noise_03); // bottom left
  push();
    translate(x, y);
    // top face
    gradientLine(0, 0, tl.x, tl.y, c1, c2, step);
    gradientLine(0, 0, tr.x, tr.y, c1, c2, step);
    gradientLine(tl.x, tl.y, t.x, t.y, c1, c2, step);
    gradientLine(t.x, t.y, tr.x, tr.y, c1, c2, step);
    // right face
    gradientLine(0, 0, b.x, b.y, c1, c2, step);
    gradientLine(br.x, br.y, b.x, b.y, c1, c2, step);
    gradientLine(br.x, br.y, tr.x, tr.y, c1, c2, step);
    // left face
    gradientLine(tl.x, tl.y, bl.x, bl.y, c1, c2, step);
    gradientLine(b.x, b.y, bl.x, bl.y, c1, c2, step);
  pop();
}

/* draw a die with 8 faces */
function drawD8(x, y, size, step, c1, c2, str, isGrad) {
  if(!checkWidBounds(x, size) || !checkHeightBounds(y, size)) return;
  setNoise(x, y, c1, c2, step, "d8_0", str, isGrad);
  let wid = size / tan(radians(60));
  let len = wid / cos(radians(30));
  let r = p5.Vector.fromAngle(radians(0), wid*noise_01); // right
  let tr = p5.Vector.fromAngle(radians(-30), len*noise_02); // top right
  let t = p5.Vector.fromAngle(radians(-90), size*noise_03); // top
  let tl = p5.Vector.fromAngle(radians(-150), len*noise_03); // top left
  let l = p5.Vector.fromAngle(radians(180), wid*noise_02); // left
  let b = p5.Vector.fromAngle(radians(90), size*0.6*noise_01); // bottom
  push();
    translate(x, y);
    // front face
    gradientLine(t.x, t.y, r.x, r.y, c1, c2, step);
    gradientLine(t.x, t.y, l.x, l.y, c1, c2, step);
    gradientLine(l.x, l.y, r.x, r.y, c1, c2, step);
    // left face
    gradientLine(l.x, l.y, tl.x, tl.y, c1, c2, step);
    gradientLine(tl.x, tl.y, t.x, t.y, c1, c2, step);
    // right face
    gradientLine(tr.x, tr.y, r.x, r.y, c1, c2, step);
    gradientLine(tr.x, tr.y, t.x, t.y, c1, c2, step);
    // bottom face
    gradientLine(b.x, b.y, r.x, r.y, c1, c2, step);
    gradientLine(b.x, b.y, l.x, l.y, c1, c2, step);
  pop();
}

/* draw a die with 10 faces */
function drawD10(x, y, size, step, c1, c2, str, isGrad) {
  if(!checkWidBounds(x, size) || !checkHeightBounds(y, size)) return;
  setNoise(x, y, c1, c2, step, "d10_0", str, isGrad);
  let len = size * 0.92;
  let w = (len/2) / cos(radians(20));
  let mr = p5.Vector.fromAngle(radians(-20), w*noise_01); // middle right
  let r = p5.Vector.fromAngle(radians(0), len*noise_02); // right
  let t = p5.Vector.fromAngle(radians(-90), len*noise_03); // top
  let ml = p5.Vector.fromAngle(radians(-160), w*noise_03); // middle left
  let l = p5.Vector.fromAngle(radians(180), len*noise_02); // left
  let b = p5.Vector.fromAngle(radians(90), len*noise_01); // bottom
  push();
    translate(x, y);
    // front face
    gradientLine(t.x, t.y, ml.x, ml.y, c1, c2, step);
    gradientLine(ml.x, ml.y, 0, 0, c1, c2, step);
    gradientLine(mr.x, mr.y, 0, 0, c1, c2, step);
    gradientLine(mr.x, mr.y, t.x, t.y, c1, c2, step);
    // left face
    gradientLine(ml.x, ml.y, l.x, l.y, c1, c2, step);
    gradientLine(l.x, l.y, t.x, t.y, c1, c2, step);
    // right face
    gradientLine(mr.x, mr.y, r.x, r.y, c1, c2, step);
    gradientLine(r.x, r.y, t.x, t.y, c1, c2, step);
    // bottom faces
    gradientLine(b.x, b.y, l.x, l.y, c1, c2, step);
    gradientLine(b.x, b.y, r.x, r.y, c1, c2, step);
    gradientLine(b.x, b.y, 0, 0, c1, c2, step);
  pop();
}

/* draw a die with 12 faces */
function drawD12(x, y, size, step, c1, c2, str, isGrad) {
  if(!checkWidBounds(x, size) || !checkHeightBounds(y, size)) return;
  setNoise(x, y, c1, c2, step, "d12_0", str, isGrad);
  let middle_w = (size) / cos(radians(15));
  let inner_w = (size/2) / cos(radians(30));
  let ir =  p5.Vector.fromAngle(radians(30), inner_w * noise_01); // inner right
  let r =   p5.Vector.fromAngle(radians(-5),    size * noise_03); // right
  let mr =  p5.Vector.fromAngle(radians(15),middle_w * noise_02); // middle right
  let tr =  p5.Vector.fromAngle(radians(-70),   size * noise_01); // top right
  let ur =  p5.Vector.fromAngle(radians(-45),   size * noise_03); // upper right
  let br =  p5.Vector.fromAngle(radians(75),    size * noise_02); // bottom right
  let lr =  p5.Vector.fromAngle(radians(45),    size * noise_01); // lower right
  let mlr = p5.Vector.fromAngle(radians(15),    size * noise_03); // middle lower left

  let mt =  p5.Vector.fromAngle(radians(-90),inner_w * noise_02); // middle top

  let il =  p5.Vector.fromAngle(radians(150), inner_w * noise_01); // inner left
  let l =   p5.Vector.fromAngle(radians(185),    size * noise_03); // left
  let ml =  p5.Vector.fromAngle(radians(175),middle_w * noise_02); // middle left
  let tl =  p5.Vector.fromAngle(radians(-110),   size * noise_01); // top left
  let ul =  p5.Vector.fromAngle(radians(-135),   size * noise_03); // upper left
  let bl =  p5.Vector.fromAngle(radians(105),    size * noise_02); // bottom left
  let ll =  p5.Vector.fromAngle(radians(135),    size * noise_01); // lower left
  let mll = p5.Vector.fromAngle(radians(165),    size * noise_03); // middle lower left
  push();       
    translate(x, y);
    // front face
    gradientLine(0, 0, il.x, il.y, c1, c2, step);
    gradientLine(il.x, il.y, bl.x, bl.y, c1, c2, step);
    gradientLine(bl.x, bl.y, br.x, br.y, c1, c2, step);
    gradientLine(br.x, br.y, ir.x, ir.y, c1, c2, step);
    gradientLine(0, 0, ir.x, ir.y, c1, c2, step);
    // left face
    gradientLine(0, 0, mt.x, mt.y, c1, c2, step);
    gradientLine(mt.x, mt.y, ul.x, ul.y, c1, c2, step);
    gradientLine(l.x, l.y, ul.x, ul.y, c1, c2, step);
    gradientLine(l.x, l.y, il.x, il.y, c1, c2, step);
    // right face
    gradientLine(0, 0, ir.x, ir.y, c1, c2, step);
    gradientLine(ir.x, ir.y, r.x, r.y, c1, c2, step);
    gradientLine(r.x, r.y, ur.x, ur.y, c1, c2, step);
    gradientLine(mt.x, mt.y, ur.x, ur.y, c1, c2, step);
    // bottom faces
    gradientLine(bl.x, bl.y, ll.x, ll.y, c1, c2, step);
    gradientLine(ll.x, ll.y, mll.x, mll.y, c1, c2, step);
    gradientLine(l.x, l.y, mll.x, mll.y, c1, c2, step);
    gradientLine(br.x, br.y, lr.x, lr.y, c1, c2, step);
    gradientLine(lr.x, lr.y, mlr.x, mlr.y, c1, c2, step);
    gradientLine(r.x, r.y, mlr.x, mlr.y, c1, c2, step);
    // top face
    gradientLine(tr.x, tr.y, ur.x, ur.y, c1, c2, step);
    gradientLine(tl.x, tl.y, ul.x, ul.y, c1, c2, step);
    gradientLine(tl.x, tl.y, tr.x, tr.y, c1, c2, step);
  pop();
}

/* draw a die with 20 faces */
function drawD20(x, y, size, step, c1, c2, str, isGrad) {
  if(!checkWidBounds(x, size) || !checkHeightBounds(y, size)) return;
  setNoise(x, y, c1, c2, step, "d20_0", str, isGrad);
  let len = size * cos(radians(30)) * 1.1;
  let wid = size/2 * 1.1;
  let t =  p5.Vector.fromAngle(radians(-90),  len * noise_02); // top

  let tr = p5.Vector.fromAngle(radians(-30),  len * noise_02); // top right
  let mr = p5.Vector.fromAngle(radians(-35),  wid * noise_01); // middle right
  let lr = p5.Vector.fromAngle(radians(25),   len * noise_03); // lower right

  let tl = p5.Vector.fromAngle(radians(-150), len * noise_01); // top left
  let ml = p5.Vector.fromAngle(radians(-145), wid * noise_03); // middle left
  let ll = p5.Vector.fromAngle(radians(155),  len * noise_01); // lower left

  let lm = p5.Vector.fromAngle(radians(90),   wid * noise_02); // lower middle
  let b =  p5.Vector.fromAngle(radians(90),   len * noise_03); // bottom

  push();
    translate(x, y);
    // middle face
    gradientLine(mr.x, mr.y, ml.x, ml.y, c1, c2, step);
    gradientLine(mr.x, mr.y, lm.x, lm.y, c1, c2, step);
    gradientLine(lm.x, lm.y, ml.x, ml.y, c1, c2, step);
    // left faces
    gradientLine(lm.x, lm.y, ll.x, ll.y, c1, c2, step);
    gradientLine(ll.x, ll.y, ml.x, ml.y, c1, c2, step);
    gradientLine(tl.x, tl.y, ll.x, ll.y, c1, c2, step);
    gradientLine(tl.x, tl.y, ml.x, ml.y, c1, c2, step);
    // right faces
    gradientLine(lm.x, lm.y, lr.x, lr.y, c1, c2, step);
    gradientLine(lr.x, lr.y, mr.x, mr.y, c1, c2, step);
    gradientLine(tr.x, tr.y, lr.x, lr.y, c1, c2, step);
    gradientLine(tr.x, tr.y, mr.x, mr.y, c1, c2, step);
    // top faces
    gradientLine(tr.x, tr.y, t.x, t.y, c1, c2, step);
    gradientLine(mr.x, mr.y, t.x, t.y, c1, c2, step);
    gradientLine(tl.x, tl.y, t.x, t.y, c1, c2, step);
    gradientLine(ml.x, ml.y, t.x, t.y, c1, c2, step);
    // bottom faces
    gradientLine(lm.x, lm.y, b.x, b.y, c1, c2, step);
    gradientLine(ll.x, ll.y, b.x, b.y, c1, c2, step);
    gradientLine(lr.x, lr.y, b.x, b.y, c1, c2, step);
  pop();

}

/* draw a gradient line with colors flows */
function gradientLine(x0, y0, x1, y1, c1, c2, s) {
  let d = dist(x0, y0, x1, y1); // the length of the line
  let prevX = x0, prevY = y0;
  for (var i = 1; i < d; i++) {
    let step = map(i, 0, d, 0, 1); 
    let c, col_step;
    // getting the x1, y1 for the line fragment 
    let x = lerp(x0, x1, step);
    let y = lerp(y0, y1, step);
    // getting the color from the current frame and the lerp color
    if (step <= s) {
      col_step = map(step, 0, s, 0, 1);
      c = lerpColor(c1, c2, col_step);
    } else {
      col_step = map(step, s, 1, 0, 1);
      c = lerpColor(c1, c2, col_step);
    }
    stroke(c);
    line(prevX, prevY, x, y);
    prevX = x;
    prevY = y;
  }
}

/* check the width boundaries for die's x position */
function checkWidBounds(x, size) {
  if (x > width-size) { return false; }
  else { return true; }
}

/* check the height boundaries for die's y position */
function checkHeightBounds(y, size) {
  if (y > height) { return false; }
  else { return true; }
}

/* get average noise value for the global opacity */
function getOpacity(x, y, step){
  let opacity2 = getNoiseValue(x, y, step, "opacity", 50, 255, smoothVal);
  let opacity1 = getNoiseValue(x, y, 0, "opacity", 50, 255, smoothVal);
  return map(0.5, 0, 1, opacity2, opacity1);
}

/* get average noise value for dice's line's length size */
function getNoise(x, y, step, str){
  let noise2 = getNoiseValue(x, y, step, str, 0.9, 1.1, 300);
  let noise1 = getNoiseValue(x, y, 0, str, 0.9, 1.1, 300);
  return map(0.5, 0, 1, noise2, noise1);
}

/* set the noice and color value from the given conditions */
function setNoise(x, y, c1, c2, step, prefix, str, isGrad) {
  let arr = []; // array to store output colors
  if (isGrad) {
    opacity = getOpacity(x, y, step);
    c1.setAlpha(opacity); c2.setAlpha(opacity);
    noise_01 = getNoise(x, y, step, prefix+"1"+str);
    noise_02 = getNoise(x, y, step, prefix+"2"+str);
    noise_03 = getNoise(x, y, step, prefix+"3"+str);
  } else {
    noise_01 = 1; noise_02 = 1; noise_03 = 1; // is not gradient, don't change sizes
  }
  arr.push(c1);
  arr.push(c2);
  return arr;
}

/** return an array with size of the given number, 
 * with maximum(not included) and minimin provided, and evenly spaced
 * @param x --- minimum
 * @param y --- maximum
 * @num --- the size of the array
 */
function linspace(x, y, num) {
  let result = [];
  let step = (y-x)/num;
  for (let i = 0; i < num; i++) {
    result[i] = x + i * step;
  }
  return result;
}

/** get a value out of array, 
 * if the index is exceeding the array size, 
 * loop it from the start 
 */
function arrayAt(arr, index) {
  let len = arr.length;
  return arr[index % len];
}

/** get a easing value from the given number, and map it from 0 to maximum
 * @param arr --- the array that contains all the step values
 * @param index --- the starting position in the array
 * @param frame --- the current position in the array
 * @param max --- the maximum number of the output value
 */
function getEaseValue(arr, index, frame, max) {
  return map(ease_ge.quadraticInOut(arrayAt(arr, index+frame)), 0, 1, 0, max);
}

/* draw a background with a subtle brown color at the middle */
function drawBG() {
  let dark = color(97, 66, 47);
  let light = color(158, 108, 77);
  let gap = width * 0.03;
  fill(10);
  rect(0, 0, width, height);
  noStroke();
  for (let i = 1; i <= 15; i++) {
    let step = map(i, 1, 15, 0, 1);
    let col = lerpColor(dark, light, step);
    col.setAlpha(7);
    fill(col);
    ellipse(width/2, height/2, width-i*gap, height-i*gap);
  }
}

ge_face.js

/*
 * FaceMap class - holds all information about one mapped
 * face and is able to draw itself.
 */  

// remove this or set to false to enable full program (load will be slower)
var DEBUG_MODE = false;

// this can be used to set the number of sliders to show
var NUM_SLIDERS = 8;

// other variables can be in here too
const noiseVal = 0.03; // constant for the hand-drawn looking algorithm

// skin colors
const skin_col_1 = [240, 215, 214];
const skin_col_2 = [245, 201, 168];
const skin_col_3 = [227, 170, 135];
const skin_col_4 = [208, 169, 120];
const skin_col_5 = [194, 137, 99];
const skin_col_6 = [131, 85, 48];
const skin_cols = [skin_col_1, skin_col_2, skin_col_3, skin_col_4, skin_col_5, skin_col_6];

// hair colors
const hair_col_1 = [242,217,111];
const hair_col_2 = [130,78,43];
const hair_col_3 = [168,60,21];
const hair_col_4 = [94,48,48];
const hair_col_5 = [34,33,40];
const hair_cols = [hair_col_1, hair_col_2, hair_col_3, hair_col_4, hair_col_5];

// example of a global function
// given a segment, this returns the average point [x, y]
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 ];
}

// This where you define your own face object
function GeFace() {
  // these are state variables for a face
  this.skin_value = 1; // 0 - 5
  this.facing = 0; // 0: facing right/front, 1: facing left
  this.eye_shift = -1;   // range is -10 to 10
  this.mouth_value = 1;  // range is 0.5 to 8
  this.eye_lash = 0; // 0: no eye lashes, 1: has eye lashes
  this.eye_height = 1.3; // how big the eyes are opened
  this.eye_gap = 0.3; // range is 0 - 0.5
  this.hair_value = 0; // 0 - 4
  this.hair_length = 0; // 0: short hair, 1: long hair

  /*
   * Draw the face with position lists that include:
   *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
   *    bottom_lip, top_lip, nose_tip, nose_bridge, 
   */  
  this.draw = function(positions) {
    // head
    fill(skin_cols[this.skin_value]);
    stroke(25);
    strokeWeight(0.1);
    this.drawFace(positions.chin);

    // mouth
    noFill();
    stroke(25);
    strokeWeight(0.03);
    this.drawMouth(positions);

    // nose
    this.drawShape(positions.nose_tip);

    // eyes
    this.drawEyes(positions);
  }

  /* set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
    this.skin_value = int(map(settings[0], 0, 100, 0, 5.99));
    this.eye_shift = map(settings[1], 0, 100, -0.6, 0.6);
    this.hair_value = int(map(settings[2], 0, 100, 0, 4.99));
    this.facing = int(map(settings[3], 0, 100, 0, 2));
    this.eye_height = map(settings[4], 0, 100, 0.2, 1.3);
    this.eye_lash = int(map(settings[5], 0, 100, 0, 2));
    this.eye_gap = map(settings[6], 0, 100, 0, 0.5);
    this.hair_length = int(map(settings[7], 0, 100, 0, 2));
  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    let settings = new Array(8);
    settings[0] = map(this.skin_value, 0, 5.99, 0, 100);
    settings[1] = map(this.eye_shift, -0.6, 0.6, 0, 100);
    settings[2] = map(this.hair_value, 0, 4.99, 0, 100);
    settings[3] = map(this.facing, 0, 2, 0, 100);
    settings[4] = map(this.eye_height, 0.2, 1.3, 0, 100);
    settings[5] = map(this.eye_lash, 0, 2, 0, 100);
    settings[6] = map(this.eye_gap, 0, 0.5, 0, 100);
    settings[7] = map(this.hair_length, 0, 2, 0, 100);
    return settings;
  }

  /* draw the face with the provided face value and slider values */
  this.drawFace = function(segment) {
    let facePos = this.analyzeFace(segment);
    let front = facePos[0];
    let back = facePos[1];
    let chin = facePos[2];
    let pos = [];
    facePos[0] = front[0] * 0.2 + back[0] * 0.8;
    facePos[1] = (front[1] + back[1])/2;
    let faceWidth = abs(front[0]-back[0])/12.0
    push();
      if(this.facing >= 1) { // facing left
        scale(-faceWidth, abs(front[1]-chin[1])/8.0);
      } else {
        scale(faceWidth, abs(front[1]-chin[1])/8.0);
      }
      
      translate(facePos[0], facePos[1]);
      
      this.drawBackHair();

      fill(skin_cols[this.skin_value]);
      let face = this.computeBezier(-6.2, -7, -3, -8, -1, -8, 2, -7);
      face.push(...this.computeBezier(2, -7, 5, -6, 3, -4, 4, -2));
      face.push(...this.computeBezier(4, -2, 6, 1, 6, 4, 4, 5.5));
      face.push(...this.computeBezier(4, 5.5, 2, 7, -1, 8, -6, 5));
      face.push(...this.computeBezier(-6, 5, -8, 4, -8, 3, -8, 1));
      face.push(...this.computeBezier(-8, 1.5, -10, 2, -11, -2, -8, 0));
      face.push(...this.computeBezier(-8, -1, -8, -3, -8, -5, -6, -7));
      this.drawShape(face);

      this.drawFrontHair();
    pop();
  }

  /* draw the eyes, which can open and close */
  this.drawEyes = function(positions) {
    let eyeLPos = segment_average(positions.left_eye);
    let eyeRPos = segment_average(positions.right_eye);
    let yPos = positions.nose_bridge[1];
    let eyeWidth = 1.3;
    let eyeMPos = [];
    eyeMPos[0] = (eyeLPos[0] + eyeRPos[0])/2;

    let curEyeShift = this.eye_shift;

    lerpVal = this.eye_gap;
    eyeLPos[0] = lerp(eyeLPos[0], eyeMPos[0], lerpVal);
    eyeRPos[0] = lerp(eyeRPos[0], eyeMPos[0], lerpVal);
    eyeLPos[1] = yPos[1];
    eyeRPos[1] = yPos[1];
      
    // left eye
    stroke(25);
    fill(220);
    this.drawOval(eyeLPos[0], eyeLPos[1], eyeWidth, this.eye_height);
    fill(25);
    noStroke();
    this.drawOval(eyeLPos[0]+this.eye_shift, eyeLPos[1], 0.15, 0.15);

    // right eye
    stroke(25);
    fill(220);
    this.drawOval(eyeRPos[0], eyeRPos[1], eyeWidth, this.eye_height);
    fill(25);
    noStroke();
    this.drawOval(eyeRPos[0]+this.eye_shift, eyeRPos[1], 0.15, 0.15);

    // eyebrows, it follows the eyes without intersecting with one another
    stroke(25);
    noFill();
    this.drawShape(this.computeBezier(eyeLPos[0]-eyeWidth*0.4, eyeLPos[1]-this.eye_height*0.6, 
                                      eyeLPos[0]-eyeWidth*0.2, eyeLPos[1]-this.eye_height*0.85, 
                                      eyeLPos[0]+eyeWidth*(0.5-lerpVal), eyeLPos[1]-this.eye_height*0.85, 
                                      eyeLPos[0]+eyeWidth*(0.6-lerpVal), eyeLPos[1]-this.eye_height*0.6));
    this.drawShape(this.computeBezier(eyeRPos[0]-eyeWidth*0.4, eyeRPos[1]-this.eye_height*0.6, 
                                      eyeRPos[0]-eyeWidth*0.2, eyeRPos[1]-this.eye_height*0.85, 
                                      eyeRPos[0]+eyeWidth*(0.5-lerpVal), eyeRPos[1]-this.eye_height*0.85, 
                                      eyeRPos[0]+eyeWidth*(0.6-lerpVal), eyeRPos[1]-this.eye_height*0.6));

    // eyelash
    if (this.eye_lash >= 1) {
      this.drawLine(eyeLPos[0]-eyeWidth*0.4, eyeLPos[1]-this.eye_height*0.3, eyeLPos[0]-eyeWidth*0.6, eyeLPos[1]-this.eye_height*0.4);
      this.drawLine(eyeRPos[0]+eyeWidth*0.4, eyeRPos[1]-this.eye_height*0.3, eyeRPos[0]+eyeWidth*0.6, eyeRPos[1]-this.eye_height*0.4);
    }
  }

  /* draw the mouth, either closed or open */
  this.drawMouth = function(positions) {
    let mouth = subset(positions.top_lip, 6); // get the lower half of the top lip
    let length = mouth.length; // get the initial top lip length 
    mouth.push(...reverse(subset(positions.bottom_lip, 0, 7))); // get the lower half of the bottom lip
    let pos = segment_average(positions.top_lip); // find the position of the mouth
    push();
      scale(1, 1.3); // scale up the y axis to exaggerate the expression
      if (this.facing >= 1){
        translate(-0.2, -0.1);
      } else {
        translate(0.2, -0.1);
      }

      let mouthHeight = this.findHeight(mouth);

      // if the mouth is opened, draw a mouth, teeth and tongue
      if (mouthHeight > 0.4) {
        fill(103,38,54);
        this.drawShape(mouth);
        fill(255);

        // teeth
        let top = this.combineCurve(subset(mouth, 0, length+1)); // get a more detailed array with points
        top = subset(top, top.length*0.2, top.length-(top.length*0.3)); 
        // draw the lower points of the teeth, use the mouth height as the guidance
        loop = top[0];
        let tmp = [];
        tmp[0] = top[top.length-3][0];
        tmp[1] = top[top.length-3][1]+ mouthHeight*0.2;
        append(top, tmp)
        tmp = [];
        tmp[0] = top[2][0];
        tmp[1] = top[2][1]+ mouthHeight*0.2;
        append(top, tmp)
        append(top, loop);
        this.drawShape(top);

        // tongue
        let bottom = this.combineCurve(subset(mouth, length)); 
        tongue = subset(bottom, bottom.length*0.3, bottom.length-(bottom.length*0.5));
        let x = lerp(tongue[0][0], tongue[tongue.length-1][0], 0.45);
        let y = lerp(tongue[0][1], tongue[tongue.length-1][1], 0.45);
        stroke(255, 0, 0);
        fill(180,85,118);
        noStroke();
        this.drawShape(tongue);
        this.drawOval(x, y, dist(tongue[0][0], tongue[tongue.length-1][0], tongue[0][1], tongue[tongue.length-1][1])*0.45, mouthHeight*0.3);
        
        // redraw the outline
        stroke(25);
        noFill();
        this.drawShape(mouth);

      } else {
        // if the mouth is not opened
        noFill();
        this.drawShape(subset(positions.bottom_lip, 6));
      }
      noFill();
    pop();
  }

  /**
   * helper method to draw the front hair
   */
  this.drawFrontHair = function() {
    fill(hair_cols[this.hair_value]);
    let hair = this.computeBezier(4, -3, 1, -4, -1, -5, -1, -7.5);
    hair.push(...this.computeBezier(-1, -7.5, -2, -2, -4, -4, -8, -1));
    hair.push(...this.computeBezier(-8, -1, -8, -3, -8, -5, -6, -7));
    hair.push(...this.computeBezier(-6.2, -7, -3, -8, -1, -8, 2, -7));
    hair.push(...this.computeBezier(2, -7, 5, -6, 3, -4, 4, -3));
    this.drawShape(hair); 
  }

  /**
   * helper method to draw the back hair
   */
  this.drawBackHair = function(){
    fill(hair_cols[this.hair_value]);
    if (this.hair_length >= 1) { // long hair
      let hair = this.computeBezier(-6, -7, -9, -5, -10, -2, -9, 2);
      hair.push(...this.computeBezier(-9, 2, -8, 4, -12, 6, -10, 7));
      hair.push(...this.computeBezier(-10, 7, -7, 9, -5, 7, -2, 8.5));
      hair.push(...this.computeBezier(-1.7, 8.5, 0, 9, 4, 10, 7, 6));
      hair.push(...this.computeBezier(7, 6, 5, 5, 5, 3, 5, 1));
      hair.push(...this.computeBezier(5, 1, 8, -2, 4, -5, 3, -6.5));
      this.drawShape(hair); 
    } else { // short hair
      let hair = this.computeBezier(-6, -7, -9, -5, -10, -2, -9, 2);
      hair.push(...this.computeBezier(-9, 2, -8, 4, -8, 4, -9, 5));
      hair.push(...this.computeBezier(-9, 5, -8.5, 5, -8, 6, -5, 5));
      hair.push(...this.computeBezier(-5, 5, -2, 6, -2, 5, 6, 6));
      hair.push(...this.computeBezier(6, 6, 5, 3, 7, 0, 3, -6.6));
      this.drawShape(hair); 
    }

  }

  /**
   * helper method to draw an array of points with curveVertex and noise
   */
  this.drawShape = function(segment) {
    beginShape();
      curveVertex(segment[0][0], segment[0][1]);
      for(let i=0; i<segment.length; i++) {
        let px = segment[i][0];
        let py = segment[i][1];
        curveVertex(px, py);
      }
      curveVertex(segment[segment.length-1][0], segment[segment.length-1][1]);
    endShape();
  }

  /**
   * helper method to draw a line with noise
   */
  this.drawLine = function(x1, y1, x2, y2){
    var dis = dist(x1, y1, x2, y2);
    beginShape();
      curveVertex(x1, y1);
      for (var i = 0; i < dis; i+=0.1) {
        var p = i / dis;
        var x = lerp(x1, x2, p);
        var y = lerp(y1, y2, p);
        var offset = getNoiseValue(x, y, 1, "face", -noiseVal, noiseVal, 10);
        curveVertex(x+offset, y+offset);
      }
      curveVertex(x2, y2);
    endShape();
  }

  /**
   * helper method to draw an arc with start to end in degree
   * x, y - the middle of the arc
   */
  this.drawOval = function(x, y, width, height){
    var a = width/2, b = height/2;
    var dis = 2 * PI * b + 4 * (a - b); 
    beginShape();
      curveVertex(x+a, y);
      for (var i = 0; i <= dis; i+=0.1) {
        var t = map(i, 0, dis, 0, 360);
        var offset = getNoiseValue(0, 0, map(i, 0, dis, 0, 1), "face", -noiseVal, noiseVal, 10);
        var newX = (a + offset) * cos(t) + x;
        var newY = (b + offset) * sin(t) + y;
        curveVertex(newX, newY);
      }
      curveVertex(x+a, y);
    endShape(CLOSE);
   
  }

  /**
   * helper method to draw a bezier curve with noise
   */
  this.computeBezier = function(x1, y1, x2, y2, x3, y3, x4, y4) {
    let vertices = [];
    let j = 2;
    vertices[0] = []; vertices[1] = [];
    vertices[0][0] = x1; vertices[0][1] = y1;
    vertices[1][0] = x1; vertices[1][1] = y1;
    // estimate how long the curve is from point to point dist
    let estimateDist = dist(x1, y1, x2, y2) + dist(x2, y2, x3, y3) + dist(x3, y3, x4, y4); 
    // loop through the bezier and add them into the array with noise offset
    for (let i = 0; i <= estimateDist; i += 0.3) {
      let t = i / estimateDist; // t is [0,1], the ratio in the curve that we can get the vector point
      let x = bezierPoint(x1, x2, x3, x4, t); 
      let y = bezierPoint(y1, y2, y3, y4, t);
      let offset = getNoiseValue(0, 0, t, "face", -noiseVal, noiseVal, 10);
      vertices[j] = [];
      vertices[j][0] = x + offset;
      vertices[j][1] = y + offset;
      j++;
    }
    vertices[j] = []; vertices[j+1] = [];
    vertices[j][0] = x4; vertices[j][1] = y4;
    vertices[j+1][0] = x4; vertices[j+1][1] = y4;
    return vertices;
  }

  /**
   * analyze the face center position, its width and height
   * and return an array of the leftest, rightest and lowest point
   */
  this.analyzeFace = function(segment){
    let result = [];
    result[0] = segment[0];
    result[1] = segment[segment.length-1];
    result[2] = segment[0];
    for(let i = 0; i < segment.length; i++) {
      if (result[2][1] < segment[i][1]) result[2] = segment[i];
    }
    return result;
  }

  /**
   * find the height of the given point array
   * used for calculating if the mouth is opened
   */
  this.findHeight = function(segment) {
    let minY = segment[0][1];
    let maxY = segment[0][1];
    for (let i = 0; i < segment.length; i++) {
      if(minY > segment[i][1]) minY = segment[i][1];
      if(maxY < segment[i][1]) maxY = segment[i][1];
    }
    return abs(maxY - minY);
  }

  /**
   * helper method to calculate a more detailed points array for a given array
   * which is a continuous curve
   */
  this.combineCurve = function(segment){
    let result = [];
    for (let i = 0; i < segment.length-1; i++) {
      let dis = dist(segment[i][0], segment[i][1], segment[i+1][0], segment[i+1][1]);
      for (let j = 0; j < dis; j+=0.05) {
        let t = j/dis;
        let point = [];
        point[0] = lerp(segment[i][0], segment[i+1][0], t);
        point[1] = lerp(segment[i][1], segment[i+1][1], t);
        append(result, point);
      }
    }
    return result;
  }
}

ge_training_values.json

{
  "000001": [
    20,
    47,
    81,
    25,
    40,
    0,
    26,
    0
  ],
  "000002": [
    20,
    51,
    50,
    100,
    81.00000000000001,
    100,
    17,
    100
  ],
  "000005": [
    20,
    50,
    0,
    0,
    43,
    100,
    47,
    0
  ],
  "000006": [
    80,
    61,
    25,
    0,
    43,
    100,
    0,
    100
  ],
  "000007": [
    20,
    54,
    100,
    100,
    52,
    0,
    18,
    0
  ],
  "000009": [
    20,
    45.00000000000001,
    25,
    0,
    59,
    100,
    19,
    100
  ],
  "000010": [
    20,
    57.99999999999999,
    0,
    0,
    55.000000000000014,
    100,
    18,
    100
  ],
  "000013": [
    20,
    57.99999999999999,
    0,
    0,
    53.000000000000014,
    0,
    18,
    0
  ],
  "000014": [
    80,
    45.00000000000001,
    100,
    0,
    53.000000000000014,
    100,
    18,
    0
  ],
  "000015": [
    20,
    39,
    100,
    0,
    14.999999999999996,
    0,
    18,
    0
  ],
  "000016": [
    20,
    76,
    100,
    100,
    40.00000000000001,
    0,
    18,
    0
  ],
  "000018": [
    0,
    47,
    0,
    0,
    44,
    100,
    18,
    100
  ],
  "000020": [
    20,
    59,
    75,
    0,
    40.00000000000001,
    0,
    18,
    100
  ],
  "000023": [
    20,
    75,
    100,
    0,
    42,
    0,
    18,
    0
  ],
  "000025": [
    20,
    55.00000000000001,
    75,
    100,
    43,
    0,
    15,
    0
  ],
  "000028": [
    20,
    55.00000000000001,
    25,
    0,
    72,
    100,
    15,
    100
  ],
  "000029": [
    20,
    47,
    0,
    0,
    72,
    100,
    15,
    100
  ],
  "000030": [
    20,
    49,
    0,
    0,
    82,
    0,
    15,
    0
  ],
  "000031": [
    20,
    56.99999999999999,
    25,
    0,
    82,
    100,
    28.000000000000004,
    0
  ],
  "000032": [
    20,
    45.00000000000001,
    25,
    0,
    63,
    0,
    13,
    0
  ],
  "000035": [
    20,
    56.00000000000001,
    100,
    0,
    76,
    100,
    13,
    100
  ],
  "000037": [
    80,
    56.00000000000001,
    100,
    0,
    51.000000000000014,
    0,
    13,
    0
  ],
  "000038": [
    0,
    44.00000000000001,
    100,
    0,
    38.00000000000001,
    0,
    13,
    0
  ],
  "000040": [
    40,
    55.00000000000001,
    100,
    0,
    86.00000000000001,
    100,
    53,
    100
  ],
  "000041": [
    20,
    19,
    100,
    100,
    87,
    0,
    53,
    0
  ],
  "000042": [
    20,
    42.00000000000001,
    25,
    0,
    53.000000000000014,
    100,
    53,
    100
  ],
  "000043": [
    20,
    50,
    25,
    0,
    63,
    100,
    53,
    100
  ],
  "000044": [
    100,
    50,
    100,
    0,
    64.00000000000001,
    100,
    43,
    100
  ],
  "000045": [
    20,
    43.00000000000001,
    75,
    100,
    58.00000000000001,
    100,
    44,
    100
  ],
  "000047": [
    40,
    67,
    100,
    0,
    33,
    100,
    33,
    100
  ],
  "000048": [
    0,
    67,
    100,
    100,
    20,
    0,
    33,
    0
  ],
  "000050": [
    20,
    49,
    100,
    0,
    45,
    0,
    24,
    0
  ],
  "000051": [
    20,
    46.00000000000001,
    100,
    100,
    45,
    0,
    25,
    0
  ],
  "000052": [
    20,
    48,
    75,
    100,
    42,
    0,
    44,
    0
  ],
  "000054": [
    20,
    47,
    0,
    100,
    42,
    100,
    45,
    100
  ],
  "000055": [
    20,
    51,
    100,
    100,
    42,
    0,
    45,
    0
  ],
  "000056": [
    20,
    42.00000000000001,
    100,
    0,
    34.99999999999999,
    0,
    45,
    0
  ],
  "000058": [
    20,
    52,
    100,
    0,
    58.00000000000001,
    100,
    45,
    100
  ],
  "000060": [
    80,
    34,
    100,
    100,
    51.000000000000014,
    0,
    17,
    0
  ],
  "000064": [
    20,
    51,
    100,
    0,
    46.00000000000002,
    0,
    36,
    0
  ],
  "000065": [
    40,
    52,
    100,
    0,
    51.000000000000014,
    0,
    39,
    0
  ],
  "000068": [
    20,
    51,
    100,
    0,
    44,
    0,
    14.000000000000002,
    0
  ],
  "000069": [
    20,
    52,
    100,
    0,
    30,
    0,
    45,
    0
  ],
  "000071": [
    20,
    51,
    0,
    100,
    75.00000000000001,
    100,
    30,
    0
  ],
  "000073": [
    20,
    36,
    100,
    100,
    42,
    100,
    22,
    100
  ],
  "000076": [
    40,
    40,
    100,
    100,
    41,
    0,
    39,
    0
  ],
  "000077": [
    20,
    57.99999999999999,
    100,
    100,
    51.000000000000014,
    100,
    45,
    100
  ],
  "000078": [
    20,
    51,
    100,
    0,
    46.00000000000002,
    100,
    45,
    100
  ],
  "000079": [
    20,
    60,
    100,
    100,
    49.00000000000001,
    0,
    45,
    0
  ],
  "000080": [
    20,
    39,
    100,
    0,
    33,
    0,
    21,
    0
  ],
  "000081": [
    20,
    66,
    100,
    0,
    31,
    0,
    13,
    0
  ],
  "000083": [
    16.69449081803005,
    51,
    60.12024048096192,
    0,
    56.99999999999999,
    100,
    30,
    100
  ],
  "000085": [
    20,
    51,
    50,
    100,
    83,
    100,
    45,
    100
  ],
  "000086": [
    20,
    43.00000000000001,
    75,
    0,
    48,
    100,
    22,
    100
  ],
  "000088": [
    20,
    51,
    75,
    100,
    48,
    100,
    28.000000000000004,
    100
  ],
  "000091": [
    20,
    51,
    100,
    100,
    20,
    0,
    27,
    0
  ],
  "000092": [
    20,
    40,
    0,
    0,
    51.000000000000014,
    100,
    36,
    100
  ],
  "000096": [
    20,
    51,
    100,
    0,
    65,
    100,
    45,
    100
  ],
  "000097": [
    20,
    56.99999999999999,
    25,
    100,
    63,
    100,
    31,
    100
  ],
  "000099": [
    16.69449081803005,
    51,
    20.040080160320638,
    0,
    22.000000000000004,
    100,
    11,
    100
  ],
  "000100": [
    20,
    51,
    0,
    0,
    75.00000000000001,
    100,
    45,
    0
  ],
  "000103": [
    20,
    47,
    25,
    0,
    68.00000000000001,
    100,
    24,
    100
  ],
  "000104": [
    20,
    51,
    25,
    100,
    42,
    0,
    21,
    0
  ],
  "000106": [
    20,
    43.00000000000001,
    25,
    0,
    45,
    100,
    11,
    100
  ],
  "000108": [
    20,
    51,
    0,
    0,
    59,
    100,
    28.000000000000004,
    100
  ],
  "000109": [
    20,
    51,
    100,
    100,
    42,
    0,
    23,
    0
  ],
  "000110": [
    20,
    51,
    75,
    0,
    65,
    100,
    45,
    100
  ],
  "000111": [
    60,
    51,
    0,
    100,
    32,
    100,
    24,
    0
  ],
  "000114": [
    20,
    51,
    100,
    0,
    81.00000000000001,
    0,
    45,
    0
  ],
  "000115": [
    20,
    51,
    100,
    100,
    42,
    0,
    45,
    0
  ],
  "000116": [
    20,
    51,
    25,
    0,
    53.000000000000014,
    0,
    39,
    0
  ],
  "000117": [
    100,
    51,
    100,
    100,
    63,
    100,
    45,
    100
  ],
  "000118": [
    20,
    43.00000000000001,
    100,
    0,
    63,
    100,
    34,
    100
  ],
  "000121": [
    20,
    59,
    100,
    0,
    62.000000000000014,
    100,
    32,
    100
  ],
  "000122": [
    0,
    44.00000000000001,
    0,
    0,
    79.00000000000001,
    100,
    45,
    0
  ],
  "000125": [
    20,
    56.99999999999999,
    100,
    100,
    50,
    0,
    45,
    0
  ],
  "000126": [
    40,
    59,
    0,
    100,
    67,
    0,
    44,
    100
  ],
  "000129": [
    20,
    51,
    100,
    100,
    36.00000000000001,
    0,
    24,
    0
  ],
  "000131": [
    20,
    68,
    100,
    100,
    38.00000000000001,
    100,
    18,
    100
  ],
  "000132": [
    60,
    56.00000000000001,
    100,
    100,
    63,
    100,
    34,
    100
  ],
  "000133": [
    20,
    51,
    0,
    100,
    63,
    100,
    45,
    100
  ],
  "000134": [
    100,
    25,
    100,
    100,
    58.00000000000001,
    0,
    22,
    0
  ],
  "000135": [
    60,
    76,
    100,
    0,
    52,
    0,
    36,
    0
  ],
  "000137": [
    20,
    69,
    100,
    0,
    28.999999999999996,
    0,
    0,
    0
  ],
  "000140": [
    20,
    49,
    0,
    0,
    56.99999999999999,
    100,
    24,
    100
  ],
  "000142": [
    20,
    51,
    75,
    0,
    59,
    100,
    26,
    100
  ],
  "000143": [
    20,
    59,
    25,
    100,
    55.000000000000014,
    0,
    35,
    0
  ],
  "000145": [
    20,
    49,
    100,
    0,
    32,
    100,
    28.999999999999996,
    100
  ],
  "000146": [
    20,
    37,
    50,
    0,
    43,
    100,
    12,
    100
  ],
  "000147": [
    20,
    59,
    0,
    0,
    66.00000000000001,
    100,
    31,
    100
  ],
  "000148": [
    20,
    69,
    100,
    0,
    41,
    100,
    19,
    0
  ],
  "000150": [
    20,
    51,
    50,
    0,
    61,
    0,
    28.000000000000004,
    0
  ],
  "000151": [
    60,
    53,
    100,
    0,
    66.00000000000001,
    100,
    33,
    100
  ],
  "000152": [
    20,
    51,
    75,
    0,
    38.99999999999999,
    0,
    24,
    0
  ],
  "000153": [
    20,
    51,
    100,
    0,
    51.000000000000014,
    0,
    25,
    0
  ],
  "000155": [
    20,
    51,
    50,
    100,
    74,
    100,
    34,
    100
  ],
  "000156": [
    20,
    51,
    0,
    100,
    63,
    100,
    34,
    0
  ],
  "000157": [
    20,
    51,
    0,
    0,
    51.000000000000014,
    100,
    31,
    100
  ],
  "000160": [
    20,
    51,
    100,
    100,
    47.00000000000001,
    0,
    27,
    0
  ],
  "000161": [
    20,
    48,
    100,
    100,
    36.00000000000001,
    100,
    28.999999999999996,
    100
  ]
}

hill_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */  

// remove this or set to false to enable full program (load will be slower)
//var DEBUG_MODE = true;

// this can be used to set the number of sliders to show
// var NUM_SLIDERS = 8;

// other variables can be in here too
// here's some examples for colors used
// const bg_color = [225, 206, 187];
// const fg_color = [151, 102, 52];
// const stroke_color = [95, 52, 8];

// example of a global function
// given a segment, this returns the average point [x, y]
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 ];
}

// This where you define your own face object
function HillFace() {

  const eye_position = 0.85;
  const eye_size1 = 0.6;
  const eye_size2 = 0.8;
  const pupil_size1 = 0.25;
  const pupil_size2 = 0.25;
  const rect_height = 4;
  const rect_width = 3.5;
  const mouth_wide = 1.25;
 //BAG COLOURS//
  const bag_light = [209, 182, 150];
  const bag_mid = [187, 145, 100];
  const bag_dark = [144, 102, 73];
  const side_shadow_light = [163, 138, 107];
  const side_shadow_mid = [140, 109, 75];
  const side_shadow_dark = [108, 77, 55];
  const top_shadow_light = [182, 158, 129];
  const top_shadow_mid = [164, 127, 88];
  const top_shadow_dark = [126, 89, 64];

  this.eye_value = 2;     //1-2
  this.eye_brow = 2;      //1-2
  this.nose_value = 1;    //1-2
  this.bag_colour = 1;    //1-3

  /*
   * Draw the face with position lists that include:
   *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
   *    bottom_lip, top_lip, nose_tip, nose_bridge, 
   */  

  this.draw = function(positions) {
    rectMode(CENTER);
    scale(1.5);
    noStroke();
    
    ///HEAD//////

    //front
    let face_pos = segment_average(positions.chin);

    if (this.bag_colour == 1) {
      fill(bag_light);
    }
    else if (this.bag_colour == 2) {
     fill(bag_mid);
    }
    else if (this.bag_colour == 3) {
     fill(bag_dark);
    }
    rect(0, -0.25, rect_width, rect_height);

    //pointy detail
    triangle(-1.75, 1.74, -1.75, 2.25, -1.25, 1.74);
    push();
      triangle(-0.6, 1.74, -0.95, 2.25, -1.3, 1.74);
      translate(0.5, 0);
      triangle(-0.4, 1.74, -0.75, 2.25, -1.1, 1.74);
      translate(0.7, 0);
      triangle(-0.4, 1.74, -0.75, 2.25, -1.1, 1.74);
      translate(0.6, 0);
      triangle(-0.4, 1.74, -0.75, 2.25, -1.1, 1.74);
    pop();
    triangle(1.25, 1.74, 1.75, 2.25, 1.75, 1.74);

    //top
    if (this.bag_colour == 1) {
      fill(top_shadow_light);
    }
    else if (this.bag_colour == 2) {
     fill(top_shadow_mid);
    }
    else if (this.bag_colour == 3) {
     fill(top_shadow_dark);
    }
    quad(-2.5, -2.5, -1.75, -2.25, 1.75, -2.25, 1, -2.5);

    //side
    if (this.bag_colour == 1) {
      fill(side_shadow_light);
    }
    else if (this.bag_colour == 2) {
     fill(side_shadow_mid);
    }
    else if (this.bag_colour == 3) {
     fill(side_shadow_dark);
    }
    quad(-2.5, 1.25, -2.5, -2.5, -1.75, -2.25, -1.75, 1.75);
    triangle(-1.75, 1.7, -1.75, 2.25, -2.25, 1.4);
    triangle(-2.5, 1.9, -2.5, 1.25, -2, 1.4);

    noFill();
    stroke(0);
    strokeWeight(0.06);


    ///NOSE//////

    let nose_top = positions.nose_bridge[1];
    let nose_bottom = positions.nose_bridge[3];
    let nose_center = positions.nose_tip[2];

    if (this.nose_value == 1) {
      line(nose_top[0], nose_top[1], nose_bottom[0], nose_bottom[1]);
      line(nose_top[0] - 0.02, nose_top[1], nose_bottom[0], nose_bottom[1]);
      arc(nose_center[0], nose_center[1], 0.5, 0.5, 0, 180);
      arc(nose_center[0], nose_center[1], 0.5, 0.55, 0, 180);
    }
    else if (this.nose_value == 2) {
      arc(nose_center[0], nose_center[1], 0.5, 0.5, 0, 180);
      arc(nose_center[0], nose_center[1], 0.5, 0.55, 0, 180);
    }


    ///MOUTH/////

    let mouth_pos = segment_average(positions.bottom_lip);
    let lip_top = positions. top_lip[9];
    let lip_bottom = positions. bottom_lip[9];
    let d = dist(lip_top[0], lip_top[1], lip_bottom[0], lip_bottom[1]);
    let mouth = map(d, 0, 1, 0, 10);
    let mouth_open = map(mouth, 0, 10, 0, 1);

    if (d < 0.2) {
      d = 0;
    }
    ellipse(mouth_pos[0], mouth_pos[1] + 0.1, mouth_wide, mouth_open);
    ellipse(mouth_pos[0], mouth_pos[1] + 0.1, mouth_wide, mouth_open + 0.05);


    ///EYEBROWS/////

    let left_eyebrow_pos = segment_average(positions.left_eyebrow);
    let right_eyebrow_pos = segment_average(positions.right_eyebrow);

    if (this.eye_brow == 1) {
      rect(left_eyebrow_pos[0], left_eyebrow_pos[1], 0.7, 0.01);
      rect(right_eyebrow_pos[0], right_eyebrow_pos[1], 0.7, 0.01);
    }
    else if (this.eye_brow == 2) {
      fill(0);
      rect(left_eyebrow_pos[0], left_eyebrow_pos[1], 0.5, 0.06);
      rect(right_eyebrow_pos[0], right_eyebrow_pos[1], 0.5, 0.06);
    }


    ///EYES//////

    noFill();

    let left_eye_pos = segment_average(positions.left_eye);
    let right_eye_pos = segment_average(positions.right_eye);

    if (this.eye_value == 1) {
      ellipse(left_eye_pos[0], left_eye_pos[1], eye_size1 - 0.1, eye_size1);
      ellipse(right_eye_pos[0], right_eye_pos[1], eye_size1 - 0.1, eye_size1);
      ellipse(left_eye_pos[0], left_eye_pos[1], eye_size1 - 0.1, eye_size1 + 0.05);
      ellipse(right_eye_pos[0], right_eye_pos[1], eye_size1 - 0.1, eye_size1 + 0.05);
      fill(0);
      ellipse(left_eye_pos[0], left_eye_pos[1], pupil_size1);
      ellipse(right_eye_pos[0], right_eye_pos[1], pupil_size1);
    }
    else if (this.eye_value == 2) {
      arc(left_eye_pos[0], left_eye_pos[1], eye_size2 - 0.2, eye_size2, 0, 180, CHORD);
      arc(right_eye_pos[0], right_eye_pos[1], eye_size2 - 0.2, eye_size2, 0, 180, CHORD);
      arc(left_eye_pos[0], left_eye_pos[1], eye_size2 - 0.2, eye_size2 + 0.05, 0, 180, CHORD);
      arc(right_eye_pos[0], right_eye_pos[1], eye_size2 - 0.2, eye_size2 + 0.05, 0, 180, CHORD);
      fill(0);
      ellipse(left_eye_pos[0], left_eye_pos[1] + 0.15, pupil_size2);
      ellipse(right_eye_pos[0], right_eye_pos[1] + 0.15, pupil_size2);
    }
  }



  /* set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
    this.eye_value = int(map(settings[0], 0, 100, 1, 2));
    this.eye_brow = int(map(settings[1], 0, 100, 1, 2));
    this.nose_value = int(map(settings[2], 0, 100, 1, 2));
    this.bag_colour = int(map(settings[3], 0, 100, 1, 3));
  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    let settings = new Array(4);
    settings[0] = map(this.eye_value, 1, 2, 0, 100);
    settings[1] = map(this.eye_brow, 1, 2 , 0, 100);
    settings[2] = map(this.nose_value, 1, 2, 0, 100);
    settings[3] = map(this.bag_colour, 1, 3, 0, 100);
    return settings;
  }
}

hill_training_values.json

{
  "000018": [
    100,
    100,
    100,
    0
  ],
  "000020": [
    100,
    100,
    0,
    0
  ],
  "000023": [
    0,
    100,
    0,
    0
  ],
  "000025": [
    100,
    100,
    0,
    0
  ],
  "000028": [
    100,
    100,
    100,
    50
  ],
  "000029": [
    0,
    0,
    100,
    0
  ],
  "000030": [
    100,
    0,
    0,
    0
  ],
  "000031": [
    0,
    100,
    100,
    0
  ],
  "000032": [
    100,
    0,
    0,
    0
  ],
  "000035": [
    100,
    100,
    100,
    0
  ],
  "000037": [
    100,
    100,
    0,
    100
  ],
  "000038": [
    0,
    100,
    0,
    0
  ],
  "000040": [
    100,
    100,
    100,
    0
  ],
  "000041": [
    100,
    100,
    0,
    50
  ],
  "000042": [
    0,
    0,
    100,
    0
  ],
  "000043": [
    100,
    100,
    100,
    0
  ],
  "000044": [
    100,
    100,
    100,
    100
  ],
  "000045": [
    100,
    100,
    100,
    0
  ],
  "000047": [
    100,
    100,
    100,
    50
  ],
  "000048": [
    100,
    100,
    0,
    0
  ],
  "000050": [
    100,
    100,
    0,
    0
  ],
  "000051": [
    100,
    0,
    0,
    0
  ],
  "000052": [
    0,
    100,
    0,
    50
  ],
  "000054": [
    0,
    0,
    100,
    0
  ],
  "000055": [
    100,
    100,
    0,
    0
  ],
  "000056": [
    0,
    100,
    0,
    0
  ],
  "000058": [
    0,
    100,
    100,
    0
  ],
  "000060": [
    100,
    100,
    0,
    100
  ],
  "000064": [
    0,
    100,
    0,
    0
  ],
  "000065": [
    100,
    100,
    0,
    50
  ],
  "000068": [
    100,
    0,
    0,
    0
  ],
  "000069": [
    100,
    100,
    0,
    0
  ],
  "000071": [
    0,
    0,
    100,
    0
  ],
  "000073": [
    100,
    100,
    100,
    0
  ],
  "000076": [
    100,
    100,
    0,
    0
  ],
  "000077": [
    100,
    100,
    100,
    0
  ],
  "000078": [
    100,
    100,
    100,
    0
  ],
  "000079": [
    100,
    0,
    0,
    50
  ],
  "000080": [
    0,
    100,
    0,
    0
  ],
  "000081": [
    100,
    100,
    0,
    50
  ],
  "000083": [
    100,
    100,
    100,
    0
  ],
  "000085": [
    0,
    100,
    100,
    0
  ],
  "000086": [
    100,
    100,
    100,
    0
  ],
  "000088": [
    100,
    100,
    100,
    0
  ],
  "000091": [
    100,
    100,
    0,
    0
  ],
  "000092": [
    0,
    0,
    100,
    0
  ],
  "000096": [
    100,
    100,
    100,
    0
  ],
  "000097": [
    0,
    0,
    100,
    0
  ],
  "000099": [
    0,
    0,
    100,
    0
  ],
  "000100": [
    100,
    0,
    100,
    0
  ],
  "000103": [
    0,
    100,
    100,
    0
  ],
  "000001": [
    100,
    0,
    100,
    0
  ],
  "000002": [
    100,
    100,
    100,
    0
  ],
  "000005": [
    0,
    0,
    100,
    0
  ],
  "000006": [
    100,
    0,
    100,
    50
  ],
  "000007": [
    100,
    100,
    0,
    0
  ],
  "000009": [
    100,
    100,
    100,
    0
  ],
  "000010": [
    0,
    0,
    100,
    0
  ],
  "000013": [
    0,
    0,
    0,
    0
  ],
  "000014": [
    100,
    100,
    100,
    100
  ],
  "000015": [
    100,
    100,
    0,
    0
  ],
  "000016": [
    100,
    100,
    0,
    0
  ],
  "000161": [
    0,
    100,
    100,
    0
  ],
  "000160": [
    100,
    100,
    0,
    0
  ],
  "000157": [
    0,
    0,
    100,
    0
  ],
  "000156": [
    0,
    0,
    100,
    0
  ],
  "000155": [
    100,
    100,
    100,
    0
  ],
  "000153": [
    100,
    100,
    0,
    0
  ],
  "000152": [
    0,
    100,
    0,
    0
  ],
  "000151": [
    100,
    100,
    100,
    50
  ],
  "000150": [
    0,
    100,
    0,
    0
  ],
  "000148": [
    0,
    100,
    100,
    0
  ],
  "000147": [
    0,
    0,
    100,
    0
  ],
  "000146": [
    100,
    100,
    100,
    50
  ],
  "000145": [
    100,
    100,
    100,
    0
  ],
  "000143": [
    0,
    0,
    0,
    0
  ],
  "000142": [
    0,
    100,
    100,
    0
  ],
  "000140": [
    0,
    0,
    100,
    50
  ],
  "000137": [
    100,
    100,
    0,
    0
  ],
  "000135": [
    100,
    100,
    0,
    50
  ],
  "000134": [
    100,
    100,
    0,
    100
  ],
  "000133": [
    0,
    0,
    100,
    0
  ],
  "000132": [
    100,
    100,
    100,
    50
  ],
  "000131": [
    100,
    100,
    100,
    0
  ],
  "000129": [
    0,
    100,
    0,
    0
  ],
  "000126": [
    0,
    0,
    100,
    0
  ],
  "000125": [
    0,
    100,
    0,
    0
  ],
  "000122": [
    100,
    0,
    100,
    0
  ],
  "000121": [
    100,
    100,
    100,
    0
  ],
  "000118": [
    100,
    100,
    100,
    50
  ],
  "000117": [
    100,
    100,
    100,
    100
  ],
  "000116": [
    100,
    100,
    0,
    0
  ],
  "000115": [
    0,
    0,
    0,
    0
  ],
  "000114": [
    100,
    100,
    0,
    0
  ],
  "000111": [
    100,
    0,
    100,
    50
  ],
  "000110": [
    0,
    100,
    100,
    0
  ],
  "000109": [
    0,
    0,
    0,
    0
  ],
  "000108": [
    0,
    0,
    100,
    0
  ],
  "000106": [
    100,
    100,
    100,
    0
  ],
  "000104": [
    0,
    0,
    0,
    0
  ]
}

ho_face.js


// var DEBUG_MODE = true;

// this can be used to set the number of sliders to show
// var NUM_SLIDERS = 8;



// example of a global function
// given a segment, this returns the average point [x, y]
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 ];
}

// This where you define your own face object
function HoFace() {
  // these are state variables for a face
  // (your variables should be different!)

  //pumpkin colour (Hair)
  const yellow = color(255, 255, 0);
  const mid_yellow = color(255, 117, 24);
  const dark_yellow = color(127, 51, 0);
  const error_green = color(0, 255, 0);

  //eye colour
  const brown = color(69,24,0);
  const blue = color(135,206,250);
  const grey = color(128,128,128);

  const pink = color(255,182,193);


/*
 * earSize can vary from 0 to 4
 * earDist is the distance between ears and varies from 0 to 4
 * faceColor is 1,2,3,4 for yellow,blue,red, or violet respectively
 */
  this.leafSize = 5;
  this.leafDist = 5;
  this.hairColor = 1;
  this.eyeColor = 1;
  this.blushColor = 1;

  /*
   * Draw the face with position lists that include:
   *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
   *    bottom_lip, top_lip, nose_tip, nose_bridge, 
   */  
  this.draw = function(positions) {
    noStroke();

    push();
    if(this.hairColor == 0) {
      fill(yellow);
    }
    else if (this.hairColor==1) {
      fill(mid_yellow);
    }
    else if (this.hairColor==2) {
      fill(dark_yellow);
    }
    else {
      fill(error_green);
    }

    // head
  push();
  scale(1/3);
  translate(-4,0);
  noStroke();
  ellipse(0, 0, 7,10);
  ellipse(2, 0, 5,10);
  ellipse(4, 0, 8,10);
  ellipse(6, 0, 5,10);
  ellipse(8, 0, 7,10);
  pop();

  pop();

    //leaf//
    push();
    scale(1/3);
    let leafRadius = map(this.leafSize, 0, 10, 0.3, 2);
    let leafXPos = map(this.leafDist, 0, 10, 0.5, 2);
    fill(58,23,11);
    noStroke();
    rect(-2+leafXPos,-8.5,leafRadius+1.5,4,0.2,1,1,1);
    pop();
    //leaf//
    push();
    //nose//
    let nose_top =  positions.nose_bridge[0];
    let nose_bottom = positions.nose_bridge[3];

    stroke(0);
    strokeWeight(0.15);
    // line(nose_top[0], nose_top[1], nose_bottom[0], nose_bottom[1]); //top
    fill(0);
    triangle(nose_bottom[0], nose_bottom[1], nose_top[0], nose_top[0],nose_bottom[1], nose_bottom[1]);

    let nose_end = null;
    if(nose_top[0] < nose_bottom[0]) {
      nose_end = positions.nose_tip[0];
    }
    else {
      nose_end = positions.nose_tip[4];
    }
    // let nose_end = positions.nose_tip[4];
    let nose_center = positions.nose_tip[2];
    pop();
    // line(nose_end[0], nose_end[1], nose_center[0], nose_center[1]); //bottom
    //nose//

    //mouth//
    // let top_lip = positions.top_lip[0];
    // let bottom_lip = positions.bottom_lip[]

    push();
    push();
      fill(0);
      noStroke();
      ellipse(positions.bottom_lip[7][0], positions.bottom_lip[6][1],0.2);
      ellipse(positions.bottom_lip[8][0], positions.bottom_lip[8][1],0.2);
      ellipse(positions.bottom_lip[9][0], positions.bottom_lip[9][1],0.2);
      ellipse(positions.bottom_lip[10][0], positions.bottom_lip[10][1],0.2);
      ellipse(positions.bottom_lip[0][0], positions.bottom_lip[0][1],0.2);

      pop();
    pop();


    push();
    if(this.eyeColor == 0) {
      fill(brown);
    }
    else if (this.eyeColor==1) {
      fill(blue);
    }
    else if (this.eyeColor==2) {
      fill(grey);
    }
    else {
      fill(error_green);
    }

    //eyes//
    noStroke();
    let left_eye_pos = segment_average(positions.left_eye);
    let right_eye_pos = segment_average(positions.right_eye);

    push();
    translate(0,0.5);
    push();
    fill(255);
    ellipse(left_eye_pos[0], left_eye_pos[1], 0.5);
    ellipse(right_eye_pos[0], right_eye_pos[1], 0.5);
    pop();

    push();
    translate(0,0);
    ellipse(left_eye_pos[0], left_eye_pos[1], 0.3);
    ellipse(right_eye_pos[0], right_eye_pos[1], 0.3);
    pop();

    pop();
    pop();
    //eyes//


    if(this.blushColor == 0) {
      fill(pink);
    }
    else if (this.eyeColor==1) {
      noFill();
    }
    else if (this.eyeColor==2) {
      noFill();
    }
    else {
      noFill();
    }
    //blush
    ellipse(1.5,0,0.5,0.25);
    ellipse(-1.5,0,0.5,0.25);


  }

  /* set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
    this.leafSize = map(settings[0], 0, 100, 0, 10);
    this.leafDist = map(settings[1], 0, 100, 0, 10);
    this.hairColor = int(map(settings[2], 0, 100, 0, 3));
    this.eyeColor = int(map(settings[3], 0, 100, 0, 3));
    this.blushColor = int(map(settings[4], 0, 100, 0, 3));
  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    let settings = new Array(5);
    settings[0] = map(this.leafSize, 0, 10, 0, 100);
    settings[1] = map(this.leafDist, 0, 10, 0, 100);
    settings[2] = map(this.hairColor, 0, 4, 0, 100);
    settings[3] = map(this.eyeColor, 0, 4, 0, 100);
    settings[4] = map(this.blushColor, 0, 4, 0, 100);
    return settings;
  }
}

ho_training_values.json

{
  "000001": [
    50,
    50,
    0,
    0,
    50
  ],
  "000002": [
    50,
    50,
    50,
    0
  ],
  "000005": [
    50,
    50,
    0,
    75
  ],
  "000006": [
    50,
    50,
    0,
    0
  ],
  "000007": [
    50,
    50,
    75,
    0,
    50
  ],
  "000009": [
    50,
    50,
    75,
    0,
    0
  ],
  "000010": [
    50,
    50,
    0,
    50,
    0
  ],
  "000013": [
    50,
    50,
    0,
    0,
    75
  ],
  "000014": [
    50,
    50,
    75,
    0,
    0
  ],
  "000015": [
    50,
    50,
    50,
    0,
    75
  ],
  "000016": [
    50,
    50,
    75,
    0,
    50
  ],
  "000018": [
    50,
    50,
    0,
    0,
    0
  ],
  "000020": [
    50,
    50,
    75,
    0,
    50
  ],
  "000023": [
    50,
    50,
    75,
    0,
    50
  ],
  "000025": [
    50,
    50,
    75,
    0,
    50
  ],
  "000028": [
    50,
    50,
    0,
    0,
    0
  ],
  "000029": [
    50,
    50,
    0,
    25,
    0
  ],
  "000030": [
    50,
    50,
    0,
    0,
    75
  ],
  "000031": [
    50,
    50,
    0,
    50,
    0
  ],
  "000032": [
    50,
    50,
    0,
    0,
    75
  ],
  "000035": [
    50,
    50,
    50,
    0,
    0
  ],
  "000037": [
    50,
    50,
    50,
    0,
    75
  ],
  "000038": [
    50,
    50,
    50,
    50,
    50
  ],
  "000040": [
    50,
    50,
    50,
    0,
    0
  ],
  "000041": [
    50,
    50,
    50,
    0,
    75
  ],
  "000042": [
    50,
    50,
    0,
    50,
    0
  ],
  "000043": [
    50,
    50,
    75,
    25,
    0
  ],
  "000044": [
    50,
    50,
    75,
    0,
    0
  ],
  "000045": [
    50,
    50,
    50,
    0,
    0
  ],
  "000047": [
    50,
    50,
    75,
    0,
    0
  ],
  "000048": [
    50,
    50,
    75,
    0,
    50
  ],
  "000050": [
    50,
    50,
    75,
    0,
    25
  ],
  "000051": [
    50,
    50,
    0,
    0,
    75
  ],
  "000052": [
    50,
    50,
    50,
    50,
    75
  ],
  "000054": [
    50,
    50,
    0,
    0,
    0
  ],
  "000055": [
    50,
    50,
    75,
    0,
    25
  ],
  "000056": [
    50,
    50,
    75,
    0,
    25
  ],
  "000058": [
    50,
    50,
    75,
    25,
    0
  ],
  "000060": [
    50,
    50,
    75,
    0,
    50
  ],
  "000064": [
    50,
    50,
    50,
    0,
    0
  ],
  "000065": [
    50,
    50,
    75,
    0,
    50
  ],
  "000068": [
    50,
    50,
    0,
    0,
    75
  ],
  "000069": [
    50,
    50,
    75,
    0,
    25
  ],
  "000071": [
    50,
    50,
    0,
    0,
    0
  ],
  "000073": [
    50,
    50,
    75,
    0,
    0
  ],
  "000076": [
    50,
    50,
    75,
    0,
    50
  ],
  "000077": [
    50,
    50,
    75,
    0,
    0
  ],
  "000078": [
    50,
    50,
    75,
    0,
    0
  ],
  "000079": [
    50,
    50,
    0,
    0,
    75
  ],
  "000080": [
    50,
    50,
    75,
    0,
    50
  ],
  "000081": [
    50,
    50,
    75,
    0,
    50
  ],
  "000083": [
    50,
    50,
    50,
    25,
    0
  ],
  "000085": [
    50,
    50,
    50,
    0,
    0
  ],
  "000086": [
    50,
    50,
    0,
    0,
    0
  ],
  "000088": [
    50,
    50,
    50,
    0,
    0
  ],
  "000091": [
    50,
    50,
    75,
    0,
    50
  ],
  "000092": [
    50,
    50,
    0,
    50,
    0
  ],
  "000096": [
    50,
    50,
    75,
    0,
    0
  ],
  "000097": [
    50,
    50,
    50,
    0,
    0
  ],
  "000099": [
    50,
    50,
    50,
    0,
    0
  ],
  "000100": [
    50,
    50,
    0,
    0,
    0
  ],
  "000103": [
    50,
    50,
    75,
    25,
    0
  ],
  "000104": [
    50,
    50,
    0,
    0,
    75
  ],
  "000106": [
    50,
    50,
    0,
    0,
    0
  ],
  "000108": [
    50,
    50,
    0,
    50,
    0
  ],
  "000109": [
    50,
    50,
    0,
    0,
    75
  ],
  "000110": [
    50,
    50,
    0,
    0,
    0
  ],
  "000111": [
    50,
    50,
    0,
    0,
    0
  ],
  "000114": [
    50,
    50,
    75,
    0,
    50
  ],
  "000115": [
    50,
    50,
    0,
    0,
    75
  ],
  "000116": [
    50,
    50,
    50,
    0,
    50
  ],
  "000117": [
    50,
    50,
    75,
    0,
    0
  ],
  "000118": [
    50,
    50,
    75,
    0,
    0
  ],
  "000121": [
    50,
    50,
    75,
    0,
    0
  ],
  "000122": [
    50,
    50,
    0,
    0,
    0
  ],
  "000125": [
    50,
    50,
    0,
    50,
    75
  ],
  "000126": [
    50,
    50,
    0,
    0,
    0
  ],
  "000129": [
    50,
    50,
    75,
    0,
    50
  ],
  "000131": [
    50,
    50,
    75,
    0,
    0
  ],
  "000132": [
    50,
    50,
    75,
    0,
    0
  ],
  "000133": [
    50,
    50,
    0,
    50,
    0
  ],
  "000134": [
    50,
    50,
    75,
    0,
    50
  ],
  "000135": [
    50,
    50,
    75,
    0,
    50
  ],
  "000137": [
    50,
    50,
    75,
    0,
    25
  ],
  "000140": [
    50,
    50,
    0,
    25,
    0
  ],
  "000142": [
    50,
    50,
    75,
    25,
    0
  ],
  "000143": [
    50,
    50,
    50,
    0,
    50
  ],
  "000145": [
    50,
    50,
    75,
    0,
    0
  ],
  "000146": [
    50,
    50,
    50,
    0,
    0
  ],
  "000147": [
    50,
    50,
    0,
    25,
    0
  ],
  "000148": [
    50,
    50,
    75,
    25,
    0
  ],
  "000150": [
    50,
    50,
    75,
    0,
    50
  ],
  "000151": [
    50,
    50,
    75,
    0,
    0
  ],
  "000152": [
    50,
    50,
    0,
    0,
    75
  ],
  "000153": [
    50,
    50,
    75,
    0,
    50
  ],
  "000155": [
    50,
    50,
    75,
    0,
    0
  ],
  "000156": [
    50,
    50,
    0,
    25,
    0
  ],
  "000157": [
    50,
    50,
    0,
    25,
    0
  ],
  "000160": [
    50,
    50,
    75,
    0,
    50
  ],
  "000161": [
    50,
    50,
    75,
    0,
    0
  ]
}

howard_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */
// remove this or set to false to enable full program (load will be slower)
//var DEBUG_MODE = true;
// this can be used to set the number of sliders to show
// var NUM_SLIDERS = 3;




// This where you define your own face object
function HowardFace() {
    const light = color(250, 200, 140);
    const middle = color(230, 155, 75);
    const dark = color(170, 125, 70);
    const tan = color(250, 235, 200);



    //this.mouth_value
    this.fur_colour = 1;
    this.ear_length = -1;
    this.blush = 0;

    /*
     * Draw the face with position lists that include:
     *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
     *    bottom_lip, top_lip, nose_tip, nose_bridge, 
     */
    this.draw = function(positions) {

        let left_eye = average_point(positions.left_eye);
        let right_eye = average_point(positions.right_eye);
        let left_eyebrow = average_point(positions.left_eyebrow);
        let right_eyebrow = average_point(positions.right_eyebrow);

        let left_d = dist(left_eye[0], left_eye[1], left_eyebrow[0], left_eyebrow[1]);
        let right_d = dist(right_eye[0], right_eye[1], right_eyebrow[0], right_eyebrow[1]);
        let left_eb_move = map(left_d, 0.4, 0.7, 0.6, 1.5, true);
        let right_eb_move = map(right_d, 0.4, 0.7, 0.6, 1.5, true);


        left_eye[0] *= 3;
        left_eye[1] *= 3;
        right_eye[0] *= 3;
        right_eye[1] *= 3;

        if (this.fur_colour == 1) {
            fill(light);

        } else if (this.fur_colour == 2) {
            fill(middle);

        } else {
            fill(dark);
        }
        noStroke();
        ellipse(0, 0.15, 5, 5.5);


        stroke(tan);


        noFill();
        strokeWeight(0.3);

        fill(tan);
        ellipse(0, 1.5, 3, 2.2);



        // head outline
        noFill();
        strokeWeight(0.25);
        stroke(60, 50, 50);
        beginShape();
        vertex(0, -2.625);


        //bezierVertex(3, -7.5, 7, -5, 8, 1);
        //bezierVertex(8, 1, 10, 8, 0, 9);


        bezierVertex(1.05, -2.625, 2.45, -1.75, 2.45, 0.35);
        bezierVertex(2.45, 0.35, 2.625, 2.8, 0, 2.8);
        bezierVertex(-2.625, 2.8, -2.625, 0.25, -2.55, 0.35);
        bezierVertex(-2.45, -1.75, -1.05, -2.625, 0, -2.625);
        endShape();

        //ears

        //Ear colour
        if (this.fur_colour == 1) {
            fill(light);

        } else if (this.fur_colour == 2) {
            fill(middle);

        } else {
            fill(dark);
        }
        //left ear
        beginShape();
        curveVertex(-2.4, -0.7);
        curveVertex(-2.4, -0.7);
        curveVertex(-2.8, -1.4 + this.ear_length);
        curveVertex(-2.45, -2.45 + this.ear_length);
        curveVertex(-1.05, -2.38);
        curveVertex(-1.05, -2.38);
        endShape();

        //right ear
        beginShape();
        curveVertex(2.345, -0.7);
        curveVertex(2.345, -0.7);
        curveVertex(2.8, -1.4 + this.ear_length);
        curveVertex(2.45, -2.45 + this.ear_length);
        curveVertex(1.05, -2.38);
        curveVertex(1.05, -2.38);
        endShape();



        fill(tan);
        stroke(tan);
        //left ear inside
        beginShape();
        curveVertex(-2.1, -1.4);
        curveVertex(-2.1, -1.4);
        curveVertex(-2.24, -1.225 + this.ear_length);
        curveVertex(-2.24, -1.75 + this.ear_length);
        curveVertex(-1.575, -2);
        curveVertex(-1.575, -2);
        endShape();


        //left ear inside line
        beginShape();
        curveVertex(-2.1, -1.4);
        curveVertex(-2.1, -1.4);
        curveVertex(-1.925, -1.645);
        curveVertex(-1.6625, -1.925);
        curveVertex(-1.575, -2);
        curveVertex(-1.575, -2);
        endShape();

        //right ear inside
        beginShape();
        curveVertex(2.1, -1.4);
        curveVertex(2.1, -1.4);
        curveVertex(2.24, -1.225 + this.ear_length);
        curveVertex(2.24, -1.75 + this.ear_length);
        curveVertex(1.575, -2);
        curveVertex(1.575, -2);
        endShape();

        //right ear inside line
        beginShape();
        curveVertex(2.1, -1.4);
        curveVertex(2.1, -1.4);
        curveVertex(1.925, -1.645);
        curveVertex(1.6625, -1.925);
        curveVertex(1.575, -2);
        curveVertex(1.575, -2);
        endShape();

        //left brow
        push();
        strokeWeight(0.375)
        translate(0, 1 - left_eb_move);
        beginShape();
        curveVertex(-1.225, -1.12);
        curveVertex(-1.225, -1.12);
        curveVertex(-1.05, -1.19);
        curveVertex(-0.91, -1.19);
        curveVertex(-0.805, -1.12);
        curveVertex(-0.805, -1.12);
        endShape();

        beginShape();
        curveVertex(-1.225, -1.12);
        curveVertex(-1.225, -1.12);
        curveVertex(-1.05, -1.085);
        curveVertex(-0.91, -1.085);
        curveVertex(-0.805, -1.12);
        curveVertex(-0.805, -1.12);
        endShape();

        //right brow

        beginShape();
        curveVertex(1.225, -1.12);
        curveVertex(1.225, -1.12);
        curveVertex(1.05, -1.19);
        curveVertex(0.91, -1.19);
        curveVertex(0.805, -1.12);
        curveVertex(0.805, -1.12);
        endShape();

        beginShape();
        curveVertex(1.225, -1.12);
        curveVertex(1.225, -1.12);
        curveVertex(1.05, -1.085);
        curveVertex(0.91, -1.085);
        curveVertex(0.805, -1.12);
        curveVertex(0.805, -1.12);
        endShape();
        pop();


        // eyes

        const green = color('#3bb44a');
        const darkGreen = color('#046538');
        const lightBlue = color('#9bcde1');
        const darkBlue = color('#0c76c1');
        const lightBrown = color('#8b5f3c');
        const pink = color('#ff9292');




        //outline
        noStroke();
        fill(40);
        ellipse(-1.05, -0.175, 0.735);
        ellipse(1.05, -0.175, 0.735);
        //iris
        if (this.blush < 5) {
            fill(lightBlue);
        } else {
            fill(pink);
        }
        ellipse(-1.05, -0.175, 0.7);
        ellipse(1.05, -0.175, 0.7);
        //
        fill(40);
        ellipse(-1.05, -0.175, 0.455);
        ellipse(1.05, -0.175, 0.455);
        //white reflection
        fill(255);
        ellipse(-1.225, -0.35, 0.175, 0.14);
        ellipse(0.875, -0.35, 0.175, 0.14);

        //mouth open
        let top_lip_point = positions.top_lip[9];
        let bottom_lip_point = positions.bottom_lip[9];
        // fill(255, 0, 0);
        let d = dist(top_lip_point[0], top_lip_point[1], bottom_lip_point[0], bottom_lip_point[1])

        let mouth = map(d, 0, 0.5, 0, 10);
        let mouth_size = map(mouth, 0, 10, 0, 1.5);

        fill(250, 100, 100);
        stroke(40);
        strokeWeight(0.15)
        ellipse(0, 1.2, 1.5, mouth_size);

        //tongue cover
        noStroke();
        fill(tan);

        ellipse(0.525, 1.12, 1.05, 0.77)
        ellipse(-0.525, 1.12, 1.05, 0.77)
        if (this.fur_colour == 1) {
            fill(light);

        } else if (this.fur_colour == 2) {
            fill(middle);

        } else {
            fill(dark);
        }
        ellipse(0, 0.2, 1.4, 1.5);
        fill(tan);
        ellipse(0, 0.7, 2.1, 0.9);



        //nose
        fill(40);
        ellipse(0, 0.875, 0.7, 0.525);

        //mouth
        stroke(40)
        noFill();
        strokeWeight(0.1575);
        beginShape();
        curveVertex(-0.07, 1.05);
        curveVertex(-0.07, 1.05);
        curveVertex(0.35, 1.505);
        curveVertex(0.77, 1.54);
        curveVertex(1.05, 1.33);
        curveVertex(1.05, 1.33);
        endShape();

        beginShape();
        curveVertex(0.07, 1.05);
        curveVertex(0.07, 1.05);
        curveVertex(-0.35, 1.505);
        curveVertex(-0.77, 1.54);
        curveVertex(-1.05, 1.33);
        curveVertex(-1.05, 1.33);
        endShape();


        //blush
        if (this.blush < 5) {

        } else {
            noStroke()
            fill(200, 50, 50, 180);
            ellipse(-1.4, 0.7, 0.8, 0.5);
            ellipse(1.4, 0.7, 0.8, 0.5);
        }


    }

    /* set internal properties based on list numbers 0-100 */
    this.setProperties = function(settings) {
        this.fur_colour = int(map(settings[0], 0, 100, 1, 4));
        this.ear_length = map(settings[1], 0, 100, 0, -1);
        this.blush = map(settings[2], 0, 100, 0, 10);
    }

    /* get internal properties as list of numbers 0-100 */
    this.getProperties = function() {
        let settings = new Array(4);
        settings[0] = map(this.fur_colour, 1, 4, 0, 100);
        settings[1] = map(this.ear_length, 0, -1, 0, 100);
        settings[2] = map(this.blush, 0, 10, 0, 100);
        return settings;
    }
}

// given an array of [x,y] points, return the average
function average_point(list) {
    var sum_x = 0;
    var sum_y = 0;
    var num_points = 0;
    for (var i = 0; i < list.length; i++) {
        sum_x += list[i][0];
        sum_y += list[i][1];
        num_points += 1;
    }
    return [sum_x / num_points, sum_y / num_points];
}

howard_training_values.json

{
"000001": [
    0,
    0,
    100
  ],
  "000002": [
    0,
    28.999999999999996,
    100
  ],
  "000005": [
    0,
    0,
    100
  ],
  "000006": [
    50,
    49,
    100
  ],
  "000007": [
    0,
    100,
    0
  ],
  "000009": [
    0,
    56.99999999999999,
    100
  ],
  "000010": [
    0,
    0,
    100
  ],
  "000013": [
    0,
    0,
    0
  ],
  "000014": [
    50,
    100,
    100
  ],
  "000015": [
    0,
    77,
    0
  ],
  "000016": [
    0,
    86,
    0
  ],
  "000018": [
    0,
    0,
    100
  ],
  "000020": [
    0,
    65,
    0
  ],
  "000023": [
    0,
    76,
    0
  ],
  "000025": [
    0,
    62,
    0
  ],
  "000028": [
    0,
    68,
    100
  ],
  "000029": [
    0,
    0,
    100
  ],
  "000030": [
    0,
    0,
    0
  ],
  "000031": [
    0,
    77,
    100
  ],
  "000032": [
    0,
    50,
    0
  ],
  "000035": [
    0,
    100,
    100
  ],
  "000037": [
    100,
    100,
    0
  ],
  "000038": [
    0,
    83,
    0
  ],
  "000040": [
    0,
    83,
    100
  ],
  "000041": [
    0,
    92,
    0
  ],
  "000042": [
    0,
    30,
    100
  ],
  "000043": [
    0,
    75,
    100
  ],
  "000044": [
    100,
    100,
    100
  ],
  "000045": [
    0,
    65,
    100
  ],
  "000047": [
    50,
    100,
    100
  ],
  "000048": [
    0,
    88,
    0
  ],
  "000050": [
    0,
    88,
    0
  ],
  "000051": [
    0,
    0,
    0
  ],
  "000052": [
    0,
    84,
    0
  ],
  "000054": [
    0,
    0,
    100
  ],
  "000055": [
    0,
    100,
    0
  ],
  "000056": [
    0,
    100,
    0
  ],
  "000058": [
    0,
    100,
    100
  ],
  "000060": [
    100,
    0,
    0
  ],
  "000064": [
    0,
    71,
    0
  ],
  "000065": [
    0,
    100,
    0
  ],
  "000068": [
    0,
    0,
    0
  ],
  "000069": [
    0,
    100,
    0
  ],
  "000071": [
    0,
    0,
    100
  ],
  "000073": [
    0,
    62,
    100
  ],
  "000076": [
    0,
    100,
    0
  ],
  "000077": [
    0,
    71,
    100
  ],
  "000078": [
    0,
    71,
    100
  ],
  "000079": [
    0,
    0,
    0
  ],
  "000080": [
    0,
    100,
    0
  ],
  "000081": [
    0,
    100,
    0
  ],
  "000083": [
    0,
    41,
    100
  ],
  "000085": [
    0,
    53,
    100
  ],
  "000086": [
    0,
    37,
    100
  ],
  "000088": [
    0,
    49,
    100
  ],
  "000091": [
    0,
    93,
    0
  ],
  "000092": [
    0,
    0,
    100
  ],
  "000096": [
    0,
    84,
    100
  ],
  "000097": [
    0,
    62,
    100
  ],
  "000099": [
    0,
    53,
    100
  ],
  "000100": [
    0,
    30,
    100
  ],
  "000103": [
    0,
    76,
    100
  ],
  "000104": [
    0,
    33,
    0
  ],
  "000106": [
    0,
    70,
    100
  ],
  "000108": [
    0,
    0,
    100
  ],
  "000109": [
    0,
    46,
    0
  ],
  "000110": [
    0,
    54,
    100
  ],
  "000111": [
    100,
    19,
    100
  ],
  "000114": [
    0,
    100,
    0
  ],
  "000115": [
    0,
    0,
    0
  ],
  "000116": [
    0,
    59,
    0
  ],
  "000117": [
    100,
    100,
    100
  ],
  "000118": [
    0,
    100,
    100
  ],
  "000121": [
    0,
    100,
    100
  ],
  "000122": [
    0,
    0,
    100
  ],
  "000125": [
    0,
    35,
    0
  ],
  "000126": [
    50,
    0,
    100
  ],
  "000129": [
    0,
    90,
    0
  ],
  "000131": [
    50,
    100,
    100
  ],
  "000132": [
    50,
    100,
    100
  ],
  "000133": [
    0,
    51,
    100
  ],
  "000134": [
    100,
    100,
    0
  ],
  "000135": [
    50,
    100,
    0
  ],
  "000137": [
    0,
    17,
    0
  ],
  "000140": [
    50,
    0,
    100
  ],
  "000142": [
    0,
    66,
    100
  ],
  "000143": [
    0,
    54,
    0
  ],
  "000145": [
    0,
    84,
    100
  ],
  "000146": [
    0,
    63,
    100
  ],
  "000147": [
    0,
    0,
    100
  ],
  "000148": [
    0,
    86,
    100
  ],
  "000150": [
    0,
    24,
    0
  ],
  "000151": [
    0,
    84,
    100
  ],
  "000152": [
    0,
    61,
    0
  ],
  "000153": [
    0,
    61,
    0
  ],
  "000155": [
    0,
    34,
    100
  ],
  "000156": [
    0,
    0,
    100
  ],
  "000157": [
    0,
    0,
    100
  ],
  "000160": [
    0,
    100,
    0
  ],
  "000161": [
    0,
    100,
    100
  ]
}

hu_face.js


//var DEBUG_MODE = true;


// var NUM_SLIDERS = 8;

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 ];
}


function HuFace() {

    const face = [134, 89, 54];
    const brown = [96, 60, 16];
    const orange = [181, 135, 78];
    const yellow = [164, 116, 10];
    const grey = [129, 120, 101];
    const pink = [217, 194, 182];
    const horns_color = [254, 233, 217];
    const nose_color = [53, 37, 18];
    const ear_color = [234, 192, 158];

  this.earringc = 1;
  this.earDist = 0.3;
  this.eyeDist = 0;
  this.mouthDist = -0.1;
  this.faceColor = 1;
  this.fur = 1;
  this.furColor = 3;
  this.horns = -0.1;


  this.draw = function(positions) {
    noStroke();
    //horns
    fill(horns_color);
      beginShape();
      vertex(positions.chin[0][0]+0.5, positions.left_eyebrow[2][1]-0.3);
      vertex(positions.chin[0][0]-0.1,positions.left_eyebrow[2][1]+0.3);
      vertex(positions.chin[0][0]-0.5,positions.left_eyebrow[2][1]-1.3);
      vertex(positions.left_eyebrow[0][0], positions.left_eyebrow[2][1]-3-this.horns);
      vertex(positions.chin[0][0], positions.left_eyebrow[2][1]-1.5);
      endShape();

      beginShape();
      vertex(positions.chin[16][0]-0.4, positions.right_eyebrow[2][1]-0.3);
      vertex(positions.chin[16][0]-1.4,positions.right_eyebrow[2][1]+1.3);
      vertex(positions.chin[16][0]-0.5,positions.right_eyebrow[2][1]-1.5);
      vertex(positions.right_eyebrow[4][0], positions.right_eyebrow[2][1]-3-this.horns);
      vertex(positions.chin[16][0], positions.right_eyebrow[2][1]-1.3);
      endShape();
      //earring
      if(this.earringc == 1) {
        fill(255, 255, 255);
      }
      else if (this.earringc == 2) {
        fill(pink);
      }
      else if (this.earringc == 3) {
        fill(ear_color);
      }
      else if (this.earringc == 4) {
        fill(yellow);
      }
      else {
        fill(horns_color);
      }
      ellipse(positions.chin[0][0]-0.3, positions.chin[0][1]-0.1, this.earDist, 0.6);

      //fur
      if(this.furColor == 1) {
        fill(brown);
      }
      else if (this.furColor == 2) {
        fill(pink);
      }
      else if (this.furColor == 3) {
        fill(grey);
      }
      else if (this.furColor == 4) {
        fill(face);
      }
      else {
        fill(horns_color);
      }

        bezier(positions.chin[0][0]-1.1, positions.chin[0][1]-0.7,positions.chin[0][0]-2, positions.chin[0][1]-this.fur, positions.chin[0][0], positions.chin[0][1], positions.chin[0][0]+1.5, positions.left_eyebrow[2][1]-0.1);
        bezier(positions.chin[16][0]+0.9, positions.chin[16][1]-0.7,positions.chin[16][0]+2, positions.chin[16][1]-this.fur, positions.chin[16][0], positions.chin[16][1], positions.chin[16][0]-1.5, positions.right_eyebrow[2][1]-0.1);


    //ear
    push();
    fill(ear_color);
    bezier(positions.chin[0][0]-1, positions.chin[0][1]-1,positions.chin[0][0]-2, positions.chin[0][1], positions.chin[0][0], positions.chin[0][1], positions.chin[0][0]+1.5, positions.left_eyebrow[2][1]-0.5);
    bezier(positions.chin[16][0]+0.8, positions.chin[16][1]-1,positions.chin[16][0]+2, positions.chin[16][1], positions.chin[16][0], positions.chin[16][1], positions.chin[16][0]-1.5, positions.right_eyebrow[2][1]-0.5);

    pop();


    // face
    if(this.faceColor == 1) {
      fill(face);
    }
    else if (this.faceColor== 2) {
      fill(orange);
    }
    else if (this.faceColor== 3) {
      fill(yellow);
    }
    else if (this.faceColor== 4) {
      fill(grey);
    }
    else {
      fill(brown);
    }

    noStroke();
    beginShape();
    vertex(positions.chin[0][0]-0.3, positions.chin[0][1]-0.8);
    vertex(positions.chin[16][0]-0.3, positions.chin[16][1]-0.8);
    vertex(positions.chin[8][0], positions.chin[8][1]);
    endShape();
    bezier(positions.chin[0][0]-0.3, positions.chin[0][1]-0.79,positions.left_eyebrow[0][0], positions.left_eyebrow[2][1]-1.2, positions.right_eyebrow[4][0], positions.right_eyebrow[2][1]-1.2,positions.chin[16][0]-0.3, positions.chin[16][1]-0.79);
    bezier(positions.chin[0][0]-0.29, positions.chin[0][1]-0.8, positions.chin[0][0]-0.4,positions.chin[1][1], positions.chin[7][0], positions.chin[8][1], positions.chin[8][0]+0.01, positions.chin[8][1]);
    bezier(positions.chin[16][0]-0.31, positions.chin[16][1]-0.8, positions.chin[16][0]+0.4, positions.chin[15][1],  positions.chin[9][0],  positions.chin[8][1], positions.chin[8][0]-0.01, positions.chin[8][1]);


    //nose bridge
    stroke(0);
    noFill();
    bezier(positions.right_eyebrow[0][0], positions.right_eyebrow[0][1]+0.2, positions.nose_bridge[0][0], positions.nose_bridge[0][1],positions.nose_bridge[2][0]+0.3, positions.nose_bridge[2][1], positions.nose_tip[4][0], positions.nose_tip[4][1]);
    bezier(positions.left_eyebrow[4][0], positions.left_eyebrow[4][1]+0.2, positions.nose_bridge[0][0], positions.nose_bridge[0][1],positions.nose_bridge[2][0]+0.3, positions.nose_bridge[2][1], positions.nose_tip[0][0], positions.nose_tip[0][1]);

    //up nose
    fill(nose_color);
    noStroke();
    let nose_up = positions.nose_tip[0];
    let nose_upr = positions.nose_tip[4];

    ellipse(nose_up[0], nose_up[1]+0.3,0.5, 0.3);
    ellipse(nose_upr[0], nose_up[1]+0.3,0.5, 0.3);
    stroke(2);
    noFill();
    bezier(positions.nose_tip[0][0]-0.1,positions.nose_tip[0][1]+0.1,positions.nose_tip[2][0],positions.nose_tip[2][1]+0.1,positions.nose_tip[2][0]+0.3,positions.nose_tip[2][1],positions.nose_tip[4][0]+0.1,positions.nose_tip[4][1]+0.1);


    //eyebows
    let left_eyebrow1 = positions.left_eyebrow[4];
    let left_eyebrow2 = positions.left_eyebrow[2];
    let left_eyebrow3 = positions.left_eyebrow[0];
    let right_eyebrow1 = positions.right_eyebrow[4];
    let right_eyebrow2 = positions.right_eyebrow[2];
    let right_eyebrow3 = positions.right_eyebrow[0];
    noFill();
    bezier(left_eyebrow1[0], left_eyebrow1[1], left_eyebrow2[0], left_eyebrow2[1], left_eyebrow2[0], left_eyebrow2[1], left_eyebrow3[0], left_eyebrow3[1]);
    bezier(right_eyebrow1[0], right_eyebrow1[1], right_eyebrow2[0], right_eyebrow2[1], right_eyebrow2[0], right_eyebrow2[1], right_eyebrow3[0], right_eyebrow3[1]);


    //eyes

    stroke(0);
    fill(255);
    ellipse(positions.left_eye[1][0], positions.left_eye[5][1], 0.8, 0.5);
    ellipse(positions.right_eye[2][0], positions.right_eye[4][1], 0.8, 0.5);
    noStroke();
    fill(0);
    ellipse(positions.left_eye[1][0]-this.eyeDist, positions.left_eye[5][1], 0.7, 0.48);
    ellipse(positions.right_eye[2][0]-this.eyeDist,positions.right_eye[4][1], 0.7, 0.48);

    //mouth
    let up_mouth = positions.top_lip[0];
    stroke(0);
    noFill();
    bezier(positions.top_lip[0][0]-this.mouthDist,positions.bottom_lip[5][1],positions.bottom_lip[4][0],positions.bottom_lip[4][1]+0.1, positions.bottom_lip[2][0],positions.bottom_lip[2][1]+0.1, positions.bottom_lip[0][0]+this.mouthDist,positions.bottom_lip[1][1]);


  }

  this.setProperties = function(settings) {
    this.earDist = map(settings[0], 0, 100, 0.1, 0.3);
    this.eyeDist = map(settings[1], 0, 100, -0.07, 0.08);
    this.faceColor = int(map(settings[2], 0, 100, 0, 4));
    this.earringc = int(map(settings[3], 0, 100, 0, 4));
    this.mouthDist = map(settings[4], 0, 100, -0.2, 0);
    this.fur = map(settings[5], 0, 100, 0, -0.6);
    this.furColor = int(map(settings[6], 0, 100, 0, 4));
    this.horns = map(settings[7], 0, 100, -0.5, 0.3);
  }

  this.getProperties = function() {
    let settings = new Array(7);
    settings[0] = map(this.earDist, 0.1, 0.3, 0, 100);
    settings[1] = map(this.eyeDist, -0.05, 0.06, 0, 100);
    settings[2] = map(this.faceColor, 0, 4, 0, 100);
    settings[3] = map(this.earringc, 0, 4, 0, 100);
    settings[4] = map(this.mouthDist, -0.2, -0.1, 0, 100);
    settings[5] = map(this.fur, 0, -0.6, 0, 100);
    settings[6] = map(this.furColor, 0, 4, 0, 100);
    settings[7] = map(this.horns, -0.5, 0.3,0, 100);
    return settings;
  }
}

hu_training_values.json

{
  "000001": [
     100,
     40.45454545454545,
     25,
     100,
     0,
     0,
     75,
     50
   ],
   "000002": [
     34.99999999999999,
     50.000000000000014,
     50,
     25,
     88,
     34,
     75,
     35.99999999999999
   ],
   "000005": [
     100,
     30.909090909090914,
     25,
     25,
     0,
     0,
     75,
     50
   ],
   "000006": [
     100,
     30.909090909090914,
     25,
     50,
     49,
     19,
     25,
     28.000000000000004
   ],
   "000007": [
     56.999999999999986,
     45.909090909090914,
     0,
     50,
     49,
     100,
     25,
     15
   ],
   "000009": [
     56.999999999999986,
     103.18181818181822,
     75,
     25,
     50,
     72,
     50,
     54
   ],
   "000010": [
     25.999999999999996,
     41.818181818181834,
     100,
     50,
     36.99999999999999,
     21.000000000000004,
     75,
     95
   ],
   "000013": [
     25.999999999999996,
     35,
     100,
     50,
     147.99999999999997,
     21.000000000000004,
     75,
     95
   ],
   "000014": [
     25.999999999999996,
     58.18181818181819,
     100,
     50,
     200,
     21.000000000000004,
     75,
     95
   ],
   "000015": [
     25.999999999999996,
     60.909090909090914,
     25,
     50,
     0,
     21.000000000000004,
     75,
     95
   ],
   "000016": [
     25.999999999999996,
     -18.181818181818183,
     25,
     50,
     0,
     21.000000000000004,
     75,
     95
   ],
   "000018": [
     25.999999999999996,
     40.45454545454545,
     100,
     50,
     0,
     26,
     25,
     95
   ],
   "000020": [
     25.999999999999996,
     36.36363636363637,
     100,
     0,
     0,
     100,
     0,
     0
   ],
   "000023": [
     25.999999999999996,
     -18.181818181818183,
     25,
     0,
     102,
     17,
     0,
     73.99999999999999
   ],
   "000025": [
     25.999999999999996,
     58.18181818181819,
     25,
     0,
     200,
     38,
     25,
     65
   ],
   "000028": [
     25.999999999999996,
     48.63636363636365,
     75,
     0,
     200,
     13,
     0,
     100
   ],
   "000029": [
     0,
     48.63636363636365,
     100,
     0,
     200,
     13,
     0,
     100
   ],
   "000030": [
     17.000000000000004,
     48.63636363636365,
     50,
     0,
     200,
     13,
     0,
     100
   ],
   "000031": [
     17.000000000000004,
     48.63636363636365,
     0,
     0,
     200,
     13,
     25,
     100
   ],
   "000032": [
     17.000000000000004,
     43.181818181818194,
     25,
     0,
     200,
     13,
     25,
     100
   ],
   "000035": [
     17.000000000000004,
     40.45454545454545,
     50,
     0,
     200,
     13,
     100,
     100
   ],
   "000037": [
     17.000000000000004,
     36.36363636363637,
     100,
     0,
     200,
     16,
     0,
     100
   ],
   "000038": [
     17.000000000000004,
     47.27272727272728,
     75,
     0,
     200,
     16,
     25,
     100
   ],
   "000040": [
     37.99999999999999,
     47.27272727272728,
     25,
     100,
     104,
     0,
     25,
     94
   ],
   "000041": [
     37.99999999999999,
     45.909090909090914,
     0,
     100,
     200,
     45.00000000000001,
     50,
     75.00000000000001
   ],
   "000042": [
     37.99999999999999,
     44.54545454545456,
     25,
     100,
     200,
     45.00000000000001,
     50,
     75.00000000000001
   ],
   "000043": [
     37.99999999999999,
     43.181818181818194,
     25,
     100,
     200,
     45.00000000000001,
     50,
     75.00000000000001
   ],
   "000044": [
     37.99999999999999,
     40.45454545454545,
     25,
     100,
     200,
     45.00000000000001,
     0,
     75.00000000000001
   ],
   "000045": [
     37.99999999999999,
     36.36363636363637,
     25,
     100,
     200,
     45.00000000000001,
     75,
     75.00000000000001
   ],
   "000047": [
     37.99999999999999,
     30.909090909090914,
     0,
     0,
     200,
     45.00000000000001,
     75,
     75.00000000000001
   ],
   "000048": [
     37.99999999999999,
     14.545454545454545,
     25,
     0,
     200,
     100,
     75,
     0
   ],
   "000050": [
     37.99999999999999,
     70.45454545454547,
     75,
     100,
     200,
     19,
     25,
     0
   ],
   "000051": [
     37.99999999999999,
     48.63636363636365,
     25,
     100,
     200,
     19,
     25,
     85
   ],
   "000052": [
     37.99999999999999,
     29.545454545454547,
     50,
     75,
     200,
     35,
     0,
     85
   ],
   "000054": [
     37.99999999999999,
     43.181818181818194,
     25,
     50,
     128,
     33,
     75,
     85
   ],
   "000055": [
     37.99999999999999,
     45.909090909090914,
     25,
     50,
     0,
     33,
     75,
     85
   ],
   "000056": [
     37.99999999999999,
     56.818181818181834,
     100,
     50,
     200,
     42.00000000000001,
     0,
     85
   ],
   "000058": [
     37.99999999999999,
     39.090909090909086,
     100,
     50,
     200,
     42.00000000000001,
     0,
     85
   ],
   "000060": [
     37.99999999999999,
     62.27272727272728,
     0,
     50,
     40.00000000000001,
     19,
     25,
     56.00000000000001
   ],
   "000064": [
     100,
     48.63636363636365,
     25,
     50,
     80.00000000000001,
     19,
     25,
     56.00000000000001
   ],
   "000065": [
     100,
     48.63636363636365,
     25,
     50,
     160.00000000000003,
     19,
     25,
     56.00000000000001
   ],
   "000068": [
     100,
     50.000000000000014,
     0,
     0,
     49.999999999999986,
     19,
     75,
     56.00000000000001
   ],
   "000069": [
     100,
     50.000000000000014,
     0,
     0,
     100,
     19,
     75,
     56.00000000000001
   ],
   "000071": [
     100,
     40.45454545454545,
     100,
     0,
     200,
     30,
     25,
     100
   ],
   "000073": [
     100,
     51.36363636363637,
     100,
     50,
     200,
     30,
     25,
     100
   ],
   "000076": [
     100,
     51.36363636363637,
     100,
     50,
     200,
     30,
     0,
     100
   ],
   "000077": [
     100,
     28.181818181818187,
     75,
     50,
     200,
     30,
     25,
     100
   ],
   "000078": [
     100,
     45.909090909090914,
     75,
     50,
     200,
     30,
     25,
     100
   ],
   "000079": [
     100,
     40.45454545454545,
     75,
     50,
     200,
     30,
     25,
     100
   ],
   "000080": [
     100,
     85.45454545454547,
     75,
     50,
     200,
     30,
     25,
     100
   ],
   "000081": [
     100,
     54.0909090909091,
     25,
     50,
     200,
     6,
     50,
     72.99999999999999
   ],
   "000083": [
     100,
     55.45454545454547,
     50,
     25,
     0,
     35,
     0,
     100
   ],
   "000085": [
     100,
     56.818181818181834,
     50,
     25,
     0,
     35,
     0,
     100
   ],
   "000086": [
     100,
     107.2727272727273,
     0,
     25,
     0,
     35,
     0,
     100
   ],
   "000088": [
     100,
     28.181818181818187,
     0,
     25,
     0,
     35,
     0,
     100
   ],
   "000091": [
     100,
     20.000000000000004,
     0,
     75,
     200,
     69,
     100,
     100
   ],
   "000092": [
     100,
     63.63636363636365,
     50,
     75,
     200,
     69,
     100,
     100
   ],
   "000096": [
     100,
     69.09090909090911,
     75,
     75,
     0,
     69,
     100,
     100
   ],
   "000097": [
     100,
     36.36363636363637,
     75,
     75,
     0,
     69,
     100,
     100
   ],
   "000099": [
     100,
     33.63636363636364,
     25,
     0,
     0,
     17,
     0,
     100
   ],
   "000100": [
     100,
     51.36363636363637,
     25,
     0,
     0,
     59,
     50,
     39.00000000000001
   ],
   "000103": [
     100,
     60.909090909090914,
     50,
     50,
     76.00000000000001,
     49,
     75,
     87
   ],
   "000104": [
     100,
     47.27272727272728,
     100,
     50,
     152.00000000000003,
     49,
     75,
     87
   ],
   "000106": [
     56.999999999999986,
     45.909090909090914,
     0,
     50,
     16.000000000000014,
     47,
     0,
     56.99999999999999
   ],
   "000108": [
     56.999999999999986,
     44.54545454545456,
     0,
     50,
     32,
     47,
     75,
     56.99999999999999
   ],
   "000109": [
     56.999999999999986,
     43.181818181818194,
     0,
     50,
     64,
     47,
     100,
     56.99999999999999
   ],
   "000110": [
     35.99999999999999,
     60.909090909090914,
     50,
     50,
     128,
     81,
     25,
     56.99999999999999
   ],
   "000111": [
     35.99999999999999,
     -18.181818181818183,
     50,
     50,
     23.999999999999993,
     30,
     0,
     56.99999999999999
   ],
   "000114": [
     35.99999999999999,
     50.000000000000014,
     50,
     50,
     47.999999999999986,
     54,
     25,
     56.99999999999999
   ],
   "000115": [
     35.99999999999999,
     44.54545454545456,
     25,
     50,
     96,
     33,
     50,
     56.99999999999999
   ],
   "000116": [
     35.99999999999999,
     45.909090909090914,
     25,
     25,
     47.999999999999986,
     54,
     50,
     56.99999999999999
   ],
   "000117": [
     35.99999999999999,
     44.54545454545456,
     50,
     25,
     96,
     54,
     0,
     56.99999999999999
   ],
   "000118": [
     35.99999999999999,
     95,
     50,
     25,
     192,
     54,
     0,
     56.99999999999999
   ],
   "000121": [
     35.99999999999999,
     36.36363636363637,
     50,
     25,
     200,
     54,
     0,
     56.99999999999999
   ],
   "000122": [
     35.99999999999999,
     30.909090909090914,
     100,
     25,
     200,
     54,
     25,
     56.99999999999999
   ],
   "000125": [
     35.99999999999999,
     55.45454545454547,
     75,
     25,
     200,
     54,
     75,
     56.99999999999999
   ],
   "000126": [
     35.99999999999999,
     56.818181818181834,
     25,
     25,
     0,
     36,
     0,
     56.99999999999999
   ],
   "000129": [
     35.99999999999999,
     -18.181818181818183,
     25,
     50,
     113.99999999999999,
     56.99999999999999,
     0,
     56.99999999999999
   ],
   "000131": [
     35.99999999999999,
     -18.181818181818183,
     25,
     50,
     200,
     56.99999999999999,
     0,
     56.99999999999999
   ],
   "000132": [
     35.99999999999999,
     -18.181818181818183,
     50,
     50,
     38.00000000000001,
     56.99999999999999,
     0,
     56.99999999999999
   ],
   "000133": [
     100,
     -18.181818181818183,
     0,
     50,
     139.99999999999997,
     34,
     0,
     56.99999999999999
   ],
   "000134": [
     100,
     118.18181818181819,
     0,
     50,
     200,
     34,
     0,
     56.99999999999999
   ],
   "000135": [
     100,
     -18.181818181818183,
     100,
     50,
     46.000000000000014,
     34,
     75,
     56.99999999999999
   ],
   "000137": [
     100,
     -18.181818181818183,
     25,
     50,
     92,
     34,
     75,
     56.99999999999999
   ],
   "000140": [
     100,
     66.36363636363637,
     50,
     50,
     145.99999999999997,
     34,
     50,
     56.99999999999999
   ],
   "000142": [
     100,
     71.81818181818184,
     0,
     50,
     0,
     0,
     25,
     89
   ],
   "000143": [
     53.000000000000014,
     44.54545454545456,
     50,
     50,
     0,
     0,
     25,
     89
   ],
   "000145": [
     53.000000000000014,
     43.181818181818194,
     75,
     75,
     94,
     48,
     75,
     89
   ],
   "000146": [
     100,
     40.45454545454545,
     50,
     25,
     188,
     48,
     75,
     100
   ],
   "000147": [
     100,
     59.54545454545455,
     25,
     25,
     86,
     48,
     75,
     100
   ],
   "000148": [
     100,
     63.63636363636365,
     100,
     25,
     100,
     64,
     100,
     100
   ],
   "000150": [
     100,
     69.09090909090911,
     0,
     25,
     200,
     64,
     100,
     100
   ],
   "000151": [
     70,
     50.000000000000014,
     50,
     25,
     0,
     51,
     50,
     100
   ],
   "000152": [
     70,
     50.000000000000014,
     50,
     25,
     0,
     51,
     50,
     100
   ],
   "000153": [
     70,
     50.000000000000014,
     100,
     25,
     0,
     51,
     50,
     100
   ],
   "000155": [
     70,
     50.000000000000014,
     100,
     25,
     0,
     73,
     75,
     100
   ],
   "000156": [
     24.999999999999996,
     37.727272727272734,
     0,
     25,
     0,
     49,
     100,
     100
   ],
   "000157": [
     24.999999999999996,
     33.63636363636364,
     0,
     25,
     0,
     49,
     100,
     100
   ],
   "000160": [
     24.999999999999996,
     28.181818181818187,
     75,
     25,
     36.00000000000001,
     80,
     50,
     100
   ],
   "000161": [
     24.999999999999996,
     48.63636363636365,
     25,
     25,
     72.00000000000001,
     80,
     75,
     100
   ]
}

huang_anim.js

function drawCrown() { //function to draw a crown
  var pineappleShade = color(237, 159, 0);
  var crownColor = color(230, 175, 11);
  fill(pineappleShade);
  triangle(width/2.05, height/5.5, width/1.98, height/7.3, width/1.93, height/5.5); //crown
  fill(crownColor);
  triangle(width/2.1, height/5.5, width/2.04, height/6.9, width/1.99, height/5.5);
  triangle(width/1.98, height/5.5, width/1.93, height/6.9, width/1.88, height/5.5);
}

function drawLine() { //function draws one rectangle for the fence
  fill(70);
  rect(width/100, height/2.02, width/120, height/8);
}

function drawClouds() { //draws clouds in the background
  var cloudColor = color(242, 242, 242);
  fill(cloudColor);
  ellipse(width/18, height/5.8, width/14, height/14);
  ellipse(width/10, height/6, width/12, height/9);
  ellipse(width/7, height/5.6, width/14, height/16);
  ellipse(width/5.8, height/5.3, width/18, height/30);
}


function drawpineLines() { //function draws pineapple lines
  var pineappleLines = color(227, 155, 0);
  push();
  stroke(pineappleLines);
  noFill();
  strokeWeight(width/100);
  line(width/5.4, height/4.6, width/3.99, height/3.1);
  line(width/7, height/3.97, width/4.19, height/2.45);
  line(width/7.62, height/3.03, width/5.09, height/2.25);

  line(width/5.1, height/4.6, width/7.62, height/3.05);
  line(width/4.23, height/4.03, width/6.87, height/2.4);
  line(width/3.99, height/3.05, width/5.4, height/2.25);
  pop();
}  

function drawLeaf() { //draws pineapple leaves
  var leafColor = color(73, 135, 37);
  var leafShade = color(63, 107, 21);
  push();
  stroke(leafColor); 
  strokeWeight(width/30);
  line(width/5.2, height/6.8, width/5.25, height/3);
  strokeWeight(width/60);
  line(width/5.2, height/8.5, width/5.25, height/3);

  stroke(leafShade);
  strokeWeight(width/30);
  line(width/6, height/5.3, width/5.25, height/3);
  strokeWeight(width/65);
  line(width/6.2, height/6.4, width/5.25, height/3);

  strokeWeight(width/30);
  line(width/4.6, height/5.3, width/5.25, height/3);
  strokeWeight(width/65);
  line(width/4.45, height/6.4, width/5.25, height/3);
  pop();
}


function huang_draw_one_frame(cur_frac) {
  // note: to clear the screen draw a rectangle
  // that is width x height - like this
  noStroke();
  fill(156, 200, 255); //background colour
  rect(0, 0, width, height);

  // note: all shape sizes, line widths, etc. should be a
  // function of width and height
  let rect_width = height / 10.0;
  let half_width = rect_width / 2;

  // note: animation should progress depending on the 
  // value of cur_frac which goes from 0 to 1, and it
  // should loop seamlessly
  let cur_x = map(cur_frac, 0, 1, 0, width) - half_width;


  //colour variables
  var grassColor = color(69, 153, 74);
  var bushColor = color(21, 130, 27);
  var pillarColor = color(235, 231, 223);
  var pathColor = color(247, 201, 94);
  var castleColor = color(222, 212, 189);
  var castleShade = color(194, 187, 172);
  var castleShadeDark = color(156, 151, 142);
  var castleDoor = color(77, 64, 53);
  var pineappleColor = color(255, 174, 0);
  var pineappleLines = color(227, 155, 0);
  var pineappleShade = color(237, 159, 0);
  var leafColor = color(73, 135, 37);
  var leafShade = color(63, 107, 21);
  var crownColor = color(230, 175, 11);


  //mapping the clouds
  let cloudsMove;
  if (cur_frac > 0.5) { 
    cloudsMove = map(cur_frac, 0, 0.5, width/-16, width/-14);
  } else {
    cloudsMove = map(cur_frac, 0.5, 1, width/-14, width/-16);
  }

  let cloudsMoveLeft;
  if (cur_frac > 0.5) {
    cloudsMoveLeft = map(cur_frac, 0, 0.5, width/2.4, width/2.3);
  } else {
    cloudsMoveLeft = map(cur_frac, 0.5, 1, width/2.3, width/2.4);
  }

  let cloudsMoveRight;
  if (cur_frac > 0.5) {
    cloudsMoveRight = map(cur_frac, 0, 0.5, width/0.72, width/0.715);
  } else {
    cloudsMoveRight = map(cur_frac, 0.5, 1, width/0.715, width/0.72);
  }

  let cloudsRightSmall;
  if (cur_frac > 0.5) {
    cloudsRightSmall = map(cur_frac, 0, 0.5, width/0.535, width/0.54);
  } else {
    cloudsRightSmall = map(cur_frac, 0.5, 1, width/0.54, width/0.535);
  }

  //draws clouds
  push();
  scale(0.6);
  translate(cloudsMove, height/5);
  drawClouds();
  pop();

  push();
  scale(0.4);
  translate(cloudsMoveLeft, height/8);
  drawClouds();
  pop();

  push();
  scale(0.65);
  translate(cloudsMoveRight, height/5);
  drawClouds();
  pop();

  push();
  scale(0.4);
  translate(cloudsRightSmall, height/8);
  drawClouds();
  pop();


  //draws castle
  fill(castleShade);
  rect(width/2.5, height/30, height/12, height/12); //castle's top bricks
  rect(width/2.09, height/30, height/12, height/12);
  rect(width/1.8, height/30, height/12, height/12);
  fill(pillarColor);
  rect(width/2.5, height/30, height/12, height/100); //castle's top bricks (darker)
  rect(width/2.09, height/30, height/12, height/100);
  rect(width/1.8, height/30, height/12, height/100);
  fill(castleShadeDark);
  stroke(0, 100);
  strokeWeight(height/300);  
  rect(width/3.23, height/6, width/18, height/3);
  rect(width/1.57, height/6, width/18, height/3);
  noStroke();
  fill(pathColor);
  triangle(width/3.23, height/6, width/2.95, height/12, width/2.74, height/6);
  triangle(width/1.57, height/6, width/1.5, height/12, width/1.444, height/6);
  fill(castleShade);
  rect(width/4.05, height/3, width/1.98, height/4.5); //back wall
  fill(pillarColor);
  rect(width/4.05, height/3, width/1.98, height/100);
  fill(castleShade);
  rect(width/2.44, height/12, width/5.5, height/2.8);
  fill(castleColor);
  rect(width/2.32, height/2.8, width/7, height/4); //front door wall
  fill(castleShade);
  rect(width/2.32, height/2.8, width/7, height/100);
  stroke(0, 100);
  strokeWeight(height/300);
  rect(width/2.74, height/3.2, width/15, height/3);
  rect(width/1.75, height/3.2, width/15, height/3);
  noStroke();
  fill(pathColor);
  triangle(width/2.74, height/3.2, width/2.52, height/4.5, width/2.312, height/3.2);
  triangle(width/1.75, height/3.2, width/1.65, height/4.5, width/1.565, height/3.2);
  fill(castleDoor);
  stroke(30, 90);
  strokeWeight(height/140);
  ellipse(width/1.998, height/2, width/16, height/5); //castle door
  noStroke();
  fill(80);
  rect(width/2.157, height/12, width/280, height/8); //castle flag straps
  rect(width/1.87, height/12, width/280, height/8); 
  fill(pathColor);
  rect(width/2.245, height/8.6, width/8.8, height/4.6); //castle flag
  fill(pillarColor);
  rect(width/2.2, height/8.6, width/65, height/4.6); //flag stripes
  rect(width/1.874, height/8.6, width/65, height/4.6);
  fill(castleShadeDark);
  rect(width/2.82, height/2.7, width/45, height/50); //castle brick
  rect(width/2.82, height/2.4, width/45, height/50); 
  rect(width/2.82, height/2.17, width/45, height/50); 
  rect(width/1.596, height/2.7, width/45, height/50); //castle brick
  rect(width/1.596, height/2.4, width/45, height/50); 
  rect(width/1.596, height/2.17, width/45, height/50);
  fill(castleShadeDark);
  rect(width/2.45, height/7, width/55, height/60);
  rect(width/1.74, height/4.6, width/55, height/60);


  //draws pineapple on flag
  stroke(pineappleShade);
  strokeWeight(width/52);
  line(width/2.05, height/3.43, width/2.05, height/3.5); //leg
  line(width/1.935, height/3.43, width/1.935, height/3.5); 
  line(width/2.15, height/4.6, width/1.94, height/4); //hand
  line(width/1.9, height/4.35, width/1.85, height/4.6); 
  fill(pineappleColor);
  noStroke();
  rect(width/2.13, height/6, width/15, height/8, width/35); //head
  push();
  scale(0.5);
  translate(width/1.228, height/7.7);
  drawpineLines();
  pop();
  fill(30);
  ellipse(width/2.028, height/4.5, height/48); //eyes
  ellipse(width/1.95, height/4.5, height/48);
  arc(width/1.988, height/4.2, width/60, width/60, 0, PI, CHORD); //mouth
  push();
  translate(-1.5, -1);
  drawCrown(); //crown
  pop();
  stroke(30);
  strokeWeight(width/150);
  line(width/2.15, height/5.6, width/2.17, height/3.8); //staff stick
  line(width/1.855, height/5.6, width/1.833, height/3.8);
  noStroke();
  fill(leafShade);
  ellipse(width/2.15, height/5.6, height/30); //staff orb
  ellipse(width/1.855, height/5.6, height/30);
  fill(leafColor)
  ellipse(width/2.15, height/5.6, height/80);
  ellipse(width/1.855, height/5.6, height/80);


  //draws fence lines
  for (let i=0; i<7; i++) { //for loop to add more fence lines
    push();
    translate(width/8*(i-1.03)/1.5, 0);
    drawLine();
    pop();
  }

  for (let i=0; i<7; i++) {
    push();
    translate(width/8*(i-1.03)/1.5, 0);
    translate(width/1.545, 0);
    drawLine();
    pop();
  }

  //draws fence
  fill(60);
  rect(width/-50, height/2.05, width/2.21, height/100);
  rect(width/1.75, height/2.05, width/2.21, height/100);

  let lightOn; //mapping light size
  if (cur_frac < 0.5) {
    lightOn = map(cur_frac, 0, 0.5, height/35, height/18);
  } else {
    lightOn = map(cur_frac, 0.5, 1, height/18, height/35);
  }

  //draw glowing staff orb
  fill(63, 107, 21, 100);
  ellipse(width/1.855, height/5.6, lightOn);
  fill(73, 135, 37, 240);
  stroke(63, 107, 21, 150);
  strokeWeight(height/100);
  ellipse(width/1.855, height/5.6, height/35);
  noStroke();

  fill(63, 107, 21, 100);
  ellipse(width/2.15, height/5.6, lightOn);
  fill(73, 135, 37, 240);
  stroke(63, 107, 21, 150);
  strokeWeight(height/100);
  ellipse(width/2.15, height/5.6, height/35);
  noStroke();

  //draws grass
  fill(grassColor);
  stroke(leafShade);
  strokeWeight(1);
  rect(0, height/1.8, width, height/2);
  noStroke();

  //draws perspective path
  fill(pathColor);
  stroke(pineappleShade);
  strokeWeight(1);
  beginShape();
    vertex(width/2.1, height/1.798);
    vertex(width/1.905, height/1.798);
    vertex(width/1.5, height);
    vertex(width/2.77, height);
  endShape(CLOSE);
  noStroke();

  //draws pillars
  fill(pillarColor);
  stroke(170);
  strokeWeight(2);
  rect(width/7.2, height/1.8, width/10, height/2); //left side pillars
  noStroke();
  rect(width/7.2, height/2.02, width/10, height/50);
  fill(pathColor); //flag on pillar
  stroke(pineappleColor);
  strokeWeight(width/120);
  rect(width/6.45, height/1.8, width/15, height/3.5);
  noStroke();
  fill(220);
  rect(width/7.9, height/1.97, width/8, height/12);

  fill(pillarColor);
  stroke(170);
  strokeWeight(2);
  rect(width/1.312, height/1.8, width/10, height/2); //right side pillars
  noStroke();
  rect(width/1.312, height/2.02, width/10, height/50);
  fill(pathColor);
  stroke(pineappleColor);
  strokeWeight(width/120);
  rect(width/1.284, height/1.8, width/15, height/3.5);
  noStroke();
  fill(220);
  rect(width/1.335, height/1.97, width/8, height/12);

  push();
  scale(0.8);
  translate(width/-3.725, height/1.3); //draws crown on flag
  drawCrown();
  pop();

  push();
  scale(0.8);
  translate(width/1.953, height/1.3);
  drawCrown();
  pop();

  //draws bushes in the corners
  fill(bushColor);
  ellipse(width/30, height/1.2, width/6); //left side bushes
  ellipse(width/10, height/1.1, width/5);
  ellipse(width/4.5, height/1, width/8);
  ellipse(width/30, height/1, width/8);
  ellipse(width, height/1.08, width/4); //right side bushes
  ellipse(width/1.15, height/1.07, width/7);
  ellipse(width/1.25, height, width/8);

  //maps for the pineapple
  let leftLeg;
  if(cur_frac < 0.5) {
    leftLeg = map(cur_frac, 0, 0.5, height/3, height/2.73);
  } else {
    leftLeg = map(cur_frac, 0.5, 1, height/2.73, height/3);
  }

  let rightLeg;
    if(cur_frac > 0.5) {
    rightLeg = map(cur_frac, 0, 0.5, height/3.1, height/2.89);
  } else {
    rightLeg = map(cur_frac, 0.5, 1, height/2.89, height/3.1);
  }

  let eyesClose;
    if (cur_frac > 0.85) {
      eyesClose = map(cur_frac, 0, 1, width/45, width/500);
    }

  let headShake;
    if (cur_frac > 0.5) {
      headShake = map(cur_frac, 0, 0.5, height/4.3, height/4.6);
    } else {
      headShake = map(cur_frac, 0.5, 1, height/4.6, height/4.3);
    }

  let eyeShake;
    if (cur_frac > 0.5) {
      eyeShake = map(cur_frac, 0, 0.5, height/2.9, height/3.1);
    } else {
      eyeShake = map(cur_frac, 0.5, 1, height/3.1, height/2.9);
    }

  let mouthShake;
    if (cur_frac > 0.5) {
      mouthShake = map(cur_frac, 0, 0.5, height/2.7, height/2.85);
    } else {
      mouthShake = map(cur_frac, 0.5, 1, height/2.85, height/2.7);
    }

  let longHand;
    if (cur_frac > 0.5) {
      longHand = map(cur_frac, 0, 0.5, height/2.8, height/3.1);
    } else {
      longHand = map(cur_frac, 0.5, 1, height/3.1, height/2.8);
    }

  let pineLines;
    if(cur_frac < 0.5) {
      pineLines = map(cur_frac, 0, 0.5, width/-250, width/200);
    } else {
      pineLines = map(cur_frac, 0.5, 1, width/200, width/-250);
    }

  let pineLeaf;
    if (cur_frac < 0.5) {
      pineLeaf = map(cur_frac, 0, 0.5, 0, 10);
    } else {
      pineLeaf = map(cur_frac, 0.5, 1, 10, 0);
    }

  //draws pineapples
  push();
  translate(0, pineLeaf) //moves leaves with head
  drawLeaf(); //calls draw leaf function
  pop();

  push();
  translate(width/1.613, pineLeaf) 
  drawLeaf(); 
  pop();

  fill(pineappleShade);
  rect(width/6.7, leftLeg, width/29, height/7.5, width/8); //draws legs on left
  rect(width/5.1, rightLeg, width/29, height/7.5, width/8);

  rect(width/1.298, leftLeg, width/29, height/7.5, width/8); //draws legs on right
  rect(width/1.224, rightLeg, width/29, height/7.5, width/8);

  push();
  stroke(pineappleShade)
  strokeWeight(width/35);
  line(width/9.2, longHand, width/7, height/3.05); //draws hands on left
  line(width/4.2, height/3.05, width/3.66, longHand);
  pop();

  push();
  stroke(pineappleShade)
  strokeWeight(width/35);
  line(width/1.38, longHand, width/1.3, height/3.05); //draws hands on right
  line(width/1.19, height/3.05, width/1.119, longHand);
  pop();

  fill(pineappleColor);
  rect(width/7.9, headShake, width/7.8, height/4.1, width/18); //draws head on left
  rect(width/1.34, headShake, width/7.8, height/4.1, width/18); //draws head on right

  push();
  translate(0, pineLines); //moves lines with head
  drawpineLines(); //calls draw pineapple line function
  pop();

  push();
  translate(width/1.615, pineLines); 
  drawpineLines(); 
  pop();

  fill(40);
  ellipse(width/1.268, eyeShake, width/45, eyesClose); //draws eyes on left
  ellipse(width/1.203, eyeShake, width/45, eyesClose);

  ellipse(width/5.9, eyeShake, width/45, eyesClose); //draws eyes on right
  ellipse(width/4.7, eyeShake, width/45, eyesClose);

  angleMode(RADIANS);
  arc(width/5.23, mouthShake, width/35, width/35, 0, PI, CHORD); //draws mouth on left
  arc(width/1.233, mouthShake, width/35, width/35, 0, PI, CHORD); //draws mouth on right

  // note: you can draw optional things depending on "debugView"
  if (debugView) {
  }
}

huang_face.js

// remove this or set to false to enable full program (load will be slower)
// var DEBUG_MODE = true;

// tto set the number of sliders to show
var NUM_SLIDERS = 7;

//given a segment, this returns the average point of [x, y]
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];
}

function drawSpots() { // draws the spots for the males
  noStroke();
  ellipse(0, -2.1, 0.22);
  ellipse(-0.2, -1.8, 0.22);
  ellipse(0.2, -1.8, 0.22);
}

function drawBlush() { //draws the blush for females
  noFill();
  strokeWeight(0.1);
  ellipse(-1, 0, 0.3);
  ellipse(1, 0, 0.3);
  strokeWeight(0.05);
  line(-1.2, 0, -0.8, 0);
  line(0.8, 0, 1.2, 0);
}

// colour variables
// const bg_color = [225, 206, 187];
// const fg_color = [151, 102, 52];
// const stroke_color = [95, 52, 8];

// defines face object
function HuangFace() {


  // face variables
  this.faceColor = 0; //range is 0 to 1

  this.blackEye = 0.5; //Black eyeSize range is 0.05 to 0.9
  this.eyeSize = 0.5 //White eyeSuze range is 0.2 to 0.5
  this.earShape = 1; //range is 0.6 to 1.5
  this.antennaColor = 0; //range is 0 to 1
  this.showBlush = 0; //range is 0 to 1
  this.showSpots = 0; //range is 0 to 1

  /*
   * Draw the face with position lists that include:
   *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
   *    bottom_lip, top_lip, nose_tip, nose_bridge,
   */  
  this.draw = function(positions) {

    //positions for the face
    let face_left = positions.chin[4]; 
    let face_chin = positions.chin[8];
    let face_right = positions.chin[16];
    let right_cheek = positions.chin[2];
    let left_cheek = positions.chin[4];

    //determines face colour by sliders
    if(this.faceColor == 0) {
      strokeWeight(0.2);
      stroke(255);
      fill(0);
    } else if (this.faceColor == 1) {
      strokeWeight(0.2);
      stroke(0);
      fill(255);
    }

    //custom head shape based on chin positions
    beginShape();
    vertex(face_left[0]-0.4, -0.7)
    bezierVertex(-2.5, -4, 2, -4.5, face_right[0], -1);
    bezierVertex(face_right[0], face_chin[0], 0, 5, face_left[0]-0.4, -0.7);
    endShape();

    //shows blush for females
    //if statement determines if blush is black or white depending on face colour
    if (this.faceColor == 0 && this.showBlush == 1) {
      push();
        fill(50);
        drawSpots();
      pop();
    } else if (this.faceColor == 1 && this.showBlush == 1) {
      push();
        fill(0);
        drawSpots();
      pop();
    }

    //gets average of the eyes
    fill(150);
    let left_eye_pos = segment_average(positions.left_eye);
    let right_eye_pos = segment_average(positions.right_eye);
    ellipse(left_eye_pos[0], left_eye_pos[1], 0.1);
    ellipse(right_eye_pos[0], right_eye_pos[1], 0.1);

    //draws eyes
    let blackEye = map(this.eyeSize, 5, 100, 2, 4); //mapping eye boundary
    noStroke();
    fill(0);
    ellipse(left_eye_pos[0], left_eye_pos[1], this.blackEye); //size of eye is random
    ellipse(right_eye_pos[0], right_eye_pos[1], this.blackEye);
    fill(255);
    ellipse(left_eye_pos[0], left_eye_pos[1], this.eyeSize);
    ellipse(right_eye_pos[0], right_eye_pos[1], this.eyeSize);

    //positions for the nose
    let nose_top = positions.nose_bridge[0];
    let nose_bottom = positions.nose_bridge[3];
    let nose_middle = positions.nose_tip[0];

    //draws nose
    noFill();
    stroke(0);
    strokeWeight(0.2);
    curve(nose_top[0], nose_top[1], nose_top[0]-0.3, nose_top[1]+0.5, nose_bottom[0]+0.3, nose_bottom[1], nose_middle[0]+3, nose_middle[1]-5);

    //shows spots for males
    //if statement determines if spots are black or white depending on face colour
    if (this.faceColor == 0 && this.showSpots == 1) {
    push();
    stroke(255);
    drawBlush();
    pop();
    } else if (this.faceColor == 1 && this.showSpots == 1) {
    push();
    stroke(0);
    drawBlush();
    pop();
    }

    //positions for the mouth
    let mouth_left = positions.top_lip[0];
    let mouth_right = positions.bottom_lip[0];
    let mouth_middle = positions.bottom_lip[3];

    //draws mouth
    if(this.faceColor == 0) {
      stroke(255);
    } else {
      stroke(0);
    }
    strokeWeight(0.2);
    curve(0, 0, mouth_left[0], mouth_left[1], mouth_right[0], mouth_right[1], mouth_middle[0]+2, mouth_middle[1]-2); 

    //if statement determines if antennas are black or white
    if(this.antennaColor == 0) {
      stroke(255);
      fill(0);
    } else if (this.antennaColor == 1) {
      stroke(0);
      fill(255);

    }
  //draws ears
    rotate(-20, 0);
    ellipse(0, -2.8, 0.5, this.earShape); //changes the height of the ears
    ellipse(0, -3.8, 1, 0.4);
    rotate(45, 0);
    ellipse(0.1, -2.8, 0.5, this.earShape);
    ellipse(0.1, -3.8, 1, 0.4);
  } 


  /* set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
    this.faceColor = int(map(settings[0], 0, 100, 0, 1));
    this.blackEye = (map(settings[1], 0, 100, 0.05, 0.9));
    this.eyeSize = map(settings[2], 0, 100, 0.2, 0.5);
    this.earShape = map(settings[3], 0, 100, 0.6, 1.5);
    this.antennaColor = int(map(settings[4], 0, 100, 0, 1));
    this.showBlush = int(map(settings[5], 0, 100, 0, 1));
    this.showSpots = int(map(settings[6], 0, 100, 0, 1));
  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    let settings = new Array(7);
    settings[0] = map(this.faceColor, 0, 1, 0, 100);
    settings[1] = map(this.blackEye, 0.05, 0.9, 0, 100);
    settings[2] = map(this.eyeSize, 0.2, 0.5, 0, 100);
    settings[3] = map(this.earShape, 0.6, 1.5, 0, 100);
    settings[4] = map(this.antennaColor, 0, 1, 0, 100);
    settings[5] = map(this.showBlush, 0, 1, 0, 100);
    settings[6] = map(this.showSpots, 0, 1, 0, 100);
    return settings;
  }
}

huang_training_values.json

{
  "000001": [
    100,
    51,
    13.000000000000004,
    100,
    100,
    0,
    100
  ],
  "000002": [
    100,
    73,
    13.000000000000004,
    100,
    100,
    0,
    100
  ],
  "000005": [
    100,
    75,
    32.000000000000014,
    60.00000000000002,
    100,
    0,
    100
  ],
  "000006": [
    100,
    51,
    5.000000000000004,
    100,
    100,
    0,
    100
  ],
  "000007": [
    100,
    66,
    0,
    40,
    0,
    100,
    0
  ],
  "000009": [
    100,
    64,
    0,
    100,
    0,
    0,
    100
  ],
  "000010": [
    100,
    75,
    60,
    43,
    100,
    0,
    100
  ],
  "000013": [
    100,
    47,
    21.000000000000004,
    11.999999999999998,
    100,
    100,
    0
  ],
  "000014": [
    0,
    64,
    49.999999999999986,
    16,
    0,
    0,
    100
  ],
  "000015": [
    100,
    48,
    0,
    25.999999999999996,
    0,
    100,
    0
  ],
  "000016": [
    100,
    48,
    0,
    25.999999999999996,
    0,
    100,
    0
  ],
  "000018": [
    100,
    56.99999999999999,
    6.999999999999998,
    65.99999999999999,
    100,
    0,
    100
  ],
  "000020": [
    100,
    47,
    0,
    65.99999999999999,
    0,
    100,
    0
  ],
  "000023": [
    100,
    47,
    28.000000000000007,
    24.999999999999996,
    0,
    100,
    0
  ],
  "000025": [
    100,
    47,
    4.0000000000000036,
    18.000000000000004,
    0,
    100,
    0
  ],
  "000028": [
    100,
    56.00000000000001,
    5.000000000000004,
    100,
    100,
    0,
    100
  ],
  "000029": [
    100,
    70,
    40,
    100,
    100,
    0,
    100
  ],
  "000030": [
    100,
    67,
    0,
    43,
    100,
    100,
    0
  ],
  "000031": [
    100,
    67,
    37,
    54.99999999999999,
    0,
    0,
    100
  ],
  "000032": [
    100,
    53.000000000000014,
    7.999999999999999,
    30,
    100,
    100,
    0
  ],
  "000035": [
    100,
    67,
    0,
    100,
    0,
    0,
    100
  ],
  "000037": [
    0,
    38,
    22.000000000000004,
    0,
    0,
    100,
    0
  ],
  "000038": [
    100,
    51,
    29.00000000000001,
    22.000000000000007,
    0,
    100,
    0
  ],
  "000040": [
    100,
    54,
    0,
    44.99999999999999,
    0,
    0,
    100
  ],
  "000041": [
    100,
    54,
    0,
    35,
    0,
    100,
    0
  ],
  "000042": [
    100,
    70,
    51.99999999999999,
    48.99999999999999,
    100,
    0,
    100
  ],
  "000043": [
    100,
    70,
    31.00000000000001,
    100,
    0,
    0,
    100
  ],
  "000044": [
    0,
    70,
    39,
    100,
    0,
    0,
    100
  ],
  "000045": [
    100,
    57.99999999999999,
    13.000000000000004,
    100,
    100,
    0,
    100
  ],
  "000047": [
    100,
    47,
    0,
    100,
    0,
    0,
    100
  ],
  "000048": [
    100,
    47,
    0,
    37.00000000000001,
    0,
    100,
    0
  ],
  "000051": [
    100,
    55.000000000000014,
    0,
    0,
    100,
    100,
    0
  ],
  "000050": [
    100,
    55.000000000000014,
    0,
    15,
    0,
    100,
    0
  ],
  "000052": [
    100,
    55.000000000000014,
    23.000000000000004,
    18.000000000000004,
    0,
    100,
    0
  ],
  "000054": [
    100,
    55.000000000000014,
    23.000000000000004,
    100,
    100,
    0,
    100
  ],
  "000055": [
    100,
    54,
    5.9999999999999964,
    28.000000000000014,
    0,
    100,
    0
  ],
  "000056": [
    100,
    56.00000000000001,
    0,
    44,
    0,
    100,
    0
  ],
  "000058": [
    100,
    61,
    25.000000000000007,
    100,
    0,
    0,
    100
  ],
  "000060": [
    0,
    61,
    25.000000000000007,
    0,
    0,
    100,
    0
  ],
  "000064": [
    100,
    45,
    0,
    19.000000000000004,
    0,
    100,
    0
  ],
  "000065": [
    100,
    56.99999999999999,
    6.999999999999998,
    31,
    0,
    100,
    0
  ],
  "000068": [
    100,
    55.000000000000014,
    13.000000000000004,
    31,
    100,
    100,
    0
  ],
  "000069": [
    100,
    55.000000000000014,
    26.000000000000007,
    18.000000000000004,
    0,
    100,
    0
  ],
  "000071": [
    100,
    61,
    26.000000000000007,
    40,
    100,
    0,
    100
  ],
  "000073": [
    100,
    61,
    26.000000000000007,
    100,
    0,
    0,
    100
  ],
  "000076": [
    100,
    56.99999999999999,
    14.000000000000004,
    44,
    0,
    100,
    0
  ],
  "000077": [
    100,
    59,
    14.000000000000004,
    100,
    0,
    0,
    100
  ],
  "000078": [
    100,
    74,
    38,
    100,
    0,
    0,
    100
  ],
  "000079": [
    100,
    54,
    14.999999999999996,
    0,
    100,
    100,
    0
  ],
  "000080": [
    100,
    54,
    14.000000000000004,
    23.999999999999996,
    0,
    100,
    0
  ],
  "000081": [
    100,
    54,
    14.000000000000004,
    23.999999999999996,
    0,
    100,
    0
  ],
  "000083": [
    100,
    54,
    14.000000000000004,
    100,
    100,
    0,
    100
  ],
  "000085": [
    100,
    56.00000000000001,
    19,
    100,
    100,
    0,
    100
  ],
  "000086": [
    100,
    56.00000000000001,
    19,
    2.0000000000000018,
    100,
    0,
    100
  ],
  "000088": [
    100,
    56.00000000000001,
    0,
    100,
    100,
    0,
    100
  ],
  "000091": [
    100,
    43,
    0,
    35.99999999999999,
    0,
    100,
    0
  ],
  "000092": [
    100,
    51,
    18,
    50.000000000000014,
    100,
    0,
    100
  ],
  "000096": [
    100,
    50,
    18,
    100,
    0,
    0,
    100
  ],
  "000097": [
    100,
    62,
    60,
    100,
    100,
    0,
    100
  ],
  "000099": [
    100,
    52,
    37,
    100,
    100,
    0,
    100
  ],
  "000100": [
    100,
    52,
    37,
    46.99999999999999,
    100,
    0,
    100
  ],
  "000103": [
    100,
    66,
    52.99999999999999,
    100,
    0,
    0,
    100
  ],
  "000104": [
    100,
    51,
    38,
    28.000000000000014,
    100,
    100,
    0
  ],
  "000106": [
    100,
    51,
    9,
    28.000000000000014,
    100,
    0,
    100
  ],
  "000108": [
    100,
    51,
    45.00000000000001,
    57.999999999999986,
    100,
    0,
    100
  ],
  "000109": [
    100,
    51,
    45.00000000000001,
    30,
    100,
    100,
    0
  ],
  "000110": [
    100,
    51,
    45.00000000000001,
    50.99999999999999,
    100,
    0,
    100
  ],
  "000111": [
    100,
    50,
    20,
    50.99999999999999,
    100,
    0,
    100
  ],
  "000114": [
    100,
    63,
    7.999999999999999,
    33,
    0,
    100,
    0
  ],
  "000115": [
    100,
    55.000000000000014,
    7.999999999999999,
    0,
    100,
    100,
    0
  ],
  "000116": [
    100,
    55.000000000000014,
    7.999999999999999,
    17,
    0,
    100,
    0
  ],
  "000117": [
    0,
    55.000000000000014,
    47.999999999999986,
    100,
    0,
    0,
    100
  ],
  "000118": [
    100,
    60,
    19,
    50.99999999999999,
    0,
    0,
    100
  ],
  "000121": [
    100,
    55.000000000000014,
    15.999999999999998,
    100,
    0,
    0,
    100
  ],
  "000122": [
    100,
    52,
    5.000000000000004,
    25.999999999999996,
    100,
    0,
    100
  ],
  "000125": [
    100,
    52,
    31.00000000000001,
    0,
    100,
    100,
    0
  ],
  "000126": [
    100,
    60,
    51.99999999999999,
    100,
    100,
    0,
    100
  ],
  "000129": [
    100,
    54,
    41,
    37.99999999999999,
    0,
    100,
    0
  ],
  "000131": [
    0,
    52,
    0,
    74,
    0,
    0,
    100
  ],
  "000132": [
    0,
    52,
    26.000000000000007,
    100,
    0,
    0,
    100
  ],
  "000133": [
    100,
    68,
    74.00000000000001,
    41,
    100,
    0,
    100
  ],
  "000134": [
    0,
    68,
    14.999999999999996,
    0,
    0,
    100,
    0
  ],
  "000135": [
    0,
    68,
    28.000000000000007,
    44,
    0,
    100,
    0
  ],
  "000137": [
    100,
    51,
    15.999999999999998,
    15,
    0,
    100,
    0
  ],
  "000140": [
    100,
    59,
    40,
    100,
    100,
    0,
    100
  ],
  "000142": [
    100,
    59,
    40,
    100,
    0,
    0,
    100
  ],
  "000143": [
    100,
    59,
    46.00000000000001,
    32,
    0,
    100,
    0
  ],
  "000145": [
    100,
    44,
    1.0000000000000009,
    100,
    0,
    0,
    100
  ],
  "000146": [
    100,
    44,
    1.0000000000000009,
    100,
    100,
    0,
    100
  ],
  "000147": [
    100,
    55.000000000000014,
    42.00000000000001,
    100,
    100,
    0,
    100
  ],
  "000148": [
    100,
    49,
    30.00000000000001,
    41,
    0,
    0,
    100
  ],
  "000150": [
    100,
    49,
    19,
    41,
    100,
    100,
    0
  ],
  "000151": [
    100,
    49,
    0,
    100,
    0,
    0,
    100
  ],
  "000152": [
    100,
    49,
    30.00000000000001,
    18.000000000000004,
    0,
    100,
    0
  ],
  "000153": [
    100,
    49,
    0,
    17,
    0,
    100,
    0
  ],
  "000155": [
    100,
    66,
    0,
    100,
    100,
    0,
    100
  ],
  "000156": [
    100,
    66,
    37,
    48.99999999999999,
    100,
    0,
    100
  ],
  "000157": [
    100,
    50,
    46.999999999999986,
    100,
    100,
    0,
    100
  ],
  "000160": [
    100,
    50,
    0,
    28.999999999999996,
    0,
    100,
    0
  ],
  "000161": [
    100,
    50,
    45.00000000000001,
    100,
    0,
    0,
    100
  ]
}

idris_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */

// remove this or set to false to enable full program (load will be slower)
//var DEBUG_MODE = true;

// this can be used to set the number of sliders to show
// var NUM_SLIDERS = 4;

// other variables can be in here too
// here's some examples for colors used
// const bg_color = [225, 206, 187];
// const fg_color = [151, 102, 52];
// const stroke_color = [95, 52, 8];

//skin colour

//brown 
const brownS = [74, 52, 33];
//white
const whiteS = [232, 223, 218];
//tan
const tanS = [191, 148, 107];


//hair colour

//red
const redH = [181, 63, 16];
//blonde
const blondeH = [214, 171, 77];
//brown
const brownH = [51, 29, 0];
//black
const blackH = [28, 27, 26];



this.show_points = function(segment) {
    for (let i = 0; i < segment.length; i++) {
        let px = segment[i][0];
        let py = segment[i][1];
        var number = i.toString();
        textAlign(CENTER, CENTER);
        textSize(0.2);
        fill(0);
        text(number, px, py, 0.1);
    }
}

// example of a global function
// given a segment, this returns the average point [x, y]

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];
}

// This where you define your own face object
function IdrisFace() {
    // these are state variables for a face
    // (your variables should be different!)

    //all to max, chnage later

    this.green = 3;
    this.flower = 1.8;
    this.facex = 3;
    this.bflower = 1.4;
    this.skin = 2;
    this.hair = 4;


    // example of a function *inside* the face object.
    // this draws a segment, and do_loop will connect the ends if true
    this.draw_segment = function(segment, do_loop) {
        for (let i = 0; i < segment.length; i++) {
            let px = segment[i][0];
            let py = segment[i][1];
            ellipse(px, py, 0.1);
            if (i < segment.length - 1) {
                let nx = segment[i + 1][0];
                let ny = segment[i + 1][1];
                line(px, py, nx, ny);
            } else if (do_loop) {
                let nx = segment[0][0];
                let ny = segment[0][1];
                line(px, py, nx, ny);
            }
        }
    };

    /*
     * Draw the face with position lists that include:
     *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
     *    bottom_lip, top_lip, nose_tip, nose_bridge, 
     */
    this.draw = function(positions) {

        // outer fuzz for female hair

        //red
        if (this.hair == 1) {
            if (this.green == 3 || this.green === 2) {
                fill(redH);
                push();
                angleMode(DEGREES);
                translate(0, -1.4);
                noStroke();
                for (let i = 0; i < 20; i++) {
                    ellipse(0, 1.8, 1.44);
                    rotate(20);

                }
                pop();
            }
        }

        //blonde
        if (this.hair == 2) {
            if (this.green == 3 || this.green === 2) {
                fill(blondeH);
                push();
                angleMode(DEGREES);
                translate(0, -1.4);
                noStroke();
                for (let i = 0; i < 20; i++) {
                    ellipse(0, 1.8, 1.44);
                    rotate(20);

                }
                pop();
            }
        }

        //brown
        if (this.hair == 3) {
            if (this.green == 3 || this.green === 2) {
                fill(brownH);
                push();
                angleMode(DEGREES);
                translate(0, -1.4);
                noStroke();
                for (let i = 0; i < 20; i++) {
                    ellipse(0, 1.8, 1.44);
                    rotate(20);

                }
                pop();
            }
        }

        //black
        if (this.hair == 4) {
            if (this.green == 3 || this.green === 2) {
                fill(blackH);
                push();
                angleMode(DEGREES);
                translate(0, -1.4);
                noStroke();
                for (let i = 0; i < 20; i++) {
                    ellipse(0, 1.8, 1.44);
                    rotate(20);

                }
                pop();
            }
        }

        //female hair

        //red
        if (this.hair == 1) {
            if (this.green == 3 || this.green === 2) {

                noStroke();
                fill(redH);
                ellipse(0, -1.4, 4.68);

                fill(50, 168, 82);
                push();
                angleMode(DEGREES);
                translate(-0.72, -2.7);
                noStroke();

                for (let i = 0; i < 10; i++) {
                    ellipse(0, 0, 0.36, 1.4);
                    rotate(180 / 5);
                }
                pop();
                push();

                angleMode(DEGREES);
                translate(1.8, -2);
                noStroke();
                for (let i = 0; i < 10; i++) {
                    ellipse(0, 0, 0.36, 1.4);
                    rotate(180 / 5);

                }
                pop();

                push();

                angleMode(DEGREES);
                translate(0.72, -3);
                noStroke();
                for (let i = 0; i < 10; i++) {
                    ellipse(0, 0, 0.36, 1.4);
                    rotate(180 / 5);

                }
                pop();
            }
        }

        //blonde
        if (this.hair == 2) {
            if (this.green == 3 || this.green === 2) {

                noStroke();
                fill(blondeH);
                ellipse(0, -1.4, 4.68);

                fill(23, 158, 191);
                push();
                angleMode(DEGREES);
                translate(-0.72, -2.7);
                noStroke();

                for (let i = 0; i < 10; i++) {
                    ellipse(0, 0, 0.36, 1.4);
                    rotate(180 / 5);
                }
                pop();
                push();

                angleMode(DEGREES);
                translate(1.8, -2);
                noStroke();
                for (let i = 0; i < 10; i++) {
                    ellipse(0, 0, 0.36, 1.4);
                    rotate(180 / 5);

                }
                pop();

                push();

                angleMode(DEGREES);
                translate(0.72, -3);
                noStroke();
                for (let i = 0; i < 10; i++) {
                    ellipse(0, 0, 0.36, 1.4);
                    rotate(180 / 5);

                }
                pop();
            }
        }

        //brown
        if (this.hair == 3) {
            if (this.green == 3 || this.green === 2) {

                noStroke();
                fill(brownH);
                ellipse(0, -1.4, 4.68);

                fill(204, 8, 96);
                push();
                angleMode(DEGREES);
                translate(-0.72, -2.7);
                noStroke();

                for (let i = 0; i < 10; i++) {
                    ellipse(0, 0, 0.36, 1.4);
                    rotate(180 / 5);
                }
                pop();
                push();

                angleMode(DEGREES);
                translate(1.8, -2);
                noStroke();
                for (let i = 0; i < 10; i++) {
                    ellipse(0, 0, 0.36, 1.4);
                    rotate(180 / 5);

                }
                pop();

                push();

                angleMode(DEGREES);
                translate(0.72, -3);
                noStroke();
                for (let i = 0; i < 10; i++) {
                    ellipse(0, 0, 0.36, 1.4);
                    rotate(180 / 5);

                }
                pop();
            }
        }

        //black
        if (this.hair == 4) {
            if (this.green == 3 || this.green === 2) {

                noStroke();
                fill(blackH);
                ellipse(0, -1.4, 4.68);

                fill(255);
                push();
                angleMode(DEGREES);
                translate(-0.72, -2.7);
                noStroke();

                for (let i = 0; i < 10; i++) {
                    ellipse(0, 0, 0.36, 1.4);
                    rotate(180 / 5);
                }
                pop();
                push();

                angleMode(DEGREES);
                translate(1.8, -2);
                noStroke();
                for (let i = 0; i < 10; i++) {
                    ellipse(0, 0, 0.36, 1.4);
                    rotate(180 / 5);

                }
                pop();

                push();

                angleMode(DEGREES);
                translate(0.72, -3);
                noStroke();
                for (let i = 0; i < 10; i++) {
                    ellipse(0, 0, 0.36, 1.4);
                    rotate(180 / 5);

                }
                pop();
            }
        }




        // head code
        if (this.skin == 1) {
            fill(brownS);
            noStroke();
            ellipse(0, -0.4, this.facex, 3.6);
        }

        if (this.skin == 2) {
            fill(tanS);
            noStroke();
            ellipse(0, -0.4, this.facex, 3.6);
        }

        if (this.skin == 3) {
            fill(whiteS);
            noStroke();
            ellipse(0, -0.4, this.facex, 3.6);
        }


        //beard

        //red
        if (this.hair == 1) {
            fill(redH);

            if (this.green < 2) {

                ellipse(0, 1.75, 2.5, 2.5);
                push();
                angleMode(DEGREES);
                translate(0, 1.75);
                noStroke();
                for (let i = 0; i < 20; i++) {
                    ellipse(0, 1, 1);
                    rotate(20);

                }

                //flowers for beard
                pop();

                fill(50, 168, 82);
                push();
                angleMode(DEGREES);
                translate(-0.9, 2);
                noStroke();

                for (let i = 0; i < 10; i++) {
                    ellipse(0, 0, 0.36, 1.2);
                    rotate(180 / 5);
                }
                pop();
                push();

                angleMode(DEGREES);
                translate(1.2, 1.5);
                noStroke();
                for (let i = 0; i < 10; i++) {
                    ellipse(0, 0, 0.36, 1.2);
                    rotate(180 / 5);

                }
                pop();

                push();

                angleMode(DEGREES);
                translate(0.3, 2.5);
                noStroke();
                for (let i = 0; i < 10; i++) {
                    ellipse(0, 0, 0.36, 1.2);
                    rotate(180 / 5);

                }
                pop();
            }
        }

        //blonde
        if (this.hair == 2) {
            fill(blondeH);

            if (this.green < 2) {

                ellipse(0, 1.75, 2.5, 2.5);
                push();
                angleMode(DEGREES);
                translate(0, 1.75);
                noStroke();
                for (let i = 0; i < 20; i++) {
                    ellipse(0, 1, 1);
                    rotate(20);

                }

                //flowers for beard
                pop();

                fill(23, 158, 191);
                push();
                angleMode(DEGREES);
                translate(-0.9, 2);
                noStroke();

                for (let i = 0; i < 10; i++) {
                    ellipse(0, 0, 0.36, 1.2);
                    rotate(180 / 5);
                }
                pop();
                push();

                angleMode(DEGREES);
                translate(1.2, 1.5);
                noStroke();
                for (let i = 0; i < 10; i++) {
                    ellipse(0, 0, 0.36, 1.2);
                    rotate(180 / 5);

                }
                pop();

                push();

                angleMode(DEGREES);
                translate(0.3, 2.5);
                noStroke();
                for (let i = 0; i < 10; i++) {
                    ellipse(0, 0, 0.36, 1.2);
                    rotate(180 / 5);

                }
                pop();
            }
        }

        //brown
        if (this.hair == 3) {
            fill(brownH);

            if (this.green < 2) {

                ellipse(0, 1.75, 2.5, 2.5);
                push();
                angleMode(DEGREES);
                translate(0, 1.75);
                noStroke();
                for (let i = 0; i < 20; i++) {
                    ellipse(0, 1, 1);
                    rotate(20);

                }

                //flowers for beard
                pop();

                fill(204, 8, 96);
                push();
                angleMode(DEGREES);
                translate(-0.9, 2);
                noStroke();

                for (let i = 0; i < 10; i++) {
                    ellipse(0, 0, 0.36, 1.2);
                    rotate(180 / 5);
                }
                pop();
                push();

                angleMode(DEGREES);
                translate(1.2, 1.5);
                noStroke();
                for (let i = 0; i < 10; i++) {
                    ellipse(0, 0, 0.36, 1.2);
                    rotate(180 / 5);

                }
                pop();

                push();

                angleMode(DEGREES);
                translate(0.3, 2.5);
                noStroke();
                for (let i = 0; i < 10; i++) {
                    ellipse(0, 0, 0.36, 1.2);
                    rotate(180 / 5);

                }
                pop();
            }
        }

        //black
        if (this.hair == 4) {
            fill(blackH);

            if (this.green < 2) {

                ellipse(0, 1.75, 2.5, 2.5);
                push();
                angleMode(DEGREES);
                translate(0, 1.75);
                noStroke();
                for (let i = 0; i < 20; i++) {
                    ellipse(0, 1, 1);
                    rotate(20);

                }

                //flowers for beard
                pop();

                fill(255);
                push();
                angleMode(DEGREES);
                translate(-0.9, 2);
                noStroke();

                for (let i = 0; i < 10; i++) {
                    ellipse(0, 0, 0.36, 1.2);
                    rotate(180 / 5);
                }
                pop();
                push();

                angleMode(DEGREES);
                translate(1.2, 1.5);
                noStroke();
                for (let i = 0; i < 10; i++) {
                    ellipse(0, 0, 0.36, 1.2);
                    rotate(180 / 5);

                }
                pop();

                push();

                angleMode(DEGREES);
                translate(0.3, 2.5);
                noStroke();
                for (let i = 0; i < 10; i++) {
                    ellipse(0, 0, 0.36, 1.2);
                    rotate(180 / 5);

                }
                pop();
            }
        }


        let left_eye_pos = segment_average(positions.left_eye);
        let right_eye_pos = segment_average(positions.right_eye);


        //blush 
        if (this.green == 3 || this.green === 2) {
            fill(196, 118, 118, 60);
            noStroke();
            ellipse(left_eye_pos[0], left_eye_pos[1] + 1, 0.7, 0.5);
            ellipse(right_eye_pos[0], right_eye_pos[1] + 1, 0.7, 0.5);
        }

        //nose
        let nose_top = positions.nose_bridge[0];
        let nose_bottom = positions.nose_bridge[2];
        let nose_bottom2 = positions.nose_bridge[3];

        // print(nose_top, nose_bottom);
        stroke(59, 41, 26);
        strokeWeight(0.1);
        line(nose_top[0], nose_top[1], nose_bottom[0], nose_bottom[1]);


        fill(255);
        stroke(59, 41, 26);

        let nose_end = null;
        if (nose_top[0] < nose_bottom[0]) {
            nose_end = positions.nose_tip[0];
        } else {
            nose_end = positions.nose_tip[4];
        }
        let nose_center = positions.nose_tip[2];


        push();
        noFill()
        strokeWeight(0.1);
        angleMode(DEGREES);

        arc(nose_bottom2[0], nose_bottom2[1], 0.5, 0.5, 180, 0, OPEN);

        pop();
        noStroke();
        fill(59, 41, 26);
        ellipse(nose_bottom2[0] - 0.07, nose_bottom2[1], 0.07, 0.1);
        ellipse(nose_bottom2[0] + 0.07, nose_bottom2[1], 0.07, 0.1);


        //glasses code

        fill(40, 43, 43);
        stroke(122, 122, 122);
        strokeWeight(0.072);
        ellipse(left_eye_pos[0], left_eye_pos[1], 1.2);
        ellipse(right_eye_pos[0], right_eye_pos[1], 1.2);



        //middlerim

        fill(0);
        push();
        stroke(122, 122, 122);
        rectMode(CENTER);
        rect(nose_top[0], nose_top[1], 0.72, 0.108);
        pop();


        //mouth code
        let mouthstart = positions.top_lip[0];
        let mouthstart2 = positions.top_lip[7];

        let mouthbot = positions.bottom_lip[0];
        let mouthbot2 = positions.bottom_lip[7];


        let mouth = segment_average(positions.top_lip);
        let mouth2 = segment_average(positions.bottom_lip);

        fill(92, 40, 19);
        noStroke();

        stroke(64, 27, 27);
        strokeWeight(0.07);


        push();

        //bottom lip
        translate(mouth2[0], mouth2[1]);
        angleMode(DEGREES)
        arc(0, mouth[0], mouthbot[0], 0.5, 0, 180, OPEN);

        //top lip
        strokeWeight(0.2);
        arc(0, mouth[0], mouthbot[0], 0.2, 180, 0, OPEN);


        pop();
        noStroke();


    }


    /* set internal properties based on list numbers 0-100 */
    this.setProperties = function(settings) {

        this.facex = map(settings[1], 0, 100, 2.52, 3);
        this.green = int(map(settings[0], 0, 100, 1, 3));
        this.flower = map(settings[0], 0, 100, 0.36, 1.8);
        this.earingsy = map(settings[3], 0, 100, 0.72, 2);
        this.bflower = map(settings[0], 0, 100, 0.36, 1.4);
        this.skin = int(map(settings[2], 0, 100, 1, 3));
        this.hair = int(map(settings[3], 0, 100, 1, 4));


    }

    /* get internal properties as list of numbers 0-100 */
    this.getProperties = function() {
        let settings = new Array(4);

        settings[1] = map(this.facex, 2.52, 3, 0, 100);
        settings[0] = map(this.green, 1, 3, 0, 100);
        settings[0] = map(this.flower, 0.36, 1.8, 0, 100);
        settings[3] = map(this.earingsy, 0.72, 2, 0, 100);
        settings[0] = map(this.bflower, 0.36, 1.4, 0, 100);
        settings[2] = map(this.skin, 1, 3, 0, 100);
        settings[3] = map(this.hair, 1, 4, 0, 100);


        return settings;
    }
}

idris_training_values.json

       
{
  "000001": [
    0,
    93,
    100,
    100
  ],
  "000002": [
    100,
    46.00000000000002,
    100,
    0
  ],
  "000005": [
    67,
    57.000000000000014,
    50,
    33.33333333333333
  ],
  "000006": [
    98.00000000000001,
    53.99999999999998,
    0,
    33.33333333333333
  ],
  "000007": [
    0,
    100,
    100,
    100
  ],
  "000009": [
    100,
    100,
    100,
    66.66666666666666
  ],
  "000010": [
    86,
    78.00000000000001,
    100,
    33.33333333333333
  ],
  "000013": [
    0,
    100,
    100,
    33.33333333333333
  ],
  "000014": [
    100,
    31.00000000000001,
    0,
    100
  ],
  "000015": [
    0,
    100,
    100,
    66.66666666666666
  ],
  "000016": [
    0,
    100,
    50,
    66.66666666666666
  ],
  "000018": [
    96.00000000000001,
    78.00000000000001,
    100,
    33.33333333333333
  ],
  "000020": [
    0,
    100,
    100,
    66.66666666666666
  ],
  "000023": [
    0,
    100,
    100,
    100
  ],
  "000025": [
    0,
    100,
    50,
    66.66666666666666
  ],
  "000028": [
    100,
    51.000000000000036,
    50,
    66.66666666666666
  ],
  "000029": [
    92.00000000000001,
    67.00000000000003,
    50,
    33.33333333333333
  ],
  "000030": [
    0,
    100,
    50,
    33.33333333333333
  ],
  "000031": [
    100,
    100,
    100,
    66.66666666666666
  ],
  "000032": [
    0,
    100,
    100,
    33.33333333333333
  ],
  "000035": [
    100,
    47.999999999999986,
    100,
    100
  ],
  "000037": [
    0,
    100,
    0,
    100
  ],
  "000038": [
    0,
    100,
    100,
    100
  ],
  "000040": [
    100,
    100,
    50,
    100
  ],
  "000041": [
    0,
    100,
    50,
    100
  ],
  "000042": [
    94,
    66.00000000000004,
    100,
    33.33333333333333
  ],
  "000043": [
    100,
    57.000000000000014,
    50,
    66.66666666666666
  ],
  "000044": [
    100,
    10.999999999999991,
    0,
    100
  ],
  "000045": [
    100,
    35.00000000000003,
    50,
    0
  ],
  "000047": [
    100,
    47.00000000000001,
    50,
    100
  ],
  "000048": [
    0,
    100,
    100,
    100
  ],
  "000050": [
    0,
    74,
    100,
    100
  ],
  "000051": [
    0,
    100,
    100,
    33.33333333333333
  ],
  "000052": [
    0,
    19.000000000000036,
    100,
    66.66666666666666
  ],
  "000054": [
    100,
    88.00000000000003,
    100,
    33.33333333333333
  ],
  "000055": [
    0,
    100,
    100,
    100
  ],
  "000056": [
    0,
    72.00000000000003,
    100,
    100
  ],
  "000058": [
    100,
    81.99999999999996,
    100,
    100
  ],
  "000060": [
    0,
    100,
    0,
    100
  ],
  "000064": [
    0,
    100,
    100,
    66.66666666666666
  ],
  "000065": [
    0,
    100,
    50,
    100
  ],
  "000068": [
    0,
    100,
    100,
    100
  ],
  "000069": [
    0,
    100,
    100,
    100
  ],
  "000071": [
    82,
    63.99999999999999,
    100,
    33.33333333333333
  ],
  "000073": [
    68.00000000000001,
    59.999999999999964,
    50,
    0
  ],
  "000076": [
    0,
    100,
    100,
    100
  ],
  "000077": [
    100,
    100,
    100,
    66.66666666666666
  ],
  "000078": [
    100,
    100,
    50,
    66.66666666666666
  ],
  "000079": [
    0,
    100,
    100,
    66.66666666666666
  ],
  "000080": [
    0,
    100,
    100,
    100
  ],
  "000081": [
    0,
    100,
    0,
    100
  ],
  "000083": [
    100,
    34.00000000000005,
    100,
    0
  ],
  "000085": [
    100,
    100,
    100,
    0
  ],
  "000086": [
    100,
    100,
    100,
    66.66666666666666
  ],
  "000088": [
    100,
    42.00000000000001,
    100,
    0
  ],
  "000091": [
    0,
    100,
    100,
    100
  ],
  "000092": [
    87.99999999999999,
    69.99999999999997,
    50,
    33.33333333333333
  ],
  "000096": [
    100,
    100,
    100,
    0
  ],
  "000097": [
    70,
    84.99999999999999,
    50,
    0
  ],
  "000099": [
    100,
    25.00000000000002,
    100,
    0
  ],
  "000100": [
    87.99999999999999,
    81.99999999999996,
    100,
    33.33333333333333
  ],
  "000103": [
    100,
    54.99999999999996,
    100,
    66.66666666666666
  ],
  "000104": [
    25,
    86.99999999999996,
    100,
    33.33333333333333
  ],
  "000106": [
    100,
    27.999999999999968,
    100,
    66.66666666666666
  ],
  "000108": [
    87.99999999999999,
    78.00000000000001,
    100,
    33.33333333333333
  ],
  "000109": [
    0,
    84.99999999999999,
    50,
    0
  ],
  "000110": [
    100,
    100,
    100,
    66.66666666666666
  ],
  "000111": [
    94.99999999999999,
    32.99999999999997,
    0,
    33.33333333333333
  ],
  "000114": [
    0,
    100,
    100,
    100
  ],
  "000115": [
    0,
    100,
    100,
    66.66666666666666
  ],
  "000116": [
    0,
    100,
    100,
    66.66666666666666
  ],
  "000117": [
    100,
    0,
    0,
    100
  ],
  "000118": [
    100,
    71.00000000000006,
    50,
    66.66666666666666
  ],
  "000121": [
    100,
    100,
    50,
    100
  ],
  "000122": [
    98.00000000000001,
    83.00000000000001,
    100,
    33.33333333333333
  ],
  "000125": [
    0,
    100,
    100,
    66.66666666666666
  ],
  "000126": [
    84,
    71.00000000000006,
    50,
    33.33333333333333
  ],
  "000129": [
    0,
    42.00000000000001,
    100,
    100
  ],
  "000131": [
    100,
    83.00000000000001,
    0,
    100
  ],
  "000132": [
    100,
    100,
    0,
    100
  ],
  "000133": [
    84,
    57.000000000000014,
    50,
    33.33333333333333
  ],
  "000134": [
    0,
    100,
    0,
    100
  ],
  "000135": [
    0,
    100,
    0,
    100
  ],
  "000137": [
    0,
    100,
    100,
    66.66666666666666
  ],
  "000140": [
    96.00000000000001,
    71.00000000000006,
    50,
    33.33333333333333
  ],
  "000142": [
    100,
    41.00000000000002,
    100,
    66.66666666666666
  ],
  "000143": [
    0,
    100,
    100,
    66.66666666666666
  ],
  "000145": [
    100,
    100,
    100,
    100
  ],
  "000146": [
    100,
    100,
    50,
    0
  ],
  "000147": [
    82,
    74.99999999999997,
    50,
    33.33333333333333
  ],
  "000148": [
    100,
    54.99999999999996,
    100,
    100
  ],
  "000150": [
    0,
    100,
    100,
    0
  ],
  "000151": [
    100,
    74.99999999999997,
    50,
    100
  ],
  "000152": [
    0,
    100,
    100,
    0
  ],
  "000153": [
    0,
    100,
    100,
    66.66666666666666
  ],
  "000155": [
    100,
    100,
    100,
    0
  ],
  "000156": [
    64,
    83.00000000000001,
    100,
    33.33333333333333
  ],
  "000157": [
    82,
    85.99999999999997,
    100,
    33.33333333333333
  ],
  "000160": [
    0,
    100,
    100,
    100
  ],
  "000161": [
    100,
    100,
    100,
    100
  ]
}


    

jaegers_training_values.json

{
  "000001": [
    100,
    74,
    100,
    56.00000000000001,
    12.5,
    61,
    100,
    31,
    30
  ],
  "000002": [
    100,
    0,
    100,
    0,
    0,
    52,
    52,
    20.000000000000004,
    0
  ],
  "000005": [
    100,
    0,
    100,
    56.00000000000001,
    0,
    6,
    100,
    55.00000000000001,
    24
  ],
  "000007": [
    0,
    100,
    0,
    100,
    0,
    95,
    0,
    75.00000000000001,
    27
  ],
  "000009": [
    100,
    100,
    100,
    54,
    50,
    92,
    100,
    28.000000000000004,
    21
  ],
  "000010": [
    100,
    100,
    100,
    53,
    25,
    3,
    50,
    31,
    18
  ],
  "000013": [
    0,
    100,
    0,
    56.00000000000001,
    0,
    6,
    0,
    61,
    14
  ],
  "000014": [
    100,
    100,
    100,
    95.99999999999999,
    25,
    100,
    100,
    56.00000000000001,
    100
  ],
  "000015": [
    34,
    0,
    0,
    50,
    0,
    14,
    0,
    55.00000000000001,
    21
  ],
  "000016": [
    0,
    61,
    0,
    56.00000000000001,
    0,
    89,
    0,
    61,
    24
  ],
  "000018": [
    100,
    100,
    100,
    56.00000000000001,
    25,
    0,
    100,
    42,
    15
  ],
  "000020": [
    49,
    100,
    0,
    51,
    0,
    100,
    0,
    62,
    23
  ],
  "000023": [
    28.000000000000004,
    48,
    0,
    49,
    0,
    91,
    0,
    61,
    15
  ],
  "000025": [
    1,
    0,
    0,
    53,
    0,
    85,
    0,
    62,
    52
  ],
  "000028": [
    100,
    100,
    100,
    90,
    25,
    100,
    100,
    39.00000000000001,
    67
  ],
  "000029": [
    100,
    100,
    100,
    53,
    25,
    8,
    100,
    28.000000000000004,
    18
  ],
  "000030": [
    37,
    53,
    0,
    56.00000000000001,
    0,
    0,
    0,
    71.99999999999999,
    33
  ],
  "000031": [
    100,
    100,
    100,
    56.00000000000001,
    0,
    19,
    100,
    31,
    21
  ],
  "000032": [
    22,
    54,
    0,
    51,
    0,
    10,
    0,
    43,
    21
  ],
  "000035": [
    100,
    48,
    100,
    11.999999999999998,
    0,
    100,
    100,
    25,
    13
  ],
  "000037": [
    0,
    0,
    0,
    50,
    0,
    100,
    0,
    72.99999999999999,
    100
  ],
  "000038": [
    27,
    0,
    0,
    51,
    0,
    88,
    0,
    79.00000000000001,
    22
  ],
  "000006": [
    100,
    100,
    100,
    99,
    0,
    100,
    100,
    34,
    100
  ],
  "000040": [
    100,
    0,
    100,
    93,
    100,
    100,
    100,
    44,
    28
  ],
  "000041": [
    54,
    100,
    0,
    51,
    12.5,
    100,
    0,
    67,
    100
  ],
  "000042": [
    100,
    100,
    100,
    53,
    25,
    11,
    100,
    27,
    18
  ],
  "000043": [
    100,
    100,
    100,
    23,
    25,
    100,
    100,
    49,
    20
  ],
  "000044": [
    100,
    100,
    100,
    78,
    100,
    100,
    100,
    50,
    92
  ],
  "000045": [
    100,
    100,
    100,
    90,
    0,
    91,
    100,
    24,
    35
  ],
  "000047": [
    100,
    100,
    100,
    100,
    25,
    100,
    100,
    16,
    45
  ],
  "000048": [
    48,
    100,
    0,
    56.00000000000001,
    0,
    100,
    0,
    71.99999999999999,
    0
  ],
  "000050": [
    30,
    100,
    0,
    51,
    0,
    100,
    0,
    89,
    39
  ],
  "000051": [
    0,
    0,
    0,
    50,
    0,
    100,
    0,
    83,
    56
  ],
  "000052": [
    34,
    42,
    0,
    53,
    0,
    90,
    0,
    84,
    17
  ],
  "000054": [
    100,
    100,
    100,
    56.99999999999999,
    25,
    7,
    100,
    28.000000000000004,
    33
  ],
  "000055": [
    20.999999999999996,
    100,
    0,
    51,
    0,
    100,
    0,
    76.00000000000001,
    22
  ],
  "000056": [
    56.00000000000001,
    100,
    51,
    94,
    0,
    100,
    100,
    38.00000000000001,
    0
  ],
  "000058": [
    100,
    100,
    100,
    56.00000000000001,
    25,
    100,
    100,
    7.000000000000001,
    7
  ],
  "000060": [
    0,
    0,
    0,
    50,
    0,
    100,
    0,
    0,
    100
  ],
  "000064": [
    14.000000000000002,
    57,
    0,
    50,
    0,
    100,
    0,
    80.00000000000001,
    17
  ],
  "000065": [
    30,
    0,
    0,
    100,
    0,
    100,
    0,
    91,
    56
  ],
  "000068": [
    45,
    100,
    2,
    0,
    87.5,
    100,
    0,
    0,
    34
  ],
  "000069": [
    27,
    100,
    0,
    53,
    0,
    100,
    0,
    67,
    16
  ],
  "000071": [
    100,
    100,
    100,
    56.00000000000001,
    50,
    4,
    100,
    33,
    24
  ],
  "000073": [
    100,
    100,
    100,
    100,
    25,
    91,
    100,
    41,
    18
  ],
  "000076": [
    75.99999999999999,
    10,
    0,
    50,
    12.5,
    100,
    0,
    100,
    100
  ],
  "000077": [
    100,
    100,
    100,
    56.00000000000001,
    25,
    100,
    100,
    33,
    48
  ],
  "000078": [
    100,
    100,
    100,
    38,
    0,
    100,
    100,
    83,
    37
  ],
  "000079": [
    1,
    0,
    0,
    53,
    0,
    97,
    0,
    53,
    42
  ],
  "000160": [
    30,
    100,
    0,
    51,
    0,
    100,
    0,
    77.00000000000001,
    32
  ],
  "000157": [
    100,
    47,
    100,
    55.00000000000001,
    0,
    17,
    75,
    43,
    35
  ],
  "000156": [
    52,
    100,
    100,
    56.00000000000001,
    0,
    11,
    100,
    31,
    35
  ],
  "000153": [
    0,
    52,
    0,
    52,
    0,
    100,
    0,
    54,
    34
  ],
  "000152": [
    0,
    57,
    0,
    51,
    37.5,
    76,
    0,
    45,
    34
  ],
  "000151": [
    100,
    51,
    100,
    94,
    0,
    100,
    35,
    47,
    78
  ],
  "000150": [
    30,
    0,
    0,
    52,
    62.5,
    100,
    0,
    61,
    12
  ],
  "000148": [
    96,
    0,
    100,
    45,
    25,
    99,
    100,
    28.000000000000004,
    28
  ],
  "000147": [
    100,
    35,
    100,
    62,
    0,
    13,
    91,
    31,
    46
  ],
  "000146": [
    100,
    100,
    100,
    0,
    0,
    94,
    100,
    40.00000000000001,
    74
  ],
  "000145": [
    100,
    100,
    100,
    38,
    0,
    100,
    100,
    32,
    75
  ],
  "000143": [
    14.000000000000002,
    0,
    0,
    52,
    0,
    42,
    0,
    65,
    24
  ],
  "000142": [
    100,
    100,
    100,
    73,
    0,
    100,
    100,
    44,
    24
  ],
  "000140": [
    100,
    45,
    100,
    51,
    0,
    12,
    100,
    34,
    51
  ],
  "000137": [
    0,
    0,
    0,
    52,
    100,
    94,
    0,
    65,
    23
  ],
  "000135": [
    28.000000000000004,
    63,
    0,
    0,
    0,
    100,
    0,
    100,
    85
  ],
  "000134": [
    0,
    0,
    0,
    0,
    0,
    100,
    0,
    76.00000000000001,
    100
  ],
  "000133": [
    100,
    0,
    100,
    47.99999999999999,
    25,
    17,
    100,
    40.00000000000001,
    48
  ],
  "000132": [
    100,
    51,
    100,
    0,
    0,
    100,
    100,
    55.00000000000001,
    100
  ],
  "000131": [
    100,
    100,
    100,
    0,
    12.5,
    100,
    100,
    38.00000000000001,
    70
  ],
  "000129": [
    37,
    0,
    0,
    51,
    0,
    100,
    0,
    67,
    27
  ],
  "000126": [
    100,
    100,
    100,
    50,
    12.5,
    0,
    100,
    50,
    39
  ],
  "000125": [
    0,
    0,
    0,
    52,
    0,
    100,
    0,
    71.99999999999999,
    57
  ],
  "000122": [
    100,
    100,
    100,
    69,
    25,
    0,
    100,
    34,
    0
  ],
  "000121": [
    100,
    100,
    100,
    8,
    0,
    100,
    100,
    36.99999999999999,
    100
  ],
  "000080": [
    1,
    100,
    0,
    51,
    0,
    100,
    0,
    69.99999999999999,
    39
  ],
  "000081": [
    14.000000000000002,
    100,
    0,
    0,
    0,
    100,
    0,
    71.99999999999999,
    69
  ],
  "000083": [
    100,
    100,
    100,
    54,
    12.5,
    50,
    100,
    28.999999999999996,
    23
  ],
  "000085": [
    100,
    100,
    100,
    37,
    25,
    89,
    100,
    31,
    33
  ],
  "000086": [
    100,
    0,
    100,
    42,
    0,
    81,
    79,
    50,
    24
  ],
  "000088": [
    100,
    100,
    100,
    95.99999999999999,
    12.5,
    53,
    93,
    26,
    13
  ],
  "000091": [
    13,
    100,
    0,
    56.99999999999999,
    0,
    100,
    0,
    68.99999999999999,
    26
  ],
  "000092": [
    100,
    100,
    100,
    56.00000000000001,
    0,
    8,
    97,
    31,
    38
  ],
  "000096": [
    100,
    100,
    100,
    0,
    0,
    100,
    100,
    39.00000000000001,
    31
  ],
  "000097": [
    100,
    0,
    100,
    70,
    0,
    44,
    88,
    36.99999999999999,
    42
  ],
  "000099": [
    100,
    45,
    100,
    31,
    12.5,
    91,
    100,
    36.99999999999999,
    36
  ],
  "000100": [
    43,
    0,
    100,
    100,
    0,
    17,
    100,
    35.99999999999999,
    27
  ],
  "000103": [
    100,
    48,
    100,
    44,
    25,
    100,
    100,
    31,
    33
  ],
  "000104": [
    0,
    0,
    0,
    64,
    0,
    14,
    0,
    55.00000000000001,
    22
  ],
  "000106": [
    100,
    48,
    100,
    34,
    12.5,
    50,
    100,
    35.99999999999999,
    28
  ],
  "000108": [
    100,
    100,
    100,
    54,
    0,
    7,
    100,
    31,
    42
  ],
  "000109": [
    28.999999999999996,
    46,
    0,
    51,
    0,
    21,
    0,
    61,
    24
  ],
  "000110": [
    100,
    100,
    100,
    56.00000000000001,
    0,
    50,
    94,
    42,
    26
  ],
  "000111": [
    100,
    100,
    100,
    63,
    0,
    100,
    100,
    39.00000000000001,
    84
  ],
  "000114": [
    51,
    100,
    0,
    95,
    0,
    100,
    0,
    65,
    71
  ],
  "000115": [
    0,
    0,
    0,
    51,
    0,
    16,
    0,
    39.00000000000001,
    24
  ],
  "000116": [
    20.999999999999996,
    100,
    0,
    64,
    0,
    92,
    0,
    70.99999999999999,
    28
  ],
  "000117": [
    100,
    100,
    100,
    0,
    25,
    100,
    100,
    39.00000000000001,
    64
  ],
  "000118": [
    100,
    100,
    100,
    90,
    0,
    100,
    97,
    40.00000000000001,
    100
  ],
  "000155": [
    100,
    0,
    99,
    0,
    0,
    100,
    99,
    43,
    27
  ],
  "000161": [
    100,
    40,
    100,
    54,
    0,
    100,
    100,
    45,
    0
  ]
}

jordan_face.js



function average_point(list) {
  var sum_x = 0;
  var sum_y = 0;
  var num_points = 0;
  for(var i=0; i<list.length; i++) {
    sum_x += list[i][0];
    sum_y += list[i][1];
    num_points += 1; 
  }
  return [sum_x / num_points, sum_y / num_points];
}


function JordanFace() {
  const bg_color = [0, 0, 0];
  const fg_color = [255, 255, 255];
  const stroke_color = [95, 52, 8];


  this.eyepaint_value = 2;
  this.mouth_value = 1;
  this.tilt_value = 0;
  this.colour2_value = 0;

  this.draw = function(positions) {
    rotate(this.tilt_value);
var eye1_pos = positions.left_eye;
var eye2_pos = positions.right_eye;
var toplip_pos = positions.top_lip;
var bottomlip_pos = positions.bottom_lip;
 

 // Here I set my colour variables for the face and eye paint colour

  if (this.colour_value === 1) {
var colour1 = color(240,10,10,120);
}
if (this.colour_value === 2) {
var colour1 = color(0,0,255,150);
}
if (this.colour_value === 3) {
var colour1 = color(255,255,255,120);
}

  if (this.colour2_value === 1) {
var colour2 = color(240,10,10,80);
}
if (this.colour2_value === 2) {
var colour2 = color(0,0,255,80);
}
if (this.colour2_value === 3) {
var colour2 = color(255,255,255,80);
}
if (this.colour2_value === 4) {
var colour2 = color(255,255,255,0);
}

    //face 
    // Here I use the points around the jaw and eyebrows to make a face shape that is filled
    // to provide a base for the face paint
    fill(colour2);
    noStroke();
    beginShape();
    for(var i=0; i<positions.chin.length;i++) {
      vertex(positions.chin[i][0], positions.chin[i][1]);
    }
    for(var i=positions.right_eyebrow.length-1; i>=0;i--) {
      vertex(positions.right_eyebrow[i][0], positions.right_eyebrow[i][1]);
    }
    for(var i=positions.left_eyebrow.length-1; i>=0;i--) {
      vertex(positions.left_eyebrow[i][0], positions.left_eyebrow[i][1]);
    }
    endShape(CLOSE);


    // eyes
   
    if (this.eyepaint_value === 1) {
     ;
      // This is my first variant of the eye make up that makes a curved triangle going down from the eye.
      fill(colour1);
    
      beginShape();
      vertex(eye1_pos[4][0]+.2 , eye1_pos[3][1]+.21);
      quadraticVertex(-1.5, -.2, eye1_pos[1][0] -.4 , 1.2); 
      quadraticVertex(-1.5, -.2, eye1_pos[0][0] , eye1_pos[3][1]+.25);  
      endShape(); 

      beginShape();
      vertex(eye2_pos[4][0]-.2 , eye2_pos[3][1]+.21);
      quadraticVertex(1.5, -.2, eye2_pos[1][0] +.4 , 1.2); 
      quadraticVertex(1.5, -.2, eye2_pos[3][0], eye2_pos[0][1]+.25);  
      endShape(); 
      noStroke(); 
      
    }
    if (this.eyepaint_value === 2) {
     ;
      // For my second eye make-up variant I've made a diamond shape mapped to the eye corners.
      fill(colour1);
      triangle(eye1_pos[3][0] +.2,eye1_pos[3][1],eye1_pos[0][0]-.25,eye1_pos[0][1],eye1_pos[2][0],-2.5);
      triangle(eye1_pos[3][0]+.2,eye1_pos[3][1],eye1_pos[0][0]-.25,eye1_pos[0][1],eye1_pos[1][0],.5);

      triangle(eye2_pos[3][0]+.25,eye2_pos[3][1],eye2_pos[0][0]-.2,eye2_pos[0][1],eye2_pos[1][0],-2.5);
      triangle(eye2_pos[3][0]+.25,eye2_pos[3][1],eye2_pos[0][0]-.2,eye2_pos[0][1],eye2_pos[2][0],.5);

    }
    if (this.eyepaint_value === 3) {
     ;
      // I've made a variant of the eye make up that is a stripe across the face
      // I didn't end up using this variant as it does not work well visually
      // However I've kept the code in place to show my process and so that it can be seen when changing the settings

      fill(colour1);
    
      rect(eye1_pos[0][0] -.25 ,eye1_pos[2][1] -.2,3,.6,.2);

    }
    // I've seperated the dark makeup around the eye from the other parts so I can turn it on and off independently. 
    // However I've left it on for all variants as it works best visually.
     if (this.eyeshadow_value === 1) {
             fill(0,0,0,120)
      bezier(eye1_pos[3][0]+.2 , eye1_pos[3][1], -1.6 , -1.9 , -1.8 , -.3, eye1_pos[3][0]+.2 , eye1_pos[3][1] );
      bezier(eye2_pos[0][0] -.2, eye2_pos[0][1], 1.6 , -1.9 , 1.8 , -.3, eye2_pos[0][0]-.2 , eye2_pos[0][1]);
      fill(255,0,0);
      fill(fg_color);
    }

    // mouth
    if (this.mouth_value === 1) {
    // My first mouth variant is a quad below the lip

    fill(0,0,0,120);
    quad(bottomlip_pos[2][0],bottomlip_pos[2][1],bottomlip_pos[4][0],bottomlip_pos[4][1],
      bottomlip_pos[4][0] +.1,bottomlip_pos[4][1]+.6,bottomlip_pos[2][0] -.1,bottomlip_pos[2][1]+.6,2);
  }
    
 if (this.mouth_value === 2) {
    // The second mouth variant is a kind of exaggerated lipstick that makes the mouth appear much larger.

    fill(0,0,0,120);
    bezier(toplip_pos[0][0]-.2, toplip_pos[0][1],0,toplip_pos[4][1]-.2,0,toplip_pos[4][1]-.2,toplip_pos[6][0]+.2,toplip_pos[6][1]);
    bezier(toplip_pos[0][0]-.2, toplip_pos[0][1],-.4,bottomlip_pos[3][1]+.3,.4,bottomlip_pos[3][1]+.3,toplip_pos[6][0]+.2,toplip_pos[6][1]);
  }
  }

  this.setProperties = function(settings) {
    this.eyepaint_value = int(map(settings[0], 0, 100, 1, 3));
    this.mouth_value = int(map(settings[1], 0, 100, 1, 2));
    this.colour_value = int(map(settings[3], 0, 100 ,1, 3));
    this.eyeshadow_value = int(map(settings[4], 0, 100 ,1, 2));
    this.colour2_value = int(map(settings[5], 0, 100 ,1, 3));
  }

    this.getProperties = function() {
     let settings = new Array(5);
    settings[0] = map(this.eyepaint_value, 1, 3, 0, 100);
    settings[1] = map(this.mouth_value, 1, 2, 0, 100);
    settings[3] = map(this.colour_value, 1, 3, 0, 100);
    settings[4] = map(this.eyeshadow_value, 1, 2, 0, 100);
    settings[5] = map(this.colour2_value, 1, 3, 0, 100);
    console.log(settings[5]);
    return settings;
  }
}

jordan_training_values.json

{
  "000001": [
    0,
    75,
    0,
    0,
    0,
    100
  ],
  "000002": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000005": [
    0,
    0,
    null,
    0,
    0,
    100
  ],
  "000006": [
    50,
    50,
    null,
    50,
    0,
    0
  ],
  "000007": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000009": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000010": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000013": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000014": [
    0,
    0,
    null,
    50,
    0,
    0
  ],
  "000015": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000016": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000018": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000020": [
    50,
    100,
    null,
    0,
    0,
    100
  ],
  "000023": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000025": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000028": [
    50,
    0,
    null,
    0,
    0,
    100
  ],
  "000029": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000030": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000031": [
    0,
    0,
    null,
    0,
    0,
    100
  ],
  "000032": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000035": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000037": [
    0,
    100,
    null,
    50,
    0,
    0
  ],
  "000038": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000040": [
    0,
    0,
    null,
    0,
    0,
    100
  ],
  "000041": [
    50,
    100,
    null,
    100,
    0,
    50
  ],
  "000042": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000043": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000044": [
    50,
    50,
    null,
    50,
    0,
    0
  ],
  "000045": [
    50,
    0,
    null,
    0,
    0,
    100
  ],
  "000047": [
    50,
    50,
    null,
    50,
    0,
    0
  ],
  "000048": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000050": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000051": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000052": [
    0,
    100,
    null,
    100,
    0,
    50
  ],
  "000054": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000055": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000056": [
    50,
    0,
    null,
    0,
    0,
    100
  ],
  "000058": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000060": [
    0,
    100,
    null,
    50,
    0,
    0
  ],
  "000064": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000065": [
    0,
    100,
    null,
    100,
    0,
    50
  ],
  "000068": [
    0,
    100,
    null,
    100,
    0,
    50
  ],
  "000069": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000071": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000073": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000076": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000077": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000078": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000079": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000080": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000081": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000083": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000085": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000086": [
    0,
    0,
    null,
    0,
    0,
    100
  ],
  "000088": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000091": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000092": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000096": [
    50,
    50,
    null,
    100,
    0,
    50
  ],
  "000097": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000099": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000100": [
    0,
    0,
    null,
    0,
    0,
    100
  ],
  "000103": [
    50,
    0,
    null,
    0,
    0,
    100
  ],
  "000104": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000106": [
    50,
    0,
    null,
    0,
    0,
    100
  ],
  "000108": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000109": [
    0,
    100,
    null,
    100,
    0,
    50
  ],
  "000110": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000111": [
    0,
    0,
    null,
    50,
    0,
    0
  ],
  "000114": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000115": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000116": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000117": [
    50,
    50,
    null,
    50,
    0,
    0
  ],
  "000118": [
    0,
    0,
    null,
    50,
    0,
    0
  ],
  "000121": [
    50,
    0,
    null,
    0,
    0,
    100
  ],
  "000122": [
    0,
    0,
    null,
    0,
    0,
    100
  ],
  "000125": [
    0,
    100,
    null,
    100,
    0,
    50
  ],
  "000126": [
    50,
    50,
    null,
    100,
    0,
    50
  ],
  "000129": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000131": [
    50,
    50,
    null,
    100,
    0,
    50
  ],
  "000132": [
    50,
    50,
    null,
    50,
    0,
    0
  ],
  "000133": [
    50,
    0,
    null,
    0,
    0,
    100
  ],
  "000134": [
    0,
    100,
    null,
    50,
    0,
    0
  ],
  "000135": [
    0,
    100,
    null,
    50,
    0,
    0
  ],
  "000137": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000140": [
    50,
    0,
    null,
    0,
    0,
    100
  ],
  "000142": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000143": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000145": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000146": [
    50,
    50,
    null,
    100,
    0,
    50
  ],
  "000147": [
    50,
    0,
    null,
    0,
    0,
    100
  ],
  "000148": [
    0,
    0,
    null,
    0,
    0,
    100
  ],
  "000150": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000151": [
    50,
    50,
    null,
    50,
    0,
    0
  ],
  "000152": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000153": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000155": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000156": [
    0,
    0,
    null,
    0,
    0,
    100
  ],
  "000157": [
    50,
    50,
    null,
    0,
    0,
    100
  ],
  "000160": [
    0,
    100,
    null,
    0,
    0,
    100
  ],
  "000161": [
    50,
    50,
    null,
    0,
    0,
    100
  ]
}

joy_training_values.json

{
  "000001": [
    0,
    17,
    56.99999999999999,
    98,
    0,
    null,
    null
  ],
  "000002": [
    0,
    0,
    51,
    100,
    0,
    null,
    null
  ],
  "000005": [
    0,
    11,
    11,
    0,
    100,
    null,
    null
  ],
  "000006": [
    0,
    100,
    80,
    100,
    62,
    null,
    null
  ],
  "000007": [
    100,
    11,
    100,
    100,
    100,
    null,
    null
  ],
  "000009": [
    0,
    0,
    87,
    53,
    1,
    null,
    null
  ],
  "000010": [
    0,
    0,
    0,
    0,
    69,
    null,
    null
  ],
  "000013": [
    100,
    13,
    0,
    1,
    0,
    null,
    null
  ],
  "000014": [
    0,
    100,
    100,
    100,
    50,
    null,
    null
  ],
  "000015": [
    100,
    0,
    100,
    22,
    90,
    null,
    null
  ],
  "000016": [
    100,
    25,
    100,
    100,
    31,
    null,
    null
  ],
  "000018": [
    0,
    0,
    0,
    10,
    0,
    null,
    null
  ],
  "000020": [
    100,
    17,
    100,
    39,
    89,
    null,
    null
  ],
  "000023": [
    100,
    0,
    100,
    0,
    18,
    null,
    null
  ],
  "000025": [
    100,
    16,
    89,
    100,
    89,
    null,
    null
  ],
  "000028": [
    0,
    39,
    62,
    100,
    1,
    null,
    null
  ],
  "000029": [
    0,
    0,
    0,
    0,
    0,
    null,
    null
  ],
  "000030": [
    100,
    41,
    42,
    100,
    100,
    null,
    null
  ],
  "000031": [
    0,
    0,
    70,
    0,
    0,
    null,
    null
  ],
  "000032": [
    100,
    8,
    43,
    100,
    100,
    null,
    null
  ],
  "000035": [
    0,
    0,
    100,
    52,
    81,
    null,
    null
  ],
  "000037": [
    100,
    100,
    100,
    100,
    100,
    null,
    null
  ],
  "000038": [
    100,
    21,
    100,
    0,
    0,
    null,
    null
  ],
  "000040": [
    0,
    0,
    100,
    52,
    30,
    null,
    null
  ],
  "000041": [
    100,
    32,
    100,
    100,
    0,
    null,
    null
  ],
  "000042": [
    0,
    1,
    64,
    0,
    21,
    null,
    null
  ],
  "000043": [
    0,
    6,
    93,
    48,
    0,
    null,
    null
  ],
  "000044": [
    0,
    100,
    100,
    100,
    51,
    null,
    null
  ],
  "000045": [
    0,
    8,
    55.00000000000001,
    100,
    0,
    null,
    null
  ],
  "000047": [
    0,
    100,
    100,
    100,
    0,
    null,
    null
  ],
  "000048": [
    100,
    0,
    100,
    22,
    100,
    null,
    null
  ],
  "000050": [
    100,
    14.000000000000002,
    100,
    88,
    0,
    null,
    null
  ],
  "000051": [
    100,
    34,
    50,
    100,
    28.999999999999996,
    null,
    null
  ],
  "000052": [
    100,
    39,
    91,
    0,
    39,
    null,
    null
  ],
  "000054": [
    0,
    0,
    0,
    13,
    0,
    null,
    null
  ],
  "000055": [
    100,
    10,
    100,
    100,
    100,
    null,
    null
  ],
  "000056": [
    100,
    0,
    100,
    26,
    52,
    null,
    null
  ],
  "000058": [
    0,
    0,
    100,
    0,
    100,
    null,
    null
  ],
  "000060": [
    100,
    99,
    69,
    100,
    0,
    null,
    null
  ],
  "000064": [
    100,
    0,
    100,
    0,
    51,
    null,
    null
  ],
  "000065": [
    100,
    55.00000000000001,
    100,
    100,
    0,
    null,
    null
  ],
  "000068": [
    100,
    35,
    91,
    78,
    0,
    null,
    null
  ],
  "000069": [
    100,
    9,
    100,
    87,
    100,
    null,
    null
  ],
  "000071": [
    0,
    3,
    0,
    0,
    15,
    null,
    null
  ],
  "000073": [
    0,
    14.000000000000002,
    100,
    70,
    41,
    null,
    null
  ],
  "000076": [
    100,
    10,
    100,
    100,
    78,
    null,
    null
  ],
  "000077": [
    0,
    0,
    100,
    49,
    28.000000000000004,
    null,
    null
  ],
  "000078": [
    0,
    0,
    98,
    17,
    24,
    null,
    null
  ],
  "000079": [
    100,
    22,
    56.00000000000001,
    100,
    31,
    null,
    null
  ],
  "000080": [
    100,
    0,
    100,
    0,
    32,
    null,
    null
  ],
  "000081": [
    100,
    52,
    100,
    100,
    0,
    null,
    null
  ],
  "000083": [
    0,
    1,
    66,
    16,
    31,
    null,
    null
  ],
  "000085": [
    0,
    0,
    60,
    12,
    25,
    null,
    null
  ],
  "000086": [
    0,
    0,
    68,
    57.99999999999999,
    100,
    null,
    null
  ],
  "000088": [
    0,
    0,
    49,
    100,
    100,
    null,
    null
  ],
  "000091": [
    100,
    0,
    100,
    32,
    100,
    null,
    null
  ],
  "000092": [
    0,
    7.000000000000001,
    0,
    0,
    18,
    null,
    null
  ],
  "000096": [
    0,
    18,
    100,
    100,
    100,
    null,
    null
  ],
  "000097": [
    0,
    1,
    35,
    0,
    75,
    null,
    null
  ],
  "000099": [
    0,
    21,
    30,
    9,
    0,
    null,
    null
  ],
  "000100": [
    0,
    1,
    26,
    100,
    51,
    null,
    null
  ],
  "000103": [
    0,
    0,
    92,
    4,
    100,
    null,
    null
  ],
  "000104": [
    100,
    0,
    31,
    0,
    0,
    null,
    null
  ],
  "000106": [
    0,
    39,
    77,
    100,
    0,
    null,
    null
  ],
  "000108": [
    0,
    0,
    1,
    0,
    0,
    null,
    null
  ],
  "000109": [
    100,
    25,
    65,
    0,
    21,
    null,
    null
  ],
  "000110": [
    0,
    0,
    62,
    0,
    0,
    null,
    null
  ],
  "000111": [
    0,
    100,
    32,
    95,
    0,
    null,
    null
  ],
  "000114": [
    100,
    0,
    100,
    100,
    0,
    null,
    null
  ],
  "000115": [
    100,
    0,
    41,
    2,
    50,
    null,
    null
  ],
  "000116": [
    100,
    0,
    91,
    99,
    0,
    null,
    null
  ],
  "000117": [
    0,
    100,
    100,
    97,
    24,
    null,
    null
  ],
  "000118": [
    0,
    85,
    100,
    85,
    28.999999999999996,
    null,
    null
  ],
  "000121": [
    0,
    50,
    100,
    87,
    21,
    null,
    null
  ],
  "000122": [
    0,
    0,
    0,
    85,
    0,
    null,
    null
  ],
  "000125": [
    100,
    36,
    52,
    1,
    73,
    null,
    null
  ],
  "000126": [
    0,
    53,
    0,
    0,
    0,
    null,
    null
  ],
  "000129": [
    100,
    0,
    100,
    0,
    0,
    null,
    null
  ],
  "000131": [
    0,
    86,
    100,
    100,
    0,
    null,
    null
  ],
  "000132": [
    0,
    99,
    100,
    100,
    0,
    null,
    null
  ],
  "000133": [
    0,
    9,
    35,
    0,
    0,
    null,
    null
  ],
  "000134": [
    100,
    100,
    100,
    100,
    0,
    null,
    null
  ],
  "000135": [
    100,
    89,
    100,
    100,
    28.999999999999996,
    null,
    null
  ],
  "000137": [
    100,
    4,
    0,
    18,
    0,
    null,
    null
  ],
  "000140": [
    0,
    50,
    1,
    0,
    100,
    null,
    null
  ],
  "000142": [
    0,
    0,
    100,
    0,
    100,
    null,
    null
  ],
  "000143": [
    100,
    0,
    82,
    0,
    0,
    null,
    null
  ],
  "000145": [
    0,
    5,
    100,
    87,
    0,
    null,
    null
  ],
  "000146": [
    0,
    39,
    83,
    100,
    0,
    null,
    null
  ],
  "000147": [
    0,
    40,
    21,
    49,
    80,
    null,
    null
  ],
  "000148": [
    0,
    0,
    100,
    2,
    89,
    null,
    null
  ],
  "000150": [
    100,
    1,
    52,
    11,
    51,
    null,
    null
  ],
  "000151": [
    0,
    77,
    100,
    100,
    0,
    null,
    null
  ],
  "000152": [
    100,
    11,
    49,
    9,
    0,
    null,
    null
  ],
  "000153": [
    100,
    13,
    100,
    55.00000000000001,
    0,
    null,
    null
  ],
  "000155": [
    0,
    30,
    49,
    88,
    0,
    null,
    null
  ],
  "000156": [
    0,
    0,
    0,
    0,
    0,
    null,
    null
  ],
  "000157": [
    0,
    0,
    0,
    0,
    79,
    null,
    null
  ],
  "000160": [
    100,
    0,
    100,
    100,
    80,
    null,
    null
  ],
  "000161": [
    0,
    0,
    100,
    0,
    0,
    null,
    null
  ]
}

kelly19_training_values.json

{
  "000001": [
    61,
    30,
    63,
    5.999999999999999,
    76,
    73,
    100,
    0
  ],
  "000002": [
    0,
    30,
    32,
    14.000000000000002,
    69,
    100,
    100,
    0
  ],
  "000005": [
    2,
    98,
    37,
    50,
    63,
    19,
    100,
    0
  ],
  "000006": [
    47,
    28.000000000000004,
    92,
    13,
    63,
    97,
    100,
    0
  ],
  "000007": [
    92,
    89.00000000000003,
    43,
    7.000000000000001,
    0,
    0,
    0,
    0
  ],
  "000009": [
    77,
    65,
    39,
    16,
    63,
    100,
    100,
    0
  ],
  "000010": [
    27,
    26,
    82,
    54,
    52,
    32,
    100,
    0
  ],
  "000013": [
    0,
    82.00000000000001,
    48,
    51,
    0,
    100,
    0,
    0
  ],
  "000014": [
    75,
    32,
    31,
    0,
    69,
    100,
    100,
    0
  ],
  "000015": [
    61,
    91.00000000000003,
    41,
    57.99999999999999,
    0,
    21,
    0,
    0
  ],
  "000016": [
    39,
    77.00000000000001,
    41,
    11.999999999999998,
    0,
    0,
    0,
    0
  ],
  "000018": [
    33,
    26,
    36,
    18,
    49,
    100,
    100,
    35
  ],
  "000020": [
    70,
    97,
    84,
    50,
    0,
    21,
    0,
    33
  ],
  "000023": [
    74,
    94,
    45,
    53,
    0,
    16,
    0,
    0
  ],
  "000025": [
    78,
    100,
    69,
    5.999999999999999,
    0,
    17,
    0,
    0
  ],
  "000028": [
    0,
    20.999999999999996,
    32,
    9,
    62,
    73,
    100,
    0
  ],
  "000029": [
    25,
    35.99999999999999,
    66,
    50,
    52,
    100,
    100,
    0
  ],
  "000030": [
    36,
    100,
    50,
    28.000000000000004,
    0,
    0,
    0,
    32
  ],
  "000031": [
    12,
    31,
    41,
    51,
    44,
    100,
    100,
    0
  ],
  "000032": [
    61,
    100,
    93,
    74,
    2,
    28.000000000000004,
    0,
    0
  ],
  "000035": [
    100,
    17.999999999999993,
    42,
    15,
    62,
    18,
    100,
    0
  ],
  "000037": [
    100,
    100,
    28.000000000000004,
    100,
    0,
    0,
    0,
    0
  ],
  "000038": [
    83,
    100,
    41,
    53,
    0,
    100,
    0,
    8
  ],
  "000040": [
    100,
    17.999999999999993,
    71,
    9,
    70,
    0,
    100,
    0
  ],
  "000041": [
    100,
    100,
    37,
    50,
    0,
    100,
    0,
    0
  ],
  "000042": [
    69,
    27,
    76,
    54,
    68,
    13,
    100,
    0
  ],
  "000043": [
    68,
    28.999999999999996,
    80,
    14.000000000000002,
    60,
    100,
    100,
    0
  ],
  "000044": [
    89,
    20.999999999999996,
    86,
    0,
    88,
    14.000000000000002,
    100,
    2
  ],
  "000045": [
    49,
    23,
    96,
    9,
    53,
    100,
    100,
    0
  ],
  "000047": [
    100,
    15,
    91,
    0,
    53,
    100,
    100,
    0
  ],
  "000048": [
    97,
    83.00000000000001,
    78,
    0,
    0,
    0,
    0,
    0
  ],
  "000050": [
    91,
    80.00000000000001,
    81,
    0,
    0,
    100,
    0,
    0
  ],
  "000051": [
    89,
    78.00000000000001,
    86,
    23,
    0,
    0,
    0,
    30
  ],
  "000052": [
    68,
    100,
    46,
    47,
    0,
    0,
    0,
    0
  ],
  "000054": [
    50,
    28.000000000000004,
    44,
    64,
    49,
    100,
    100,
    0
  ],
  "000055": [
    88,
    86.00000000000001,
    67,
    11,
    0,
    0,
    0,
    0
  ],
  "000056": [
    86,
    20.000000000000004,
    38,
    51,
    28.999999999999996,
    15,
    71,
    0
  ],
  "000058": [
    100,
    0,
    84,
    52,
    87,
    0,
    100,
    0
  ],
  "000060": [
    71,
    81.00000000000001,
    28.000000000000004,
    15,
    0,
    86,
    0,
    0
  ],
  "000064": [
    71,
    91.00000000000003,
    45,
    50,
    0,
    23,
    0,
    0
  ],
  "000065": [
    92,
    50.000000000000014,
    100,
    11.999999999999998,
    0,
    100,
    0,
    2
  ],
  "000068": [
    89,
    80.00000000000001,
    86,
    13,
    0,
    100,
    42.00000000000001,
    26
  ],
  "000069": [
    72,
    98,
    86,
    14.000000000000002,
    0,
    31,
    18,
    0
  ],
  "000071": [
    0,
    28.999999999999996,
    100,
    13,
    62,
    100,
    100,
    0
  ],
  "000073": [
    38,
    24,
    86,
    17,
    50,
    100,
    100,
    0
  ],
  "000076": [
    81,
    100,
    87,
    0,
    0,
    16,
    0,
    0
  ],
  "000077": [
    100,
    20.000000000000004,
    36,
    0,
    39,
    10,
    100,
    0
  ],
  "000078": [
    94,
    24,
    32,
    13,
    69,
    30,
    100,
    0
  ],
  "000079": [
    68,
    87.00000000000003,
    46,
    11,
    0,
    19,
    0,
    37
  ],
  "000080": [
    74,
    74.00000000000001,
    93,
    50,
    0,
    11,
    0,
    0
  ],
  "000081": [
    100,
    80.00000000000001,
    41,
    7.000000000000001,
    0,
    100,
    0,
    0
  ],
  "000083": [
    34,
    13.000000000000004,
    42,
    11,
    89,
    33,
    100,
    0
  ],
  "000085": [
    38,
    26,
    50,
    14.000000000000002,
    65,
    0,
    100,
    0
  ],
  "000086": [
    33,
    6.999999999999999,
    95,
    50,
    72,
    100,
    100,
    0
  ],
  "000088": [
    50,
    13.000000000000004,
    50,
    14.000000000000002,
    50,
    100,
    100,
    0
  ],
  "000091": [
    91,
    100,
    52,
    18,
    0,
    0,
    0,
    0
  ],
  "000092": [
    18,
    43,
    30,
    15,
    71,
    100,
    100,
    0
  ],
  "000096": [
    100,
    30,
    83,
    15,
    67,
    14.000000000000002,
    100,
    0
  ],
  "000097": [
    22,
    33,
    78,
    51,
    55.00000000000001,
    100,
    100,
    0
  ],
  "000099": [
    50,
    12.000000000000004,
    50,
    50,
    46,
    68,
    100,
    0
  ],
  "000100": [
    28.999999999999996,
    34.99999999999999,
    45,
    14.000000000000002,
    74,
    32,
    100,
    0
  ],
  "000103": [
    72,
    23,
    77,
    36,
    81,
    16,
    100,
    0
  ],
  "000104": [
    50,
    59.999999999999986,
    35,
    50,
    0,
    100,
    0,
    0
  ],
  "000106": [
    100,
    21.999999999999996,
    46,
    9,
    57.99999999999999,
    100,
    100,
    0
  ],
  "000108": [
    50,
    23,
    50,
    47.99999999999999,
    71,
    100,
    100,
    0
  ],
  "000109": [
    41,
    69,
    36,
    50,
    0,
    100,
    0,
    0
  ],
  "000110": [
    27,
    34.99999999999999,
    30,
    50,
    43,
    100,
    100,
    0
  ],
  "000111": [
    2,
    30,
    100,
    17,
    50,
    100,
    100,
    0
  ],
  "000114": [
    44,
    100,
    39,
    17,
    0,
    87,
    0,
    0
  ],
  "000115": [
    0,
    83.00000000000001,
    40,
    50,
    0,
    13,
    0,
    0
  ],
  "000116": [
    84,
    75.00000000000001,
    17,
    5.999999999999999,
    0,
    100,
    0,
    0
  ],
  "000117": [
    100,
    4,
    11,
    0,
    72,
    100,
    100,
    0
  ],
  "000118": [
    56.99999999999999,
    24,
    13,
    10,
    63,
    9,
    100,
    0
  ],
  "000121": [
    84,
    20.000000000000004,
    78,
    7.000000000000001,
    61,
    0,
    100,
    0
  ],
  "000122": [
    50,
    20.000000000000004,
    50,
    11,
    67,
    100,
    100,
    32
  ],
  "000125": [
    93,
    83.00000000000001,
    43,
    50,
    0,
    17,
    0,
    48
  ],
  "000126": [
    32,
    17.999999999999993,
    46,
    25,
    63,
    100,
    100,
    0
  ],
  "000129": [
    100,
    87.00000000000003,
    28.000000000000004,
    18,
    18,
    100,
    46.99999999999999,
    0
  ],
  "000131": [
    96,
    20.999999999999996,
    65,
    0,
    60,
    100,
    100,
    0
  ],
  "000132": [
    100,
    16,
    85,
    8,
    56.99999999999999,
    100,
    100,
    0
  ],
  "000133": [
    17,
    30,
    36,
    49,
    54,
    100,
    100,
    0
  ],
  "000134": [
    67,
    92.00000000000003,
    45,
    0,
    0,
    100,
    0,
    0
  ],
  "000135": [
    100,
    100,
    28.000000000000004,
    0,
    0,
    18,
    50,
    0
  ],
  "000161": [
    78,
    17.999999999999993,
    41,
    23.999999999999996,
    59,
    100,
    100,
    0
  ],
  "000160": [
    90,
    86.00000000000001,
    43,
    14.000000000000002,
    0,
    22,
    0,
    0
  ],
  "000157": [
    25,
    32,
    31,
    49,
    50,
    20,
    100,
    0
  ],
  "000156": [
    5,
    27,
    50,
    50,
    50,
    50,
    50,
    0
  ],
  "000155": [
    12,
    19.000000000000004,
    39,
    4,
    64,
    100,
    100,
    0
  ],
  "000137": [
    46,
    100,
    35,
    53,
    0,
    100,
    0,
    0
  ],
  "000140": [
    14.000000000000002,
    40,
    50,
    47.99999999999999,
    51,
    0,
    100,
    0
  ],
  "000143": [
    69,
    85.00000000000001,
    50,
    50,
    0,
    100,
    0,
    0
  ],
  "000145": [
    82,
    26,
    50,
    5.999999999999999,
    49,
    100,
    100,
    0
  ],
  "000146": [
    12,
    58.999999999999986,
    42,
    8,
    70,
    93,
    100,
    0
  ],
  "000147": [
    27,
    28.999999999999996,
    50,
    50,
    50,
    100,
    50,
    0
  ],
  "000148": [
    90,
    19.000000000000004,
    50,
    50,
    46,
    100,
    100,
    0
  ],
  "000150": [
    0,
    100,
    55.00000000000001,
    36,
    0,
    35,
    69,
    0
  ],
  "000151": [
    81,
    25,
    46,
    0,
    61,
    100,
    100,
    0
  ],
  "000152": [
    56.00000000000001,
    77.00000000000001,
    50,
    18,
    0,
    100,
    18,
    0
  ],
  "000153": [
    70,
    78.00000000000001,
    46,
    11.999999999999998,
    0,
    100,
    0,
    0
  ],
  "000142": [
    50,
    50.000000000000014,
    50,
    50,
    50,
    13,
    50,
    0
  ]
}

kelly_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */
// other variables can be in here too
// these control the colors used
const kelly_bg_color = [225, 206, 187];
const kelly_fg_color = [151, 102, 52];
const kelly_stroke_color = [95, 52, 8];

function KellyFace() {
    this.hairColor = 50;
    this.wrinkleWeight = 50;
    this.skinColor = 50;
    this.spots = 50;

    this.draw = function(positions) {
        var base_tone1 = color("#ffcfaf"); //light color
        var base_tone2 = color("#a56e48"); //dark color
        var blush_base = color("#701702");
        var nose_pos = average_point(positions.nose_bridge);
        var eye1_pos = average_point(positions.left_eye);
        var eye2_pos = average_point(positions.right_eye);
        var half_height = positions.chin[7][1] - nose_pos[1];
        var face_width = positions.chin[positions.chin.length - 1][0] - positions.chin[0][0];

        //mine
        var chin_R = positions.chin[positions.chin.length - 1];
        var chin_L = positions.chin[0];
        var chin_center = positions.chin[8];
        var eyecorner_L = positions.left_eye[0];
        var eyecorner_R = positions.right_eye[3];

        var x = nose_pos[0];
        var y = nose_pos[1];
        var w = 2 * face_width;
        var h = 2.5 * half_height;

       // var curHairLength = map(this.hairLength, 0, 100, 0, 3);
        var curHairColor = map(this.hairColor, 0, 120, 255, 20);
        var curWrinkleWeight = map(this.wrinkleWeight, 0, 100, 0.0001, 0.065);
        var curSpots = map(this.spots, 0, 100, 0, 1);
        var curSkincolor = map(this.skinColor, 0, 100, 0, 1);

        var skin_tone = lerpColor(base_tone1,base_tone2,curSkincolor);
        var blush_color = lerpColor(blush_base,skin_tone,0.55); 
        var extent = 0;
        if (h < w) {
            extent = h / 2;
        } else {
            extent = w / 2;
        }
        var scale = extent / 220.0;

        var eyeShift = 0.35;
        for (var i = positions.left_eye.length - 1; i >= 0; i--) {
            positions.left_eye[i][1]+=eyeShift;
            positions.right_eye[i][1]+=eyeShift;
        }
        eye1_pos = average_point(positions.left_eye);
        eye2_pos = average_point(positions.right_eye);
        var eye3_pos = average_point([eye1_pos,eye2_pos]);



        //head
        var foreheadCenter = average_point([chin_L, chin_R]);
        var face_height = distanceBetween(foreheadCenter, chin_center);

        push();
        noFill();
        stroke(blush_color);
        fill(skin_tone);
        strokeWeight(0.07);

        //head outline
        beginShape();
        curveVertex(-1.5, -2);

        curveVertex(chin_L[0], chin_L[1]);
        curveVertex(positions.chin[2][0], positions.chin[2][1]);
        curveVertex(positions.chin[4][0], positions.chin[4][1]);
        curveVertex(positions.chin[6][0], positions.chin[6][1]);
        curveVertex(chin_center[0], chin_center[1]);
        curveVertex(positions.chin[10][0], positions.chin[10][1]);
        curveVertex(positions.chin[12][0], positions.chin[12][1]);
        curveVertex(positions.chin[14][0], positions.chin[14][1]);
        curveVertex(chin_R[0], chin_R[1]);
        //forehead
        curveVertex(chin_R[0] - 0.5, chin_R[1] - face_height * 0.45);
        curveVertex(foreheadCenter[0], foreheadCenter[1] - face_height * 0.65);
        curveVertex(chin_L[0] + 0.5, chin_L[1] - face_height * 0.45);
        //close
        curveVertex(chin_L[0], chin_L[1]);
        curveVertex(positions.chin[1][0], positions.chin[1][1]);
        endShape();
        pop();

        //wrinkels
        var wrink_width = face_width*0.2;
        var wrink_stroke = curWrinkleWeight;

        if (wrink_stroke > 0.0001) {

            push();
            translate(eye3_pos[0],face_height*-0.65);
            rotate(angleBetween(eye1_pos,eye2_pos));
            noFill();
            stroke(blush_color);
            strokeWeight(wrink_stroke);
            line(-wrink_width,0,wrink_width , 0);

            strokeWeight(wrink_stroke);            
            beginShape();
            curveVertex( - 1, + 0.3 + wrink_stroke);
            curveVertex( - wrink_width * 0.8, 0.11 );
            curveVertex( + wrink_width * 0.8, 0.11 );
            curveVertex( + 1, + 0.3 + wrink_stroke);
            endShape();

            beginShape();
            curveVertex( - 1, - 0.3 - wrink_stroke);
            curveVertex( - wrink_width * 0.8, -0.11 );
            curveVertex( + wrink_width * 0.8, -0.11);
            curveVertex( + 1, - 0.3 - wrink_stroke);
            endShape();
            pop();
        }

        //brows 
        var brow_outer_l = positions.left_eyebrow[0];
        var brow_inner_l = positions.left_eyebrow[4];
        var brow_upper_l = positions.left_eyebrow[2];
        var brow_outer_r = positions.right_eyebrow[4]
        var brow_inner_r = positions.right_eyebrow[0];
        var brow_upper_r = positions.right_eyebrow[2];

        var brow_height_left = (distanceBetween(brow_outer_l, brow_upper_l) + distanceBetween(brow_inner_l, brow_upper_l)) / 4;
        var brow_height_right = (distanceBetween(brow_outer_r, brow_upper_r) + distanceBetween(brow_inner_r, brow_upper_r)) / 4;
        var brow_width_right = distanceBetween(brow_outer_r, brow_inner_r) * 0.7;
        var brow_width_left = distanceBetween(brow_outer_l, brow_inner_l) * 0.7;
        // console.log(curHairColor);
        var brow_color = curHairColor;
        var brow_outline = curHairColor*0.95;
        push();
        fill(brow_color);
        stroke(brow_outline);
        //left brow
        translate(brow_upper_l[0], brow_upper_l[1]);
        rotate(angleBetween(brow_inner_l, brow_outer_l));
        ellipse(0, brow_height_left / 4 - eyeShift, brow_width_left, brow_height_left);
        pop();

        push();
        //right brow
        fill(brow_color);
        stroke(brow_outline);
        translate(brow_upper_r[0], brow_upper_r[1]);
        rotate(angleBetween(brow_outer_r, brow_inner_r));
        ellipse(0, brow_height_right / 4 - eyeShift, brow_width_right, brow_height_left);
        pop();


        //eyes
        //eyes are drawn always closed, with glasses

        var blink_weight_L = Math.abs(average_point([positions.left_eye[1], positions.left_eye[2]])[1] - average_point([positions.left_eye[4], positions.left_eye[5]])[1]) / 3;
        var blink_weight_R = Math.abs(average_point([positions.right_eye[1], positions.right_eye[2]])[1] - average_point([positions.right_eye[4], positions.right_eye[5]])[1]) / 3;

        push();
        stroke(blush_color);
        noFill();
        strokeWeight(blink_weight_L);

        beginShape(); //left eye
        curveVertex(positions.left_eye[5][0], positions.left_eye[4][1]);
        curveVertex(positions.left_eye[0][0], positions.left_eye[0][1]);
        curveVertex(positions.left_eye[1][0], positions.left_eye[1][1]);
        curveVertex(positions.left_eye[2][0], positions.left_eye[2][1]);
        curveVertex(positions.left_eye[3][0], positions.left_eye[3][1]);
        curveVertex(positions.left_eye[4][0], positions.left_eye[4][1]);
        endShape();

        strokeWeight(blink_weight_R);

        beginShape(); //right eye
        curveVertex(positions.right_eye[5][0], positions.right_eye[4][1]);
        curveVertex(positions.right_eye[0][0], positions.right_eye[0][1]);
        curveVertex(positions.right_eye[1][0], positions.right_eye[1][1]);
        curveVertex(positions.right_eye[2][0], positions.right_eye[2][1]);
        curveVertex(positions.right_eye[3][0], positions.right_eye[3][1]);
        curveVertex(positions.right_eye[4][0], positions.right_eye[4][1]);
        endShape();
        pop();

        // lens size calculated from average distance between each outer point in positions.eye(l/r) and "eye_pos" center
        var l_lens_size;
        var r_lens_size;
        var frame_color = '#494c56';
        var lens_color = color(255, 90);
        for (var i = 0; i < positions.left_eye.length; i++) {
            l_lens_size = distanceBetween(positions.left_eye[i], eye1_pos);
            r_lens_size = distanceBetween(positions.right_eye[i], eye2_pos);
        }

        l_lens_size /= positions.left_eye.length;
        r_lens_size /= positions.right_eye.length;
        l_lens_size = 0.4 + l_lens_size * 30;
        r_lens_size = 0.4 + r_lens_size * 30;

        push();
        fill(lens_color);
        strokeWeight(0.095);
        stroke(frame_color);
        //lenses
        ellipse(eye1_pos[0], eye1_pos[1], l_lens_size, l_lens_size);
        ellipse(eye2_pos[0], eye2_pos[1], r_lens_size, r_lens_size);

        //glasses legs (called 'temples')
        var temple_connect_angle = -TWO_PI / 32;
        var temple_connect_l = rim_vert(eye1_pos, l_lens_size / 2, PI - temple_connect_angle);
        var temple_connect_r = rim_vert(eye2_pos, r_lens_size / 2, temple_connect_angle);

        noFill();
        var bridge_control_offset = distanceBetween(eye1_pos, eye2_pos) - (l_lens_size / 2) - (r_lens_size / 2);

        beginShape();
        curveVertex(positions.nose_bridge[3][0] * -0.30, (positions.nose_bridge[3][1] + bridge_control_offset) / 2);
        curveVertex(eye1_pos[0] + (l_lens_size / 2), eye1_pos[1]);
        curveVertex(eye2_pos[0] - (r_lens_size / 2), eye2_pos[1]);
        curveVertex(positions.nose_bridge[3][0] * -0.30, (positions.nose_bridge[3][1] + bridge_control_offset) / 2);
        endShape();

        if (temple_connect_l[0] > chin_L[0]) {
            line(chin_L[0], chin_L[1], temple_connect_l[0], temple_connect_l[1]);
        }
        if (temple_connect_r[0] < chin_R[0]) {
            line(chin_R[0], chin_R[1], temple_connect_r[0], temple_connect_r[1]);
        }

        pop();
        //mouth

        // for positions.top_lip & positions.bottom_lip: inside = 8,9,10 | outside = 2,3,4 | end = 11
        // top_lip[0] is in left mouth corner
        // bottom_lip[0] is in right mouth corner
        // bottom[0] + top[6] || bottom[6] + top[0] will always intersect

        var top_lip_outside = [positions.top_lip[2], positions.top_lip[3], positions.top_lip[4]];
        var bottom_lip_outside = [positions.bottom_lip[2], positions.bottom_lip[3], positions.bottom_lip[4]];
        var mouthCorner_LT = positions.top_lip[0]; // Left/Top
        var mouthCorner_RB = positions.bottom_lip[0]; // Right/Bottom
        var top_lip_inside = [positions.top_lip[8], positions.top_lip[9], positions.top_lip[10]];
        var bottom_lip_inside = [positions.bottom_lip[8], positions.bottom_lip[9], positions.bottom_lip[10]];

        //  var mouth_angle = angleBetween(positions.bottom_lip[0], positions.top_lip[0]);
        var mouth_width = distanceBetween(positions.bottom_lip[0], positions.top_lip[0]);

        var smile;
        var lip_thickness = 0;
        var mouth_open = 0;
        var innverAv = [];

        for (var i = 2; i > 0; i--) {

            mouth_open += distanceBetween(top_lip_inside[i], bottom_lip_inside[i]);
            lip_thickness += distanceBetween(top_lip_inside[i], top_lip_outside[i]);
            lip_thickness += distanceBetween(bottom_lip_inside[i], bottom_lip_outside[i]);
            innverAv.push(top_lip_inside[i]);
            innverAv.push(bottom_lip_inside[i]);
        }

        innverAv = average_point(innverAv);
        cornerAv = average_point([mouthCorner_LT, mouthCorner_RB]);
        mouth_open /= 3;
        lip_thickness /= 6;
        smile = cornerAv[1] - innverAv[1];

        push();

        strokeWeight(lip_thickness * 0.75);
        stroke(blush_color);
        noFill();
        beginShape();
        curveVertex(mouthCorner_LT[0] - smile, mouthCorner_LT[1] + smile * 2);
        curveVertex(mouthCorner_LT[0] + mouth_width * 0.15, mouthCorner_LT[1] - smile);
        curveVertex(mouthCorner_RB[0] - mouth_width * 0.15, mouthCorner_RB[1] - smile);
        curveVertex(mouthCorner_RB[0] - smile, mouthCorner_RB[1] + smile * 2);
        endShape();
        pop();



        fill('red');
        stroke('red');
        //  debugShowPoints(positions.left_eye);
        //debugShowPoints(hair_L);


        function toms_face() {

            // head
            stroke(kelly_stroke_color);
            fill(kelly_fg_color);
            beginShape();
            for (var i = 0; i < positions.chin.length; i++) {
                vertex(positions.chin[i][0], positions.chin[i][1]);
            }
            for (var i = positions.right_eyebrow.length - 1; i >= 0; i--) {
                vertex(positions.right_eyebrow[i][0], positions.right_eyebrow[i][1]);
            }
            for (var i = positions.left_eyebrow.length - 1; i >= 0; i--) {
                vertex(positions.left_eyebrow[i][0], positions.left_eyebrow[i][1]);
            }
            endShape(CLOSE);

            // mouth
            noStroke();
            fill(kelly_bg_color);
            beginShape();
            for (var i = 0; i < positions.top_lip.length; i++) {
                vertex(positions.top_lip[i][0], positions.top_lip[i][1]);
            }
            endShape(CLOSE);
            beginShape();
            for (var i = 0; i < positions.bottom_lip.length; i++) {
                vertex(positions.bottom_lip[i][0], positions.bottom_lip[i][1]);
            }
            endShape(CLOSE);

            // nose
            beginShape();
            vertex(positions.nose_bridge[0][0], positions.nose_bridge[0][1]);
            for (var i = 0; i < positions.nose_tip.length; i++) {
                vertex(positions.nose_tip[i][0], positions.nose_tip[i][1]);
            }
            endShape(CLOSE);

            // eyes
            beginShape();
            for (var i = 0; i < positions.left_eye.length; i++) {
                vertex(positions.left_eye[i][0], positions.left_eye[i][1]);
            }
            endShape(CLOSE);
            beginShape();
            for (var i = 0; i < positions.right_eye.length; i++) {
                vertex(positions.right_eye[i][0], positions.right_eye[i][1]);
            }
            endShape(CLOSE);

            fill(kelly_fg_color);
            ellipse(eye1_pos[0], eye1_pos[1], 16 * scale, 16 * scale);
            ellipse(eye2_pos[0], eye2_pos[1], 16 * scale, 16 * scale);

            fill(kelly_stroke_color);
            beginShape();
            for (var i = 0; i < positions.right_eyebrow.length; i++) {
                vertex(positions.right_eyebrow[i][0], positions.right_eyebrow[i][1]);
            }
            endShape(CLOSE);
            beginShape();
            for (var i = 0; i < positions.left_eyebrow.length; i++) {
                vertex(positions.left_eyebrow[i][0], positions.left_eyebrow[i][1]);
            }
            endShape(CLOSE);
            strokeWeight(1);
        }
    }

    /* set internal properties based on list numbers 0-100 */
    this.setProperties = function(settings) {
        this.hairColor = settings[0];
        this.wrinkleWeight = settings[1];
        this.skinColor = settings[2];
    }

    /* get internal properties as list of numbers 0-100 */
    this.getProperties = function() {
        properties = new Array(3);
        properties[0] = this.hairColor;
        properties[1] = this.wrinkleWeight;
        properties[2] = this.skinColor;
        return properties;
    }
}

// given a point, return the average
function average_point(list) {
    var sum_x = 0;
    var sum_y = 0;
    var num_points = 0;
    for (var i = 0; i < list.length; i++) {
        sum_x += list[i][0];
        sum_y += list[i][1];
        num_points += 1;
    }
    return [sum_x / num_points, sum_y / num_points];
}

function rim_vert(vert, rad, angl) { //find the co-oridnates for a point on a circle
    var x = Math.cos(angl) * rad;
    var y = Math.sin(angl) * rad;

    return [x + vert[0], y + vert[1]];
}

function angleBetween(p1, p2) {
    //angle given with reference to horizon line 
    var c;
    c = Math.atan2(p2[1] - p1[1], p2[0] - p1[0]) * 180 / Math.PI;
    return c;
}

function distanceBetween(p1, p2) {
    var a = p1[0] - p2[0];
    var b = p1[1] - p2[1];
    var c = Math.abs(Math.sqrt(a * a + b * b));
    return c;
}

function debugShowPoints(arr, txtsiz) {
    push();
    textSize(0.25);
    if (txtsiz) {
        textSize(txtsiz);
    }
    noStroke();
    for (var i = arr.length - 1; i >= 0; i--) {
        text(i, arr[i][0], arr[i][1]);
    }

    pop();
}

kelly_training_values.json

{
  "000001": [
    83,
    0,
    17
  ],
  "000002": [
    54,
    41
  ],
  "000058": [
    100,
    7,
    4
  ],
  "000005": [
    18,
    0,
    18
  ],
  "000006": [
    45,
    27,
    57
  ],
  "000007": [
    94,
    67,
    34
  ],
  "000009": [
    66,
    31,
    9
  ],
  "000010": [
    20,
    40,
    20
  ],
  "000013": [
    0,
    71,
    0
  ],
  "000014": [
    100,
    17,
    71
  ],
  "000015": [
    74,
    64,
    36
  ],
  "000016": [
    80,
    40,
    27
  ],
  "000018": [
    11,
    36,
    4
  ],
  "000020": [
    76,
    47,
    17
  ],
  "000023": [
    87,
    70,
    20
  ],
  "000025": [
    71,
    32,
    16
  ],
  "000028": [
    59,
    66,
    21
  ],
  "000029": [
    5,
    6,
    13
  ],
  "000030": [
    14,
    61,
    15
  ],
  "000031": [
    29,
    93,
    0
  ],
  "000032": [
    9,
    60,
    23
  ],
  "000035": [
    100,
    0,
    0
  ],
  "000037": [
    100,
    16,
    67
  ],
  "000038": [
    87,
    100,
    7
  ],
  "000040": [
    93,
    7,
    14
  ],
  "000041": [
    98,
    100,
    19
  ],
  "000042": [
    23,
    34,
    0
  ],
  "000043": [
    74,
    45,
    20
  ],
  "000044": [
    100,
    0,
    93
  ],
  "000045": [
    69,
    17,
    14
  ],
  "000047": [
    100,
    55,
    17
  ],
  "000048": [
    90,
    7,
    0
  ],
  "000050": [
    78,
    100,
    17
  ],
  "000051": [
    0,
    100,
    30
  ],
  "000052": [
    70,
    100,
    22
  ],
  "000054": [
    12,
    72,
    10
  ],
  "000055": [
    97,
    64,
    8
  ],
  "000056": [
    100,
    23,
    7
  ],
  "000060": [
    72,
    80,
    96
  ],
  "000064": [
    74,
    49,
    2
  ],
  "000065": [
    80,
    25,
    9
  ],
  "000068": [
    42,
    100,
    21
  ],
  "000069": [
    100,
    69,
    7
  ],
  "000071": [
    5,
    39,
    14
  ],
  "000073": [
    79,
    12,
    29
  ],
  "000076": [
    100,
    75,
    9
  ],
  "000077": [
    100,
    0,
    0
  ],
  "000078": [
    84,
    18,
    5
  ],
  "000079": [
    0,
    59,
    21
  ],
  "000080": [
    98,
    21,
    0
  ],
  "000081": [
    98,
    87,
    0
  ],
  "000083": [
    64,
    14,
    4
  ],
  "000085": [
    71,
    18,
    6
  ],
  "000086": [
    50,
    4,
    7
  ],
  "000088": [
    70,
    0,
    7
  ],
  "000091": [
    94,
    22,
    5
  ],
  "000092": [
    17,
    69,
    8
  ],
  "000096": [
    77,
    0,
    17
  ],
  "000097": [
    31,
    21,
    19
  ],
  "000099": [
    57,
    21,
    8
  ],
  "000100": [
    27,
    34,
    5
  ],
  "000103": [
    67,
    0,
    5
  ],
  "000104": [
    10,
    82,
    3
  ],
  "000106": [
    38,
    23,
    21
  ],
  "000108": [
    2,
    36,
    4
  ],
  "000109": [
    11,
    50,
    28
  ],
  "000110": [
    73,
    40,
    17
  ],
  "000111": [
    34,
    13,
    65
  ],
  "000114": [
    92,
    34,
    14
  ],
  "000115": [
    0,
    17,
    0
  ],
  "000116": [
    59,
    85,
    36
  ],
  "000117": [
    100,
    0,
    67
  ],
  "000118": [
    91,
    15,
    69
  ],
  "000121": [
    91,
    67,
    37
  ],
  "000122": [
    0,
    81,
    0
  ],
  "000125": [
    20,
    100,
    18
  ],
  "000126": [
    0,
    35,
    21
  ],
  "000129": [
    90,
    41,
    31
  ],
  "000131": [
    91,
    29,
    14
  ],
  "000132": [
    100,
    33,
    59
  ]
}


    

lee_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */

// remove this or set to false to enable full program (load will be slower)
//var DEBUG_MODE = true;

// this can be used to set the number of sliders to show
// var NUM_SLIDERS = 6;


// example of a global function
// given a segment, this returns the average point [x, y]
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 ];
}

// other variables can be in here too
// here's some examples for colors used
// const bg_color = [225, 206, 187];
// const fg_color = [151, 102, 52];
// const stroke_color = [95, 52, 8];

// example of a global function
// given a segment, this returns the average point [x, y]


// This where you define your own face object
function LeeFace() {
  // these are state variables for a face
  // (your variables should be different!)


this.mouth_value= 4;
this.petal_colour = 1;
this.petal_layer = 1;
this.petal_length = 2;
this.eye_size_y = 1.5;
this.eye_colour = 1;
this.face_colour =1;


/* Slider 1 - Hair colour - blue for dark hair, cyan for lgiht hair or no hair, red for red hair
   Slider 2 - Petal Layers - 1 for feminine, 2 for masculine
   Slider 3 - Petal Shape - Pointy for short hair, rounded for long hair
   Slider 4 - Eye size
   Slider 5 -Eye colour - purple for blue eyes, green for green eyes, brown for brown eyes
   Slider 6 -Skin Colour - light for lighter skin, dark for darker skin.
*/

  // example of a function *inside* the face object.
  // this draws a segment, and do_loop will connect the ends if true

  this.draw = function(positions) {

//VARIABLES

    const blue = color(83, 40, 237,180);
    const cyan_bonus = color(48, 252, 255, 220);
    const red = color(227, 29, 23,180);
    const red_stroke = color(235, 62, 56 );

    const blue_stroke = color(68, 21, 171);
    const cyan_b_stroke = color(48, 252, 255);
    const purple_eyes = color(92, 0, 163);
    const green_eyes = color(0, 122, 104);
    const brown_eyes = color(166, 91, 0);
    const darker = color(255, 131, 8);
    const lighter = color(255, 166, 0);

    let bottom_lip3 = positions.bottom_lip[2];
    let bottom_lip4 = positions.bottom_lip[3];
    let bottom_lip5 = positions.bottom_lip[4];

    let top_lip1 = positions.top_lip[1];
    let top_lip2 = positions.top_lip[2];
    let top_lip3 = positions.top_lip[3];
    let top_lip4 = positions.top_lip[4];
    let top_lip6 = positions.top_lip[5];

    let left_eye_pos = segment_average(positions.left_eye);
    let right_eye_pos= segment_average(positions.right_eye);

    let nose_pos = positions.nose_bridge[0];
    let mouth_top = positions.top_lip[3];
    let mouth_bottom = positions.bottom_lip[3];

    let right_eyebrow = positions.right_eyebrow;
    let left_eyebrow = positions.left_eyebrow;

    let right_brow_0 = positions.right_eyebrow[0];
    let right_brow_1 = positions.right_eyebrow[1];
    let right_brow_2 = positions.right_eyebrow[2];
    let right_brow_3 = positions.right_eyebrow[3];
    let right_brow_4 = positions.right_eyebrow[4];

    let left_brow_0 = positions.left_eyebrow[0];
    let left_brow_1 = positions.left_eyebrow[1];
    let left_brow_2 = positions.left_eyebrow[2];
    let left_brow_3 = positions.left_eyebrow[3];
    let left_brow_4 = positions.left_eyebrow[4];


// rotation in degrees
 angleMode(DEGREES);
 //rotate(tilt_value);
 strokeWeight(0.05);



 //PETAL COLOURS--BLUE, CYAN OR RED------------------------------
 if(this.petal_colour == 1) {
   fill(blue);
   stroke(blue_stroke);
 }

 else if(this.petal_colour ==2) {
   fill(cyan_bonus);
   stroke(cyan_b_stroke);
  }
  else if(this.petal_colour ==3) {
    fill(red);
    stroke(red_stroke);
   }


//PETAL LAYERS  -- ONE OR TWO------------------------------
if(this.petal_layer == 1) {

  beginShape();
   curveVertex(0,0);
   curveVertex(0, 0);
   curveVertex(-2.8, 1.2);
   curveVertex(-this.petal_length,-0.8);
   curveVertex(-2.8, -2.8);
   curveVertex(0,-1.6);
   curveVertex(0,-1.6);
  endShape();


  beginShape();
   curveVertex(0,-1.6);
   curveVertex(0, -1.6);
   curveVertex(2.8, -2.8);
   curveVertex(this.petal_length,-0.8);
   curveVertex(2.8, 1.2);
   curveVertex(0,0);
   curveVertex(0,0);
  endShape();

  beginShape();
   curveVertex(-0.8,-0.8);
   curveVertex(-0.8,-0.8);
   curveVertex(-2, -3.6);
   curveVertex(0, -this.petal_length-0.8);
   curveVertex(2, -3.6);
   curveVertex(0.8, -0.8);
   curveVertex(0.8,-0.8);
  endShape();


  beginShape();
   curveVertex(-0.8,-0.8);
   curveVertex(-0.8,-0.8);
   curveVertex(-2, 2);
   curveVertex(0, this.petal_length-0.8);
   curveVertex(2, 2);
   curveVertex(0.8, -0.8);
   curveVertex(0.8,-0.8);
  endShape();


}
else if(this.petal_layer ==2){

  beginShape();
   curveVertex(0,0);
   curveVertex(0, 0);
   curveVertex(-2.8, 1.2);
   curveVertex(-this.petal_length,-0.8);
   curveVertex(-2.8, -2.8);
   curveVertex(0,-1.6);
   curveVertex(0,-1.6);
  endShape();


  beginShape();
   curveVertex(0,-1.6);
   curveVertex(0, -1.6);
   curveVertex(2.8, -2.8);
   curveVertex(this.petal_length,-0.8);
   curveVertex(2.8, 1.2);
   curveVertex(0,0);
   curveVertex(0,0);
  endShape();

  beginShape();
   curveVertex(-0.8,-0.8);
   curveVertex(-0.8,-0.8);
   curveVertex(-2, -3.6);
   curveVertex(0, -this.petal_length-0.8);
   curveVertex(2, -3.6);
   curveVertex(0.8, -0.8);
   curveVertex(0.8,-0.8);
  endShape();


  beginShape();
   curveVertex(-0.8,-0.8);
   curveVertex(-0.8,-0.8);
   curveVertex(-2, 2);
   curveVertex(0, this.petal_length-0.8);
   curveVertex(2, 2);
   curveVertex(0.8, -0.8);
   curveVertex(0.8,-0.8);
  endShape();

 fill(174, 82, 255, 170);

//SECOND LAYER OF PETALS
beginShape();
 curveVertex(-0.8, 0);
 curveVertex(-0.8, 0);
 curveVertex(-2, 0.4);
 curveVertex(-this.petal_length/1.2, -0.8);
 curveVertex(-2, -2);
 curveVertex(-0.8, -1.6);
 curveVertex(-0.8, -1.6);
endShape();

beginShape();
 curveVertex(0.8, 0);
 curveVertex(0.8, 0);
 curveVertex(2, 0.4);
 curveVertex(this.petal_length/1.2, -0.8);
 curveVertex(2, -2);
 curveVertex(0.8, -1.6);
 curveVertex(0.8, -1.6);
endShape();


beginShape();
 curveVertex(0.8, 0);
 curveVertex(0.8, 0);
 curveVertex(1.2, 1.2);
 curveVertex(0, this.petal_length/1.2 -0.8);
 curveVertex(-1.2, 1.2);
 curveVertex(-0.8, 0);
 curveVertex(-0.8, 0);
endShape();


beginShape();
 curveVertex(0.8, -1.6);
 curveVertex(0.8, -1.6);
 curveVertex(1.2, -2.8);
 curveVertex(0, -this.petal_length/1.2 -0.8);
 curveVertex(-1.2, -2.8);
 curveVertex(-0.8, -1.6);
 curveVertex(-0.8, -1.6);
endShape();
}


//FACE COLOUR--LIGHTER OR DARKER----------------------------------------------------------------------

if(this.face_colour ==1){
  fill(lighter);
  stroke(255, 83, 3);

}
else if(this.face_colour ==2){
  fill(darker);
  stroke(255, 83, 3);
}

//HEAD
 ellipse(0, -0.8, 2.4);

//EYES

//WHITE
fill(255);
strokeWeight(0.05);
stroke(255, 224, 153);
noStroke();

ellipse(left_eye_pos[0], left_eye_pos[1]+0.05,0.6, this.eye_size_y);
ellipse(right_eye_pos[0], right_eye_pos[1]+0.05, 0.6, this.eye_size_y);

//EYE COLOUR
if (this.eye_colour == 1){
  fill(purple_eyes);

}
else if(this.eye_colour ==2){
  fill(green_eyes);
}
else if( this.eye_colour ==3){
  fill(brown_eyes);
}

//IRIS
noStroke();
 ellipse(left_eye_pos[0],left_eye_pos[1]+0.05,0.4,this.eye_size_y/2);
 ellipse(right_eye_pos[0], right_eye_pos[1]+0.05,0.4,this.eye_size_y/2);

//HIGHLIGHTS------------------
noStroke();
fill(255);

//left hl
ellipse(left_eye_pos[0]+0.1,left_eye_pos[1],this.eye_size_y/6);

//right hl
ellipse(right_eye_pos[0]+0.1,right_eye_pos[1],this.eye_size_y/6);

//MOUTH
noStroke();
 if(this.face_colour ==1){
 fill(224, 108, 0);
}
else if(this.face_colour ==2){
  fill(184, 61, 0);
}


push();
scale(0.8);
translate(0, -0.8);
beginShape();
   curveVertex(top_lip1[0], top_lip1[1]);
   curveVertex(top_lip1[0], top_lip1[1]);
   curveVertex(bottom_lip3[0] - 0.4, bottom_lip3[1] );
   curveVertex(bottom_lip4[0], bottom_lip4[1] +0.02);
   curveVertex(bottom_lip5[0] + 0.4, bottom_lip5[1]);
   curveVertex(top_lip6[0], top_lip6[1]);
   curveVertex(top_lip4[0], top_lip4[1]-0.1);
   curveVertex(top_lip3[0]+0.1, top_lip3[1]-0.15);
   curveVertex(top_lip3[0]-0.1, top_lip3[1]-0.15);
   curveVertex(top_lip2[0], top_lip2[1]-0.1);
   curveVertex(top_lip2[0], top_lip2[1]-0.1);
   endShape();
 endShape();
 pop();

 //EYEBROWS --------------------------


stroke(15, 33, 92);
strokeWeight(0.3);
noFill();

beginShape();
curveVertex(left_brow_0[0], left_brow_0[1]),
curveVertex(left_brow_1[0], left_brow_1[1]),
curveVertex(left_brow_2[0], left_brow_2[1]),
curveVertex(left_brow_3[0], left_brow_3[1]),
curveVertex(left_brow_4[0], left_brow_4[1]),
endShape();

beginShape();
curveVertex(right_brow_0[0], right_brow_0[1]),
curveVertex(right_brow_1[0], right_brow_1[1]),
curveVertex(right_brow_2[0], right_brow_2[1]),
curveVertex(right_brow_3[0], right_brow_3[1]),
curveVertex(right_brow_4[0], right_brow_4[1]),
endShape();


//NOSE -----------------------------
//NOSE COLOUR -- BASED ON SKIN COLOUR
if(this.face_colour ==1){
  fill(224, 108, 0);

}
else if (this.face_colour ==2){
  fill(194, 78, 0);
}

//DRAW NOSE
 noStroke();
 ellipse(nose_pos[0], nose_pos[1]+0.4, 0.2, 0.1);


  }


  /* set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
   this.petal_colour = int(map(settings[0], 0, 100, 1, 3));
  this.petal_layer = int(map(settings[1], 0, 100, 1, 2));
  this.petal_length = map(settings[2], 0, 100, 2, 3);
  this.eye_size_y = map(settings[3], 0, 100, 0.4, 1);
  this.eye_colour = int(map(settings[4], 0, 100, 1, 3));
  this.face_colour = int(map(settings[5], 0, 100, 1, 2));


  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    let settings = new Array(6);
   settings[0] = map(this.petal_colour, 1,3, 0, 100);
   settings[1] = map(this.petal_layer, 1, 2, 0, 100);
   settings[2] = map(this.petal_length, 2, 3, 0, 100);
   settings[3] = map(this.eye_size_y, 0.4, 1, 0, 100);
   settings[4] = map(this.eye_colour, 1, 3, 0, 100);
   settings[5] = map(this.face_colour, 1, 2, 0, 100);


    return settings;

  }
}

lee_training_values.json

{
"000001": [
    50,
    0,
    100,
    100,
    100,
    0
  ],
  "000002": [
      100,
      0,
      100,
      100,
      100,
      0
    ],
    "000005": [
      50,
      0,
      100,
      81,
      50,
      0
    ],
    "000006": [
      0,
      0,
      100,
      100,
      100,
      100
    ],
    "000007": [
      0,
      100,
      0,
      27.000000000000007,
      100,
      0
    ],
    "000009": [
      100,
      0,
      100,
      100,
      100,
      0
    ],
    "000010": [
      50,
      0,
      100,
      100,
      0,
      0
    ],
    "000013": [
      50,
      100,
      0,
      12.000000000000002,
      50,
      0
    ],
    "000014": [
      0,
      0,
      100,
      100,
      100,
      100
    ],
    "000015": [
      0,
      100,
      0,
      0,
      100,
      0
    ],
    "000016": [
      0,
      100,
      0,
      0,
      100,
      0
    ],
    "000018": [
      50,
      0,
      100,
      51.99999999999999,
      50,
      0
    ],
    "000020": [
      0,
      100,
      0,
      19,
      100,
      0
    ],
    "000023": [
      0,
      100,
      0,
      14.999999999999996,
      0,
      0
    ],
    "000025": [
      0,
      100,
      0,
      25.000000000000007,
      100,
      0
    ],
    "000028": [
      100,
      0,
      100,
      100,
      100,
      0
    ],
    "000029": [
      50,
      0,
      100,
      100,
      50,
      0
    ],
    "000030": [
      50,
      100,
      0,
      93.00000000000001,
      50,
      0
    ],
    "000031": [
      50,
      0,
      100,
      61,
      0,
      0
    ],
    "000032": [
      0,
      100,
      0,
      61,
      100,
      0
    ],
    "000035": [
      0,
      0,
      100,
      100,
      100,
      0
    ],
    "000037": [
      0,
      100,
      0,
      33.000000000000014,
      100,
      100
    ],
    "000038": [
      0,
      100,
      0,
      12.000000000000002,
      50,
      0
    ],
    "000040": [
      0,
      0,
      100,
      100,
      100,
      0
    ],
    "000041": [
      0,
      100,
      0,
      20,
      100,
      100
    ],
    "000042": [
      50,
      0,
      100,
      64,
      50,
      0
    ],
    "000043": [
      0,
      0,
      100,
      100,
      100,
      0
    ],
    "000044": [
      0,
      0,
      100,
      100,
      100,
      100
    ],
    "000045": [
      100,
      0,
      100,
      34.000000000000014,
      100,
      0
    ],
    "000047": [
      0,
      0,
      100,
      0,
      100,
      100
    ],
    "000048": [
      0,
      100,
      0,
      9,
      100,
      0
    ],
    "000050": [
      0,
      100,
      0,
      9,
      100,
      0
    ],
    "000051": [
      50,
      100,
      0,
      78,
      100,
      0
    ],
    "000052": [
      0,
      100,
      0,
      45.00000000000001,
      50,
      0
    ],
    "000054": [
      50,
      0,
      100,
      30.00000000000001,
      50,
      0
    ],
    "000055": [
      0,
      100,
      0,
      13.000000000000004,
      100,
      0
    ],
    "000056": [
      0,
      100,
      39.000000000000014,
      13.000000000000004,
      100,
      0
    ],
    "000058": [
      0,
      0,
      100,
      85.00000000000001,
      0,
      0
    ],
    "000060": [
      100,
      100,
      0,
      20,
      100,
      100
    ],
    "000064": [
      0,
      100,
      0,
      0,
      50,
      0
    ],
    "000065": [
      0,
      100,
      0,
      0,
      100,
      100
    ],
    "000068": [
      0,
      100,
      0,
      0,
      100,
      0
    ],
    "000069": [
      0,
      100,
      0,
      100,
      100,
      0
    ],
    "000071": [
      50,
      0,
      100,
      100,
      50,
      0
    ],
    "000073": [
      0,
      0,
      100,
      52.99999999999999,
      100,
      0
    ],
    "000076": [
      0,
      100,
      25,
      52.99999999999999,
      100,
      100
    ],
    "000077": [
      0,
      0,
      100,
      100,
      100,
      0
    ],
    "000078": [
      0,
      0,
      100,
      100,
      100,
      0
    ],
    "000079": [
      50,
      100,
      0,
      36,
      100,
      100
    ],
    "000080": [
      0,
      100,
      0,
      0,
      50,
      0
    ],
    "000081": [
      0,
      100,
      0,
      0,
      100,
      100
    ],
    "000083": [
      100,
      0,
      100,
      100,
      50,
      0
    ],
    "000085": [
      100,
      0,
      100,
      100,
      50,
      0
    ],
    "000086": [
      100,
      0,
      100,
      100,
      50,
      0
    ],
    "000088": [
      100,
      0,
      100,
      68,
      100,
      0
    ],
    "000091": [
      0,
      100,
      0,
      0,
      100,
      0
    ],
    "000092": [
      50,
      0,
      100,
      78,
      50,
      0
    ],
    "000096": [
      0,
      0,
      100,
      100,
      100,
      100
    ],
    "000097": [
      50,
      0,
      100,
      100,
      0,
      0
    ],
    "000099": [
      50,
      0,
      100,
      100,
      50,
      0
    ],
    "000100": [
      50,
      0,
      100,
      100,
      100,
      0
    ],
    "000103": [
      0,
      0,
      100,
      100,
      50,
      0
    ],
    "000104": [
      50,
      100,
      0,
      0,
      0,
      0
    ],
    "000106": [
      100,
      0,
      100,
      100,
      100,
      0
    ],
    "000108": [
      50,
      0,
      100,
      100,
      0,
      0
    ],
    "000109": [
      50,
      100,
      0,
      48.999999999999986,
      50,
      0
    ],
    "000110": [
      0,
      0,
      100,
      17,
      50,
      0
    ],
    "000111": [
      50,
      0,
      100,
      0,
      100,
      100
    ],
    "000114": [
      0,
      100,
      0,
      100,
      100,
      0
    ],
    "000115": [
      50,
      100,
      0,
      0,
      50,
      0
    ],
    "000116": [
      0,
      100,
      0,
      37,
      100,
      0
    ],
    "000117": [
      0,
      0,
      100,
      100,
      100,
      100
    ],
    "000118": [
      0,
      0,
      100,
      100,
      100,
      100
    ],
    "000121": [
      0,
      0,
      100,
      100,
      100,
      100
    ],
    "000122": [
      50,
      0,
      100,
      81.99999999999999,
      100,
      0
    ],
    "000125": [
      0,
      100,
      0,
      55.99999999999999,
      50,
      100
    ],
    "000126": [
      50,
      0,
      100,
      100,
      50,
      100
    ],
    "000129": [
      0,
      100,
      0,
      32.000000000000014,
      100,
      0
    ],
    "000131": [
      0,
      0,
      100,
      72.00000000000001,
      100,
      100
    ],
    "000132": [
      0,
      0,
      100,
      44.00000000000001,
      100,
      100
    ],
    "000133": [
      50,
      0,
      100,
      100,
      0,
      0
    ],
    "000134": [
      0,
      100,
      0,
      73.00000000000001,
      100,
      100
    ],
    "000135": [
      0,
      100,
      0,
      43.00000000000001,
      100,
      100
    ],
    "000137": [
      0,
      100,
      0,
      0,
      100,
      0
    ],
    "000140": [
      50,
      0,
      100,
      100,
      0,
      0
    ],
    "000142": [
      0,
      0,
      100,
      100,
      0,
      0
    ],
    "000143": [
      50,
      100,
      0,
      32.000000000000014,
      50,
      0
    ],
    "000145": [
      0,
      0,
      100,
      0,
      100,
      0
    ],
    "000146": [
      100,
      0,
      100,
      65,
      100,
      100
    ],
    "000147": [
      50,
      0,
      100,
      100,
      50,
      0
    ],
    "000148": [
      0,
      0,
      100,
      30.00000000000001,
      50,
      0
    ],
    "000150": [
      100,
      100,
      0,
      85.00000000000001,
      50,
      0
    ],
    "000151": [
      0,
      0,
      100,
      26.000000000000007,
      100,
      100
    ],
    "000152": [
      0,
      100,
      0,
      25.000000000000007,
      50,
      0
    ],
    "000153": [
      0,
      100,
      0,
      25.000000000000007,
      100,
      0
    ],
    "000155": [
      100,
      0,
      100,
      100,
      100,
      0
    ],
    "000156": [
      50,
      0,
      100,
      62,
      0,
      0
    ],
    "000157": [
      50,
      0,
      100,
      68,
      50,
      0
    ],
    "000160": [
      0,
      100,
      0,
      42.00000000000001,
      100,
      0
    ],
    "000161": [
      0,
      0,
      100,
      0,
      50,
      0
    ]
  }


      

luo_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */  

// remove this or set to false to enable full program (load will be slower)
// var DEBUG_MODE = true;

// this can be used to set the number of sliders to show
// var NUM_SLIDERS = 5;

// other variables can be in here too
// these control the colors used
// const bg_color = [225, 206, 187];
// const fg_color = [151, 102, 52];
// const stroke_color = [95, 52, 8];

function LuoFace() {

  // these are state variables for a face
  // (your variables may be different)
  this.face = 4;    // 1-5
  this.spot = 5;      // 0-10
  this.shape = 1;

  /*
   * Draw a face with position lists that include:
   *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
   *    bottom_lip, top_lip, nose_tip, nose_bridge, 
   */  
  this.draw = function(positions) {

      let face = this.face;
      let mouth = 5;
      let blush = 5;
      let spot = this.spot;
      let spot_col = 5;
      let spot_size = 1;
      let eyebrows_rotate = 50;
      let glasses = 5;
     

      // Colour Sets
      let face1 = '#ffe3fc'; //white
      let face2 = '#f5ad8e'; //pink
      let face3 = '#fcf06a'; //yellow
      let face4 = '#d9764c'; //brown
      let face5 = '#66756a'; //grey
      let face6 = '#315070'; //blue
      let face7 = '#8a5189'; //purple
      let face8 = '#a65561'; //red
      let face9 = '#5b8a5a'; //green
      let face10 = '#de4e26'; //orange
      


      let faceColour;

      let left_eye = average_point(positions.left_eye);
      let right_eye = average_point(positions.right_eye);
      let left_eyebrow = average_point(positions.left_eyebrow);
      let right_eyebrow = average_point(positions.right_eyebrow);

      let left_d = dist(left_eye[0], left_eye[1], left_eyebrow[0], left_eyebrow[1]);
      let right_d = dist(right_eye[0], right_eye[1], right_eyebrow[0], right_eyebrow[1]);
      let left_eb_move = map(left_d, 0.4, 0.7, 0, 2, true);
      let right_eb_move = map(right_d, 0.4, 0.7, 0, 2, true);


      // print(left_d); 

      left_eye[0] *= 3;
      left_eye[1] *= 3;
      right_eye[0] *= 3;
      right_eye[1] *= 3;

      push();
      scale(0.33);

      // Rabbit (Brown)
      //fill(221,168,128);
      strokeWeight(0.3);
      stroke(0);
      beginShape();
      endShape();

      if(this.shape <2){
     //soft SHAPES
     noStroke();

    // Face Colour
      if(face == 1){
        faceColour = face1; //***WHITE***//

      }else if (face == 2){
        faceColour = face2; //***dark***//

      }else if (face == 3){
        faceColour = face3; //***Yellow***//

      }else if (face == 4){
        faceColour = face4; //***Brown***//

      }else{
        faceColour = face5; //***Grey***//
      } 

    
      fill(faceColour);
      strokeWeight(0.3);
      stroke(0);
      ellipse(-0.5, 1.8, 15, 11);
    
      push();
      angleMode(RADIANS);
      arc(-3.9, -3, 4.5, 16, -4, -0.4);//ear left
      arc(2.4, -3.2, 5, 16, -2.8, 0.65);//ear right
      pop();

    } else {
      //unsoft shape
      if(face == 1){
        faceColour = face6; //***WHITE***//

      }else if (face == 2){
        faceColour = face8; //***dark***//

      }else if (face == 3){
        faceColour = face7; //***Yellow***//

      }else if (face == 4){
        faceColour = face9; //***Brown***//

      }else{
        faceColour = face10; //***Grey***//
      } 

      fill(faceColour);
      strokeWeight(0.2);
      stroke(0);
      rect(-8, -4, 15, 11);
    
      push();
      angleMode(RADIANS);
      rect(-3, -4, -2.5, -9.5);
      rect(5, -4, -3, -6.5);

      //arc(-3.9, -3, 4.5, 16, -4, -0.4);//ear left
      //arc(2.4, -3.2, 5, 16, -2.8, 0.65);//ear right

      

      pop();
    }


      // spot (Colour, Spot)
      let amount = map(spot_col, 0, 10, 0, 1);
      let colourWhite = color('#dbdbdb');
      let colourDark = color('#e6655c');
      let spotColour = lerpColor(colourWhite, colourDark, amount);

      let spotFace = map(spot, 0, 100, 0, 100);

      let spotS = map(spot_size, 0, 100, 1.3, 15);

      strokeWeight(spotS);
      stroke(spotColour);

      if (spotFace == 0){
      }

      if (spotFace >= 2){

        line(-0.5, -3, -0.5, -2);
      }
      if (spotFace >=4){
        line(-6.5, 3, -3, 3);
      }
      if (spotFace >=6){
      line(2.5, 2, 5.5, 2);
      }
      if (spotFace >=8){
      line(3, 0, 5.5, 0);
      }
      if (spotFace >=10){
      line(-6.5, 0.5, -4.5, 0.5);
      }

      // Mouth
      strokeWeight(0.4);
      stroke(0);
      line(-1.55, -1, -0.05, -1); 

      let top_lip_point = positions.top_lip[9];
      let bottom_lip_point = positions.bottom_lip[9];
      // fill(255, 0, 0);
      let d = dist(top_lip_point[0], top_lip_point[1], bottom_lip_point[0], bottom_lip_point[1])
      // print(d);

      // Mouth Open
      if(d < 0.1) {
        d = 0;
      }
      mouth = map(d, 0, 0.5, 0, 10);
      let mouth_size = map(mouth, 0, 10, 0, 3.5);
      strokeWeight(0.3);
      fill('#fffcf7');
      rect(-1.6, 2, 1.6, mouth_size, 0.08);

      // Blush
      noStroke();
      if (blush > 3 && blush < 6){ 
      fill('#ed4415'); //red
      ellipse(-3.6, 0.5, 1.5, 1);
      ellipse(2.3, 0.5, 1.5, 1);
      } 

      // Eyes
      noStroke();
      fill(0);
      // ellipse(-2.2, -2, 1.1, 1.1);
      // ellipse(0.5, -2, 1.1, 1.1);
      ellipse(left_eye[0], left_eye[1]+ 1.5, 2, 2); //eye size left
      ellipse(right_eye[0] - 1.6, right_eye[1] + 1.7, 2, 2);

 

      // Eyebrows
      strokeWeight(0.5);
      stroke(0);

      push();
      angleMode(DEGREES);
      //translate(left_eye[0]-0.1, left_eye[1]-1);
      //translate(0, -left_eb_move);
      //rotate(eyebrows_rotate);
      line(0.5, -2.5, 2.5, -2.5);
     
      pop();

      push();
      angleMode(DEGREES);
      //translate(right_eye[0]-0.2, right_eye[1]-1);
      //translate(0, -right_eb_move);
      //rotate(-eyebrows_rotate);
      line(-3.5, -2.5, -1.5, -2.5);
      pop();



      // Glasses
       if (glasses > 5 && glasses < 8){
      stroke(0);
      strokeWeight(0.35);
      noFill();
      ellipse(-2.3, -2.4, 2.6, 2.6);
      ellipse(0.6, -2.4, 2.6, 2.6);
      }

      // Sunglasses
      else if (glasses > 7 && glasses <= 10){
        stroke(0);
        strokeWeight(0.3);
        fill('white');
        ellipse(-2.6, -2.4, 3, 2.6);
        ellipse(1, -2.4, 3, 2.6);
        noStroke();
        fill('black');
        ellipse(-2.6, -2.37, 2.4, 2);
        ellipse(1, -2.37, 2.4, 2);
        stroke(0);
        strokeWeight(0.3);
        line(-1.1, -2.5, -0.65, -2.5);
    }
    pop();
  }

  /* set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
    this.face = int(map(settings[0], 0, 100, 1, 5));
    this.spot = int(map(settings[1], 0, 100, 0, 10));
    this.shape = map(settings[2],0,100,1,2);
   
  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    let settings = new Array(2);
    settings[0] = map(this.face, 1, 5, 0, 100);
    settings[1] = map(this.spot, 0, 10, 0, 100);
    settings[82] = map(this.shape, 1, 2, 0, 100);
    
    return settings;
  }
}

// given an array of [x,y] points, return the average
function average_point(list) {
  var sum_x = 0;
  var sum_y = 0;
  var num_points = 0;
  for(var i=0; i<list.length; i++) {
    sum_x += list[i][0];
    sum_y += list[i][1];
    num_points += 1; 
  }
  return [sum_x / num_points, sum_y / num_points];
}

luo_training_values.json

{
  "000001": [
    0,
    100,
    50
  ],
  "000002": [
    0,
    100
  ],
  "000005": [
    20,
    100
  ],
  "000006": [
    50,
    100,
    50
  ],
  "000007": [
    25,
    0
  ],
  "000009": [
    25,
    100
  ],
  "000010": [
    25,
    100,
    50
  ],
  "000013": [
    25,
    0
  ],
  "000014": [
    75,
    100
  ],
  "000015": [
    25,
    0,
    50
  ],
  "000016": [
    25,
    0
  ],
  "000018": [
    75,
    100,
    50
  ],
  "000020": [
    25,
    0
  ],
  "000023": [
    55,
    0
  ],
  "000025": [
    10,
    0,
    50
  ],
  "000028": [
    25,
    100
  ],
  "000029": [
    75,
    100,
    50
  ],
  "000030": [
    25,
    0
  ],
  "000031": [
    80,
    100,
    50
  ],
  "000032": [
    90,
    0
  ],
  "000035": [
    40,
    100
  ],
  "000037": [
    50,
    0
  ],
  "000038": [
    0,
    70,
    50
  ],
  "000040": [
    0,
    90
  ],
  "000041": [
    30,
    50,
    50
  ],
  "000042": [
    0,
    100,
    50
  ],
  "000043": [
    10,
    100,
    50
  ],
  "000044": [
    50,
    100
  ],
  "000045": [
    20,
    100
  ],
  "000047": [
    50,
    100,
    50
  ],
  "000048": [
    20,
    0,
    50
  ],
  "000050": [
    20,
    0
  ],
  "000051": [
    0,
    20
  ],
  "000052": [
    60,
    50,
    50
  ],
  "000054": [
    0,
    100
  ],
  "000055": [
    90,
    40
  ],
  "000056": [
    50,
    100
  ],
  "000058": [
    20,
    100,
    50
  ],
  "000060": [
    100,
    0
  ],
  "000064": [
    0,
    0
  ],
  "000065": [
    50,
    0
  ],
  "000068": [
    0,
    30,
    50
  ],
  "000069": [
    20,
    0,
    50
  ],
  "000071": [
    50,
    100
  ],
  "000073": [
    40,
    100,
    50
  ],
  "000076": [
    50,
    0,
    50
  ],
  "000077": [
    0,
    100
  ],
  "000078": [
    50,
    100
  ],
  "000079": [
    0,
    0
  ],
  "000080": [
    0,
    0
  ],
  "000081": [
    0,
    0
  ],
  "000083": [
    0,
    100
  ],
  "000085": [
    0,
    100
  ],
  "000086": [
    25,
    100
  ],
  "000088": [
    0,
    100
  ],
  "000091": [
    0,
    0
  ],
  "000092": [
    0,
    100
  ],
  "000096": [
    0,
    100
  ],
  "000097": [
    0,
    100
  ],
  "000099": [
    25,
    100
  ],
  "000100": [
    0,
    100
  ],
  "000103": [
    25,
    100
  ],
  "000104": [
    25,
    0
  ],
  "000106": [
    25,
    0
  ],
  "000108": [
    25,
    100
  ],
  "000109": [
    0,
    0
  ],
  "000110": [
    25,
    100
  ],
  "000111": [
    50,
    100
  ],
  "000114": [
    0,
    0
  ],
  "000115": [
    25,
    0
  ],
  "000116": [
    0,
    0
  ],
  "000117": [
    100,
    100
  ],
  "000118": [
    25,
    100
  ],
  "000121": [
    25,
    100
  ],
  "000122": [
    0,
    100
  ],
  "000125": [
    0,
    0
  ],
  "000126": [
    0,
    100
  ],
  "000129": [
    0,
    0
  ],
  "000131": [
    25,
    100
  ],
  "000132": [
    50,
    100
  ],
  "000133": [
    0,
    100
  ],
  "000134": [
    100,
    0
  ],
  "000135": [
    75,
    0
  ],
  "000137": [
    0,
    0
  ],
  "000140": [
    0,
    100
  ],
  "000142": [
    0,
    100
  ],
  "000143": [
    0,
    0
  ],
  "000145": [
    0,
    100
  ],
  "000146": [
    0,
    100
  ],
  "000147": [
    0,
    100
  ],
  "000148": [
    0,
    100
  ],
  "000150": [
    0,
    0
  ],
  "000151": [
    50,
    70
  ],
  "000152": [
    0,
    0
  ],
  "000153": [
    0,
    0
  ],
  "000155": [
    25,
    100
  ],
  "000156": [
    0,
    100
  ],
  "000157": [
    0,
    100
  ],
  "000160": [
    0,
    0
  ],
  "000161": [
    0,
    90
  ]
}

mckendry_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */

// remove this or set to false to enable full program (load will be slower)
// var DEBUG_MODE = false;
// this can be used to set the number of sliders to show
// var NUM_SLIDERS = 9;

// example of a global function
// given a segment, this returns the average point [x, y]
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];
}

// This where you define your own face object
function McKendryFace() {
//colours:
  this.purple = color(210, 160, 200, 200);
  this.pink = color(250, 225, 250, 200);
  this.light_red = color(240, 180, 170, 200);
  this.dark_red = color(185, 120, 115, 200);
  this.orange = color(240, 190, 145, 200);
  this.yellow = color(255, 250, 210, 200);
  this.light_green = color(230, 250, 220, 200);
  this.dark_green = color(150, 175, 135, 200);
  this.dark_blue = color(135, 135, 180, 200);
  this.light_blue = color(200, 230, 245, 200);
  this.other_turq = color(195, 245, 225, 200);
//positions/states:
  this.mouthX = 0;
  this.mouthY = 0;
  this.male_female = 1;
  this.chinX = 0;
  this.chinY = 0;
  this.shapeScale = 1;
  this.eye_height = .25;
  this.faceColor = 1;
  this.eyesX = 0;
  this.mouth_OpenClose = 2

this.show_points = function(segment) {
    for (let i = 0; i < segment.length; i++) {
      let px = segment[i][0];
      let py = segment[i][1];
      var number = i.toString();
      textAlign(CENTER, CENTER);
      textSize(0.2);
      fill(0);
      text(number, px, py, 0.1);
    }
  }

  // example of a function *inside* the face object.
  // this draws a segment, and do_loop will connect the ends if true
  this.draw_segment = function(segment, do_loop) {
    for (let i = 0; i < segment.length; i++) {
      let px = segment[i][0];
      let py = segment[i][1];
      ellipse(px, py, 0.1);
      if (i < segment.length - 1) {
        let nx = segment[i + 1][0];
        let ny = segment[i + 1][1];
        line(px, py, nx, ny);
      } else if (do_loop) {
        let nx = segment[0][0];
        let ny = segment[0][1];
        line(px, py, nx, ny);
      }
    }
  };

  /*
   * Draw the face with position lists that include:
   *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
   *    bottom_lip, top_lip, nose_tip, nose_bridge,
   */
  this.draw = function(positions) {
    //this array takes the colours called in the variables above, then I get a random colour from the array to be the fill for the background shapes
    this.colourFillArray = [this.purple, this.pink, this.light_red, this.dark_red, this.orange, this.yellow, this.light_green, this.dark_green, this.dark_blue, this.light_blue, this.other_turq];
    this.colourFill = random(this.colourFillArray);

//If statement decides if the face is male or female, dictated by slider5.
if (this.male_female < 2) {
      //FEMALE SHAPES
      fill(this.colourFill);
      noStroke();
      push();
      //scales shapes to size of the face
      scale(this.shapeScale);
      ellipse(0, 0, 2, 3);
      ellipse(0, .5, 3.75, 3.25);
      ellipse(-1.25, -1.5, 2, 4);
      ellipse(.75, -2.5, 2.5, 2);
      ellipse(-.5, 1.75, 2.5, 2);
      ellipse(1, -1.5, 2, 2.5);
      ellipse(-.75, -2.5, 2, 3);
//HAIRLINE
      noFill();
      stroke(0);
      strokeWeight(0.035);
      beginShape();
      vertex(-.3, -2.9);
      quadraticVertex(1.5, -4, 1.9, -2.5);
      endShape();
      pop();

//FEMALE MOUTH
      //if-else statement decides if the mouth is closed (only a line, no fill) or open (area of mouth filled)
      if (this.mouth_OpenClose == 1) {
        stroke(0);
        noFill();
        strokeWeight(0.03);
        beginShape();
        vertex(positions.bottom_lip[7][0], positions.bottom_lip[7][1]);
        quadraticVertex(positions.bottom_lip[3][0] + this.mouthX, positions.bottom_lip[3][1] + this.mouthY, positions.bottom_lip[0][0], positions.bottom_lip[0][1]);
        endShape();
      } else  {
        stroke(0);
        fill(200, 200, 200, 100);
        strokeWeight(0.03);
        beginShape();
        vertex(positions.bottom_lip[7][0], positions.bottom_lip[7][1]);
        quadraticVertex(positions.bottom_lip[3][0] + this.mouthX, positions.bottom_lip[3][1] + this.mouthY, positions.bottom_lip[0][0], positions.bottom_lip[0][1]);
        endShape();
        strokeWeight(0.01);
        line(positions.bottom_lip[7][0], positions.bottom_lip[7][1], positions.bottom_lip[0][0], positions.bottom_lip[0][1]);
      }

//FEMALE JAWLINE
      stroke(0);
      strokeWeight(0.035);
      //if statement decides what side of the jaw the face is on, using the tip of the nose as a center point to figure out if the person is looking left or right
      if (positions.nose_tip[2][0] < 0) {
        beginShape();
        noFill();
        vertex(positions.chin[8][0], positions.chin[8][1])
        quadraticVertex(positions.chin[12][0] + this.chinX, positions.chin[12][1] + this.chinY, positions.chin[16][0], positions.chin[16][1])
        endShape();
      } else {
        beginShape();
        noFill();
        vertex(positions.chin[0][0], positions.chin[0][1])
        quadraticVertex(positions.chin[4][0] + this.chinX, positions.chin[5][1] + this.chinY, positions.chin[8][0], positions.chin[8][1])
        endShape();
      }

//FEMALE EYEBROWS
      noFill();
      stroke(0);
      strokeWeight(0.02);
      beginShape();
      vertex(positions.left_eyebrow[1][0], positions.left_eyebrow[1][1]);
      quadraticVertex(positions.nose_bridge[1][0], positions.nose_bridge[1][1] - 1.2, positions.right_eyebrow[3][0], positions.right_eyebrow[3][1])
      endShape();

//FEMALE NOSE
      noFill();
      stroke(0);
      strokeWeight(0.03);
      //same as the jawline if statement- decides which way the nose should be pointing
      if (positions.nose_tip[2][0] < 0) {
        beginShape();
        vertex(positions.nose_bridge[1][0], positions.nose_bridge[1][1])
        quadraticVertex(positions.nose_tip[1][0], positions.nose_tip[1][1] + .5, positions.nose_tip[4][0], positions.nose_tip[4][1])
        endShape();
      } else {
        beginShape();
        vertex(positions.nose_bridge[1][0], positions.nose_bridge[1][1])
        quadraticVertex(positions.nose_tip[3][0], positions.nose_tip[3][1] + .5, positions.nose_tip[1][0], positions.nose_tip[1][1])
        endShape();
      }
    } else {
////MALE FACE////

//MALE SHAPES
      this.colourFillArray = [this.purple, this.pink, this.light_red, this.dark_red, this.orange, this.yellow, this.light_green, this.dark_green, this.dark_blue, this.light_blue, this.other_turq];
      this.colourFill = random(this.colourFillArray);
      noStroke();
      fill(this.colourFill);
      push();
      //scales shapes to size of the face
      scale(this.shapeScale);
      rect(.75, -2.25, 2, 3.5);
      rect(-2.25, -3.25, 2.5, 1.5);
      rect(-.75, -2, 2, 2);
      rect(-1.75, -1.25, 3, 3.5);
      rect(-1.25, -2.75, 1, 5.5);
      rect(0, -3.5, 1.5, 1.5);
//HAIRLINE
      stroke(0);
      strokeWeight(0.035);
      line(-1.75, -1.75, -1.75, -2.9);
      line(-1.9, -2.75, 1.5, -2.75);
      noStroke();
      pop();

//MALE MOUTH
      if (this.mouth_OpenClose == 1) {
        stroke(0);
        noFill();
        strokeWeight(0.03);
        line(positions.bottom_lip[7][0], positions.bottom_lip[7][1], positions.bottom_lip[3][0] + this.mouthX, positions.bottom_lip[3][1] + this.mouthY);
        line(positions.bottom_lip[3][0] + this.mouthX, positions.bottom_lip[3][1] + this.mouthY, positions.bottom_lip[0][0], positions.bottom_lip[0][1]);
      } else  {
        stroke(0);
        fill(200, 200, 200, 100);
        stroke(0);
        strokeWeight(0.02);
        triangle(positions.bottom_lip[7][0], positions.bottom_lip[7][1], positions.bottom_lip[3][0] + this.mouthX, positions.bottom_lip[3][1] + this.mouthY, positions.bottom_lip[0][0], positions.bottom_lip[0][1]);
        strokeWeight(0.03);
        line(positions.bottom_lip[7][0], positions.bottom_lip[7][1], positions.bottom_lip[3][0] + this.mouthX, positions.bottom_lip[3][1] + this.mouthY);
        line(positions.bottom_lip[3][0] + this.mouthX, positions.bottom_lip[3][1] + this.mouthY, positions.bottom_lip[0][0], positions.bottom_lip[0][1]);
      }

//MALE JAWLINE
      stroke(0);
      strokeWeight(0.035);
      if (positions.nose_tip[2][0] < 0) {
        line(positions.chin[8][0], positions.chin[8][1], positions.chin[12][0] + this.chinX, positions.chin[12][1] + this.chinY);
        line(positions.chin[12][0] + this.chinX, positions.chin[12][1] + this.chinY, positions.chin[16][0], positions.chin[16][1]);
      } else {
        line(positions.chin[0][0], positions.chin[0][1], positions.chin[4][0] + this.chinX, positions.chin[4][1] + this.chinY);
        line(positions.chin[4][0] + this.chinX, positions.chin[4][1] + this.chinY, positions.chin[8][0], positions.chin[8][1]);
      }

//MALE EYEBROWS
      stroke(0);
      strokeWeight(0.02);
      line(positions.left_eyebrow[1][0], positions.left_eyebrow[1][1], positions.right_eyebrow[3][0], positions.right_eyebrow[3][1]);

//MALE NOSE
      noFill();
      stroke(0);
      strokeWeight(0.03);
      if (positions.nose_tip[2][0] < 0) {
        line(positions.nose_bridge[1][0], positions.nose_bridge[1][1], positions.nose_tip[1][0], positions.nose_tip[1][1]);
        line(positions.nose_tip[1][0], positions.nose_tip[1][1], positions.nose_tip[3][0], positions.nose_tip[3][1])
      } else {
        line(positions.nose_bridge[1][0], positions.nose_bridge[1][1], positions.nose_tip[3][0], positions.nose_tip[3][1]);
        line(positions.nose_tip[3][0], positions.nose_tip[3][1], positions.nose_tip[1][0], positions.nose_tip[1][1])
      }
    }

//EYES//
    fill(240, 240, 240, 100);
    stroke(0)
    strokeWeight(0.025);
    if (positions.nose_tip[2][0] < 0) {
      rect(positions.left_eye[0][0] + this.eyesX, positions.left_eye[0][1], 1, this.eye_height)
      ellipse(positions.right_eye[4][0] + this.eyesX, positions.right_eye[4][1], 1.25, .25 + this.eye_height);
    } else {
      rect(positions.left_eye[0][0] + this.eyesX, positions.left_eye[0][1], 1, this.eye_height)
      ellipse(positions.right_eye[4][0] + this.eyesX, positions.right_eye[4][1], 1.25, .25 + this.eye_height);
    }
}

/* set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
    this.mouthX = map(settings[0], 0, 100, -1.25, 1.25);
    this.mouthY = map(settings[1], 0, 100, -1.25, 1.25);
    this.eyesX = map(settings[2], 0, 100, -1, 1);
    this.eye_height = map(settings[3], 0, 100, 0, .75);
    this.chinX = map(settings[4], 0, 100, -1.5, 1.5);
    this.chinY = map(settings[5], 0, 100, -1.5, 1.5);
    this.mouth_OpenClose = int(map(settings[6], 0, 100, 1, 3));
    this.shapeScale = map(settings[7], 0, 100, .5, 1.25);
    this.male_female = map(settings[8], 0, 100, 1, 3);
  }
/* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    let settings = new Array(3);
    settings[0] = map(this.mouthX, -1.25, 1.25, 0, 100);
    settings[1] = map(this.mouthY, -1.25, 1.25, 0, 100);
    settings[2] = map(this.eyesX, -1, 1, 0, 100);
    settings[3] = map(this.eye_height, 0, .75, 0, 100);
    settings[4] = map(this.chinX, -1.5, 1.5, 0, 100);
    settings[5] = map(this.chinY, -1.5, 1.5, 0, 100);
    settings[6] = int(map(this.mouth_OpenClose, 1, 3, 0, 100));
    settings[7] = map(this.shapeScale, .5, 1.25, 0, 100);
    settings[8] = map(this.male_female, 1, 3, 0, 100);
    return settings;
  }
}

mckendry_training_values.json

{
  "000001": [
    48,
    40,
    34,
    22,
    57,
    50,
    52,
    49,
    100
  ],
  "000002": [
    34,
    66,
    26,
    50,
    54,
    68,
    100,
    34.99999999999999,
    0
  ],
  "000005": [
    46.99999999999999,
    33,
    44,
    28.999999999999996,
    69,
    82,
    100,
    38.99999999999999,
    17.999999999999993
  ],
  "000006": [
    61,
    40,
    54,
    34.99999999999999,
    54,
    69,
    100,
    30,
    37.999999999999986
  ],
  "000007": [
    46.00000000000001,
    43,
    46,
    51,
    44,
    69,
    0,
    54,
    100
  ],
  "000009": [
    51,
    52,
    33,
    47,
    36.99999999999999,
    51,
    100,
    66,
    0
  ],
  "000010": [
    50,
    57.99999999999999,
    45,
    22,
    51,
    66,
    60,
    40.00000000000001,
    27
  ],
  "000013": [
    50,
    44.00000000000001,
    55.00000000000001,
    23,
    54,
    62,
    100,
    73.99999999999999,
    100
  ],
  "000014": [
    48,
    53,
    41,
    40.00000000000001,
    63,
    68,
    0,
    52.99999999999999,
    47
  ],
  "000015": [
    56.00000000000001,
    34,
    46,
    7.000000000000001,
    64,
    71,
    100,
    62,
    100
  ],
  "000016": [
    46.99999999999999,
    45,
    61,
    27,
    57.99999999999999,
    53,
    0,
    56.99999999999999,
    100
  ],
  "000018": [
    49.00000000000001,
    53,
    40,
    25,
    40.00000000000001,
    56.99999999999999,
    100,
    38.00000000000001,
    30.000000000000004
  ],
  "000020": [
    51,
    32,
    45,
    9.000000000000002,
    53,
    47,
    100,
    46,
    100
  ],
  "000023": [
    49.00000000000001,
    45,
    48,
    16,
    56.00000000000001,
    53,
    100,
    51.000000000000014,
    100
  ],
  "000025": [
    41,
    41,
    45,
    23,
    64,
    47,
    0,
    62,
    100
  ],
  "000028": [
    50,
    64,
    46,
    23,
    41,
    87,
    100,
    51.000000000000014,
    44.99999999999999
  ],
  "000029": [
    50,
    49.00000000000001,
    44,
    31,
    41,
    48,
    100,
    54,
    44.99999999999999
  ],
  "000030": [
    57.99999999999999,
    38,
    37,
    34.99999999999999,
    72.00000000000001,
    72.00000000000001,
    0,
    61,
    100
  ],
  "000031": [
    45,
    56.99999999999999,
    37,
    16,
    38.99999999999999,
    60,
    100,
    54,
    0
  ],
  "000032": [
    48,
    27,
    41,
    36.99999999999999,
    52,
    62,
    100,
    61,
    100
  ],
  "000035": [
    48,
    42.00000000000001,
    41,
    38.99999999999999,
    40.00000000000001,
    46,
    100,
    47,
    0
  ],
  "000037": [
    56.00000000000001,
    34,
    66,
    28.000000000000004,
    54,
    52,
    0,
    61,
    100
  ],
  "000038": [
    46.99999999999999,
    44.00000000000001,
    45,
    23,
    46,
    47,
    100,
    69,
    100
  ],
  "000040": [
    53,
    55.00000000000001,
    49,
    30,
    31,
    59,
    0,
    62,
    42.99999999999999
  ],
  "000041": [
    42.00000000000001,
    41,
    25,
    21,
    56.99999999999999,
    48,
    100,
    65,
    100
  ],
  "000042": [
    50,
    60,
    40,
    36.00000000000001,
    43,
    57.99999999999999,
    0,
    46,
    0
  ],
  "000043": [
    46.99999999999999,
    63,
    40,
    33,
    36.99999999999999,
    53,
    100,
    46,
    0
  ],
  "000044": [
    49.00000000000001,
    51,
    43,
    25,
    57.99999999999999,
    50,
    0,
    36.99999999999999,
    0
  ],
  "000045": [
    46.99999999999999,
    63,
    43,
    17,
    69.99999999999999,
    52,
    100,
    36.99999999999999,
    0
  ],
  "000047": [
    46.99999999999999,
    56.99999999999999,
    43,
    12,
    69.99999999999999,
    64,
    100,
    45,
    0
  ],
  "000048": [
    60,
    40,
    55.00000000000001,
    10.000000000000002,
    63,
    72.00000000000001,
    0,
    38.99999999999999,
    100
  ],
  "000050": [
    54,
    43,
    55.00000000000001,
    21,
    77.99999999999999,
    77.99999999999999,
    100,
    47,
    100
  ],
  "000051": [
    64,
    46.99999999999999,
    48,
    41,
    41,
    72.00000000000001,
    0,
    82,
    100
  ],
  "000052": [
    42.00000000000001,
    45,
    40,
    30,
    59,
    57.99999999999999,
    0,
    64,
    100
  ],
  "000054": [
    45,
    64,
    44,
    16,
    59,
    67,
    100,
    44.000000000000014,
    0
  ],
  "000055": [
    48,
    42.00000000000001,
    42,
    18.000000000000004,
    53,
    55.00000000000001,
    0,
    60,
    100
  ],
  "000056": [
    38,
    48,
    35,
    14.000000000000002,
    67,
    77,
    0,
    36.99999999999999,
    0
  ],
  "000058": [
    56.99999999999999,
    51,
    35,
    26,
    41,
    53,
    20,
    36.99999999999999,
    0
  ],
  "000060": [
    46.00000000000001,
    45,
    12,
    16,
    61,
    34,
    100,
    34,
    100
  ],
  "000064": [
    46.00000000000001,
    48,
    44,
    14.000000000000002,
    53,
    60,
    0,
    47,
    100
  ],
  "000065": [
    46.99999999999999,
    45,
    44,
    21,
    62,
    56.99999999999999,
    100,
    55.000000000000014,
    100
  ],
  "000068": [
    51,
    49.00000000000001,
    44,
    24,
    59,
    53,
    100,
    46,
    100
  ],
  "000069": [
    50,
    37,
    43,
    36.00000000000001,
    43,
    54,
    100,
    56.99999999999999,
    100
  ],
  "000071": [
    46.99999999999999,
    53,
    43,
    36.00000000000001,
    64,
    73,
    100,
    43,
    0
  ],
  "000073": [
    38,
    46.99999999999999,
    14.000000000000002,
    21,
    41,
    85,
    100,
    48.99999999999999,
    0
  ],
  "000076": [
    45,
    49.00000000000001,
    34,
    14.000000000000002,
    50,
    61,
    0,
    48.99999999999999,
    100
  ],
  "000077": [
    49.00000000000001,
    46.00000000000001,
    48,
    28.999999999999996,
    69.99999999999999,
    64,
    0,
    38.00000000000001,
    0
  ],
  "000078": [
    42.00000000000001,
    44.00000000000001,
    40,
    30,
    46,
    60,
    0,
    44.000000000000014,
    0
  ],
  "000079": [
    46.00000000000001,
    45,
    48,
    30,
    30,
    84,
    0,
    56.99999999999999,
    100
  ],
  "000080": [
    44.00000000000001,
    43,
    37,
    22,
    42,
    28.999999999999996,
    0,
    56.00000000000001,
    100
  ],
  "000081": [
    52,
    48,
    52,
    22,
    43,
    54,
    100,
    61,
    100
  ],
  "000083": [
    48,
    56.00000000000001,
    43,
    21,
    56.00000000000001,
    82,
    0,
    50,
    0
  ],
  "000085": [
    41,
    55.00000000000001,
    43,
    46,
    65,
    73,
    0,
    50,
    0
  ],
  "000086": [
    30,
    33,
    37,
    40.00000000000001,
    34.99999999999999,
    52,
    0,
    55.000000000000014,
    0
  ],
  "000088": [
    40,
    42.00000000000001,
    50,
    41,
    73,
    61,
    100,
    44.000000000000014,
    0
  ],
  "000091": [
    44.00000000000001,
    41,
    41,
    13,
    56.99999999999999,
    66,
    0,
    55.000000000000014,
    100
  ],
  "000092": [
    39,
    53,
    41,
    22,
    66,
    69,
    0,
    45,
    0
  ],
  "000096": [
    54,
    32,
    47,
    28.000000000000004,
    38.99999999999999,
    66,
    0,
    30.99999999999999,
    0
  ],
  "000097": [
    46.00000000000001,
    31,
    42,
    25,
    68,
    51,
    100,
    36.99999999999999,
    0
  ],
  "000099": [
    53,
    55.00000000000001,
    42,
    16,
    52,
    79,
    100,
    46,
    0
  ],
  "000100": [
    63,
    48,
    56.99999999999999,
    21,
    38.00000000000001,
    46,
    30,
    43,
    0
  ],
  "000103": [
    41,
    38,
    44,
    23,
    43,
    69.99999999999999,
    40,
    34,
    0
  ],
  "000104": [
    55.00000000000001,
    46.00000000000001,
    48,
    16,
    31,
    80.00000000000001,
    100,
    46,
    100
  ],
  "000106": [
    61,
    55.00000000000001,
    43,
    26,
    33,
    42,
    100,
    47,
    0
  ],
  "000108": [
    43,
    55.00000000000001,
    43,
    36.99999999999999,
    55.00000000000001,
    63,
    100,
    40.00000000000001,
    0
  ],
  "000109": [
    49.00000000000001,
    38,
    43,
    24,
    56.99999999999999,
    56.99999999999999,
    100,
    55.000000000000014,
    100
  ],
  "000110": [
    46.00000000000001,
    50,
    43,
    23,
    38.00000000000001,
    55.00000000000001,
    100,
    54,
    49
  ],
  "000111": [
    36,
    54,
    48,
    13,
    61,
    57.99999999999999,
    100,
    48,
    0
  ],
  "000114": [
    50,
    44.00000000000001,
    48,
    46,
    56.00000000000001,
    56.99999999999999,
    100,
    55.000000000000014,
    100
  ],
  "000115": [
    50,
    42.00000000000001,
    42,
    31,
    61,
    53,
    10,
    51.000000000000014,
    100
  ],
  "000116": [
    46.00000000000001,
    44.00000000000001,
    42,
    27,
    50,
    53,
    100,
    50,
    100
  ],
  "000117": [
    57.99999999999999,
    46.00000000000001,
    42,
    34.99999999999999,
    50,
    77,
    100,
    50,
    0
  ],
  "000118": [
    65,
    46.99999999999999,
    33,
    38.99999999999999,
    44,
    60,
    40,
    51.000000000000014,
    0
  ],
  "000121": [
    46.00000000000001,
    48,
    43,
    34.99999999999999,
    33,
    64,
    50,
    48.99999999999999,
    0
  ],
  "000122": [
    46.00000000000001,
    53,
    43,
    36.99999999999999,
    69,
    69.99999999999999,
    100,
    40.00000000000001,
    0
  ],
  "000125": [
    57.99999999999999,
    41,
    46,
    28.000000000000004,
    55.00000000000001,
    53,
    0,
    61,
    100
  ],
  "000126": [
    38,
    46.00000000000001,
    54,
    28.000000000000004,
    66,
    69,
    100,
    48,
    0
  ],
  "000129": [
    44.00000000000001,
    46.00000000000001,
    46,
    18.000000000000004,
    59,
    55.00000000000001,
    100,
    48,
    100
  ],
  "000131": [
    34,
    50,
    66,
    25,
    69.99999999999999,
    75,
    100,
    36.99999999999999,
    0
  ],
  "000132": [
    46.99999999999999,
    56.00000000000001,
    40,
    17,
    63,
    48,
    100,
    36.99999999999999,
    0
  ],
  "000133": [
    48,
    55.00000000000001,
    45,
    25,
    36.00000000000001,
    54,
    100,
    46,
    0
  ],
  "000134": [
    41,
    39,
    18,
    14.000000000000002,
    53,
    64,
    100,
    51.000000000000014,
    100
  ],
  "000135": [
    53,
    42.00000000000001,
    56.99999999999999,
    17,
    49,
    46,
    0,
    50,
    100
  ],
  "000137": [
    51,
    36,
    65,
    10.000000000000002,
    46,
    54,
    100,
    33.00000000000001,
    100
  ],
  "000140": [
    61,
    37,
    48,
    38.99999999999999,
    46,
    60,
    0,
    34.99999999999999,
    0
  ],
  "000142": [
    61,
    31,
    48,
    19.000000000000004,
    61,
    72.00000000000001,
    100,
    43,
    0
  ],
  "000143": [
    61,
    41,
    41,
    21,
    59,
    63,
    100,
    55.000000000000014,
    100
  ],
  "000145": [
    55.00000000000001,
    59,
    49,
    10.000000000000002,
    40.00000000000001,
    61,
    100,
    46,
    0
  ],
  "000146": [
    68,
    46.99999999999999,
    66,
    24,
    30,
    71,
    100,
    41,
    0
  ],
  "000147": [
    62,
    49.00000000000001,
    51,
    36.99999999999999,
    38.99999999999999,
    61,
    100,
    47,
    0
  ],
  "000148": [
    54,
    43,
    70,
    18.000000000000004,
    54,
    71,
    100,
    40.00000000000001,
    0
  ],
  "000150": [
    52,
    43,
    48,
    24,
    50,
    38.00000000000001,
    10,
    48,
    100
  ],
  "000151": [
    45,
    56.00000000000001,
    43,
    12,
    36.00000000000001,
    52,
    100,
    40.00000000000001,
    0
  ],
  "000152": [
    48,
    44.00000000000001,
    44,
    16,
    54,
    50,
    100,
    51.000000000000014,
    100
  ],
  "000153": [
    48,
    40,
    44,
    21,
    42,
    36.99999999999999,
    100,
    48,
    100
  ],
  "000155": [
    41,
    56.99999999999999,
    44,
    32,
    63,
    63,
    100,
    46,
    0
  ],
  "000156": [
    37,
    51,
    50,
    26,
    66,
    68,
    100,
    46,
    0
  ],
  "000157": [
    46.99999999999999,
    42.00000000000001,
    44,
    27,
    28.000000000000004,
    62,
    70,
    45,
    0
  ],
  "000160": [
    43,
    42.00000000000001,
    40,
    34.99999999999999,
    52,
    50,
    80,
    56.99999999999999,
    100
  ],
  "000161": [
    48,
    52,
    35,
    17,
    71,
    56.99999999999999,
    100,
    38.00000000000001,
    0
  ]
}

mcsweeney_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */

// remove this or set to false to enable full program (load will be slower)
// var DEBUG_MODE = true;

// this can be used to set the number of sliders to show
// var NUM_SLIDERS = 4;

// other variables can be in here too
// here's some examples for colors used
// const bg_color = [225, 206, 187];
// const fg_color = [151, 102, 52];
// const stroke_color = [95, 52, 8];



// example of a global function
// given a segment, this returns the average point [x, y]
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];
}

// This where you define your own face object
function McSweeneyFace() {


    //frameRate(1);
    // these are state variables for a face
    // (your variables should be different!)

    this.num_eyes = 2; // can be either 1 (cyclops) or 2 (two eyes)
    this.eye_shift = -1; // range is -10 to 10
    this.mouth_value = 4; // range is 0.5 to 8

    //variables between 0-100;
    this.jaw = 50;
    this.eyes = 50;
    this.cheek1 = 50;

    this.mouth = 50;
    this.cheek2 = 50;

    this.colour_picker = 80;
    this.horn_size = 50;
    this.jaw_ang = 50;
    this.eye_evil = 50;


    // example of a function *inside* the face object.
    // this draws a segment, and do_loop will connect the ends if true
    this.draw_segment = function(segment, do_loop) {
        for (let i = 0; i < segment.length; i++) {
            let px = segment[i][0];
            let py = segment[i][1];
            ellipse(px, py, 0.1);
            if (i < segment.length - 1) {
                let nx = segment[i + 1][0];
                let ny = segment[i + 1][1];
                line(px, py, nx, ny);
            } else if (do_loop) {
                let nx = segment[0][0];
                let ny = segment[0][1];
                line(px, py, nx, ny);
            }

        }
    };

    /*
     * Draw the face with position lists that include:
     *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
     *    bottom_lip, top_lip, nose_tip, nose_bridge, 
     */
    this.draw = function(positions) {

    // fill(255);
    // ellipse(0, 0, 4);
    // return;


        /*

            // draw segments of face using points
            fill(128);
            stroke(128);
            this.draw_segment(positions.chin);

            fill(100, 0, 100);
            stroke(100, 0, 100);
            this.draw_segment(positions.nose_bridge);
            this.draw_segment(positions.nose_tip);

            strokeWeight(0.03);

            fill(200, 0, 0);
            stroke(200, 0, 0);
            this.draw_segment(positions.top_lip);
            this.draw_segment(positions.bottom_lip);

            fill(255);
            stroke(255);

            let left_eye_pos = segment_average(positions.left_eye);
            let right_eye_pos = segment_average(positions.right_eye);   */


        //---------------------------------------------------------------------------
        //scale(4/10);

        let colour_pic = int(map(this.colour_picker, 0, 100, 1, 3))

        
        let colour = [];
        let strokeCol = [];



        if (colour_pic == 1) {
            colour = [165, 146, 126];
            strokeCol = [20];


        } else if (colour_pic == 2) {
            colour = [227, 218, 201];
            strokeCol = [150];
        } else if (colour_pic == 3) {
            colour = [222, 202, 176];
            strokeCol = [255];

        }




        // head

        let cheek = 5;
        let cheek_dist = 4;

        let cheek_out = 5.5;
        let cheek_height = map(this.cheek1, 0, 100, -1.5, -0.7, true);

        let cheek_end_x = 4;
        let cheek_end_y = 2;


        var jaw_width = map(this.jaw, 0, 100, 3, 5);
        var jaw_height = 3.5;


        var chin_width = 1.5;
        var chin_height = 6;

        let mouthweight = 0.1;
        let genstroke = 0.15;

        let eyeposL = segment_average(positions.left_eye);
        let eyeposR = segment_average(positions.right_eye);
        let eyesizeL = (positions.left_eye[3][0] - positions.left_eye[0][0]);
        let eyesizeR = (positions.right_eye[3][0] - positions.right_eye[0][0]);

        let eyesizeRV = ((positions.right_eye[2][1] - positions.right_eye[4][1])) * 3;
        let eyesizeLV = ((positions.right_eye[1][1] - positions.right_eye[5][1])) * 3;

      


        //fill(colour);

    

        stroke(strokeCol);

    //stroke(145,136,116);
    
    strokeCap(ROUND);
    smooth();
    strokeJoin(ROUND);
    strokeWeight(genstroke);

    //Crainium ------------------------------------------------------
    //Horns ------------------------------------------------------

        push();
        noFill();

        let nosl = positions.nose_bridge[0][1] - positions.nose_bridge[3][1];

        let hornpos = ((eyeposR[1] + eyeposL[1])/2) + (nosl)

        let horn_height =(map(this.horn_size, 0, 100, 0.75, 2));

        //Fill -----
        push();
        fill(strokeCol);
        stroke(strokeCol);

        strokeWeight(genstroke/3)

        triangle(positions.right_eyebrow[1][0],hornpos*1.1, positions.right_eyebrow[3][0],hornpos, 
            positions.chin[12][0]*0.95, hornpos + (nosl*horn_height ) );

                triangle(positions.left_eyebrow[1][0],hornpos, positions.left_eyebrow[3][0],hornpos*1.1, 
                positions.chin[4][0]*0.95, (hornpos + (nosl*horn_height)) );


        /*//if (horn_desc ==)
        fill(255,0,0);
        stroke(255,0,0);

                triangle(positions.right_eyebrow[1][0]*1.4,hornpos*1.9, positions.right_eyebrow[3][0],hornpos*1.8, 
            positions.chin[12][0]*0.95, hornpos + (nosl*horn_height ) );

                triangle(positions.left_eyebrow[1][0],hornpos*1.8, positions.left_eyebrow[3][0]*1.4,hornpos*1.9, 
                positions.chin[4][0]*0.95, (hornpos + (nosl*horn_height)) );
        */
        pop();




        //Top Horn --------
        noFill();

        


        beginShape();
        curveVertex(positions.right_eyebrow[3][0]*0.8, eyeposR[1]); //

        curveVertex(positions.right_eyebrow[3][0],hornpos);

        curveVertex(positions.chin[12][0], hornpos + (nosl*horn_height ));

        curveVertex(positions.chin[12][0]*1.5, hornpos + (nosl*horn_height)); //

        endShape();


        beginShape();
        curveVertex(positions.right_eyebrow[1][0]*0.8, eyeposR[1]); //


        curveVertex(positions.right_eyebrow[1][0],hornpos*1.1);
        curveVertex(positions.chin[12][0], hornpos + (nosl*horn_height));

        curveVertex(positions.chin[12][0]*2, hornpos + (nosl*horn_height)); //
        endShape();

        //Bottom horn ----

        beginShape();
        curveVertex(positions.right_eyebrow[1][0]*0.6,hornpos*1.5); //

        curveVertex(positions.right_eyebrow[1][0],hornpos*1.1);
        curveVertex(positions.right_eyebrow[3][0],hornpos);

        
        curveVertex(positions.right_eyebrow[3][0]*1.4,hornpos*1.4); //
        endShape();





        //Left 

        beginShape();
        curveVertex(positions.left_eyebrow[1][0]*0.8, eyeposL[1]); //

        curveVertex(positions.left_eyebrow[1][0],hornpos);
        curveVertex(positions.chin[4][0], hornpos + (nosl*horn_height));

        curveVertex(positions.chin[4][0]*1.5, hornpos + (nosl*horn_height)); //

        endShape();


        beginShape();
        curveVertex(positions.left_eyebrow[3][0]*0.8 , eyeposL[1]); //


        curveVertex(positions.left_eyebrow[3][0],hornpos*1.1);
        curveVertex(positions.chin[4][0], hornpos + (nosl*horn_height) );

        curveVertex(positions.chin[4][0]*2, hornpos + (nosl*horn_height)); //
        endShape();

        //Bottom horn ----

        beginShape();
        curveVertex(positions.left_eyebrow[1][0]*1.4,hornpos*1.4); //

        curveVertex(positions.left_eyebrow[1][0],hornpos);
        curveVertex(positions.left_eyebrow[3][0],hornpos*1.1);

        
        curveVertex(positions.left_eyebrow[3][0]*0.6,hornpos*1.5); //
        endShape();





        pop();
      //Chin





        //Chin


      

      push();

        let jaw_stroke = 0.3;
        strokeWeight(genstroke);
        noFill();

        let jawrightx = (positions.chin[12][0] * 1.2)
        let jawrighty = (positions.chin[12][1] * 1.1)

        let jawleftx = (positions.chin[4][0] * 1.2)
        let jawlefty = (positions.chin[4][1] * 1.1)

        let jaw_angle = int(map(this.jaw_ang, 0, 100, 1, 2));




        beginShape();
        curveVertex(jawrightx + 1 * jaw_angle, jawrighty * jaw_angle);
        curveVertex(jawrightx, jawrighty);
        curveVertex(positions.chin[9][0], positions.chin[8][1]);
        curveVertex(positions.chin[7][0], positions.chin[8][1]);
        curveVertex(jawleftx, jawlefty);
        curveVertex(jawleftx - 1* jaw_angle, jawlefty * jaw_angle);
        endShape();

        //Jaw Side Left ----

        beginShape();
        curveVertex(positions.chin[2][0] - 1, positions.chin[2][1] - 1);

        curveVertex(positions.chin[2][0], positions.chin[2][1]);

        curveVertex(jawleftx, jawlefty);

        curveVertex(jawleftx - 1, jawlefty + 1);
        endShape();

        //Jaw Side Right ----

        beginShape();
        curveVertex(positions.chin[14][0] + 1, positions.chin[14][1] - 1);

        curveVertex(positions.chin[14][0], positions.chin[14][1]);

        curveVertex(jawrightx, jawrighty);

        curveVertex(jawrightx + 1, jawrighty + 1);
        endShape();




      pop();




        //Cheeks-------------------------



        strokeWeight(genstroke);
        noFill();

        let cheekinnerY = (positions.chin[14][1] - positions.chin[15][1]) + positions.chin[15][1]
        let cheekinnerX = (positions.chin[14][0] - (positions.chin[14][0] - positions.chin[12][0]));


        beginShape();
        curveVertex(positions.chin[16][0] - 1, positions.chin[16][1] - 1);
        curveVertex(positions.chin[16][0] * 0.9, positions.chin[16][1]);
        curveVertex(positions.chin[15][0] * 1.1, positions.chin[15][1]);
        curveVertex(positions.chin[14][0] * 1.05, positions.chin[14][1]);
        curveVertex(cheekinnerX, cheekinnerY);
        curveVertex(cheekinnerX - 1, cheekinnerY + 0.5);

        endShape();


        let cheekinnerLY = (positions.chin[14][1] - positions.chin[1][1]) + positions.chin[1][1]
        let cheekinnerLX = (positions.chin[2][0] - (positions.chin[2][0] - positions.chin[4][0]));

        beginShape();
        curveVertex(positions.chin[0][0] + 1, positions.chin[0][1] - 1);
        curveVertex(positions.chin[0][0] * 0.9, positions.chin[0][1]);
        curveVertex(positions.chin[1][0] * 1.1, positions.chin[1][1]);
        curveVertex(positions.chin[2][0] * 1.05, positions.chin[2][1]);
        curveVertex(cheekinnerLX, cheekinnerLY);
        curveVertex(cheekinnerLX + 1, cheekinnerLY + 0.5);

        endShape();
    
    
    



        //Eyes-----------------------------------------------

    push();

        let eye_evil2 = map(this.eye_evil,0,100,0,3);

        let smalleyeS = 4;
      fill(200/eye_evil2,0,0);
      strokeWeight(genstroke);
      stroke('black');
      
      ellipse(eyeposR[0],eyeposR[1], eyesizeR, eyesizeRV);
      ellipse(eyeposL[0],eyeposL[1], eyesizeL, eyesizeLV);

      noStroke();
      fill(255,33*eye_evil2);


      ellipse(eyeposR[0],eyeposR[1], eyesizeR/smalleyeS, eyesizeRV/smalleyeS);
      ellipse(eyeposL[0],eyeposL[1], eyesizeL/smalleyeS, eyesizeLV/smalleyeS);

    pop();




        //mouth ------------------------------

              let mouthcurveRy = positions.bottom_lip[0][1] - (positions.bottom_lip[10][1] - positions.bottom_lip[0][1])*3
      let mouthcurveLy = positions.bottom_lip[6][1] - (positions.bottom_lip[8][1] - positions.bottom_lip[6][1])*3


        let mouthfracLX = (positions.bottom_lip[2][0] + positions.top_lip[4][0]) / 2;
        let mouthfracRX = (positions.bottom_lip[4][0] + positions.top_lip[2][0]) / 2;

        let mouthfracRX2 = (positions.bottom_lip[6][0] + mouthfracRX) / 2
        let mouthfracLX2 = (positions.bottom_lip[0][0] + mouthfracLX) / 2

              let mouthheight = (positions.bottom_lip[3][1] - positions.top_lip[3][1])/2;
      let mouthcenterheight = positions.bottom_lip[9][1] - ((positions.bottom_lip[9][1] - positions.top_lip[9][1])/2);

        push();

        noFill();

      let check = 6;
    translate(0,mouthweight*1/3)
      stroke(200,0,0)

       
      strokeWeight(mouthweight)
      


        beginShape();
        curveVertex(positions.bottom_lip[0][0] + 0.5, mouthcurveRy);
        curveVertex(positions.bottom_lip[0][0], positions.bottom_lip[0][1]);
        curveVertex(positions.bottom_lip[6][0], positions.bottom_lip[6][1]);
        curveVertex(positions.bottom_lip[6][0] - 0.5, mouthcurveLy);
        endShape();

    line(mouthfracRX,mouthcenterheight-mouthheight, mouthfracRX, mouthcenterheight+mouthheight);
      line(mouthfracRX2,mouthcenterheight-mouthheight, mouthfracRX2, mouthcenterheight+mouthheight);

      line(mouthfracLX,mouthcenterheight-mouthheight, mouthfracLX, mouthcenterheight+mouthheight);
      line(mouthfracLX2,mouthcenterheight-mouthheight, mouthfracLX2, mouthcenterheight+mouthheight);


      pop();





    //inner -----

      push();

      strokeWeight(mouthweight);
       stroke(0);


        beginShape();
        curveVertex(positions.bottom_lip[0][0]+0.5, mouthcurveRy);
          curveVertex(positions.bottom_lip[0][0],positions.bottom_lip[0][1]);
          curveVertex(positions.bottom_lip[6][0], positions.bottom_lip[6][1]);
        curveVertex(positions.bottom_lip[6][0]-0.5, mouthcurveLy);
      endShape();


      line(mouthfracRX,mouthcenterheight-mouthheight, mouthfracRX, mouthcenterheight+mouthheight);
      line(mouthfracRX2,mouthcenterheight-mouthheight, mouthfracRX2, mouthcenterheight+mouthheight);

      line(mouthfracLX,mouthcenterheight-mouthheight, mouthfracLX, mouthcenterheight+mouthheight);
      line(mouthfracLX2,mouthcenterheight-mouthheight, mouthfracLX2, mouthcenterheight+mouthheight);

      pop();



        //Nose -------------
        push();
        fill(colour);
        //fill(strokeCol);
        strokeWeight(genstroke);

        let nose_width = map(jaw_width, 3, 5, 0.5, 1);

        let nose_top = positions.nose_bridge[1][1] - positions.nose_bridge[0][1];

        triangle(positions.nose_bridge[0][0], positions.nose_bridge[1][1] - nose_top / 2, positions.nose_tip[0][0], positions.nose_tip[0][1], positions.nose_tip[4][0], positions.nose_tip[4][1])
        pop();








    }

    /* set internal properties based on list numbers 0-100 */
    this.setProperties = function(settings) {
        this.colour_picker = int(map(settings[0], 0, 100, 0, 100));
        this.horn_size = map(settings[1], 0, 100, 0, 100);
        this.jaw_ang = map(settings[2], 0, 100, 0, 100);
        this.eye_evil = map(settings[3], 0, 100, 0, 100);
    }

    /* get internal properties as list of numbers 0-100 */
    this.getProperties = function() {
        let settings = new Array(0);
        settings[0] = map(this.colour_picker, 0, 100, 0, 100);
        settings[1] = map(this.horn_size, 0,100, 0, 100);
        settings[2] = map(this.jaw_ang, 0, 100, 0, 100);
        settings[3] = map(this.eye_evil, 0, 100, 0, 100);
        return settings;
    }
}

mcsweeney_training_values.json

{
  "000001": [
    0,
    0,
    100,
    0
  ],
  "000002": [
    0,
    33,
    100,
    100
  ],
  "000005": [
    70,
    53,
    100,
    54
  ],
  "000006": [
    78,
    41,
    100,
    79
  ],
  "000007": [
    68,
    77,
    10,
    79
  ],
  "000009": [
    0,
    22,
    100,
    50
  ],
  "000010": [
    0,
    0,
    100,
    0
  ],
  "000013": [
    0,
    85,
    0,
    79
  ],
  "000014": [
    76,
    19,
    100,
    32
  ],
  "000015": [
    0,
    93,
    0,
    78
  ],
  "000016": [
    0,
    77,
    0,
    30
  ],
  "000018": [
    0,
    22,
    100,
    54
  ],
  "000020": [
    0,
    62,
    0,
    22
  ],
  "000023": [
    0,
    79,
    0,
    18
  ],
  "000025": [
    0,
    67,
    0,
    100
  ],
  "000028": [
    56.99999999999999,
    22,
    100,
    73
  ],
  "000029": [
    0,
    0,
    100,
    16
  ],
  "000030": [
    0,
    56.00000000000001,
    0,
    37
  ],
  "000031": [
    0,
    37,
    100,
    18
  ],
  "000032": [
    0,
    57.99999999999999,
    0,
    87
  ],
  "000035": [
    0,
    57.99999999999999,
    100,
    65
  ],
  "000037": [
    77,
    100,
    0,
    66
  ],
  "000038": [
    0,
    76,
    0,
    33
  ],
  "000040": [
    54,
    0,
    100,
    0
  ],
  "000041": [
    54,
    73,
    0,
    24
  ],
  "000042": [
    0,
    34,
    100,
    48
  ],
  "000043": [
    0,
    13,
    100,
    30
  ],
  "000044": [
    94,
    13,
    100,
    30
  ],
  "000045": [
    0,
    10,
    100,
    7.000000000000001
  ],
  "000047": [
    0,
    10,
    100,
    44
  ],
  "000048": [
    0,
    69,
    0,
    71
  ],
  "000050": [
    53,
    84,
    0,
    39
  ],
  "000051": [
    53,
    69,
    0,
    100
  ],
  "000052": [
    0,
    87,
    0,
    39
  ],
  "000054": [
    0,
    87,
    1,
    54
  ],
  "000055": [
    56.00000000000001,
    87,
    0,
    69
  ],
  "000056": [
    0,
    56.99999999999999,
    0,
    84
  ],
  "000058": [
    0,
    8,
    100,
    70
  ],
  "000060": [
    83,
    68,
    0,
    62
  ],
  "000064": [
    0,
    67,
    0,
    62
  ],
  "000065": [
    56.99999999999999,
    78,
    0,
    91
  ],
  "000068": [
    0,
    89,
    0,
    100
  ],
  "000069": [
    0,
    75,
    0,
    100
  ],
  "000071": [
    0,
    28.000000000000004,
    100,
    100
  ],
  "000073": [
    0,
    0,
    100,
    0
  ],
  "000076": [
    0,
    100,
    0,
    0
  ],
  "000077": [
    0,
    0,
    100,
    0
  ],
  "000078": [
    0,
    3,
    100,
    62
  ],
  "000079": [
    0,
    81,
    0,
    62
  ],
  "000080": [
    0,
    100,
    0,
    39
  ],
  "000081": [
    60,
    90,
    0,
    60
  ],
  "000083": [
    0,
    12,
    100,
    60
  ],
  "000085": [
    0,
    0,
    100,
    0
  ],
  "000086": [
    0,
    0,
    100,
    0
  ],
  "000088": [
    64,
    0,
    100,
    12
  ],
  "000091": [
    0,
    89,
    0,
    26
  ],
  "000092": [
    0,
    12,
    100,
    14.000000000000002
  ],
  "000096": [
    0,
    0,
    100,
    26
  ],
  "000097": [
    0,
    0,
    100,
    0
  ],
  "000099": [
    0,
    7.000000000000001,
    100,
    28.999999999999996
  ],
  "000100": [
    0,
    31,
    100,
    37
  ],
  "000103": [
    0,
    0,
    100,
    18
  ],
  "000104": [
    0,
    71,
    0,
    32
  ],
  "000106": [
    0,
    10,
    100,
    14.000000000000002
  ],
  "000108": [
    0,
    10,
    100,
    14.000000000000002
  ],
  "000109": [
    0,
    68,
    0,
    46
  ],
  "000110": [
    0,
    4,
    100,
    16
  ],
  "000111": [
    75,
    15,
    100,
    22
  ],
  "000114": [
    0,
    75,
    0,
    52
  ],
  "000115": [
    0,
    100,
    0,
    76
  ],
  "000116": [
    0,
    84,
    0,
    25
  ],
  "000117": [
    80,
    19,
    100,
    16
  ],
  "000118": [
    64,
    0,
    100,
    0
  ],
  "000121": [
    64,
    6,
    100,
    7.000000000000001
  ],
  "000122": [
    0,
    13,
    100,
    100
  ],
  "000125": [
    0,
    81,
    0,
    64
  ],
  "000126": [
    0,
    0,
    100,
    0
  ],
  "000129": [
    0,
    82,
    0,
    83
  ],
  "000131": [
    66,
    10,
    100,
    31
  ],
  "000132": [
    79,
    10,
    100,
    31
  ],
  "000133": [
    0,
    4,
    100,
    14.000000000000002
  ],
  "000134": [
    84,
    77,
    0,
    62
  ],
  "000135": [
    67,
    63,
    0,
    35
  ],
  "000137": [
    0,
    70,
    0,
    35
  ],
  "000140": [
    0,
    0,
    100,
    13
  ],
  "000142": [
    0,
    6,
    100,
    48
  ],
  "000143": [
    0,
    81,
    0,
    79
  ],
  "000145": [
    0,
    4,
    100,
    18
  ],
  "000146": [
    0,
    0,
    100,
    0
  ],
  "000147": [
    0,
    0,
    100,
    0
  ],
  "000148": [
    0,
    9,
    100,
    38
  ],
  "000150": [
    0,
    67,
    0,
    77
  ],
  "000151": [
    66,
    8,
    100,
    22
  ],
  "000152": [
    0,
    68,
    0,
    11
  ],
  "000153": [
    0,
    85,
    0,
    25
  ],
  "000155": [
    0,
    0,
    100,
    25
  ],
  "000156": [
    0,
    8,
    100,
    41
  ],
  "000157": [
    0,
    0,
    100,
    9
  ],
  "000160": [
    0,
    83,
    0,
    60
  ],
  "000161": [
    0,
    10,
    100,
    12
  ]
}


    

ng_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */

// remove this or set to false to enable full program (load will be slower)
//var DEBUG_MODE = true;
// this can be used to set the number of sliders to show
// var NUM_SLIDERS = 7;

// other variables can be in here too
// here's some examples for colors used
// const bg_color = [225, 206, 187];
// const fg_color = [151, 102, 52];
// const stroke_color = [95, 52, 8];
let cluster = new Cluster();


// example of a global function
// given a segment, this returns the average point [x, y]
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];
}



// This where you define your own face object
function NgFace() {
    // these are state variables for a face
    // (your variables should be different!)

    this.numOfSq = 7;
    this.numOfTri = focusedRandom(0, 15);
    this.numOfEll = 7;
    this.hairColorSelector = 5;
    this.faceColorSelector = 5;
    this.eyeColorSelector = 5;
    this.eye_shift = -1;
    this.makeUp = 0;


    // example of a function *inside* the face object.
    // this draws a segment, and do_loop will connect the ends if true
    //
    this.draw_segment = function (segment, scaleX, scaleY) {

        for (let i = 0; i < segment.length; i += 1) {
            let px = segment[i][0];
            let py = segment[i][1];
            push()
                translate(px, py);
                scale(scaleX, scaleY);
                rotate(focusedRandom(10, 350));
                cluster.draw(this.numOfSq, this.numOfTri, this.numOfEll);
            pop();
        }

    };

    /*
     * Draw the face with position lists that include:
     *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
     *    bottom_lip, top_lip, nose_tip, nose_bridge, 
     */
    this.draw = function (positions) {

    //Colour initialization
        let faceColor = 0;
        let faceShad = 0;
        let hairColor = 0;
        let eyeColor = 0;
        let eyeBallColor = 255;
        let mouthColor = 255;

    //Hair colour range using lerpColor() function
        let fromHair = color(0, 0, 0);
        let toHair = color(252, 226, 91);
        let interHair = lerpColor(fromHair, toHair, this.hairColorSelector);

    //Face colour range using lerpColor() function
        let fromFace = color(105, 64, 29);
        let toFace = color(255, 219, 172);
        let interFace = lerpColor(fromFace, toFace, this.faceColorSelector);

    //FaceShad colour range using lerpColor() function
        let fromFaceShad = color(64, 39, 17);
        let toFaceShad = color(227, 195, 154);
        let interFaceShad = lerpColor(fromFaceShad, toFaceShad, this.faceColorSelector);

    //Eye colour range using lerpColor() function
        let fromEye = color(0, 0, 0);
        let toEye = color(0, 255, 247);
        let interEye = lerpColor(fromEye, toEye, this.eyeColorSelector);

    //Shared Variable
        let left_eye_pos = segment_average(positions.left_eye);
        let right_eye_pos = segment_average(positions.right_eye);
        let top_mouth_pos = segment_average(positions.top_lip);
        let bottom_mouth_pos = segment_average(positions.bottom_lip);
        let avgBrowLine = (positions.left_eyebrow[2][1] + positions.right_eyebrow[2][1]) / 2
        const makeupThreshold = 0.475;

        noStroke()
    //face
        let faceback_midpt_x = ((positions.chin[16][0] - positions.chin[0][0]) / 2) + positions.chin[0][0];
        let faceback_midpt_y = ((positions.chin[8][1] - avgBrowLine) / 2) + avgBrowLine;
        let faceback_height = dist(positions.chin[8][0], avgBrowLine, positions.chin[8][0], positions.chin[8][1]);
        let faceback_y_scale = map(faceback_height, 0.01, 3.78, 0.01, 1.85);
        let faceback_width = dist(positions.chin[0][0], positions.chin[0][1], positions.chin[16][0], positions.chin[16][1]);
        let faceback_x_scale = map(faceback_width, 0.01, 3.31, 0.1, 1.25);
        //Cheeks to show face direction
        push()
            translate(faceback_midpt_x + 0, faceback_midpt_y - 0.55);
            scale(faceback_x_scale, faceback_y_scale);
            fill(interFaceShad);
            cluster.draw(this.numOfSq, this.numOfTri, this.numOfEll);
        pop()

        let faceMidPtX = ((right_eye_pos[0] - left_eye_pos[0]) / 2) + left_eye_pos[0];
        let faceMidPtY = ((positions.chin[8][1] - avgBrowLine) / 2) + avgBrowLine;
        let face_height = dist(positions.chin[8][0], avgBrowLine, positions.chin[8][0], positions.chin[8][1]);
        let face_y_scale = map(face_height, 0.01, 3.5, 0.01, 1.3);
        let face_width = dist(left_eye_pos[0], left_eye_pos[1], right_eye_pos[0], right_eye_pos[1]);
        let face_x_scale = map(face_width, 0.01, 1.4, 0.1, 0.8);

        push()
            fill(interFace)
            translate(faceMidPtX, faceMidPtY + 0.1);
            scale(face_x_scale, face_y_scale);
            cluster.draw(this.numOfSq, this.numOfTri, this.numOfEll);//Lower face
            translate(0, -1);
            scale(1.2, 1);
            cluster.draw(this.numOfSq, this.numOfTri, this.numOfEll);//Upper face
        pop()

    //eyeball 
        //Eye shadow   
        if (this.makeUp > makeupThreshold) {
            fill(50, 50);
            //Left Eye
            push();
                translate(left_eye_pos[0], left_eye_pos[1] - 0.1);
                scale(0.2, 0.1);
                cluster.draw(this.numOfSq, this.numOfTri, this.numOfEll);
            pop();

            //Right Eye
            push();
                translate(right_eye_pos[0], right_eye_pos[1] - 0.1);
                scale(0.2, 0.1);
                cluster.draw(this.numOfSq, this.numOfTri, this.numOfEll);
            pop();
        }
        //Eyes
        fill(255);
        push();
            translate(left_eye_pos[0], left_eye_pos[1]);
            scale(0.2, 0.1);
            cluster.draw(this.numOfSq, this.numOfTri, this.numOfEll);
        pop();

        push();
            translate(right_eye_pos[0], right_eye_pos[1]);
            scale(0.2, 0.1);
            cluster.draw(this.numOfSq, this.numOfTri, this.numOfEll);
        pop();

    //eyebrow
        fill(interHair);
        //Left Eyebrow
        for (let j = 0; j < positions.left_eyebrow.length - 1; j++) {
            let v1 = createVector(positions.left_eyebrow[j][0], positions.left_eyebrow[j][1]);
            let v2 = createVector(positions.left_eyebrow[j + 1][0], positions.left_eyebrow[j + 1][1]);
            let angleBetweenL = v1.angleBetween(v2);
            push();
                translate(positions.left_eyebrow[j][0], positions.left_eyebrow[j][1]);
                rotate(-angleBetweenL);
                scale(0.15, 0.05);
                cluster.draw(this.numOfSq, this.numOfTri, this.numOfEll);
            pop();
        }
        //Right Eyebrow
        for (let k = 0; k < positions.right_eyebrow.length - 1; k++) {
            let v3 = createVector(positions.right_eyebrow[k][0], positions.right_eyebrow[k][1]);
            let v4 = createVector(positions.right_eyebrow[k + 1][0], positions.right_eyebrow[k + 1][1]);
            let angleBetweenR = v3.angleBetween(v4);
            push();
                translate(positions.right_eyebrow[k][0], positions.right_eyebrow[k][1]);
                rotate(angleBetweenR);
                scale(0.15, 0.05);
                cluster.draw(this.numOfSq, this.numOfTri, this.numOfEll);
            pop()
        }

    // pupils
        let curEyeShift = 0.04 * this.eye_shift;
        fill(interEye);
        //Left pupil
        push()
            translate(left_eye_pos[0] + curEyeShift, left_eye_pos[1]);
            scale(0.07);
            cluster.draw(this.numOfSq, this.numOfTri, this.numOfEll);
        pop();
        //Right pupil
        push();
            translate(right_eye_pos[0] + curEyeShift, right_eye_pos[1]);
            scale(0.07);
            cluster.draw(this.numOfSq, this.numOfTri, this.numOfEll);
        pop();

    //mouth
        let mouth_midpt_y = ((positions.bottom_lip[9][1] - positions.top_lip[9][1]) / 2) + positions.top_lip[9][1];
        let mouth_midpt_x = ((positions.top_lip[6][0] - positions.top_lip[0][0]) / 2) + positions.top_lip[0][0];
        let mouth_height = dist(positions.top_lip[9][0], positions.top_lip[9][1], positions.bottom_lip[9][0], positions.bottom_lip[9][1]);
        let mouth_y_scale = map(mouth_height, 0.1, 0.35, 0.005, 0.1);
        let mouth_width = dist(positions.top_lip[0][0], positions.top_lip[0][1], positions.top_lip[6][0], positions.top_lip[6][1]);
        let mouth_x_scale = map(mouth_width, 0.01, 1.5, 0.01, 0.35);

        //Turn mouth black when it is "closed"

        if (mouth_height <= 0.1) {
            mouthColor = 0;
        }

        //lipstick
        if (this.makeUp > makeupThreshold) {
            push()
                translate(mouth_midpt_x, mouth_midpt_y);
                scale(mouth_x_scale + 0.05, mouth_y_scale + 0.05);
                fill(235, 64, 52);
                cluster.draw(this.numOfSq, this.numOfTri, this.numOfEll);
            pop()
        }


        push()
            translate(mouth_midpt_x, mouth_midpt_y);
            scale(mouth_x_scale, mouth_y_scale);
            fill(mouthColor);
            cluster.draw(this.numOfSq, this.numOfTri, this.numOfEll);
        pop()


    //nose
        blendMode(MULTIPLY)
        fill(100, 0, 100);
        let noseq1 = color(150);
        let noseq2 = color(50);

        if (positions.nose_bridge[3][0] <= positions.nose_tip[2][0]) {
            noseq1 = color(50);
            noseq2 = color(150);
        }

        fill(noseq1);
        beginShape();
            vertex(positions.nose_bridge[0][0], positions.nose_bridge[0][1]);
            vertex(positions.nose_tip[0][0], positions.nose_tip[0][1]);
            vertex(positions.nose_tip[2][0], positions.nose_tip[2][1]);
            vertex(positions.nose_bridge[3][0], positions.nose_bridge[3][1]);
        endShape(CLOSE);


        fill(noseq2);
        beginShape();
            vertex(positions.nose_bridge[0][0], positions.nose_bridge[0][1]);
            vertex(positions.nose_bridge[3][0], positions.nose_bridge[3][1]);
            vertex(positions.nose_tip[2][0], positions.nose_tip[2][1]);
            vertex(positions.nose_tip[4][0], positions.nose_tip[4][1]);
        endShape(CLOSE);

    //Blush
        if (this.makeUp > makeupThreshold) {

            push();
                fill(255, 233, 232, 20);
                translate(left_eye_pos[0], positions.nose_bridge[3][1] + 0.2);
                scale(0.3, 0.5);
                cluster.draw(this.numOfSq, this.numOfTri, this.numOfEll);
            pop();

            push();
                fill(255, 233, 232, 15);
                translate(right_eye_pos[0], positions.nose_bridge[3][1] + 0.2);
                scale(0.3, 0.5);
                cluster.draw(this.numOfSq, this.numOfTri, this.numOfEll);
            pop();
        }
    }

    /* set internal properties based on list numbers 0-100 */
    this.setProperties = function (settings) {
        this.faceColorSelector = map(settings[0], 0, 100, 0, 1);
        this.eye_shift = map(settings[1], 0, 100, -4, 4);
        this.eyeColorSelector = map(settings[2], 0, 100, 0, 1);
        this.hairColorSelector = map(settings[3], 0, 100, 0, 1);
        this.makeUp = map(settings[4], 0, 100, 0, 1);
        this.numOfSq = int(map(settings[5], 0, 100, 0, 15));
        this.numOfEll = int(map(settings[6], 0, 100, 0, 15));
    }

    /* get internal properties as list of numbers 0-100 */
    this.getProperties = function () {
        let settings = new Array(6)
        settings[0] = map(this.faceColorSelector, 0, 1, 0, 100);
        settings[1] = map(this.eye_shift, -4, 4, 0, 100);
        settings[2] = map(this.eyeColorSelector, 0, 1, 0, 100);
        settings[3] = map(this.hairColorSelector, 0, 1, 0, 100);
        settings[4] = map(this.makeUp, 0, 1, 0, 100);
        settings[5] = map(this.numOfSq, 0, 15, 0, 100);
        settings[6] = map(this.numOfEll, 0, 15, 0, 100);
        return settings;
    }
}

function Cluster() {
    this.arrayXSq = [];
    this.arrayYSq = [];
    this.arraySSq = [];
    this.arrayXTri = [];
    this.arrayYTri = [];
    this.arraySTri = [];
    this.arrayXEll = [];
    this.arrayYEll = [];
    this.arraySEll = [];

    for (let i = 0; i < 20; i++) {
        this.xPosSq = focusedRandom(-3, 3) * 0.4;
        this.yPosSq = focusedRandom(-3, 3) * 0.4;
        this.sSizeSq = focusedRandom(4, 7) * 0.3;
        this.arrayXSq.push(this.xPosSq);
        this.arrayYSq.push(this.yPosSq);
        this.arraySSq.push(this.sSizeSq);

        this.xPosTri = focusedRandom(-3, 3) * 0.4;
        this.yPosTri = focusedRandom(-3, 3) * 0.4;
        this.sSizeTri = focusedRandom(4, 7) * 0.2;
        this.arrayXTri.push(this.xPosTri);
        this.arrayYTri.push(this.yPosTri);
        this.arraySTri.push(this.sSizeTri);

        this.xPosEll = focusedRandom(-3, 3) * 0.4;
        this.yPosEll = focusedRandom(-3, 3) * 0.4;
        this.sSizeEll = focusedRandom(4, 7) * 0.3;
        this.arrayXEll.push(this.xPosEll);
        this.arrayYEll.push(this.yPosEll);
        this.arraySEll.push(this.sSizeEll);
    }

    this.draw = function (testValue1, testValue2, testValue3) {
        rectMode(CENTER);

        noStroke();
        beginShape();
        for (let j = 0; j < testValue1; j++) {
            let x = this.arrayXSq[j];
            let y = this.arrayYSq[j];
            if (x < 0 && y < 0) {
                x += ((5 / 3) * 0.4);
                y += ((5 / 4) * 0.4);
            } else if (x < 0 && y > 0) {
                x += ((5 / 3) * 0.4);
                y -= ((5 / 4) * 0.4);
            } else if (x > 0 && y > 0) {
                x -= ((5 / 3) * 0.4);
                y -= ((5 / 4) * 0.4);
            } else if (x > 0 && y < 0) {
                x -= ((5 / 3) * 0.4);
                y += ((5 / 4) * 0.4);
            }

            push();
            translate(x, y);
            //vertex(x, y);
            square(0, 0, this.arraySSq[j]);
            pop();
        }
        endShape(CLOSE);

        beginShape();
        for (let k = 0; k < testValue2; k++) {
            let x = this.arrayXTri[k];
            let y = this.arrayYTri[k];
            if (x < 0 && y < 0) {
                x += ((5 / 3) * 0.4);
                y += ((5 / 4) * 0.4);
            } else if (x < 0 && y > 0) {
                x += ((5 / 3) * 0.4);
                y -= ((5 / 4) * 0.4);
            } else if (x > 0 && y > 0) {
                x -= ((5 / 3) * 0.4);
                y -= ((5 / 4) * 0.4);
            } else if (x > 0 && y < 0) {
                x -= ((5 / 3) * 0.4);
                y += ((5 / 4) * 0.4);
            }

            push();
            translate(x, y);
            //vertex(x, y);
            cusTriangle(0, 0, this.arraySTri[k]);
            pop();
        }
        endShape(CLOSE);

        beginShape();
        for (let l = 0; l < testValue3; l++) {
            let x = this.arrayXEll[l];
            let y = this.arrayYEll[l];
            if (x < 0 && y < 0) {
                x += ((5 / 3) * 0.4);
                y += ((5 / 4) * 0.4);
            } else if (x < 0 && y > 0) {
                x += ((5 / 3) * 0.4);
                y -= ((5 / 4) * 0.4);
            } else if (x > 0 && y > 0) {
                x -= ((5 / 3) * 0.4);
                y -= ((5 / 4) * 0.4);
            } else if (x > 0 && y < 0) {
                x -= ((5 / 3) * 0.4);
                y += ((5 / 4) * 0.4);
            }

            push();
            translate(x, y);
            //vertex(x, y);
            ellipse(0, 0, this.arraySEll[l]);
            pop();
        }
        endShape(CLOSE);
    };
}

function cusTriangle(x, y, radius) {
    let angle = 360 / 3;
    beginShape();
    for (let a = 0; a < 360; a += angle) {
        let sx = x + cos(a) * radius;
        let sy = y + sin(a) * radius;
        vertex(sx, sy);
    }
    endShape(CLOSE);

}

ng_training_values.json

{
  "000001": [
    98,
    77,
    0,
    82,
    100,
    0,
    100
  ],
  "000002": [
    100,
    54,
    0,
    0,
    100,
    0,
    100
  ],
  "000005": [
    100,
    55.00000000000001,
    0,
    89,
    100,
    0,
    100
  ],
  "000006": [
    72,
    55.00000000000001,
    0,
    76,
    100,
    0,
    100
  ],
  "000007": [
    48,
    55.00000000000001,
    0,
    0,
    0,
    100,
    0
  ],
  "000009": [
    94,
    42,
    0,
    0,
    100,
    0,
    100
  ],
  "000010": [
    94,
    63,
    60,
    65,
    100,
    0,
    100
  ],
  "000013": [
    94,
    63,
    74,
    73,
    0,
    100,
    0
  ],
  "000014": [
    39,
    54,
    0,
    0,
    100,
    0,
    100
  ],
  "000015": [
    94,
    54,
    30,
    45,
    0,
    100,
    0
  ],
  "000016": [
    94,
    78,
    0,
    0,
    0,
    100,
    0
  ],
  "000018": [
    100,
    61,
    64,
    81,
    100,
    0,
    100
  ],
  "000020": [
    95,
    61,
    0,
    0,
    0,
    100,
    0
  ],
  "000023": [
    95,
    99,
    96,
    0,
    0,
    100,
    0
  ],
  "000025": [
    95,
    54,
    0,
    0,
    0,
    100,
    0
  ],
  "000028": [
    57.99999999999999,
    54,
    0,
    37,
    100,
    0,
    100
  ],
  "000029": [
    91,
    69,
    100,
    100,
    100,
    0,
    100
  ],
  "000030": [
    100,
    69,
    35,
    43,
    0,
    100,
    0
  ],
  "000031": [
    93,
    69,
    93,
    74,
    100,
    0,
    100
  ],
  "000032": [
    93,
    57.99999999999999,
    0,
    23,
    0,
    100,
    0
  ],
  "000035": [
    100,
    72,
    0,
    23,
    100,
    0,
    100
  ],
  "000037": [
    44,
    72,
    0,
    0,
    0,
    100,
    0
  ],
  "000038": [
    100,
    54,
    62,
    25,
    0,
    100,
    0
  ],
  "000040": [
    77,
    62,
    0,
    14.000000000000002,
    100,
    0,
    100
  ],
  "000041": [
    85,
    62,
    0,
    14.000000000000002,
    0,
    100,
    0
  ],
  "000042": [
    100,
    62,
    80,
    54,
    100,
    0,
    100
  ],
  "000043": [
    100,
    62,
    0,
    0,
    100,
    0,
    100
  ],
  "000044": [
    42,
    62,
    0,
    0,
    100,
    0,
    100
  ],
  "000045": [
    74,
    73,
    0,
    0,
    100,
    0,
    100
  ],
  "000047": [
    44,
    86,
    0,
    0,
    100,
    0,
    100
  ],
  "000048": [
    100,
    71,
    0,
    0,
    0,
    100,
    0
  ],
  "000050": [
    87,
    42,
    0,
    0,
    0,
    100,
    0
  ],
  "000051": [
    87,
    59,
    0,
    0,
    0,
    100,
    0
  ],
  "000052": [
    92,
    59,
    78,
    30,
    0,
    100,
    0
  ],
  "000054": [
    100,
    70,
    55.00000000000001,
    38,
    100,
    0,
    100
  ],
  "000055": [
    100,
    50,
    0,
    0,
    0,
    100,
    0
  ],
  "000056": [
    100,
    50,
    0,
    0,
    0,
    100,
    0
  ],
  "000058": [
    100,
    74,
    76,
    0,
    100,
    0,
    100
  ],
  "000060": [
    17,
    28.000000000000004,
    0,
    0,
    0,
    100,
    0
  ],
  "000064": [
    79,
    52,
    41,
    0,
    0,
    100,
    0
  ],
  "000065": [
    80,
    52,
    0,
    0,
    0,
    100,
    0
  ],
  "000068": [
    100,
    52,
    37,
    0,
    0,
    100,
    0
  ],
  "000069": [
    100,
    36,
    0,
    0,
    0,
    100,
    0
  ],
  "000071": [
    100,
    55.00000000000001,
    38,
    71,
    100,
    0,
    100
  ],
  "000073": [
    74,
    61,
    6,
    71,
    100,
    0,
    100
  ],
  "000076": [
    90,
    44,
    0,
    0,
    0,
    100,
    0
  ],
  "000077": [
    72,
    75,
    0,
    0,
    100,
    0,
    100
  ],
  "000078": [
    96,
    59,
    65,
    0,
    100,
    0,
    100
  ],
  "000079": [
    96,
    62,
    0,
    13,
    0,
    100,
    0
  ],
  "000080": [
    100,
    38,
    61,
    13,
    0,
    100,
    0
  ],
  "000081": [
    60,
    71,
    0,
    13,
    0,
    100,
    0
  ],
  "000083": [
    100,
    71,
    33,
    12,
    100,
    0,
    100
  ],
  "000085": [
    100,
    71,
    46,
    12,
    100,
    0,
    100
  ],
  "000086": [
    100,
    48,
    0,
    0,
    100,
    0,
    100
  ],
  "000088": [
    97,
    76,
    20,
    0,
    100,
    0,
    100
  ],
  "000091": [
    100,
    47,
    1,
    0,
    0,
    100,
    0
  ],
  "000092": [
    100,
    73,
    46,
    56.00000000000001,
    100,
    0,
    100
  ],
  "000096": [
    84,
    52,
    0,
    0,
    100,
    0,
    100
  ],
  "000097": [
    84,
    68,
    57.99999999999999,
    63,
    100,
    0,
    100
  ],
  "000099": [
    84,
    68,
    57.99999999999999,
    63,
    100,
    0,
    100
  ],
  "000100": [
    100,
    85,
    3,
    28.000000000000004,
    100,
    0,
    100
  ],
  "000103": [
    100,
    52,
    71,
    19,
    100,
    0,
    100
  ],
  "000104": [
    100,
    52,
    71,
    48,
    0,
    100,
    0
  ],
  "000106": [
    100,
    59,
    0,
    22,
    100,
    0,
    100
  ],
  "000108": [
    100,
    59,
    84,
    84,
    100,
    0,
    100
  ],
  "000109": [
    94,
    61,
    56.00000000000001,
    84,
    0,
    100,
    0
  ],
  "000110": [
    94,
    70,
    45,
    25,
    100,
    0,
    100
  ],
  "000111": [
    48,
    73,
    12,
    55.00000000000001,
    100,
    0,
    100
  ],
  "000114": [
    100,
    51,
    0,
    0,
    0,
    100,
    0
  ],
  "000115": [
    100,
    50,
    53,
    56.99999999999999,
    0,
    100,
    0
  ],
  "000116": [
    100,
    46,
    4,
    21,
    0,
    100,
    0
  ],
  "000117": [
    42,
    76,
    4,
    21,
    100,
    0,
    100
  ],
  "000118": [
    73,
    57.99999999999999,
    4,
    21,
    100,
    0,
    100
  ],
  "000121": [
    64,
    73,
    4,
    21,
    100,
    0,
    100
  ],
  "000122": [
    100,
    73,
    36,
    88,
    100,
    0,
    100
  ],
  "000125": [
    100,
    48,
    57.99999999999999,
    5,
    0,
    100,
    0
  ],
  "000126": [
    81,
    51,
    92,
    91,
    100,
    0,
    100
  ],
  "000129": [
    100,
    51,
    25,
    0,
    0,
    100,
    0
  ],
  "000131": [
    67,
    66,
    0,
    0,
    100,
    0,
    100
  ],
  "000132": [
    50,
    66,
    0,
    0,
    100,
    0,
    100
  ],
  "000133": [
    100,
    66,
    100,
    93,
    100,
    0,
    100
  ],
  "000134": [
    8,
    14.000000000000002,
    0,
    0,
    0,
    100,
    0
  ],
  "000135": [
    37,
    71,
    0,
    0,
    0,
    100,
    0
  ],
  "000137": [
    100,
    71,
    56.00000000000001,
    0,
    0,
    100,
    0
  ],
  "000140": [
    97,
    64,
    94,
    93,
    100,
    0,
    100
  ],
  "000142": [
    84,
    67,
    0,
    0,
    100,
    0,
    100
  ],
  "000143": [
    98,
    45,
    56.99999999999999,
    31,
    0,
    100,
    0
  ],
  "000145": [
    89,
    82,
    11,
    10,
    100,
    0,
    100
  ],
  "000146": [
    60,
    82,
    11,
    10,
    100,
    0,
    100
  ],
  "000147": [
    100,
    86,
    85,
    80,
    100,
    0,
    100
  ],
  "000148": [
    100,
    86,
    77,
    18,
    100,
    0,
    100
  ],
  "000150": [
    100,
    39,
    63,
    18,
    0,
    100,
    0
  ],
  "000151": [
    80,
    67,
    0,
    18,
    100,
    0,
    100
  ],
  "000152": [
    80,
    67,
    53,
    22,
    0,
    100,
    0
  ],
  "000153": [
    80,
    35,
    0,
    0,
    0,
    100,
    0
  ],
  "000155": [
    84,
    66,
    0,
    0,
    100,
    0,
    100
  ],
  "000156": [
    100,
    66,
    62,
    86,
    100,
    0,
    100
  ],
  "000157": [
    100,
    68,
    87,
    94,
    100,
    0,
    100
  ],
  "000160": [
    54,
    54,
    0,
    0,
    0,
    100,
    0
  ],
  "000161": [
    100,
    77,
    86,
    0,
    100,
    0,
    100
  ]
}

nuesca_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */  

// remove this or set to false to enable full program (load will be slower)
// var DEBUG_MODE = true;

// this can be used to set the number of sliders to show
// var NUM_SLIDERS = 6;

// example of a global function
// given a segment, this returns the average point [x, y]
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 ];
}

// This where you define your own face object
function NuescaFace() {
  const female_col = color(189,125,106);
  const male_col = color(80, 119, 122);
  const light_col = color(247, 240, 244);
  const med_col = color(221,148,192);
  const dark_col = color(13, 32, 33);
  const eye_light = color(153, 201, 196);
  const eye_med = color(237, 185, 126);
  const eye_dark = color(54, 29, 1);


  // these are state variables for a face
  this.nose_value = 1;  // range is 0.8 to 1.5
  this.lash_brow_value = 1; //range is 0 to 1
  this.eye_size = 1; //range is 0.8 to 1
  this.ear_color = 1; // range is 0 to 1
  this.skin_color =1; //range is 0 to 2
  this.eye_color =1; //range is 0 to 2

  // example of a function *inside* the face object.
  // this draws a segment, and do_loop will connect the ends if true
  this.draw_segment = function(segment, do_loop) {
    for(let i=0; i<segment.length; i++) {
        let px = segment[i][0];
        let py = segment[i][1];
        ellipse(px, py, 0.1);
        if(i < segment.length - 1) {
          let nx = segment[i+1][0];
          let ny = segment[i+1][1];
          line(px, py, nx, ny);
        }
        else if(do_loop) {
          let nx = segment[0][0];
          let ny = segment[0][1];
          line(px, py, nx, ny);
        }
    }
  };

  /*
   * Draw the face with position lists that include:
   *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
   *    bottom_lip, top_lip, nose_tip, nose_bridge, 
   */  
  this.draw = function(positions) {

    //ears
    if (this.ear_color == 0){
      fill(female_col);
    }
    else{
      fill(male_col);
    }
    strokeWeight(0.05);
    triangle(-1.6, -1.6, -2.3, -3.2, -0.28, -2.2);
    triangle(1.6, -1.6, 2.3, -3.2, 0.28, -2.2);
    //inner ear
    if (this.skin_color == 0){
      fill(light_col);
    }
    else if (this.skin_color == 1){
      fill(med_col);
    }
    else{
      fill(dark_col);
    }
    triangle(-1.4, -1.7, -1.9, -2.8, -0.6, -2.1);
    triangle(1.4, -1.7, 1.9, -2.8, 0.6, -2.1);

    stroke(0);
    strokeWeight(0.05);

    if(this.lash_brow_value == 0){
      //brows
      let left_brow_pos = positions.left_eyebrow[0];
      let left_brow_pos2 = positions.left_eyebrow[4];
      let right_brow_pos = positions.right_eyebrow[0];
      let right_brow_pos2 = positions.right_eyebrow[4];
      stroke(0);
      strokeWeight(0.2);
      line(left_brow_pos[0], left_brow_pos[1] + 0.1, left_brow_pos2[0], left_brow_pos2[1] + 0.1);
      line(right_brow_pos[0], right_brow_pos[1] + 0.1, right_brow_pos2[0], right_brow_pos2[1] + 0.1);
    }
    //eyes
    let left_eye_pos = segment_average(positions.left_eye);
    let left_eye_pos2 = segment_average(positions.left_eye);
    let right_eye_pos = segment_average(positions.right_eye);
    let right_eye_pos2 = segment_average(positions.right_eye);

    //eyelashes 
    stroke(0);
    if(this.lash_brow_value == 0){
      strokeWeight(0);
    }
    else if(this.lash_brow_value == 1){
      strokeWeight(0.1);
    }
    //left
    line(left_eye_pos[0]- 0.3, left_eye_pos[1] + 0.3, left_eye_pos2[0] -0.5, left_eye_pos2[1]- 0.3);
    line(left_eye_pos[0], left_eye_pos[1] + 0.2, left_eye_pos2[0], left_eye_pos2[1]- 0.4);
    line(left_eye_pos[0]+ 0.3, left_eye_pos[1] + 0.3, left_eye_pos2[0] +0.5, left_eye_pos2[1]- 0.3);
    //right
    line(right_eye_pos[0]- 0.3, right_eye_pos[1] + 0.3, right_eye_pos2[0] -0.5, right_eye_pos2[1]- 0.3);
    line(right_eye_pos[0], right_eye_pos[1] + 0.2, right_eye_pos2[0], right_eye_pos2[1]- 0.4);
    line(right_eye_pos[0]+ 0.3, right_eye_pos[1] + 0.3, right_eye_pos2[0] +0.5, right_eye_pos2[1]- 0.3);

    //eye_shape
    fill(255);
    strokeWeight(0.05);
    ellipse(left_eye_pos[0], left_eye_pos[1]+0.3, 1, this.eye_size);
    ellipse(right_eye_pos[0], right_eye_pos[1]+0.3, 1, this.eye_size);
    //eyeColour
    noStroke();
    if (this.eye_color == 0){
      fill(eye_light);
    }
    else if (this.eye_color == 1){
      fill(eye_med);
    }
    else{
      fill(eye_dark);
    }
    ellipse(left_eye_pos[0], left_eye_pos[1]+0.3, 0.5, this.eye_size);
    ellipse(right_eye_pos[0], right_eye_pos[1]+0.3, 0.5, this.eye_size);
    //pupil
    fill(0);
    ellipse(left_eye_pos[0], left_eye_pos[1]+0.3, 0.2, this.eye_size - 0.2);
    ellipse(right_eye_pos[0], right_eye_pos[1]+0.3, 0.2, this.eye_size - 0.2);

    
    // nose setup
    let nose_center = positions.nose_tip[2];

    //mouth setup
    let inner_left_lip = positions.top_lip[2];
    let outer_left_lip = positions.top_lip[0];
    let inner_right_lip = positions.top_lip[4];
    let outer_right_lip = positions.top_lip[7];
    let right_bottom_lip = positions.bottom_lip[2];
    let center_bottom_lip = positions.bottom_lip[4];
    let left_bottom_lip = positions.bottom_lip[7];
    //mouth draw
    fill(0);
    stroke(0);
    beginShape();
    vertex(outer_left_lip[0], outer_left_lip[1]);
    vertex(inner_left_lip[0] - 0.1, inner_left_lip[1] + 0.2);
    vertex(nose_center[0], nose_center[1] + 0.4);
    vertex(nose_center[0], nose_center[1] + 0.1);
    vertex(nose_center[0], nose_center[1] + 0.4);
    vertex(inner_right_lip[0] + 0.1, inner_right_lip[1] +0.2);
    vertex(outer_right_lip[0] - 0.1, outer_right_lip[1]);
    vertex(right_bottom_lip[0], right_bottom_lip[1]);
    vertex(center_bottom_lip[0], center_bottom_lip[1]);
    vertex(left_bottom_lip[0], left_bottom_lip[1]);
    endShape(CLOSE);
    //teeth
    fill(255);
    noStroke();
    ellipse(inner_left_lip[0], inner_left_lip[1] + 0.32, 0.1, 0.34);
    ellipse(inner_right_lip[0], inner_right_lip[1] + 0.32, 0.1, 0.34);
    
    //nose draw
    stroke(0);
    strokeWeight(0.05);
    if (this.skin_color == 0){
      fill(light_col);
    }
    else if (this.skin_color == 1){
      fill(med_col);
    }
    else{
      fill(dark_col);
    }
    ellipse(nose_center[0], nose_center[1], 0.5 * this.nose_value, 0.25 * this.nose_value);

    //whiskers
    noFill();
    strokeWeight(0.04);
    line(left_eye_pos[0] - 1.8, left_eye_pos[1] + 1, left_eye_pos2[0], nose_center[1] + 0.04);
    line(left_eye_pos[0] - 1.8, left_eye_pos[1] + 1.4, left_eye_pos2[0], nose_center[1] + 0.04);
    line(right_eye_pos[0] + 1.8, left_eye_pos[1] + 1, right_eye_pos2[0], nose_center[1] + 0.04);
    line(right_eye_pos[0] + 1.8, left_eye_pos[1] + 1.4, right_eye_pos2[0], nose_center[1] + 0.04);

  }

  /* set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
    this.nose_value = map(settings[0], 0, 100, 1, 1.5);
    this.lash_brow_value=int(map(settings[1], 0, 100, 0, 1));
    this.eye_size = map(settings[2], 0, 100, 0.6, 1);
    this.ear_color=int(map(settings[3], 0, 100, 0, 1));
    this.skin_color=int(map(settings[4], 0, 100, 0, 2));
    this.eye_color=int(map(settings[5], 0, 100, 0, 2));
  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    let settings = new Array(6);
    settings[0] = map(this.nose_value, 1, 1.5, 0, 100);
    settings[1] = int(map(this.lash_brow_value, 0, 1, 0, 100));
    settings[2] = map(this.eye_size, 0.6, 1, 0, 100);
    settings[3] = int(map(this.ear_color, 0, 1, 0, 100));
    settings[4] = int(map(this.skin_color, 0, 2, 0, 100));
    settings[5] = int(map(this.eye_color, 0, 2, 0, 100));
    return settings;
  }
}

nuesca_training_values.json

{
  "000001": [
    0,
    100,
    49.000000000000014,
    0,
    0,
    0
  ],
  "000002": [
    0,
    100,
    100,
    0,
    0,
    0
  ],
  "000005": [
    0,
    100,
    45.000000000000014,
    0,
    0,
    0
  ],
  "000006": [
    0,
    100,
    0,
    0,
    50,
    100
  ],
  "000007": [
    100,
    0,
    45.000000000000014,
    100,
    0,
    50
  ],
  "000009": [
    0,
    100,
    45.000000000000014,
    0,
    0,
    50
  ],
  "000010": [
    0,
    100,
    0,
    0,
    0,
    0
  ],
  "000013": [
    100,
    0,
    0,
    100,
    0,
    0
  ],
  "000014": [
    0,
    100,
    0,
    0,
    50,
    100
  ],
  "000015": [
    100,
    0,
    0,
    100,
    0,
    0
  ],
  "000016": [
    100,
    0,
    51.000000000000014,
    100,
    50,
    50
  ],
  "000018": [
    0,
    100,
    0,
    0,
    0,
    0
  ],
  "000020": [
    100,
    0,
    0,
    100,
    0,
    50
  ],
  "000023": [
    100,
    0,
    47.000000000000014,
    100,
    0,
    0
  ],
  "000025": [
    100,
    0,
    0,
    100,
    50,
    50
  ],
  "000028": [
    0,
    100,
    0,
    0,
    50,
    100
  ],
  "000029": [
    0,
    100,
    47.000000000000014,
    0,
    0,
    0
  ],
  "000030": [
    100,
    0,
    100,
    100,
    50,
    50
  ],
  "000031": [
    0,
    100,
    0,
    0,
    0,
    0
  ],
  "000032": [
    100,
    0,
    45.000000000000014,
    100,
    50,
    0
  ],
  "000035": [
    0,
    100,
    45.000000000000014,
    0,
    0,
    50
  ],
  "000037": [
    100,
    0,
    45.000000000000014,
    100,
    50,
    100
  ],
  "000038": [
    100,
    0,
    0,
    100,
    0,
    0
  ],
  "000040": [
    0,
    100,
    46.000000000000014,
    0,
    0,
    50
  ],
  "000041": [
    100,
    0,
    0,
    100,
    50,
    50
  ],
  "000042": [
    0,
    100,
    50.000000000000014,
    0,
    0,
    0
  ],
  "000043": [
    0,
    100,
    100,
    0,
    50,
    50
  ],
  "000044": [
    0,
    100,
    52.000000000000014,
    0,
    100,
    100
  ],
  "000045": [
    0,
    100,
    0,
    0,
    50,
    100
  ],
  "000047": [
    0,
    100,
    0,
    0,
    50,
    100
  ],
  "000048": [
    100,
    0,
    51.000000000000014,
    100,
    50,
    50
  ],
  "000050": [
    100,
    0,
    51.000000000000014,
    100,
    0,
    50
  ],
  "000051": [
    100,
    0,
    51.000000000000014,
    100,
    0,
    50
  ],
  "000052": [
    100,
    0,
    88.99999999999999,
    100,
    50,
    0
  ],
  "000054": [
    0,
    100,
    50.000000000000014,
    0,
    0,
    0
  ],
  "000055": [
    100,
    0,
    50.000000000000014,
    100,
    0,
    50
  ],
  "000056": [
    100,
    0,
    0,
    100,
    0,
    0
  ],
  "000058": [
    0,
    100,
    52.000000000000014,
    0,
    0,
    0
  ],
  "000060": [
    100,
    0,
    0,
    100,
    100,
    100
  ],
  "000064": [
    100,
    0,
    0,
    100,
    0,
    0
  ],
  "000065": [
    100,
    0,
    0,
    100,
    50,
    100
  ],
  "000068": [
    100,
    0,
    47.000000000000014,
    100,
    0,
    50
  ],
  "000069": [
    100,
    0,
    92,
    100,
    0,
    50
  ],
  "000071": [
    0,
    100,
    100,
    0,
    0,
    0
  ],
  "000073": [
    0,
    100,
    100,
    0,
    50,
    50
  ],
  "000076": [
    100,
    0,
    48.000000000000014,
    100,
    50,
    50
  ],
  "000077": [
    0,
    100,
    48.000000000000014,
    0,
    50,
    100
  ],
  "000078": [
    0,
    100,
    48.000000000000014,
    0,
    50,
    50
  ],
  "000079": [
    100,
    0,
    48.000000000000014,
    100,
    0,
    50
  ],
  "000080": [
    100,
    0,
    0,
    100,
    0,
    0
  ],
  "000081": [
    100,
    0,
    49.000000000000014,
    100,
    50,
    50
  ],
  "000083": [
    0,
    100,
    0,
    0,
    0,
    0
  ],
  "000085": [
    0,
    100,
    100,
    0,
    0,
    0
  ],
  "000086": [
    0,
    100,
    53.000000000000014,
    0,
    0,
    50
  ],
  "000088": [
    0,
    100,
    54.000000000000014,
    0,
    50,
    50
  ],
  "000091": [
    100,
    0,
    0,
    100,
    0,
    0
  ],
  "000092": [
    0,
    100,
    0,
    0,
    0,
    0
  ],
  "000096": [
    0,
    100,
    79.00000000000001,
    0,
    50,
    100
  ],
  "000097": [
    0,
    100,
    66,
    0,
    0,
    0
  ],
  "000099": [
    0,
    100,
    0,
    0,
    0,
    0
  ],
  "000100": [
    0,
    100,
    49.000000000000014,
    0,
    0,
    50
  ],
  "000103": [
    0,
    100,
    89.99999999999999,
    0,
    0,
    50
  ],
  "000104": [
    100,
    0,
    0,
    100,
    0,
    0
  ],
  "000106": [
    0,
    100,
    0,
    0,
    0,
    50
  ],
  "000108": [
    0,
    100,
    52.000000000000014,
    0,
    0,
    0
  ],
  "000109": [
    100,
    0,
    52.000000000000014,
    100,
    50,
    0
  ],
  "000110": [
    0,
    100,
    52.000000000000014,
    0,
    0,
    0
  ],
  "000111": [
    0,
    100,
    0,
    0,
    100,
    100
  ],
  "000114": [
    100,
    0,
    48.000000000000014,
    100,
    0,
    50
  ],
  "000115": [
    100,
    0,
    0,
    100,
    0,
    0
  ],
  "000116": [
    100,
    0,
    0,
    100,
    0,
    50
  ],
  "000117": [
    0,
    100,
    84.99999999999999,
    0,
    100,
    100
  ],
  "000118": [
    0,
    100,
    51.000000000000014,
    0,
    50,
    50
  ],
  "000121": [
    0,
    100,
    51.000000000000014,
    0,
    0,
    50
  ],
  "000122": [
    0,
    100,
    51.000000000000014,
    0,
    0,
    0
  ],
  "000125": [
    100,
    0,
    0,
    100,
    0,
    0
  ],
  "000126": [
    0,
    100,
    53.000000000000014,
    0,
    0,
    0
  ],
  "000129": [
    100,
    0,
    0,
    100,
    0,
    0
  ],
  "000131": [
    0,
    100,
    51.000000000000014,
    0,
    0,
    50
  ],
  "000132": [
    0,
    100,
    0,
    0,
    50,
    100
  ],
  "000133": [
    0,
    100,
    52.000000000000014,
    0,
    0,
    0
  ],
  "000134": [
    100,
    0,
    52.000000000000014,
    100,
    100,
    100
  ],
  "000135": [
    100,
    0,
    52.000000000000014,
    100,
    50,
    100
  ],
  "000137": [
    100,
    0,
    0,
    100,
    0,
    0
  ],
  "000140": [
    0,
    100,
    100,
    0,
    0,
    0
  ],
  "000142": [
    0,
    100,
    0,
    0,
    0,
    0
  ],
  "000143": [
    100,
    0,
    53.000000000000014,
    100,
    0,
    0
  ],
  "000145": [
    0,
    100,
    0,
    0,
    50,
    50
  ],
  "000146": [
    0,
    100,
    50.000000000000014,
    0,
    50,
    50
  ],
  "000147": [
    0,
    100,
    50.000000000000014,
    0,
    0,
    0
  ],
  "000148": [
    0,
    100,
    0,
    0,
    0,
    0
  ],
  "000150": [
    100,
    0,
    45.000000000000014,
    100,
    0,
    0
  ],
  "000151": [
    0,
    100,
    0,
    0,
    50,
    100
  ],
  "000152": [
    100,
    0,
    0,
    100,
    0,
    0
  ],
  "000153": [
    100,
    0,
    49.000000000000014,
    100,
    0,
    50
  ],
  "000155": [
    0,
    100,
    45.000000000000014,
    0,
    50,
    100
  ],
  "000156": [
    0,
    100,
    0,
    0,
    0,
    0
  ],
  "000157": [
    0,
    100,
    0,
    0,
    0,
    0
  ],
  "000160": [
    100,
    0,
    48.000000000000014,
    100,
    0,
    50
  ],
  "000161": [
    0,
    100,
    0,
    0,
    0,
    0
  ]
}

obrien_anim.js

function obrien_draw_one_frame(cur_frac) {

  // Define colors
  let b1 = color(8,10,22);
  let b2 = color(126,150,254);

  //Variables
  var w = width;
  var h = height;
  var starSizeBig = height/80;
  var starSizeMed = height/80;
  var starSizeSmall = height/150;
  var headSize = height/2.5;
  var moonSize = height/7;
  var moonSizeF = height/7;
  var earSize = height/10;
  // note: to clear the screen draw a rectangle
  // that is width x height - like this
  noStroke();
  fill(10);
  rect(0, 0, width, height);

  // note: all shape sizes, line widths, etc. should be a
  // function of width and height
  let rect_width = height / 10.0;
  let half_width = rect_width / 2;

  // note: animation should progress depending on the
  // value of cur_frac which goes from 0 to 1, and it
  // should loop seamlessly
  let cur_x = map(cur_frac, 0, 1, 0, width) - half_width;

  setGradient(0, 0, width, height, b1, b2, 1);
  stars(w,h,starSizeBig,starSizeMed,starSizeSmall,cur_frac);
  drawMoons(w,h,moonSize);
  drawCharacter(w,h,cur_frac,headSize,earSize,moonSizeF);
  drawHair(w,h,cur_frac);
}

function setGradient(x, y, w, h, c1, c2) {
  noFill();
    // Top to bottom gradient
    for (let i = y; i <= y + h; i++) {
      let inter = map(i, y, y + h, 0, 1);
      let c = lerpColor(c1, c2, inter);
      stroke(c);
      line(x, i, x + w, i);

  }
}

function stars(w,h,starSizeBig,starSizeMed,starSizeSmall,cur_frac){
  let cur_twinkle;
  let cur_twinkleMed;

  if(cur_frac < 0.5){
    cur_twinkle = map(cur_frac, 0, 0.5, 50, 180);
    cur_twinkleMed = map(cur_frac, 0, 0.5, 255, 100);
  }
  else{
    cur_twinkle = map(cur_frac, 0.5, 1, 180, 50);
    cur_twinkleMed = map(cur_frac, 0.5, 1, 100, 255);
  }
  noStroke();
  fill(255, cur_twinkle);
  //Small Stars
  ellipse(w/2,h/2,starSizeSmall);
  ellipse(w/3,h/3,starSizeSmall);
  ellipse(w/2,h/4,starSizeSmall);
  ellipse(w/4,h/5,starSizeSmall);
  ellipse(w/5,h/1.5,starSizeSmall);
  ellipse(w/1.3,h/1.3,starSizeSmall);
  ellipse(w/1.1,h/5,starSizeSmall);
  ellipse(w/1.3,h/3,starSizeSmall);
  ellipse(w/4,h/2,starSizeSmall);
  ellipse(w/8,h/8,starSizeSmall);
  ellipse(w/10,h/3,starSizeSmall);
  ellipse(w/1.6,h/1.2,starSizeSmall);
  ellipse(w/40,h/2,starSizeSmall);
  ellipse(w/43,h/20,starSizeSmall);
  ellipse(w/35,h/1.1,starSizeSmall);
  ellipse(w/20,h/1.5,starSizeSmall);
  ellipse(w/7,h/1.2,starSizeSmall);
  ellipse(w/1.05,h/2,starSizeSmall);
  ellipse(w/1.01,h/40,starSizeSmall);
  ellipse(w/4,h/40,starSizeSmall);
  ellipse(w/1.5,h/10,starSizeSmall);
  ellipse(w/2.2,h/20,starSizeSmall);
  ellipse(w/1.2,h/10,starSizeSmall);
  ellipse(w/1.2,h/1.5,starSizeSmall);
  ellipse(w/1.1,h/1.1,starSizeSmall);
  ellipse(w/1.05,h/1.2,starSizeSmall);
  ellipse(w/3,h/1.5,starSizeSmall);
  ellipse(w/1.5,h/1.5,starSizeSmall);
  ellipse(w/1.5,h/2.5,starSizeSmall);
  ellipse(w/1.3,h/1.8,starSizeSmall);

  //Medium Stars
  fill(255, cur_twinkleMed);
  ellipse(w/1.35,h/1.5,starSizeMed);
  ellipse(w/1.5,h/2.1,starSizeMed);
  ellipse(w/1.25,h/2.25,starSizeMed);
  ellipse(w/1.35,h/4.5,starSizeMed);
  ellipse(w/40,h/4.5,starSizeMed);
  ellipse(w/30,h/1.8,starSizeMed);
  ellipse(w/8,h/2.3,starSizeMed);
  ellipse(w/9,h/1.5,starSizeMed);
  ellipse(w/15,h/1.2,starSizeMed);
  ellipse(w/9,h/2,starSizeMed);
  ellipse(w/3,h/40,starSizeMed);
  ellipse(w/1.8,h/35,starSizeMed);
  ellipse(w/3.2,h/5,starSizeMed);
  ellipse(w/1.18,h/2.7,starSizeMed);
}

function drawCharacter(w,h,cur_frac,headSize,earSize,moonSizeF){
  //back hair

  push();
    stroke(91,94,172);
    strokeWeight(w/10);
    line(w/1.83,h/3.4,w/1,h/0.8);
    line(w/2.2,h/3.4,w/100,h/0.8);
    noStroke();
    fill(91,94,172);
    rect(w/5.9,h/1.3,w/1.5,h/4);
    rect(w/3.5,h/1.8,w/2.4,h/4);

    let move;

    if(cur_frac < 0.5){
      move = map(cur_frac, 0, 0.5, 8.5, 10);
    }else{
      move = map(cur_frac, 0.5, 1, 10, 8.5);
    }
    ellipse(w/move,h/1,w/6,h/6);

      if(cur_frac < 0.5){
        move = map(cur_frac, 0, 0.5, 5.5, 6.5);
      }else{
        move = map(cur_frac, 0.5, 1, 6.5, 5.5);
      }
      ellipse(w/move,h/1.1,w/6,h/6);

        if(cur_frac < 0.5){
          move = map(cur_frac, 0, 0.5, 5.5, 5);
        }else{
          move = map(cur_frac, 0.5, 1, 5, 5.5);
        }
        ellipse(w/move,h/1.25,w/6,h/6);

          if(cur_frac < 0.5){
            move = map(cur_frac, 0, 0.5, 3.8, 4.2);
          }else{
            move = map(cur_frac, 0.5, 1, 4.2, 3.8);
          }
          ellipse(w/move,h/1.4,w/6,h/6);

            if(cur_frac < 0.5){
              move = map(cur_frac, 0, 0.5, 3.5, 4);
            }else{
              move = map(cur_frac, 0.5, 1, 4, 3.5);
            }
            ellipse(w/move,h/1.6,w/6,h/6);

              if(cur_frac < 0.5){
                move = map(cur_frac, 0, 0.5, 2.8, 3);
              }else{
                move = map(cur_frac, 0.5, 1, 3, 2.8);
              }
              ellipse(w/move,h/1.8,w/6,h/6);

                if(cur_frac < 0.5){
                  move = map(cur_frac, 0, 0.5, 2.5, 2.6);
                }else{
                  move = map(cur_frac, 0.5, 1, 2.6, 2.5);
                }
                ellipse(w/move,h/2.2,w/6,h/6);

                  if(cur_frac < 0.5){
                    move = map(cur_frac, 0, 0.5, 2.35, 2.4);
                  }else{
                    move = map(cur_frac, 0.5, 1, 2.4, 2.35);
                  }
                  ellipse(w/move,h/2.6,w/6,h/6);

                    if(cur_frac < 0.5){
                      move = map(cur_frac, 0, 0.5, 2.15, 2.2);
                    }else{
                      move = map(cur_frac, 0.5, 1, 2.2, 2.15);
                    }
                    ellipse(w/move,h/3,w/6,h/6);

    translate(w/0.99,0);

    if(cur_frac < 0.5){
      move = map(cur_frac, 0, 0.5, 8.5, 10);
    }else{
      move = map(cur_frac, 0.5, 1, 10, 8.5);
    }
    ellipse(w/-move,h/1,w/6,h/6);

      if(cur_frac < 0.5){
        move = map(cur_frac, 0, 0.5, 5.5, 6.5);
      }else{
        move = map(cur_frac, 0.5, 1, 6.5, 5.5);
      }
      ellipse(w/-move,h/1.1,w/6,h/6);

        if(cur_frac < 0.5){
          move = map(cur_frac, 0, 0.5, 5.5, 5);
        }else{
          move = map(cur_frac, 0.5, 1, 5, 5.5);
        }
        ellipse(w/-move,h/1.25,w/6,h/6);

          if(cur_frac < 0.5){
            move = map(cur_frac, 0, 0.5, 3.8, 4.2);
          }else{
            move = map(cur_frac, 0.5, 1, 4.2, 3.8);
          }
          ellipse(w/-move,h/1.4,w/6,h/6);

            if(cur_frac < 0.5){
              move = map(cur_frac, 0, 0.5, 3.5, 4);
            }else{
              move = map(cur_frac, 0.5, 1, 4, 3.5);
            }
            ellipse(w/-move,h/1.6,w/6,h/6);

              if(cur_frac < 0.5){
                move = map(cur_frac, 0, 0.5, 2.8, 3);
              }else{
                move = map(cur_frac, 0.5, 1, 3, 2.8);
              }
              ellipse(w/-move,h/1.8,w/6,h/6);

                if(cur_frac < 0.5){
                  move = map(cur_frac, 0, 0.5, 2.5, 2.6);
                }else{
                  move = map(cur_frac, 0.5, 1, 2.6, 2.5);
                }
                ellipse(w/-move,h/2.2,w/6,h/6);

                  if(cur_frac < 0.5){
                    move = map(cur_frac, 0, 0.5, 2.35, 2.4);
                  }else{
                    move = map(cur_frac, 0.5, 1, 2.4, 2.35);
                  }
                  ellipse(w/-move,h/2.6,w/6,h/6);

                    if(cur_frac < 0.5){
                      move = map(cur_frac, 0, 0.5, 2.15, 2.2);
                    }else{
                      move = map(cur_frac, 0.5, 1, 2.2, 2.15);
                    }
                    ellipse(w/-move,h/3,w/6,h/6);

  pop();

  //neck
  noFill();
  stroke(176,189,230);
  strokeWeight(w/20);

  push();
    angleMode(DEGREES);
    translate(w/2.1,h/1.62);
    scale(0.8);
    rotate(90);
    bezier(0,0,w/4.8,0,w/4.8,h/10.8,w/4.57,h/2.16);
  pop();

  push();
    angleMode(DEGREES);
    translate(w/1.9,h/1.62);
    rotate(90);
    scale(0.8);
    bezier(0,0,w/4.8,0,w/4.8,h/-10.8,w/4.57,h/-2.16);
  pop();

  push();
    noStroke();
    fill(176,189,230);
    rect(w/2.1,h/1.5,w/20,h/2);
    translate(0,h/40);
    if(h > 1080){
      ellipse(w/3.65,h/1.035,w/12,h/6);
    }else{
      ellipse(w/3.65,h/1.035,w/12,h/5.1);
    }
    translate(0,(-h/40));
    translate(w/2.21,h/40);
    if(h > 1080){
      ellipse(w/3.65,h/1.035,w/12,h/6);
    }else{
      ellipse(w/3.65,h/1.035,w/12,h/5.1);
    }
    translate(-w/2.21,-h/40);
    rect(w/3.3,h/1.08,w/2.6,h/10);
    rect(w/2.35,h/1.15,w/6.5,h/10);
    rect(w/2.2,h/1.2,w/10,h/10);
  pop();

  push();
    angleMode(DEGREES);
    //head
    translate(0,h/15);
    fill(196,206,236);
    noStroke();
    ellipse(w/2,h/3,headSize);
    bezier((w/2)-(0.5*headSize),(h/8)+(0.5*headSize),w/2.5,h/1.35,w/1.68,h/1.35,(w/2)+(0.5*headSize),(h/8)+(0.5*headSize));
    //ears
    rotate(-25);
    translate(w/-15,h/4.5);
    ellipse(w/3.15,h/2,earSize,earSize*1.3);
    rotate(25);
    translate(-w/-15,-h/5.5);
    ellipse(w/1.87,h/2.6,earSize,earSize*1.3);
  pop();

  angleMode(RADIANS);

  if(cur_frac < 0.5){
    move = map(cur_frac, 0, 0.5, 0.01, 0);
  }else{
    move = map(cur_frac, 0.5, 1, 0, 0.01);
  }

push();
  translate(0,h/-70);
  //eyes
  noStroke();
  fill(0);
  ellipse(w/2.2,h/(2+move),earSize*1.2,earSize);
  fill(196,206,236);
  ellipse(w/2.2,h/(2.03+move),earSize*1.6,earSize);

  push();
    translate(w/11,0);
    fill(0);
    ellipse(w/2.2,h/(2+move),earSize*1.2,earSize);
    fill(196,206,236);
    ellipse(w/2.2,h/(2.03+move),earSize*1.6,earSize);
  pop();

pop();

  //eyebrows
  stroke(91,94,172);
  strokeWeight(w/55);
  line(w/2.3,h/(2.25+move),w/2.2,h/(2.23+move));
  line(w/1.85,h/(2.23+move),w/1.78,h/(2.25+move));

  //nose
  push();
    stroke(169,183,223);
    strokeWeight(w/200);
    translate(w/23,h/7);
    line(w/2.25,h/(2.25+move),w/2.2,h/(2.23+move));
    translate(w/-12,0);
    line(w/1.85,h/(2.23+move),w/1.8,h/(2.25+move));
  pop();

push();
  //mouth
  fill(110,112,188);
  noStroke();
  ellipse(w/1.99,h/(1.55+move),moonSizeF/2.3,moonSizeF/3.3);
  stroke(92,94,177);
  strokeWeight(w/300);
  noFill();
  translate(w/2.1,h/(1.58+move));
  bezier(0,0,w/96,h/54,w/24,h/54,w/19.2,0);
pop();

push();
//Forehead moon
scale(0.65);
translate(w/3.75,h/3.5);
fill(91,94,172);
noStroke();
ellipse(w/2,h/3,moonSizeF);
fill(196,206,236);
ellipse(w/2,h/3.2,moonSizeF/1.2);

pop();

}

function drawHair(w,h,cur_frac){

  push();
    noFill();
    stroke(110,112,188);
    strokeWeight(w/100);
    translate(w/1.99,h/3.7);

    beginShape();
    translate(0,h/12.5);
    bezier(w/9.5,0,w/13.71,-h/27,w/24,-h/27,0,0);
    bezier(-w/9,0,-w/13.71,-h/27,-w/24,-h/27,0,0);
    bezier(-w/9,0,-w/9,-h/4.9,w/9.5,-h/4.9,w/9.5,0);
    endShape();
  pop();


  push();
    noStroke();
    fill(110,112,188);
    rect(w/2.3,h/4.3,w/7,h/12);
    rect(w/2.1,h/3.32,w/20,h/25);
    rect(w/2.17,h/3.45,w/12,h/25);
    rect(w/2.54,h/3.43,w/4.7,h/25);
    rect(w/2.473,h/3.9,w/5.265,h/20);
    rect(w/2.42,h/4.15,w/5.8,h/20);
    rect(w/2.35,h/4.5,w/7,h/20);
    rect(w/2.22,h/4.9,w/10,h/20);
  pop();


  //hair waves
  fill(110,112,188);
  translate(0,h/-20);

  noStroke();
  let move;

  if(cur_frac < 0.5){
    move = map(cur_frac, 0, 0.5, 0, 0.05);
  }else{
    move = map(cur_frac, 0.5, 1, 0.05, 0);
  }
  ellipse(w/(2.7+(move*2)),h/1,w/15,h/7);
  ellipse(w/(2.4+(move*1.9)),h/0.96,w/15,h/7);
  ellipse(w/(2.5+(move*1.8)),h/1.09,w/10,h/7);
  ellipse(w/(2.6+(move*1.7)),h/1.22,w/15,h/7);
  ellipse(w/(2.6+(move*1.6)),h/1.35,w/12,h/7);
  ellipse(w/(2.6+(move*1.5)),h/1.5,w/15,h/7);
  ellipse(w/(2.35+(move*1.4)),h/1.2,w/15,h/7);
  ellipse(w/(2.4+(move*1.3)),h/1.4,w/15,h/7);
  ellipse(w/(2.45+(move*1.2)),h/1.6,w/20,h/10);
  ellipse(w/(2.6+(move*1.1)),h/1.7,w/20,h/10);
  ellipse(w/(2.45+move),h/1.75,w/20,h/15);
  ellipse(w/(2.6+move),h/1.95,w/20,h/10);
  ellipse(w/(2.6+move),h/2.1,w/30,h/15);
  ellipse(w/(2.45+move),h/1.9,w/30,h/15);
  ellipse(w/(2.45+move),h/2.1,w/38,h/15);
  ellipse(w/(2.55+(move/4)),h/2.3,w/30,h/15);
  ellipse(w/2.52,h/2.5,w/30,h/15);


  push();
    translate(w/0.99,0);
    ellipse(w/(-2.7+(move*2)),h/1,w/15,h/7);
    ellipse(w/(-2.4+(move*1.9)),h/0.96,w/15,h/7);
    ellipse(w/(-2.5+(move*1.8)),h/1.09,w/10,h/7);
    ellipse(w/(-2.6+(move*1.7)),h/1.22,w/15,h/7);
    ellipse(w/(-2.6+(move*1.6)),h/1.35,w/12,h/7);
    ellipse(w/(-2.6+(move*1.5)),h/1.5,w/15,h/7);
    ellipse(w/(-2.35+(move*1.4)),h/1.2,w/15,h/7);
    ellipse(w/(-2.4+(move*1.3)),h/1.4,w/15,h/7);
    ellipse(w/(-2.45+(move*1.2)),h/1.6,w/20,h/10);
    ellipse(w/(-2.6+(move*1.1)),h/1.7,w/20,h/10);
    ellipse(w/(-2.45+move),h/1.75,w/20,h/15);
    ellipse(w/(-2.6+move),h/1.95,w/20,h/10);
    ellipse(w/(-2.6+move),h/2.1,w/30,h/15);
    ellipse(w/(-2.45+move),h/1.9,w/30,h/15);
    ellipse(w/(-2.45+move),h/2.1,w/38,h/15);
    ellipse(w/(-2.55+(move/4)),h/2.3,w/30,h/15);
    ellipse(w/-2.52,h/2.5,w/30,h/15);
  pop();

  stroke(196,206,236);
  strokeWeight(w/500);
  line(w/1.99,h/4.15,w/1.99,h/2.3);
}

function drawMoons(w,h,moonSize){
  noFill();
  stroke(255);
  strokeWeight(h/220);
  //end moons
  ellipse(w/15,h/7,moonSize);
  ellipse(w/1.075,h/7,moonSize);

  //cresent
  //left
  fill(255);
  push();
  beginShape();
    translate(w/12.5, h/45);
    vertex(w/20.16, h/20);
    bezierVertex(w/7.56, h/31.5, w/7.56, h/5, w/20.16, h/5);
    bezierVertex(w/12.096, h/6.8, w/12.6, h/10, w/20.16, h/20);
  endShape();

  //right
  beginShape();
    translate(w/1.19, h/1200);
    vertex(-w/20.16, h/20);
    bezierVertex(-w/7.56, h/31.5, -w/7.56, h/5, -w/20.16, h/5);
    bezierVertex(-w/12.096, h/6.8, -w/12.6, h/10, -w/20.16, h/20);
  endShape();
  pop();

  //half moon
  push();
    rotate(-1.57);
    translate(-w/7.6,h/3.4);
    arc(w/19.2, h/10.8, w/12, h/6.75, 0, PI, CHORD);
  pop();

  //half moon
  push();
    rotate(1.57);
    if(h > 1080){ //not sure why this does not work without the if
          translate(w/36,-h/0.645);
    }else{
        translate(w/36,-h/0.6725);
    }
    arc(w/19.2, h/10.8, w/12.5, h/6.75, 0, PI, CHORD);
  pop();

  //nearly full
  ellipse(w/3.15,h/7,moonSize/1.2,moonSize);
  ellipse(w/1.47,h/7,moonSize/1.2,moonSize);
}

obrien_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */

// remove this or set to false to enable full program (load will be slower)
var DEBUG_MODE = false;

// this can be used to set the number of sliders to show
var NUM_SLIDERS = 5;

// other variables can be in here too
// here's some examples for colors used
// const bg_color = [225, 206, 187];
// const fg_color = [60];
// const stroke_color = [95, 52, 8];
const spikeRan = 11;

// example of a global function
// given a segment, this returns the average point [x, y]
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 ];
}

// This where you define your own face object
function OBrienFace() {
  // these are state variables for a face
  // (your variables should be different!)

  this.num_eyes = 2;    // can be either 1 (cyclops) or 2 (two eyes)
  this.eye_shift = -1;   // range is -10 to 10
  this.mouth_value = 1;  // range is 0.5 to 8
  this.face_shape = 1;
  this.hair_length = 1;
  this.emotion = 1;
  this.hair_colour = 1;

  // example of a function *inside* the face object.
  // this draws a segment, and do_loop will connect the ends if true
  this.draw_segment = function(segment, do_loop) {
    for(let i=0; i<segment.length; i++) {
        let px = segment[i][0];
        let py = segment[i][1];
        ellipse(px, py, 0.1);
        if(i < segment.length - 1) {
          let nx = segment[i+1][0];
          let ny = segment[i+1][1];
          line(px, py, nx, ny);
        }
        else if(do_loop) {
          let nx = segment[0][0];
          let ny = segment[0][1];
          line(px, py, nx, ny);
        }
    }
  };

  /*
   * Draw the face with position lists that include:
   *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
   *    bottom_lip, top_lip, nose_tip, nose_bridge,
   */
  this.draw = function(positions) {
    angleMode(DEGREES);
    // head
    let jaw_dist = positions.chin[16][0] - positions.chin[0][0];
    let faceWidth = map(jaw_dist, 3, 4.2, 3.75, 4.5);
    noStroke();

    //body colour (hair colour)
    if(this.hair_colour == 1){
      //black hair
      fill(15);
    }
    else if(this.hair_colour == 2){
      //grey
      fill(80);
    }
    else if(this.hair_colour == 3){
      //brunette light
      fill(120, 103, 96);
    }
    else if(this.hair_colour == 4){
      //brunette dark
      fill(66, 60, 57);
    }
    else if(this.hair_colour == 5){
      //blonde
      fill(224, 205, 164);
    }
    else if(this.hair_colour == 6){
      //red orange
      fill(199, 119, 66);
    }
    else if(this.hair_colour == 7){
      //red
      fill(204, 73, 73);
    }

    //spikes
    push();

    scale(0.25);
    translate(0,0.2);

    if(this.hair_colour == 1){
      //black hair
      stroke(15);
    }
    else if(this.hair_colour == 2){
      //grey
      stroke(80);
    }
    else if(this.hair_colour == 3){
      //brunette light
      stroke(120, 103, 96);
    }
    else if(this.hair_colour == 4){
      //brunette dark
      stroke(66, 60, 57);
    }
    else if(this.hair_colour == 5){
      //blonde
      stroke(224, 205, 164);
    }
    else if(this.hair_colour == 6){
      //red orange
      stroke(199, 119, 66);
    }
    else if(this.hair_colour == 7){
      //red
      stroke(204, 73, 73);
    }

    strokeWeight(0.5);
    line(0,-this.hair_length,0,0); //12 //11.5
    line(0,this.hair_length,0,0); //6
    line(0,0,this.hair_length,0); //3
    line(0,0,-this.hair_length,0); //3
    rotate(15);
    line(0,-this.hair_length,0,0); //12
    line(0,this.hair_length,0,0); //6
    line(0,0,this.hair_length,0); //3
    line(0,0,-this.hair_length,0); //3
    rotate(-15);
    rotate(30);
    line(0,-this.hair_length,0,0); //12
    line(0,this.hair_length,0,0); //6
    line(0,0,this.hair_length,0); //3
    line(0,0,-this.hair_length,0); //3
    rotate(-30);
    rotate(45);
    line(0,-this.hair_length,0,0); //12
    line(0,this.hair_length,0,0); //6
    line(0,0,this.hair_length,0); //3
    line(0,0,-this.hair_length,0); //3
    rotate(-45);
    rotate(60);
    line(0,-this.hair_length,0,0); //12
    line(0,this.hair_length,0,0); //6
    line(0,0,this.hair_length,0); //3
    line(0,0,-this.hair_length,0); //3
    rotate(-60);
    rotate(75);
    line(0,-this.hair_length,0,0); //12
    line(0,this.hair_length,0,0); //6
    line(0,0,this.hair_length,0); //3
    line(0,0,-this.hair_length,0); //3
    rotate(-75);
  pop();

    //face shape
    if(this.face_shape == 1){
      ellipse(0, 0, faceWidth, 4.5);
    }else if(this.face_shape == 2){
      rect(0-(faceWidth/2), -2, faceWidth, faceWidth,1);
    }else if(this.face_shape == 3){
      ellipse(0, 0, faceWidth/1.15, 4.5);
    }

    let left_eye_pos = segment_average(positions.left_eye);
    let right_eye_pos = segment_average(positions.right_eye);

    //--------------------------------[Eyes]--------------------------------
    noStroke();
    let curEyeShift = 0.04 * this.eye_shift;
    if(this.emotion == 1) {

      // normal
      noStroke();
      push();
      scale(0.221);
      fill(255);
      ellipse(left_eye_pos[0]-3, left_eye_pos[1], 6.5, 8);
      ellipse(right_eye_pos[0]+3, right_eye_pos[1], 6.5, 8);
      push();
        fill(0);
        ellipse(left_eye_pos[0]-3,left_eye_pos[1], 2, 2);
        ellipse(right_eye_pos[0]+3,right_eye_pos[1], 2, 2);
      pop();
      pop();
    }
    else if(this.emotion == 2) {
      //side eye left
      noStroke();
      push();
      scale(0.221);
      fill(255);
      ellipse(left_eye_pos[0]-3, left_eye_pos[1], 6.5, 8);
      ellipse(right_eye_pos[0]+3, right_eye_pos[1], 6.5, 8);
      push();
        fill(0);
        ellipse(left_eye_pos[0]-5,left_eye_pos[1], 2, 2);
        ellipse(right_eye_pos[0]+1,right_eye_pos[1], 2, 2);
      pop();
      pop();
    }
    else if(this.emotion == 3){
      //side eye right
      noStroke();
      push();
      scale(0.221);
      fill(255);
      ellipse(left_eye_pos[0]-3, left_eye_pos[1], 6.5, 8);
      ellipse(right_eye_pos[0]+3, right_eye_pos[1], 6.5, 8);
      push();
        fill(0);
        ellipse(left_eye_pos[0]-1,left_eye_pos[1], 2, 2);
        ellipse(right_eye_pos[0]+5,right_eye_pos[1], 2, 2);
      pop();
      pop();
    }
    else if(this.emotion == 4){
      //happy
      push();
      scale(0.221);
      noStroke();
      fill(255);
      ellipse(-3+left_eye_pos[0],left_eye_pos[1], 6.5, 8);
      ellipse(3+right_eye_pos[0],right_eye_pos[1], 6.5, 8);
      stroke(0);
      strokeWeight(0.7);
      noFill();
      //right
      bezier(4+right_eye_pos[0]+1,0+right_eye_pos[1],4+right_eye_pos[0]+1,-3+right_eye_pos[1],0+right_eye_pos[0]+1,-3+right_eye_pos[1],0+right_eye_pos[0]+1,0+right_eye_pos[1]);
      //left
      bezier(4+left_eye_pos[0]-5,0+left_eye_pos[1],4+left_eye_pos[0]-5,-3+left_eye_pos[1],0+left_eye_pos[0]-5,-3+left_eye_pos[1],0+left_eye_pos[0]-5,0+left_eye_pos[1]);
      push();
      //body colour (hair colour)
      if(this.hair_colour == 1){
        //black hair
        fill(15);
      }
      else if(this.hair_colour == 2){
        //grey
        fill(80);
      }
      else if(this.hair_colour == 3){
        //brunette light
        fill(120, 103, 96);
      }
      else if(this.hair_colour == 4){
        //brunette dark
        fill(66, 60, 57);
      }
      else if(this.hair_colour == 5){
        //blonde
        fill(224, 205, 164);
      }
      else if(this.hair_colour == 6){
        //red orange
        fill(199, 119, 66);
      }
      else if(this.hair_colour == 7){
        //red
        fill(204, 73, 73);
      }
      noStroke();
        scale(2);
        //right
        translate(-1.5,3);
        bezier(4+right_eye_pos[0]-3,0+right_eye_pos[1],4+right_eye_pos[0]-3,-3+right_eye_pos[1],0+right_eye_pos[0]-3,-3+right_eye_pos[1],0+right_eye_pos[0]-3,0+right_eye_pos[1]);
        translate(5,0);
        //body colour (hair colour)
        if(this.hair_colour == 1){
          //black hair
          fill(15);
        }
        else if(this.hair_colour == 2){
          //grey
          fill(80);
        }
        else if(this.hair_colour == 3){
          //brunette light
          fill(120, 103, 96);
        }
        else if(this.hair_colour == 4){
          //brunette dark
          fill(66, 60, 57);
        }
        else if(this.hair_colour == 5){
          //blonde
          fill(224, 205, 164);
        }
        else if(this.hair_colour == 6){
          //red orange
          fill(199, 119, 66);
        }
        else if(this.hair_colour == 7){
          //red
          fill(204, 73, 73);
        }
        bezier(4+left_eye_pos[0]-3,0+left_eye_pos[1],4+left_eye_pos[0]-3,-3+left_eye_pos[1],0+left_eye_pos[0]-3,-3+left_eye_pos[1],0+left_eye_pos[0]-3,0+left_eye_pos[1]);
      pop();
      pop();
    }
    else if(this.emotion == 5){
      push();
      //sad
      //left
      push();
      scale(0.221);
      translate(-2,3.8);
      beginShape();
      fill(255);
      bezier(2.5+left_eye_pos[0],-7+left_eye_pos[1],1+left_eye_pos[0],0.5+left_eye_pos[1],0+left_eye_pos[0],2+left_eye_pos[1],-4+left_eye_pos[0],-5+left_eye_pos[1]); //big
      //body colour (hair colour)
      if(this.hair_colour == 1){
        //black hair
        fill(15);
      }
      else if(this.hair_colour == 2){
        //grey
        fill(80);
      }
      else if(this.hair_colour == 3){
        //brunette light
        fill(120, 103, 96);
      }
      else if(this.hair_colour == 4){
        //brunette dark
        fill(66, 60, 57);
      }
      else if(this.hair_colour == 5){
        //blonde
        fill(224, 205, 164);
      }
      else if(this.hair_colour == 6){
        //red orange
        fill(199, 119, 66);
      }
      else if(this.hair_colour == 7){
        //red
        fill(204, 73, 73);
      }
      bezier(3+left_eye_pos[0],-7.5+left_eye_pos[1],1+left_eye_pos[0],-2.5+left_eye_pos[1],-4+left_eye_pos[0],-2.5+left_eye_pos[1],-5+left_eye_pos[0],-5.5+left_eye_pos[1]); //small
      endShape()

      beginShape();
      translate(4.2,0)
      fill(255);
      bezier(-2.5+right_eye_pos[0],-7+right_eye_pos[1],-1+right_eye_pos[0],0.5+right_eye_pos[1],0+right_eye_pos[0],2+right_eye_pos[1],4+right_eye_pos[0],-5+right_eye_pos[1]); //big
      //body colour (hair colour)
      if(this.hair_colour == 1){
        //black hair
        fill(15);
      }
      else if(this.hair_colour == 2){
        //grey
        fill(80);
      }
      else if(this.hair_colour == 3){
        //brunette light
        fill(120, 103, 96);
      }
      else if(this.hair_colour == 4){
        //brunette dark
        fill(66, 60, 57);
      }
      else if(this.hair_colour == 5){
        //blonde
        fill(224, 205, 164);
      }
      else if(this.hair_colour == 6){
        //red orange
        fill(199, 119, 66);
      }
      else if(this.hair_colour == 7){
        //red
        fill(204, 73, 73);
      }
      bezier(-3+right_eye_pos[0],-7.5+right_eye_pos[1],-1+right_eye_pos[0],-2.5+right_eye_pos[1],4+right_eye_pos[0],-2.5+right_eye_pos[1],5+right_eye_pos[0],-5.5+right_eye_pos[1]); //small
      endShape();
      pop();

      //pupils
      scale(0.221);
      fill(0);
      noStroke();
      ellipse( 4+left_eye_pos[0], 2.5+left_eye_pos[1], 1.5, 1.5);
      ellipse(-3.8+right_eye_pos[0], 2.2+right_eye_pos[1], 1.5, 1.5);
      pop();
    }
    else if(this.emotion == 6){
      push();
      //angry
      //left
      push();
      scale(0.221);
      translate(-3,3.8);
      beginShape();
      fill(255);
      bezier(-2.5+left_eye_pos[0],-7+left_eye_pos[1],-1+left_eye_pos[0],0.5+left_eye_pos[1],0+left_eye_pos[0],2+left_eye_pos[1],4+left_eye_pos[0],-5+left_eye_pos[1]); //big
      //body colour (hair colour)
      if(this.hair_colour == 1){
        //black hair
        fill(15);
      }
      else if(this.hair_colour == 2){
        //grey
        fill(80);
      }
      else if(this.hair_colour == 3){
        //brunette light
        fill(120, 103, 96);
      }
      else if(this.hair_colour == 4){
        //brunette dark
        fill(66, 60, 57);
      }
      else if(this.hair_colour == 5){
        //blonde
        fill(224, 205, 164);
      }
      else if(this.hair_colour == 6){
        //red orange
        fill(199, 119, 66);
      }
      else if(this.hair_colour == 7){
        //red
        fill(204, 73, 73);
      }
      bezier(-3+left_eye_pos[0],-7.5+left_eye_pos[1],-1+left_eye_pos[0],-2.5+left_eye_pos[1],4+left_eye_pos[0],-2.5+left_eye_pos[1],5+left_eye_pos[0],-5.5+left_eye_pos[1]); //small
      endShape()

      beginShape();
      translate(6.5,0)
      fill(255);
      bezier(2.5+right_eye_pos[0],-7+right_eye_pos[1],1+right_eye_pos[0],0.5+right_eye_pos[1],0+right_eye_pos[0],2+right_eye_pos[1],-4+right_eye_pos[0],-5+right_eye_pos[1]); //big
      //body colour (hair colour)
      if(this.hair_colour == 1){
        //black hair
        fill(15);
      }
      else if(this.hair_colour == 2){
        //grey
        fill(80);
      }
      else if(this.hair_colour == 3){
        //brunette light
        fill(120, 103, 96);
      }
      else if(this.hair_colour == 4){
        //brunette dark
        fill(66, 60, 57);
      }
      else if(this.hair_colour == 5){
        //blonde
        fill(224, 205, 164);
      }
      else if(this.hair_colour == 6){
        //red orange
        fill(199, 119, 66);

      }
      else if(this.hair_colour == 7){
        //red
        fill(204, 73, 73);
      }
      bezier(3+right_eye_pos[0],-7.5+right_eye_pos[1],1+right_eye_pos[0],-2.5+right_eye_pos[1],-4+right_eye_pos[0],-2.5+right_eye_pos[1],-5+right_eye_pos[0],-5.5+right_eye_pos[1]); //small
      endShape();
      pop();

      //pupils
      scale(0.221);
      fill(0);
      noStroke();
      translate(0,2.5);
      ellipse(-2.8+left_eye_pos[0], left_eye_pos[1], 1.5, 1.5);
      ellipse(3.2+right_eye_pos[0], right_eye_pos[1], 1.5, 1.5);
      pop();
    }
    if(this.blushes == 1){
      push();
      scale(0.4,0.35);
      fill(255,184,184);
      ellipse(left_eye_pos[0]-2,left_eye_pos[1]+3.5,2,1.5);
      ellipse(right_eye_pos[0]+2,right_eye_pos[1]+3.5,2,1.5);
      pop();
    }else{
    }
  }

  /* set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
    this.face_shape = int(map(settings[0], 0, 100, 1, 3));
    this.hair_length = map(settings[1], 0, 100, 5, 15);
    this.emotion = int(map(settings[2], 0, 100, 1, 6));
    this.hair_colour = int(map(settings[3], 0, 100, 1, 7));
    this.blushes = int(map(settings[4], 0, 100, 1, 2));
  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    let settings = new Array(5);
    settings[0] = map(this.face_shape, 1, 3, 0, 100);
    settings[1] = map(this.hair_length, 5, 15, 0, 100);
    settings[2] = map(this.emotion, 1, 6, 0, 100);
    settings[3] = map(this.hair_colour,1, 7, 0, 100);
    settings[4] = map(this.blushes, 1, 2, 0, 100);
    return settings;
  }
}

obrien_training_values.json

{
  "000001": [
    100,
    89,
    60,
    66.66666666666666,
    0
  ],
  "000002": [
    100,
    100,
    60,
    100,
    0
  ],
  "000005": [
    100,
    61,
    0,
    66.66666666666666,
    0
  ],
  "000006": [
    100,
    100,
    40,
    66.66666666666666,
    0
  ],
  "000007": [
    0,
    53,
    100,
    0,
    100
  ],
  "000009": [
    0,
    100,
    60,
    66.66666666666666,
    0
  ],
  "000010": [
    0,
    100,
    0,
    66.66666666666666,
    0
  ],
  "000013": [
    0,
    51,
    0,
    66.66666666666666,
    100
  ],
  "000014": [
    100,
    53,
    0,
    0,
    0
  ],
  "000015": [
    50,
    58.999999999999986,
    20,
    33.33333333333333,
    100
  ],
  "000016": [
    50,
    58.999999999999986,
    40,
    50,
    100
  ],
  "000018": [
    0,
    100,
    60,
    66.66666666666666,
    0
  ],
  "000020": [
    0,
    100,
    40,
    33.33333333333333,
    100
  ],
  "000023": [
    50,
    56.000000000000014,
    40,
    50,
    100
  ],
  "000025": [
    0,
    56.000000000000014,
    0,
    33.33333333333333,
    100
  ],
  "000028": [
    0,
    56.000000000000014,
    60,
    83.33333333333334,
    0
  ],
  "000029": [
    0,
    100,
    0,
    66.66666666666666,
    0
  ],
  "000030": [
    100,
    51,
    0,
    16.666666666666664,
    100
  ],
  "000031": [
    100,
    56.000000000000014,
    60,
    50,
    0
  ],
  "000032": [
    0,
    49.00000000000001,
    0,
    16.666666666666664,
    100
  ],
  "000035": [
    100,
    100,
    0,
    0,
    0
  ],
  "000037": [
    50,
    0,
    100,
    0,
    100
  ],
  "000038": [
    50,
    0,
    60,
    50,
    100
  ],
  "000040": [
    50,
    82,
    0,
    50,
    100
  ],
  "000041": [
    50,
    68.99999999999999,
    20,
    0,
    100
  ],
  "000042": [
    100,
    100,
    60,
    66.66666666666666,
    0
  ],
  "000043": [
    100,
    100,
    60,
    50,
    0
  ],
  "000044": [
    100,
    100,
    0,
    0,
    0
  ],
  "000045": [
    100,
    100,
    60,
    83.33333333333334,
    0
  ],
  "000047": [
    100,
    100,
    40,
    0,
    0
  ],
  "000048": [
    100,
    53,
    20,
    50,
    100
  ],
  "000050": [
    100,
    53,
    60,
    50,
    100
  ],
  "000051": [
    100,
    30.999999999999993,
    0,
    16.666666666666664,
    100
  ],
  "000052": [
    100,
    51,
    40,
    33.33333333333333,
    0
  ],
  "000054": [
    100,
    100,
    60,
    66.66666666666666,
    0
  ],
  "000055": [
    50,
    58.00000000000001,
    0,
    0,
    100
  ],
  "000056": [
    50,
    71,
    20,
    0,
    100
  ],
  "000058": [
    50,
    100,
    100,
    0,
    0
  ],
  "000060": [
    0,
    0,
    20,
    0,
    100
  ],
  "000064": [
    100,
    51,
    0,
    33.33333333333333,
    100
  ],
  "000065": [
    100,
    51,
    60,
    0,
    100
  ],
  "000068": [
    0,
    68,
    100,
    16.666666666666664,
    100
  ],
  "000069": [
    50,
    51,
    100,
    0,
    100
  ],
  "000071": [
    100,
    100,
    100,
    66.66666666666666,
    0
  ],
  "000073": [
    100,
    100,
    80,
    50,
    0
  ],
  "000076": [
    0,
    74,
    80,
    0,
    100
  ],
  "000077": [
    100,
    74,
    60,
    50,
    0
  ],
  "000078": [
    100,
    100,
    60,
    50,
    0
  ],
  "000079": [
    50,
    0,
    0,
    16.666666666666664,
    100
  ],
  "000080": [
    50,
    60,
    100,
    0,
    100
  ],
  "000081": [
    50,
    60,
    60,
    0,
    0
  ],
  "000083": [
    100,
    100,
    60,
    100,
    0
  ],
  "000085": [
    0,
    100,
    60,
    100,
    0
  ],
  "000086": [
    0,
    55.00000000000001,
    20,
    100,
    0
  ],
  "000088": [
    0,
    100,
    20,
    100,
    0
  ],
  "000091": [
    50,
    51,
    100,
    0,
    100
  ],
  "000092": [
    100,
    81.00000000000001,
    60,
    66.66666666666666,
    0
  ],
  "000096": [
    50,
    100,
    0,
    50,
    0
  ],
  "000097": [
    50,
    100,
    80,
    33.33333333333333,
    0
  ],
  "000099": [
    100,
    100,
    60,
    33.33333333333333,
    0
  ],
  "000100": [
    100,
    55.00000000000001,
    60,
    66.66666666666666,
    0
  ],
  "000103": [
    50,
    100,
    20,
    50,
    0
  ],
  "000104": [
    50,
    68,
    60,
    66.66666666666666,
    0
  ],
  "000106": [
    100,
    82.99999999999999,
    60,
    66.66666666666666,
    0
  ],
  "000108": [
    0,
    100,
    60,
    66.66666666666666,
    0
  ],
  "000109": [
    100,
    50,
    60,
    50,
    100
  ],
  "000110": [
    0,
    68.99999999999999,
    60,
    33.33333333333333,
    0
  ],
  "000111": [
    0,
    68.99999999999999,
    60,
    66.66666666666666,
    0
  ],
  "000114": [
    50,
    58.999999999999986,
    0,
    0,
    100
  ],
  "000115": [
    100,
    0,
    80,
    16.666666666666664,
    100
  ],
  "000116": [
    50,
    58.999999999999986,
    60,
    50,
    0
  ],
  "000117": [
    100,
    100,
    0,
    0,
    0
  ],
  "000118": [
    100,
    100,
    0,
    0,
    0
  ],
  "000121": [
    100,
    100,
    0,
    50,
    0
  ],
  "000122": [
    100,
    68,
    60,
    66.66666666666666,
    0
  ],
  "000125": [
    50,
    56.99999999999999,
    0,
    16.666666666666664,
    0
  ],
  "000126": [
    100,
    99,
    60,
    66.66666666666666,
    0
  ],
  "000129": [
    50,
    67,
    60,
    50,
    0
  ],
  "000131": [
    0,
    100,
    40,
    0,
    0
  ],
  "000132": [
    0,
    100,
    60,
    0,
    0
  ],
  "000133": [
    100,
    66.00000000000001,
    60,
    66.66666666666666,
    0
  ],
  "000134": [
    50,
    36.99999999999999,
    20,
    0,
    100
  ],
  "000135": [
    0,
    50,
    40,
    0,
    100
  ],
  "000137": [
    0,
    50,
    60,
    33.33333333333333,
    100
  ],
  "000140": [
    100,
    100,
    80,
    66.66666666666666,
    100
  ],
  "000142": [
    100,
    100,
    100,
    50,
    0
  ],
  "000143": [
    50,
    58.999999999999986,
    0,
    33.33333333333333,
    100
  ],
  "000145": [
    0,
    100,
    60,
    0,
    0
  ],
  "000146": [
    0,
    100,
    60,
    100,
    0
  ],
  "000147": [
    0,
    100,
    100,
    66.66666666666666,
    0
  ],
  "000148": [
    0,
    49.00000000000001,
    100,
    50,
    0
  ],
  "000150": [
    100,
    63.000000000000014,
    80,
    100,
    100
  ],
  "000151": [
    50,
    100,
    60,
    0,
    100
  ],
  "000152": [
    50,
    61.999999999999986,
    60,
    33.33333333333333,
    100
  ],
  "000153": [
    50,
    53,
    60,
    50,
    0
  ],
  "000155": [
    50,
    100,
    60,
    100,
    0
  ],
  "000156": [
    50,
    66.00000000000001,
    60,
    66.66666666666666,
    0
  ],
  "000157": [
    0,
    100,
    100,
    66.66666666666666,
    0
  ],
  "000160": [
    50,
    61.999999999999986,
    100,
    0,
    100
  ],
  "000161": [
    0,
    100,
    60,
    0,
    0
  ]
}

palmer_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */  

// remove this or set to false to enable full program (load will be slower)
//var DEBUG_MODE = true;

// this can be used to set the number of sliders to show
var NUM_SLIDERS = 7;


// example of a global function
// given a segment, this returns the average point [x, y]
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 ];
}

// This where you define your own face object
function PalmerFace() {
  // these are state variables for a face
  // (your variables should be different!)


 this.faceColour = 2.5; //between 1 and 3 - white orange and black cat face colour
 this.mouthValue = 3; // between 2 and 3,mouth closed mouth and open mouth
 this.pupilSize = 0.5; //how big the pupil is, between 0.4 and 0.8
 this.pupilRandX = 3; //this is not actually random - it is which direction the pupil is looking. left or right.
 this.earType = 1; //between 1 and 2, ears up or ears flat
 this.stripeNum = 2; //number of stripes between 2 and 3, 1 stripe or 3 stripes.
 //this.faceOffset = 0;
 this.mouthDrop = 1.5; //only works when mouthValue = 3, how far down the bottom of the mouth is. 

//******draws one eye*******
this.draw_eye = function(xPos,pupilRandX, pupilSize,yPos){
  push();
  let pupilPosX = pupilRandX //the pupil can move across the x axis.
  fill(235);//light grey
  noStroke();
  beginShape(); //shadows of the eye
    vertex(xPos, yPos); 
    bezierVertex(xPos + .2, yPos - 3, xPos + 6, yPos - 3, xPos + 7, yPos);
    bezierVertex(xPos + 6.5, yPos + 2.5, xPos + .2, yPos + 2.5, xPos, yPos);
  endShape();

  fill(255); //white
  noStroke();
  beginShape(); //normal white eye  
    vertex(xPos, yPos);
    bezierVertex(xPos + .2, yPos - 2.5, xPos + 6.3, yPos - 2.3, xPos + 6.95, yPos - .05);
    bezierVertex(xPos + 6.5, yPos + 2.5, xPos + .4, yPos + 2.5, xPos, yPos);
  endShape();

  fill(0);//black
  ellipse(xPos + pupilPosX, yPos, pupilSize); //draws the pupil
  fill(255);//white
  ellipse(xPos + pupilPosX + .1, yPos - .2, pupilSize * .6); //draws the pupil shine
  pop();
}
 //*****draws the mouth in both forms*****
 this.drawMouth = function(mouthValue, xCoM, yCoM, faceColours) {
  //xCoM and yCoM (for Coord Mouth) allow you to move the mouths position with only an x and y input
  //let this.mouthDrop = .7; //how far the bottom of the mouth drops down from the top
  var mouthStroke = color(0);

  if (faceColours <= 2) { //changes mouth stroke colour depending on face colour
    mouthStroke = color(43, 42, 42); //for black cat
  } else if (faceColours >= 2) {
    mouthStroke = color(107, 61, 31); //for ginger cat 
  } else if (faceColours >=3){
    mouthStroke = color(110, 106, 106); //for white cat
  }

  let mouthFill = color(161, 79, 84); //sets the colour inside cats mouth

  if (mouthValue == 2) {     //closed mouth
    noFill();
    strokeWeight(.2);
    stroke(mouthStroke);
    beginShape();
      vertex(xCoM, yCoM); //starts shape leftmost vertex
      bezierVertex(xCoM + .5, yCoM + 0.7, xCoM + 1.5, yCoM + 0.7, xCoM + 2, yCoM);
      bezierVertex(xCoM + 2.5, yCoM + 0.7, xCoM + 3.5, yCoM + 0.7, xCoM + 4, yCoM);
    endShape();
  } else if (mouthValue == 3) {    //open mouth
    noStroke();
    fill(mouthFill);
    //first bit is filling under the mouth
    beginShape();
      vertex(xCoM + 1, yCoM + 0.7);
      bezierVertex(xCoM + 1.5, yCoM + 0.7 + .3, xCoM + 2.4, yCoM + 0.7 + .5, xCoM + 2, yCoM);
    endShape();
    beginShape();
      vertex(xCoM + 2, yCoM);
      bezierVertex(xCoM + 1.8, yCoM + 0.7 + .5, xCoM + 2.5, yCoM + 0.7 + .5, xCoM + 3, yCoM + 0.7);
    endShape();

    noFill();
    stroke(mouthStroke);
    strokeWeight(.2);

    //this bit draws the open part of the mouth, this.mouthdrop moves it up and down.
    fill(mouthFill);
    beginShape();
      curveVertex(xCoM + 2, yCoM +1);
      curveVertex(xCoM + .7, yCoM +0.5);
      curveVertex(xCoM + 2, yCoM +this.mouthDrop);
      curveVertex(xCoM + 3.3, yCoM +0.5);
      curveVertex(xCoM + 2, yCoM +1);
    endShape();
    noFill();
    //this bit draws the closed mouth
    beginShape();
      vertex(xCoM, yCoM); //starts shape leftmost vertex
      bezierVertex(xCoM + .5, yCoM + 0.7, xCoM + 1.5, yCoM + 0.7, xCoM + 2, yCoM);
      bezierVertex(xCoM + 2.5, yCoM + 0.7, xCoM + 3.5, yCoM + 0.7, xCoM + 4, yCoM);
    endShape();
  }
}


  this.draw = function(positions) { ///draws with positions
    scale(4/10); //reset scale to fit this project.
    noStroke();
    //getting a point to determine which direction the facial features are pointing 
      let facedirec = positions.nose_bridge[3][0]; //this is the last x coordinate of the nose bridge.
      let facedirecUP = positions.nose_bridge[3][1]; //same point, but the y coordinate instead
      this.faceOffset= map(facedirec,0.82,0.2,3,1); ///mapping the nose to the cats face offset to determine if looking left or right
      this.faceOffsetUP = map(facedirecUP,0,.2,0,.2);//moves the face slightly up or down

      //*****determine if the mouth is OPEN or CLOSED***** 
      let toplipx = positions.top_lip[9][0];
      let toplipy = positions.top_lip[9][1];
      let bottomlipx = positions.bottom_lip[9][0];
      let bottomlipy = positions.bottom_lip[9][1];
      let lipdif = bottomlipy-toplipy;//difference between the two lip points

      //draw the mouth based on this 
       if(lipdif> 0.1 ){ //if the mouth is OPEN (lips are far enough apart)
        this.mouthValue = 3
      } else { //if the lips are too close together, draw the mouth closed
        this.mouthValue = 2
      }

  ///move the bottom of the mouth based on how far apart the lips are
    this.mouthDrop = map(lipdif,0.1,0.53,1,1.9);
    this.pupilRandX =map(facedirec,-0.82,0.5,1,6);


  //code to determine if person is SMILING or FROWNNING
    let mouthavetop = segment_average(positions.top_lip);
    let mouthavebottom = segment_average(positions.bottom_lip);
    let lipcorner = positions.top_lip[0][1];
    let lipcorner2 = positions.bottom_lip[6][1];
    let lipcornerAve = (lipcorner+lipcorner2)/2;
    let mouthavex = (mouthavetop[0]+mouthavebottom[0])/2;
    let mouthavey = (mouthavetop[1]+mouthavebottom[1])/2;

      //draw ears based on if the person is happy or not
  if (mouthavey-0.03>=lipcornerAve){ //if the person is similing, draw the ears upwards
    this.earType=1
  } else if (mouthavey-0.03<=lipcornerAve){ //if the person is frowning, draw the ears flat
    this.earType=2
  }

  //**draw pupil size based on how big their eyes are**
  let eyeTopY = positions.right_eye[1][1];
  let eyeBottomY = positions.right_eye[5][1];

  let eyedif = eyeBottomY- eyeTopY; //distance between the eyelinds
  this.pupilSize = map(eyedif,0.16,0.2,0.4,0.8); //distance mapped to pupil size

      
//this if statement changes various colours based on which face colour the cat has.
if (this.faceColour <= 2) {//black cat face
  faceFill = color(71, 72, 79); //darker grey face
  stripeFill = color(46, 47, 56);
  noseFill = color(235, 190, 220, 255);
  earFill = color(71, 72, 79);
  earInner = color(58, 53, 61);
} if (this.faceColour >= 2 ){ //orange cat face
    faceFill = color(240, 178, 108);
    stripeFill = color(196, 119, 51);
    earFill = faceFill;
    noseFill = color(0);
    earInner = color(217, 125, 113);
} if (this.faceColour >= 3) { //white cat face
    faceFill= color(214, 214, 214); //light grey
    stripeFill=color(171, 166, 159);
    noseFill= color(0);
    earFill = color(214, 214, 214);
    earInner = color(201, 180, 204);
  } 
  //draw the face using the colours determined above.
    fill(faceFill); //dark grey
    beginShape(); //oval face shape
      vertex(-7, 3);
      bezierVertex(-8.5, -1, 1, -10, 7.5, -3);
      bezierVertex(15, 10, -6.5, 8, -7, 3);
    endShape();

    beginShape(); //right cheek fluff
      curveVertex(8, 2);
      curveVertex(8, 2);
      curveVertex(10, 3);
      curveVertex(6, 5.5);
      curveVertex(6, 5.5);
    endShape();

    beginShape();
      curveVertex(6, 3.5);
      curveVertex(6, 3.5);
      curveVertex(10, 4.5);
      curveVertex(5.9, 6.1);
      curveVertex(5.9, 6.1);
    endShape();

    beginShape(); //left cheek fluff
      curveVertex(-7, 2);
      curveVertex(-7, 2);
      curveVertex(-8, 3);
      curveVertex(-4, 5);
      curveVertex(-4, 5);
    endShape();

    beginShape();
      curveVertex(-4, 2);
      curveVertex(-4, 2);
      curveVertex(-7.2, 4.5);
      curveVertex(-3, 6);
      curveVertex(-3, 6);
    endShape();

//draws one or three stripes on the cat - based on gender of the person.
fill(stripeFill);
  if (this.stripeNum <= 2) { //if only 1 stripe
      var xStripe = 1+this.faceOffset; //offset depending on which way they are looking
      var yStripe = -4+this.faceOffsetUP;
      var yDrop = 3.9;//how far down the stripe is
      beginShape(); //middle stripe
        vertex(xStripe, yStripe);
        bezierVertex(xStripe -.9, yStripe + (yStripe * -.4), xStripe - 1.1, yStripe + (yStripe * -.7), xStripe - .7, yStripe + yDrop);
        bezierVertex(xStripe + (yDrop * .125), yStripe + (yStripe * -.45), xStripe + .3, yStripe + (yStripe * -.5), xStripe, yStripe);
      endShape();
  } else if (this.stripeNum >= 2) { //else if 3 stripes
    var xStripe = 1+this.faceOffset;
    var yStripe = -4+this.faceOffsetUP;
    var yDrop = 3.9;
    beginShape(); //middle stripe
      vertex(xStripe, yStripe);
      bezierVertex(xStripe -.9, yStripe + (yStripe * -.4), xStripe - 1.1, yStripe + (yStripe * -.7), xStripe - .7, yStripe + yDrop);
      bezierVertex(xStripe + (yDrop * .125), yStripe + (yStripe * -.45), xStripe + .3, yStripe + (yStripe * -.5), xStripe, yStripe);
    endShape();

    var xStripe = -1+this.faceOffset;
    var yStripe = -4+this.faceOffsetUP;
    var yDrop = 2.4;
    beginShape(); //left shape
      vertex(xStripe, yStripe);
      bezierVertex(xStripe - .9, yStripe + (yStripe * -.4), xStripe - 1.1, yStripe + (yStripe * -.7), xStripe - .7, yStripe + yDrop);
      bezierVertex(xStripe + (yDrop * .125), yStripe + (yStripe * -.45), xStripe + .3, yStripe - .2 + (yStripe * -.5), xStripe, yStripe);
    endShape();

    var xStripe = 3+this.faceOffset;
    var yStripe = -4+this.faceOffsetUP;
    var yDrop = 2.6;
    beginShape(); //right shape
      vertex(xStripe, yStripe);
      bezierVertex(xStripe - .9, yStripe + (yStripe * -.4), xStripe - 1.1, yStripe + (yStripe * -.7), xStripe - .05, yStripe + yDrop);
      bezierVertex(xStripe + (yDrop * .125), yStripe + (yStripe * -.45), xStripe + .3, yStripe - .2 + (yStripe * -.5), xStripe, yStripe);
    endShape();
  }

  //**draw both eyes with offsets**  
  this.draw_eye(-8+this.faceOffset, this.pupilRandX, this.pupilSize, 1.5+this.faceOffsetUP); //LEFT EYE
    
  this.draw_eye(1.5+this.faceOffset, this.pupilRandX, this.pupilSize, 1.5+this.faceOffsetUP); //right eye

  //nose 
  fill(noseFill);
  ellipse(0+this.faceOffset, 3.2+this.faceOffsetUP, 1.4, .8); //draws the main nose, added eye offset so it moves with the rest of the face
  fill(255, 255, 255, 200); //slightly transparent white
  ellipse(.2+this.faceOffset, 3.1+this.faceOffsetUP, .7, .4); //draws nose highlight
  //mouth
  this.drawMouth(this.mouthValue, -2+this.faceOffset, 4.3+this.faceOffsetUP, this.faceColour);

  noStroke();
  if (this.earType ==1) { //ear type 0 is normal upright ears
    //left ear shape
    fill(earFill);
    beginShape();
      curveVertex(-4, -3);
      curveVertex(-4, -3);
      curveVertex(-.5, -10);
      curveVertex(1, -5);
      curveVertex(1, -5);
    endShape();
    //left ear inner
    fill(earInner);
    beginShape();
      curveVertex(-2.5, -4);
      curveVertex(-2.5, -4);
      curveVertex(-.5, -8.5);
      curveVertex(.1, -5.2);
      curveVertex(.1, -5.2);
    endShape();

    fill(earFill);
    //right ear shape
    beginShape()
      curveVertex(3, -4.4);
      curveVertex(3, -4.4);
      curveVertex(6.5, -9.5);
      curveVertex(7.5, -3);
      curveVertex(7.5, -3);
    endShape();
    //right ear inner
    fill(earInner);
    beginShape();
      curveVertex(4.3, -4.8);
      curveVertex(4.3, -4.8);
      curveVertex(6.2, -8.2);
      curveVertex(6.6, -3.7);
      curveVertex(6.6, -3.7);
    endShape();

  } else if (this.earType == 2) { //ear type 1 is 'airplane ears' where the cats ears are flat
    fill(earFill);
    beginShape();
      curveVertex(1, -5.5);
      curveVertex(1, -5.5);
      curveVertex(-9, -5);
      curveVertex(-5, -1.5);
      curveVertex(-5, -1.5);
    endShape();

    beginShape();
      curveVertex(3, -5.5);
      curveVertex(3, -5.5);
      curveVertex(12, -4);
      curveVertex(7.5, -1);
      curveVertex(7.5, -1);
    endShape();

    fill(earInner); //left ear inner
    beginShape();
      curveVertex(-3.7, -3.5);
      curveVertex(-3.7, -3.5);
      curveVertex(-7.5, -4);
      curveVertex(-5.2, -2.2);
      curveVertex(-5.2, -2.2);
    endShape();

    beginShape(); //right ear inner
      curveVertex(7.1, -3.5);
      curveVertex(7.1, -3.5);
      curveVertex(10.3, -3.4);
      curveVertex(8, -2);
      curveVertex(8, -2);
    endShape();
  }

//****DEBUG for mouth open/close determining******* 
// fill (0,255,0); //bright green
// ellipse (mouthavex,mouthavey,.1,.1); //circle where the mouth average point is
// ellipse (mouthavex,lipcornerAve,.1,.1); //circle where the corner of the lip is


  }

  /* set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
    this.faceColour = map(settings[0], 0, 100, 1, 3.9);
    this.stripeNum = map(settings[1], 0, 100, 1, 2.9);
  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    let settings = new Array(0);
      settings[0] = map(this.faceColour, 1, 3.9, 0, 100);
      settings[1] = map(this.stripeNum, 1, 2.9, 0, 100);
    return settings;
  }
}

palmer_training_values.json

{
  "000001": [
    48,
    100
  ],
  "000002": [
    42,
    100
  ],
  "000005": [
    100,
    100
  ],
  "000006": [
    67,
    93.99999999999999
  ],
  "000007": [
    0,
    0
  ],
  "000009": [
    34.99999999999999,
    100
  ],
  "000010": [
    100,
    100
  ],
  "000013": [
    100,
    9.000000000000002
  ],
  "000014": [
    0,
    100,
    56.35712272469928,
    0,
    -26.52738563977095,
    80.25864855251028,
    102.24433454662012
  ],
  "000015": [
    36.00000000000001,
    0
  ],
  "000016": [
    18.999999999999996,
    0
  ],
  "000018": [
    100,
    100
  ],
  "000020": [
    0,
    9.999999999999998
  ],
  "000023": [
    0,
    9.999999999999998
  ],
  "000025": [
    39.00000000000001,
    31
  ],
  "000028": [
    63,
    100
  ],
  "000029": [
    100,
    100,
    32.661330074416696,
    52.63157894736842,
    81.3386708704383,
    69.12880655010483,
    26.22675061126381
  ],
  "000030": [
    100,
    0
  ],
  "000031": [
    37.99999999999999,
    72
  ],
  "000032": [
    53.99999999999999,
    7.000000000000001
  ],
  "000035": [
    0,
    100
  ],
  "000037": [
    0,
    0
  ],
  "000038": [
    0,
    0,
    29.795290830229447,
    52.63157894736842,
    33.04713124567873,
    67.78263660207747,
    21.952026353800683
  ],
  "000040": [
    0,
    100
  ],
  "000041": [
    0,
    7.000000000000001
  ],
  "000042": [
    36.00000000000001,
    100
  ],
  "000043": [
    10.999999999999998,
    100
  ],
  "000044": [
    0,
    100,
    10.84771023379627,
    52.63157894736842,
    6.806241885826303,
    58.88301541284371,
    74.72167556949938
  ],
  "000045": [
    37,
    100
  ],
  "000047": [
    0,
    100,
    6.571503383029986,
    52.63157894736842,
    29.430013182313175,
    56.874494013241375,
    66.10797902202236
  ],
  "000048": [
    0,
    17
  ],
  "000050": [
    0,
    0,
    41.07140587451954,
    52.63157894736842,
    59.50089111162278,
    73.07899366833495,
    10.044376539240298
  ],
  "000051": [
    100,
    0,
    -4.281157042678774,
    0,
    -41.78850285431474,
    51.77703229813574,
    98.86198361416942
  ],
  "000052": [
    42,
    0
  ],
  "000054": [
    100,
    100,
    6.411072252409289,
    52.63157894736842,
    92.13491082474982,
    56.79913999734377,
    26.59688359742293
  ],
  "000055": [
    0,
    0,
    3.4831307508632614,
    0,
    -49.3854542778283,
    55.423894746617606,
    19.16151621875785
  ],
  "000056": [
    0,
    86
  ],
  "000058": [
    0,
    100,
    27.285619687946227,
    52.63157894736842,
    3.8681267460299207,
    66.60385167161111,
    63.31229738194422
  ],
  "000060": [
    34,
    0
  ],
  "000064": [
    43,
    0
  ],
  "000065": [
    0,
    0,
    11.642876358699915,
    52.63157894736842,
    31.021037422221998,
    59.25650253211664,
    46.134846837286084
  ],
  "000068": [
    0,
    0,
    49.65831327150963,
    52.63157894736842,
    29.037964526116067,
    77.11223805176968,
    0.4964460969137524
  ],
  "000069": [
    0,
    0,
    17.86208880415776,
    52.63157894736842,
    8.074174547763624,
    62.177647771649866,
    -1.2439632413054764
  ],
  "000071": [
    100,
    100,
    -2.156644298037036,
    52.63157894736842,
    11.550606948017705,
    52.77490949637655,
    38.97350177533182
  ],
  "000073": [
    32.99999999999999,
    100
  ],
  "000076": [
    0,
    21.999999999999996
  ],
  "000077": [
    0,
    100,
    -10.893914134063731,
    52.63157894736842,
    11.524986920940572,
    48.67104033097009,
    131.3539949793863
  ],
  "000078": [
    0,
    100,
    31.225198818238063,
    52.63157894736842,
    46.66501419257321,
    68.45426005099063,
    -13.391807779949625
  ],
  "000079": [
    100,
    0,
    -33.684675022693234,
    0,
    -29.20096088665476,
    37.96628900449258,
    82.1235597438758
  ],
  "000080": [
    0,
    11.000000000000004
  ],
  "000081": [
    0,
    0,
    59.67828419714828,
    52.63157894736842,
    85.92777507948011,
    81.8185880319939,
    -15.692950353613163
  ],
  "000083": [
    50,
    100,
    4.727366958998536,
    52.63157894736842,
    12.229793392531407,
    56.008308723166,
    78.56902459074728
  ],
  "000085": [
    40.00000000000001,
    100
  ],
  "000086": [
    81,
    100
  ],
  "000088": [
    50,
    100,
    -34.324478889804475,
    52.63157894736842,
    21.880152165152467,
    37.66577506691004,
    119.31975287672347
  ],
  "000091": [
    0,
    0,
    5.646718141442486,
    0,
    -37.61745864593482,
    56.44012518764724,
    51.67062321767729
  ],
  "000092": [
    93,
    100
  ],
  "000096": [
    9.000000000000004,
    100
  ],
  "000097": [
    39.00000000000001,
    100
  ],
  "000099": [
    42,
    100
  ],
  "000100": [
    92,
    100
  ],
  "000103": [
    13,
    100
  ],
  "000104": [
    50,
    0,
    16.23540259221501,
    52.63157894736842,
    32.935486966945945,
    61.413598187252525,
    -0.22645988093310254
  ],
  "000106": [
    0,
    100,
    63.19812389167423,
    52.63157894736842,
    95.7591028497927,
    83.47184607033185,
    47.84435584070385
  ],
  "000108": [
    100,
    100,
    39.44620539302595,
    52.63157894736842,
    88.39053469604382,
    72.31564192702734,
    15.34634932561653
  ],
  "000109": [
    50,
    0,
    -0.2563258915111222,
    52.63157894736842,
    36.09840364597847,
    53.667483293381146,
    -1.2334353433578888
  ],
  "000110": [
    50,
    100,
    18.93156922936099,
    52.63157894736842,
    34.779637679846864,
    62.67997948651806,
    80.56740797306789
  ],
  "000111": [
    100,
    87.99999999999999
  ],
  "000114": [
    0,
    14.999999999999996
  ],
  "000115": [
    100,
    0,
    8.946959267824518,
    0,
    -28.84508217199513,
    57.99023844397819,
    56.874615256224445
  ],
  "000116": [
    50.000000000000014,
    31
  ],
  "000117": [
    0,
    100,
    -24.15135415359797,
    52.63157894736842,
    97.17973869980345,
    42.4440609278555,
    19.61058867157535
  ],
  "000118": [
    0,
    100,
    70.87727955903836,
    0,
    -35.810149858769066,
    87.07872221712411,
    103.24839103732253
  ],
  "000121": [
    0,
    100,
    20.62262173366962,
    0,
    -0.779077771480785,
    63.47426172339029,
    85.0830409442902
  ],
  "000122": [
    100,
    59.00000000000001
  ],
  "000125": [
    50,
    0,
    5.298388151795175,
    0,
    -52.32858048393994,
    56.27651564705533,
    76.18228942727268
  ],
  "000126": [
    100,
    100,
    -12.674509315403814,
    52.63157894736842,
    53.46972986164813,
    47.8347001700376,
    72.90288861818323
  ],
  "000129": [
    0,
    0,
    5.73950465698605,
    0,
    -0.6858656702171784,
    56.48370673282679,
    42.11585505206289
  ],
  "000131": [
    0,
    87.99999999999999
  ],
  "000132": [
    0,
    100,
    -8.376196950451131,
    52.63157894736842,
    74.6133549935851,
    49.85360446266691,
    58.01554054810259
  ],
  "000133": [
    62,
    100
  ],
  "000134": [
    0,
    0,
    -70.68944381005294,
    52.63157894736842,
    55.06844917535201,
    20.585261240732738,
    25.340205603405025
  ],
  "000135": [
    0,
    26.999999999999996
  ],
  "000137": [
    100,
    0,
    108.05758464119974,
    52.63157894736842,
    120.33943457912208,
    104.54219884662412,
    -54.932382319713625
  ],
  "000140": [
    100,
    100,
    45.099205768410535,
    0,
    -32.55019918857598,
    74.97083907304132,
    76.37726347137696
  ],
  "000142": [
    34.99999999999999,
    93.99999999999999
  ],
  "000143": [
    50,
    0,
    -3.3902498971457806,
    52.63157894736842,
    3.423217982415361,
    52.19548868467396,
    35.23232409533122
  ],
  "000145": [
    0,
    100,
    56.993152989118165,
    52.63157894736842,
    146.5178526537036,
    80.5573900403434,
    32.00187760763201
  ],
  "000146": [
    50,
    100,
    124.25588483816581,
    52.63157894736842,
    90.27108658450489,
    112.15049136338094,
    -5.252605400806395
  ],
  "000147": [
    100,
    100,
    23.315204081078058,
    52.63157894736842,
    17.69113612448252,
    64.73895949262757,
    125.44481519769394
  ],
  "000148": [
    0,
    85.00000000000001
  ],
  "000150": [
    50.000000000000014,
    21.999999999999996
  ],
  "000151": [
    0,
    100,
    22.696070246168887,
    52.63157894736842,
    138.12527140441816,
    64.44815420653389,
    34.09399363931037
  ],
  "000152": [
    50,
    0,
    15.269838121976708,
    52.63157894736842,
    62.15073799715647,
    60.96007548153452,
    -30.557629174194272
  ],
  "000153": [
    0,
    0,
    15.98361310569667,
    52.63157894736842,
    86.54244500722568,
    61.295333428433295,
    8.030861601953724
  ],
  "000155": [
    50,
    100,
    2.181536025764963,
    52.63157894736842,
    48.071840713645564,
    54.812539648465375,
    81.79839604944623
  ],
  "000156": [
    100,
    100,
    -18.2993937700326,
    52.63157894736842,
    44.72611838851983,
    45.192708986802884,
    20.98086859241184
  ],
  "000157": [
    100,
    100,
    18.64946380695718,
    0,
    -30.720852367371965,
    62.54747542447989,
    75.33413843657277
  ],
  "000160": [
    0,
    0,
    -1.7126503415883176,
    0,
    -43.58103781132095,
    52.98345211228428,
    59.1000808743059
  ],
  "000161": [
    0,
    80.99999999999999
  ]
}





park_training_values.json

{
  "000001": [
    100,
    100,
    0,
    13,
    79
  ],
  "000002": [
    100,
    100,
    0,
    0,
    50
  ],
  "000005": [
    100,
    0,
    0,
    0,
    91
  ],
  "000006": [
    100,
    100,
    0,
    54,
    61
  ],
  "000007": [
    0,
    50,
    100,
    13,
    0
  ],
  "000009": [
    100,
    50,
    0,
    17,
    13
  ],
  "000010": [
    100,
    50,
    0,
    2,
    83
  ],
  "000013": [
    0,
    50,
    100,
    0,
    100
  ],
  "000014": [
    100,
    100,
    0,
    60,
    0
  ],
  "000015": [
    0,
    100,
    100,
    10,
    47
  ],
  "000016": [
    0,
    100,
    100,
    34,
    20
  ],
  "000018": [
    100,
    0,
    0,
    0,
    100
  ],
  "000020": [
    0,
    100,
    100,
    11,
    52
  ],
  "000023": [
    0,
    50,
    100,
    18,
    15
  ],
  "000025": [
    0,
    100,
    100,
    42,
    41
  ],
  "000028": [
    100,
    100,
    0,
    30,
    47
  ],
  "000029": [
    100,
    0,
    0,
    15,
    100
  ],
  "000030": [
    0,
    100,
    100,
    15,
    98.99999999999999
  ],
  "000031": [
    100,
    0,
    0,
    26,
    56.00000000000001
  ],
  "000032": [
    0,
    100,
    100,
    14,
    68
  ],
  "000035": [
    100,
    0,
    0,
    5,
    0
  ],
  "000037": [
    0,
    100,
    100,
    68,
    0
  ],
  "000038": [
    0,
    0,
    100,
    10,
    52
  ],
  "000040": [
    100,
    50,
    0,
    1,
    0
  ],
  "000041": [
    0,
    100,
    100,
    25,
    0
  ],
  "000042": [
    100,
    0,
    0,
    0,
    54
  ],
  "000043": [
    100,
    0,
    0,
    15,
    10
  ],
  "000044": [
    100,
    100,
    0,
    76,
    0
  ],
  "000045": [
    100,
    100,
    0,
    5,
    37
  ],
  "000047": [
    100,
    100,
    0,
    57,
    0
  ],
  "000048": [
    0,
    100,
    100,
    0,
    0
  ],
  "000050": [
    0,
    50,
    100,
    18,
    30
  ],
  "000051": [
    0,
    100,
    100,
    27,
    55.00000000000001
  ],
  "000052": [
    0,
    0,
    100,
    29,
    28.999999999999996
  ],
  "000054": [
    100,
    50,
    0,
    2,
    100
  ],
  "000055": [
    0,
    50,
    100,
    1,
    0
  ],
  "000056": [
    0,
    50,
    100,
    0,
    0
  ],
  "000058": [
    100,
    0,
    0,
    0,
    0
  ],
  "000060": [
    0,
    100,
    100,
    81,
    47
  ],
  "000064": [
    0,
    50,
    100,
    0,
    56.00000000000001
  ],
  "000065": [
    0,
    100,
    100,
    34,
    20
  ],
  "000068": [
    0,
    50,
    100,
    3,
    40
  ],
  "000069": [
    0,
    100,
    100,
    28,
    0
  ],
  "000071": [
    100,
    50,
    0,
    19,
    100
  ],
  "000073": [
    100,
    50,
    0,
    13,
    15
  ],
  "000076": [
    0,
    100,
    100,
    22,
    0
  ],
  "000077": [
    100,
    100,
    0,
    8,
    13
  ],
  "000078": [
    100,
    50,
    0,
    0,
    0
  ],
  "000079": [
    0,
    100,
    100,
    19,
    47
  ],
  "000080": [
    0,
    0,
    100,
    22,
    0
  ],
  "000081": [
    0,
    100,
    100,
    25,
    0
  ],
  "000083": [
    100,
    50,
    0,
    1,
    44
  ],
  "000085": [
    100,
    50,
    0,
    0,
    39
  ],
  "000086": [
    100,
    100,
    0,
    0,
    59
  ],
  "000088": [
    100,
    100,
    0,
    0,
    51
  ],
  "000091": [
    0,
    50,
    100,
    15,
    1
  ],
  "000092": [
    100,
    0,
    0,
    4,
    85
  ],
  "000096": [
    100,
    100,
    0,
    41,
    5
  ],
  "000097": [
    100,
    0,
    0,
    10,
    50
  ],
  "000099": [
    100,
    50,
    0,
    3,
    47
  ],
  "000100": [
    100,
    100,
    0,
    10,
    84
  ],
  "000103": [
    100,
    0,
    0,
    20,
    11
  ],
  "000104": [
    0,
    0,
    100,
    3,
    88
  ],
  "000106": [
    100,
    50,
    0,
    28,
    66
  ],
  "000108": [
    100,
    0,
    0,
    13,
    98
  ],
  "000109": [
    0,
    0,
    100,
    14,
    67
  ],
  "000110": [
    100,
    50,
    0,
    15,
    53
  ],
  "000111": [
    100,
    100,
    0,
    76,
    64
  ],
  "000114": [
    0,
    100,
    100,
    19,
    0
  ],
  "000115": [
    0,
    0,
    100,
    0,
    100
  ],
  "000116": [
    0,
    100,
    100,
    8,
    42
  ],
  "000117": [
    100,
    100,
    0,
    72,
    0
  ],
  "000118": [
    100,
    100,
    0,
    30,
    0
  ],
  "000121": [
    100,
    100,
    0,
    15,
    0
  ],
  "000122": [
    100,
    0,
    0,
    0,
    100
  ],
  "000125": [
    0,
    0,
    100,
    19,
    56.99999999999999
  ],
  "000126": [
    100,
    0,
    0,
    27,
    100
  ],
  "000129": [
    0,
    50,
    100,
    13,
    0
  ],
  "000131": [
    100,
    100,
    0,
    28,
    11
  ],
  "000132": [
    100,
    100,
    0,
    51,
    0
  ],
  "000133": [
    100,
    0,
    0,
    13,
    48
  ],
  "000134": [
    0,
    100,
    100,
    86,
    0
  ],
  "000135": [
    0,
    100,
    100,
    71,
    0
  ],
  "000137": [
    0,
    50,
    100,
    23,
    100
  ],
  "000140": [
    100,
    50,
    0,
    39,
    100
  ],
  "000142": [
    100,
    0,
    0,
    6,
    32
  ],
  "000143": [
    0,
    0,
    100,
    17,
    59
  ],
  "000145": [
    100,
    100,
    0,
    25,
    0
  ],
  "000146": [
    100,
    100,
    0,
    47,
    26
  ],
  "000147": [
    100,
    50,
    0,
    27,
    100
  ],
  "000148": [
    100,
    0,
    0,
    0,
    0
  ],
  "000150": [
    0,
    50,
    100,
    16,
    48
  ],
  "000151": [
    100,
    100,
    0,
    27,
    0
  ],
  "000152": [
    0,
    50,
    100,
    41,
    46
  ],
  "000153": [
    0,
    50,
    100,
    10,
    35
  ],
  "000155": [
    100,
    100,
    0,
    10,
    59
  ],
  "000156": [
    100,
    0,
    0,
    0,
    100
  ],
  "000157": [
    100,
    0,
    0,
    14,
    100
  ],
  "000160": [
    0,
    100,
    100,
    3,
    0
  ],
  "000161": [
    100,
    0,
    0,
    0,
    1
  ]
}

petris_face.js

function PetrisFace() {
  const bg_color = 0;
  var fireMove = 1;
  var lastFrameCount = 0;
    
    this.hairOpacity = 50;
    this.bodyColourR = 255;
    this.bodyColourG = 50;
    this.bodyColourB = 50;
    this.skinOpacity = 50;
    this.eyeHue = 0;
    this.hairLength = 0;
    this.eyeBrightness = 0;
    this.skinSaturation = 50;
    
  this.draw = function(positions) {
    var nose_pos = average_point(positions.nose_bridge);
    var eye1_pos = average_point(positions.left_eye);
    var eye2_pos = average_point(positions.right_eye);
    var eyebrow1_pos = average_point(positions.left_eyebrow);
    var eyebrow2_pos = average_point(positions.right_eyebrow);
    var half_height = positions.chin[7][1] - nose_pos[1];
    var face_width = positions.chin[positions.chin.length-1][0] - positions.chin[0][0];
    var fire_pos=[[positions.chin[0][0],positions.chin[0][1]], 
                   [positions.chin[16][0],positions.chin[16][1]],
                   [positions.chin[3][0],positions.chin[3][1]],
                   [positions.chin[13][0],positions.chin[13][1]],
                   [positions.chin[6][0],positions.chin[6][1]],
                    [positions.chin[10][0],positions.chin[10][1]],
                     [positions.chin[8][0],positions.chin[8][1]]]
    var fire_pos2=[[positions.chin[0][0],positions.chin[0][1]], 
                   [positions.chin[16][0],positions.chin[16][1]],
                   [positions.chin[4][0],positions.chin[4][1]],
                   [positions.chin[12][0],positions.chin[12][1]],
                    [positions.chin[8][0],positions.chin[8][1]]]
    var x = nose_pos[0];
    var y = nose_pos[1];
    var w = 2 * face_width;
    var h = 2.5 * half_height;


    noStroke();
         //make fire animate
         if(frameCount != lastFrameCount) {
          fireMove = fireMove+0.05;
          lastFrameCount = frameCount;   
          // print(fireMove);  
         }
     
function occilation(n){return Math.sin(fireMove+n)*0.1}
      
      
    var extent = 0;
    if(h < w) {
      extent = h / 2;
    }
    else {
      extent = w / 2;
    }
    var scale2 = extent / 220.0;

    var curHairLength = map(this.hairLength, 0, 100, -0.5, 1.5);

      //fire1 (back layer of fire it is like the hair)
    var fh=[-2, -2.2, -3.2,-3.2,-3.9,-3.8,-4.5]  
    var fw=[-0.6, 0.6, -0.4,0.4, -0.2,0.2,0]
    var curHairOpacity = map(this.hairOpacity, 0, 100, 180, 30);
    var curRed = map(this.bodyColourR, 0, 100, 0, 255);
    var curGreen = map(this.bodyColourG, 0, 100, 0, 180);
    var curBlue = map(this.bodyColourB, 0, 100, 0, 180);

    fill(curRed, curGreen, curBlue, curHairOpacity);
    push();
    scale(1.05,1);
    translate(0,-0.3);
      
    for(var n=0; n<fw.length;n++) {
        beginShape();
      
        for(var i=1; i<positions.chin.length-8;i++) {
            vertex(positions.chin[i][0]-0.15, positions.chin[i][1]);
        }
        for(var i=8; i<positions.chin.length-1;i++) {
            vertex(positions.chin[i][0]+0.15, positions.chin[i][1]);
        }
        vertex(fire_pos[n][0]+fw[n]+occilation(n), fh[n]+curHairLength);
        endShape(CLOSE);
      }
    pop();
      //fire2
    var fh=[ -2,-2.2,-3,-3,-3.3]  
    var fw=[ -0.4,0.4, -0.2,0.2,0]
    var curHairOpacity = map(this.hairOpacity, 0, 100, 180, 30);
    var curRed = map(this.bodyColourR, 0, 100, 0, 255);
    var curGreen = map(this.bodyColourG, 0, 100, 0, 230);
    var curBlue = map(this.bodyColourB, 0, 100, 0, 230);

    fill(curRed, curGreen, curBlue, curHairOpacity);
    push();
    translate(0,-0.3);
    for(var n=0; n<fw.length;n++) {
            beginShape();
        for(var i=0; i<positions.chin.length-8;i++) {
              vertex(positions.chin[i][0]-0.15, positions.chin[i][1]);
        }
         for(var i=8; i<positions.chin.length;i++) {
              vertex(positions.chin[i][0]+0.15, positions.chin[i][1]);
        }
            vertex(fire_pos2[n][0]+fw[n]+occilation(n), fh[n]+curHairLength/2);
           endShape(CLOSE);
          }
pop();
      
      //face 
    push();
      translate(0,-0.4);
      var curSkinOpacity = map(this.skinOpacity, 0, 100, 1, 0);
      var curSkinSaturation = map(this.skinSaturation, 0, 100, 0,100);
  
      colorMode(HSB);
      fill(34, curSkinSaturation, 100, curSkinOpacity);
    beginShape();
    for(var i=1; i<positions.chin.length-1;i++) {
      vertex(positions.chin[i][0], positions.chin[i][1]);
    }
        vertex(positions.chin[16][0]-0.2, -0.8);
        vertex(positions.chin[16][0]-0.5, -1.3);
        vertex(positions.chin[16][0]-1, -1.8);
        vertex(0+occilation(n), -2.3);
        vertex(positions.chin[0][0]+1, -1.8);
        vertex(positions.chin[0][0]+0.5, -1.3);
        vertex(positions.chin[0][0]+0.2, -0.8);
    
    endShape(CLOSE);
      
      pop();
      
    // mouth
    noStroke();
    fill(34, curSkinSaturation,100,curSkinOpacity);
    beginShape();
    for(var i=0; i<positions.top_lip.length;i++) {
      vertex(positions.top_lip[i][0], positions.top_lip[i][1]);
    }
    endShape(CLOSE);
    beginShape();
    for(var i=0; i<positions.bottom_lip.length;i++) {
      vertex(positions.bottom_lip[i][0], positions.bottom_lip[i][1]);
    }
    endShape(CLOSE);
 colorMode(RGB);
    // inside of mouth
fill(bg_color);
    beginShape();
    for(var i=6; i<positions.bottom_lip.length;i++) {
      vertex(positions.bottom_lip[i][0], positions.bottom_lip[i][1]);
    }
    for(var i=6; i<positions.top_lip.length;i++) {
      vertex(positions.top_lip[i][0], positions.top_lip[i][1]);
    }
    endShape(CLOSE);
    fill(bg_color);

    // nose
    beginShape();
    for(var i=0; i<positions.nose_tip.length;i++) {
      vertex(positions.nose_tip[i][0], positions.nose_tip[i][1]);
    }
    endShape(CLOSE);

    // eyes

    fill(255);
    ellipse(eye1_pos[0], eye1_pos[1]+0.6, 0.8, 0.8);
    ellipse(eye2_pos[0], eye2_pos[1]+0.6, 0.8, 0.8);
      //pupil
       colorMode(HSB);
    var curEyeHue = map(this.eyeHue, 0, 100, 0, 360);
     var curEyeBrightness = map(this.eyeBrightness, 0, 100, 0, 100);
    fill(curEyeHue,50,curEyeBrightness);
    ellipse(eye1_pos[0], eye1_pos[1]+0.6, 0.6,  0.6);
    ellipse(eye2_pos[0], eye2_pos[1]+0.6,  0.6,  0.6);
      colorMode(RGB);
    fill(0);
    ellipse(eye1_pos[0], eye1_pos[1]+0.6, 0.4,  0.4);
    ellipse(eye2_pos[0], eye2_pos[1]+0.6,  0.4,  0.4);
     fill(255);
    ellipse(eye1_pos[0]+0.17, eye1_pos[1]+0.53, 0.15,  0.14);
    ellipse(eye2_pos[0]+0.17, eye2_pos[1]+0.53,  0.15,  0.14);
    
//eyebrows
      colorMode(HSB);
      fill(34, curSkinSaturation, 100, curSkinOpacity);
push();
      translate(0,0.5);
    beginShape();
    for(var i=0; i<positions.right_eyebrow.length; i++) {
      vertex(positions.right_eyebrow[i][0], positions.right_eyebrow[i][1]);
    }
    vertex(positions.right_eyebrow[3][0], positions.right_eyebrow[3][1]+0.08);
    vertex(positions.right_eyebrow[2][0], positions.right_eyebrow[2][1]+0.1); vertex(positions.right_eyebrow[1][0], positions.right_eyebrow[1][1]+0.11);
    vertex(positions.right_eyebrow[0][0], positions.right_eyebrow[0][1]+0.12);
    endShape(CLOSE);
    beginShape();
    for(var i=0; i<positions.left_eyebrow.length; i++) {
      vertex(positions.left_eyebrow[i][0], positions.left_eyebrow[i][1]);
    }
    vertex(positions.left_eyebrow[4][0], positions.left_eyebrow[4][1]+0.12);
    vertex(positions.left_eyebrow[3][0], positions.left_eyebrow[3][1]+0.11);
    vertex(positions.left_eyebrow[2][0], positions.left_eyebrow[2][1]+0.1); 
    vertex(positions.left_eyebrow[1][0], positions.left_eyebrow[1][1]+0.08);
    endShape(CLOSE);
pop();
      colorMode(RGB);
        var curHairOpacity = map(this.hairOpacity, 0, 100, 0, 255);
    fill(0, curHairOpacity);
push();
      translate(0,0.5);
    beginShape();
    for(var i=0; i<positions.right_eyebrow.length; i++) {
      vertex(positions.right_eyebrow[i][0], positions.right_eyebrow[i][1]);
    }
    vertex(positions.right_eyebrow[3][0], positions.right_eyebrow[3][1]+0.08);
    vertex(positions.right_eyebrow[2][0], positions.right_eyebrow[2][1]+0.1); vertex(positions.right_eyebrow[1][0], positions.right_eyebrow[1][1]+0.11);
    vertex(positions.right_eyebrow[0][0], positions.right_eyebrow[0][1]+0.12);
    endShape(CLOSE);
    beginShape();
    for(var i=0; i<positions.left_eyebrow.length; i++) {
      vertex(positions.left_eyebrow[i][0], positions.left_eyebrow[i][1]);
    }
    vertex(positions.left_eyebrow[4][0], positions.left_eyebrow[4][1]+0.12);
    vertex(positions.left_eyebrow[3][0], positions.left_eyebrow[3][1]+0.11);
    vertex(positions.left_eyebrow[2][0], positions.left_eyebrow[2][1]+0.1); 
    vertex(positions.left_eyebrow[1][0], positions.left_eyebrow[1][1]+0.08);
    endShape(CLOSE);
pop();
    strokeWeight(1);  

      // pop();
  }
  this.randomize = function(values, size) {

  
  
  this.fireOpacity = focusedRandom(0, 250, 5);
 this.flameSpread=focusedRandom(0,0);
  }

  /* set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
    this.hairOpacity = settings[0];
    this.bodyColourR = settings[1];
    this.bodyColourG = settings[2];
   this.bodyColourB = settings[3];
   this.skinOpacity = settings[4];
   this.eyeHue = settings[5];
   this.eyeBrightness = settings[6];
   this.hairLength = settings[7];
 this.skinSaturation  = settings[8];
   
  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    properties = new Array(8);
    properties[0] = this.hairOpacity;
    properties[1] = this.bodyColourR;
      properties[2] = this.bodyColourG;
      properties[3] = this.bodyColourB;
      properties[4] = this.skinOpacity;
      properties[5] = this.eyeHue;
      properties[6]= this.eyeBrightness;
      properties[7]= this.hairLength;
      properties[8]= this.skinSaturation;
    return properties;
  }
}

// given a point, return the average
function average_point(list) {
  var sum_x = 0;
  var sum_y = 0;
  var num_points = 0;
  for(var i=0; i<list.length; i++) {
    sum_x += list[i][0];
    sum_y += list[i][1];
    num_points += 1; 
  }
  return [sum_x / num_points, sum_y / num_points];
}

petris_training_values.json

     
{
  "000001": [
    40,
    97,
    81,
    48,
    15,
    0,
    30,
    0,
    30
  ],
  "000002": [
    43,
    100,
    60,
    51,
    6,
    10,
    50,
    6,
    25
  ],
  "000005": [
    24,
    81,
    72,
    50,
    7,
    11,
    39,
    56,
    23
  ],
  "000006": [
    53,
    100,
    79,
    43,
    23,
    0,
    41,
    0,
    43
  ],
  "000007": [
    100,
    89,
    55,
    25,
    13,
    6,
    60,
    64,
    34
  ],
  "000009": [
    100,
    100,
    77,
    51,
    3,
    10,
    50,
    0,
    37
  ],
  "000016": [
    94,
    97,
    76,
    52,
    34,
    5,
    34,
    88,
    50
  ],
  "000018": [
    10,
    100,
    93,
    77,
    7,
    15,
    37,
    27,
    22
  ],
  "000020": [
    100,
    84,
    60,
    34,
    20,
    10,
    35,
    42,
    39
  ],
  "000025": [
    51,
    83,
    76,
    55,
    17,
    13,
    28,
    94,
    46
  ],
  "000030": [
    6,
    100,
    86,
    72,
    67,
    10,
    35,
    82,
    60
  ],
  "000031": [
    35,
    97,
    77,
    50,
    27,
    51,
    64,
    68,
    41
  ],
  "000013": [
    6,
    100,
    82,
    55,
    22,
    59,
    48,
    80,
    32
  ],
  "000014": [
    100,
    100,
    61,
    28,
    50,
    0,
    33,
    35,
    76
  ],
  "000032": [
    25,
    91,
    77,
    58,
    30,
    5,
    20,
    71,
    41
  ],
  "000038": [
    100,
    90,
    67,
    39,
    20,
    50,
    55,
    67,
    36
  ],
  "000041": [
    100,
    100,
    71,
    40,
    29,
    3,
    28,
    67,
    57
  ],
  "000043": [
    74,
    100,
    72,
    41,
    7,
    9,
    39,
    14,
    41
  ],
  "000044": [
    100,
    100,
    57,
    24,
    83,
    0,
    24,
    0,
    81
  ],
  "000047": [
    100,
    97,
    67,
    32,
    41,
    5,
    20,
    0,
    63
  ],
  "000048": [
    77,
    100,
    69,
    46,
    0,
    10,
    23,
    82,
    25
  ],
  "000050": [
    94,
    95,
    65,
    39,
    15,
    2,
    41,
    71,
    41
  ],
  "000051": [
    15,
    85,
    90,
    100,
    22,
    0,
    26,
    50,
    43
  ],
  "000052": [
    81,
    95,
    67,
    38,
    13,
    48,
    56,
    74,
    41
  ],
  "000054": [
    9,
    100,
    91,
    77,
    10,
    46,
    40,
    0,
    29
  ],
  "000055": [
    95,
    100,
    58,
    30,
    6,
    13,
    49,
    68,
    36
  ],
  "000056": [
    100,
    98,
    70,
    44,
    0,
    50,
    58,
    11,
    30
  ],
  "000058": [
    84,
    100,
    71,
    39,
    0,
    43,
    55,
    0,
    32
  ],
  "000064": [
    62,
    89,
    70,
    41,
    3,
    19,
    40,
    68,
    37
  ],
  "000065": [
    94,
    98,
    66,
    38,
    32,
    9,
    27,
    63,
    67
  ],
  "000068": [
    19,
    94,
    78,
    64,
    30,
    15,
    46,
    61,
    30
  ],
  "000069": [
    100,
    94,
    68,
    40,
    15,
    13,
    54,
    84,
    36
  ],
  "000071": [
    11,
    97,
    84,
    50,
    7,
    14,
    53,
    27,
    32
  ],
  "000073": [
    100,
    97,
    79,
    50,
    7,
    5,
    41,
    0,
    43
  ],
  "000076": [
    100,
    89,
    63,
    34,
    36,
    13,
    27,
    68,
    43
  ],
  "000077": [
    100,
    100,
    73,
    39,
    0,
    5,
    21,
    0,
    32
  ],
  "000079": [
    29,
    83,
    65,
    45,
    17,
    5,
    48,
    100,
    44
  ],
  "000080": [
    100,
    89,
    55,
    34,
    2,
    19,
    51,
    64,
    43
  ],
  "000081": [
    97,
    89,
    51,
    27,
    20,
    1,
    42,
    66,
    46
  ],
  "000083": [
    52,
    97,
    69,
    51,
    13,
    13,
    38,
    0,
    18
  ],
  "000085": [
    75,
    100,
    82,
    59,
    3,
    28,
    45,
    0,
    20
  ],
  "000015": [
    73,
    89,
    66,
    35,
    3,
    43,
    44,
    68,
    48
  ],
  "000035": [
    100,
    97,
    79,
    50,
    0,
    10,
    59,
    0,
    27
  ],
  "000037": [
    95,
    93,
    62,
    32,
    51,
    5,
    34,
    64,
    70
  ],
  "000010": [
    19,
    100,
    93,
    67,
    6,
    53,
    47,
    0,
    22
  ],
  "000023": [
    90,
    100,
    65,
    46,
    18,
    54,
    44,
    64,
    41
  ],
  "000028": [
    28,
    100,
    70,
    41,
    9,
    7,
    33,
    0,
    41
  ],
  "000029": [
    6,
    100,
    93,
    76,
    23,
    53,
    62,
    0,
    41
  ],
  "000040": [
    100,
    100,
    74,
    32,
    0,
    5,
    55,
    30,
    34
  ],
  "000042": [
    15,
    98,
    83,
    72,
    3,
    47,
    55,
    9,
    20
  ],
  "000045": [
    67,
    90,
    66,
    46,
    8,
    7,
    33,
    0,
    44
  ],
  "000060": [
    97,
    91,
    62,
    33,
    58,
    9,
    30,
    75,
    74
  ],
  "000078": [
    100,
    100,
    74,
    55,
    20,
    3,
    33,
    0,
    13
  ],
  "000086": [
    54,
    100,
    76,
    46,
    29,
    9,
    33,
    63,
    25
  ],
  "000088": [
    54,
    100,
    73,
    47,
    0,
    10,
    44,
    21,
    25
  ],
  "000091": [
    90,
    93,
    64,
    41,
    15,
    18,
    40,
    71,
    43
  ],
  "000092": [
    31,
    97,
    81,
    47,
    6,
    15,
    58,
    15,
    39
  ],
  "000096": [
    78,
    97,
    60,
    37,
    11,
    8,
    30,
    0,
    23
  ],
  "000097": [
    59,
    98,
    76,
    44,
    0,
    57,
    71,
    0,
    23
  ],
  "000099": [
    86,
    97,
    68,
    38,
    4,
    12,
    39,
    0,
    36
  ],
  "000100": [
    39,
    99,
    77,
    51,
    1,
    11,
    36,
    57,
    27
  ],
  "000103": [
    100,
    99,
    86,
    54,
    6,
    24,
    43,
    0,
    39
  ],
  "000104": [
    9,
    100,
    81,
    41,
    9,
    54,
    47,
    80,
    27
  ],
  "000106": [
    72,
    98,
    75,
    46,
    0,
    0,
    36,
    20,
    39
  ],
  "000108": [
    11,
    98,
    91,
    65,
    14,
    45,
    51,
    12,
    46
  ],
  "000109": [
    57,
    93,
    76,
    50,
    15,
    44,
    61,
    70,
    55
  ],
  "000110": [
    47,
    98,
    76,
    45,
    12,
    19,
    55,
    40,
    39
  ],
  "000111": [
    16,
    95,
    81,
    53,
    32,
    7,
    38,
    13,
    60
  ],
  "000114": [
    82,
    96,
    64,
    39,
    15,
    9,
    37,
    84,
    39
  ],
  "000115": [
    0,
    88,
    84,
    68,
    0,
    17,
    60,
    100,
    29
  ],
  "000116": [
    50,
    98,
    76,
    49,
    20,
    9,
    31,
    72,
    27
  ],
  "000117": [
    100,
    95,
    63,
    33,
    40,
    2,
    34,
    0
  ],
  "000118": [
    90,
    100,
    63,
    47,
    17,
    7,
    44,
    18,
    44
  ],
  "000121": [
    100,
    95,
    62,
    39,
    15,
    10,
    43,
    0,
    29
  ],
  "000122": [
    6,
    90,
    84,
    55,
    0,
    8,
    41,
    44,
    6
  ],
  "000125": [
    55,
    90,
    85,
    71,
    22,
    51,
    63,
    90,
    44
  ],
  "000126": [
    10,
    97,
    93,
    77,
    16,
    31,
    43,
    1,
    46
  ],
  "000129": [
    37,
    94,
    76,
    57,
    10,
    19,
    53,
    65,
    44
  ],
  "000131": [
    83,
    95,
    67,
    42,
    3,
    6,
    27,
    0,
    29
  ],
  "000132": [
    76,
    100,
    74,
    36,
    26,
    6,
    36,
    0
  ],
  "000133": [
    51,
    97,
    72,
    43,
    4,
    26,
    70,
    20
  ],
  "000134": [
    100,
    93,
    56,
    30,
    44,
    13,
    28,
    100,
    100
  ],
  "000135": [
    85,
    97,
    71,
    42,
    34,
    3,
    30,
    56,
    67
  ],
  "000137": [
    70,
    87,
    66,
    40,
    30,
    29,
    40,
    64,
    34
  ],
  "000140": [
    9,
    98,
    90,
    63,
    27,
    32,
    43,
    10,
    60
  ],
  "000142": [
    49,
    98,
    75,
    47,
    7,
    13,
    38,
    24,
    25
  ],
  "000143": [
    54,
    90,
    70,
    48,
    23,
    43,
    50,
    79,
    32
  ],
  "000145": [
    100,
    98,
    73,
    43,
    15,
    8,
    33,
    0,
    36
  ],
  "000146": [
    94,
    97,
    68,
    41,
    4,
    6,
    27,
    0,
    50
  ],
  "000147": [
    24,
    97,
    79,
    53,
    15,
    38,
    55,
    3,
    37
  ],
  "000148": [
    80,
    97,
    75,
    48,
    13,
    24,
    51,
    17,
    30
  ],
  "000150": [
    52,
    100,
    66,
    61,
    8,
    43,
    48,
    71,
    22
  ],
  "000151": [
    100,
    98,
    78,
    36,
    0,
    9,
    33,
    31,
    43
  ],
  "000152": [
    31,
    94,
    74,
    50,
    7,
    13,
    39,
    63,
    34
  ],
  "000153": [
    94,
    87,
    65,
    40,
    18,
    13,
    48,
    75,
    36
  ],
  "000155": [
    81,
    98,
    51,
    41,
    15,
    0,
    36,
    0,
    32
  ],
  "000156": [
    38,
    97,
    88,
    57,
    13,
    51,
    45,
    57,
    27
  ],
  "000157": [
    48,
    99,
    90,
    70,
    6,
    47,
    53,
    0,
    30
  ],
  "000160": [
    100,
    95,
    63,
    35,
    2,
    5,
    41,
    71,
    43
  ],
  "000161": [
    96,
    100,
    67,
    45,
    0,
    51,
    59,
    25,
    32
  ]
}


    

purview.json

{
  "commits": [
    {
      "sha": "502f42ec801ef07ae1b930482eab8f509ce51251",
      "name": "final_version"
    },
    {
      "sha": "29bfd23eeed1ada1a17c10cf1b37839f278b5d41",
      "name": "trained_initial"
    },
    {
      "sha": "14b4830ee2813c21c3acf008b7118574e6e753c3",
      "name": "shaded_face"
    },
    {
      "sha": "db168de3cc1d70728b6b89af9edb49168602f021",
      "name": "basic_face"
    },
    {
      "sha": "f2f17cda73d71285aaa2649095b115cfbe5a292e",
      "name": "sketch"
    }
  ]
}

ruan_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */

// remove this or set to false to enable full program (load will be slower)
// var DEBUG_MODE = true;

// this can be used to set the number of sliders to show
// var NUM_SLIDERS = 3;

// other variables can be in here too
// these control the colors used
// const bg_color = [225, 206, 187];
// const fg_color = [151, 102, 52];
// const stroke_color = [95, 52, 8];

function RuanFace() {

  // these are state variables for a face
  // (your variables may be different)
  this.skin = 3;    // 1-5
  this.ear = 1;    // 1-3
  this.blushType = 1; // Can be either 1 or 2


//   * Draw a face with position lists that include:

  this.draw = function(positions) {

      let skin = this.skin;
      let ear = this.ear;
      let mouth = 5;
      let blush = 5;
      let eyebrows_rotate=10;
      let glasses = 5;
      let pupil = 5;

      // Colour Sets
      let skin1 = '#fffaf5';
      let skin2 = '#fff1e4';
      let skin3 = '#fde3cb';
      let skin4 = '#dfb791';
      let skin5 = '#7a5540';

//      let ear1 = '#fffef2';//white
      let ear1 = '#f5deb4';//yellow
      let ear2 = '#4a2e21';//brown
      let ear3 = 'black';//black
//      let ear4 = '#b83835';//red



      let skinColour;
      let earColour;

      let left_eye = average_point(positions.left_eye);
      let right_eye = average_point(positions.right_eye);
      let left_eyebrow = average_point(positions.left_eyebrow);
      let right_eyebrow = average_point(positions.right_eyebrow);

      let left_d = dist(left_eye[0], left_eye[1], left_eyebrow[0], left_eyebrow[1]);
      let right_d = dist(right_eye[0], right_eye[1], right_eyebrow[0], right_eyebrow[1]);
      let left_eb_move = map(left_d, 0.4, 0.7, 0, 2, true);
      let right_eb_move = map(right_d, 0.4, 0.7, 0, 2, true);

      left_eye[0] *= 3;
      left_eye[1] *= 3;
      right_eye[0] *= 3;
      right_eye[1] *= 3;

      push();
      scale(0.33);

       // head
        noStroke();
        fill('#f2a8b9');//babypink
        beginShape();
        curveVertex(0, -3);
        curveVertex(0, -3);
        curveVertex(- 6.3, -3);
        curveVertex(-6.7, 3.5);
        curveVertex(0,5.7);
        curveVertex(6.7, 3.5);
        curveVertex(6.3, -3);
        curveVertex(0, 0);
        curveVertex(0, 0);
        ellipse(0, -1, 14,10);
        endShape();
        bezier(-5, -3, -14, -8, -7, -12, -4, -4);
        bezier(5, -3, 14, -8, 7, -12, 4, -4);


    // Skin Colour
      if(skin == 1){
        skinColour = skin1; //***ALMOST WHITE***//

      }else if (skin == 2){
        skinColour = skin2; //***Light***//

      }else if (skin == 3){
        skinColour = skin3; //***Light2***//

      }else if (skin == 4){
        skinColour = skin4; //***Mild***//

      }else{
        skinColour = skin5; //***Dark***//
      }

      fill(skinColour);
   noStroke();
   beginShape();
   curveVertex(0, -2);
   curveVertex(0, -2);
   curveVertex(- 5.1, -1.2);
   curveVertex(-5.2, 3.2);
   curveVertex(0,5);
   curveVertex(5.2, 3.2);
   curveVertex(5.1, -1.2);
   curveVertex(0, 0);
   curveVertex(0, 0);
   ellipse(0, 0, 11,8);
   endShape();

   // ear Colour
     if(ear == 1){
       earColour = ear1; //***white***//

     }else if (ear == 2){
       earColour = ear2; //***yellow***//

     }else{
       earColour = ear3; //***dark brown***//
     }

   //ear
   fill(earColour);
   noStroke();
   bezier(-5.2, -3.7, -10.5, -7, -8, -10, -4.7, -4.25);
   bezier(5.2, -3.7, 10.5, -7, 8, -10, 4.7, -4.25);

      // Mouth
      stroke('#ce8483');

      let top_lip_point = positions.top_lip[9];
      let bottom_lip_point = positions.bottom_lip[9];
      let d = dist(top_lip_point[0], top_lip_point[1], bottom_lip_point[0], bottom_lip_point[1])

      // Mouth Open
      if(d < 0.1) {
        d = 0;
      }
      mouth = map(d, 0, 0.5, 0, 10);
      let mouth_size = map(mouth, 0, 10, 0, 3);
      strokeWeight(0.2);
      fill('#ee9b90');
      rect(-1, 1.8, 1.6, mouth_size, 2);

      // Eyes
       noStroke();
       fill(0);
       ellipse(left_eye[0], left_eye[1]+3, 0.8, 1.2);
       ellipse(right_eye[0], right_eye[1]+3, 0.8, 1.2);

       // Pupil
       fill('white');
         ellipse(left_eye[0]-0.1, left_eye[1]-0.1+3, 0.3, 0.3); //***LEFT TOP***//
         ellipse(left_eye[0]+0.15, left_eye[1]+0.1+3, 0.2, 0.2); //***LEFT BOTTOM***//
         ellipse(right_eye[0]-0.1, right_eye[1]-0.1+3, 0.3, 0.3); //***RIGHT TOP***//
         ellipse(right_eye[0]+0.15, right_eye[1]+0.1+3, 0.2, 0.2); //***RIGHT BOTTOM***//

       // Eyebrows
       strokeWeight(0.4);
       stroke(90,59,32);//brown

       push();
       angleMode(DEGREES);
       translate(left_eye[0]-0.1, left_eye[1]+2.5);
       translate(0, -left_eb_move);
       rotate(eyebrows_rotate);
       line(-0.3, 0, 0.5, 0);
       pop();

       push();
       angleMode(DEGREES);
       translate(right_eye[0]-0.2, right_eye[1]+2.5);
       translate(0, -right_eb_move);
       rotate(-eyebrows_rotate);
       line(-0.3, 0, 0.5, 0);
       pop();

      // Glasses
       if (glasses > 5 && glasses < 8){
      noStroke();
      }

      // Sunglasses
      else if (glasses > 7 && glasses <= 10){
        noStroke();
    }
    pop();

    if (this.blushType == 1) { // Female blush
    stroke('#f8c2b6');
    strokeWeight(0.08);
    line(left_eye[0]+0.8, left_eye[1]+3.7, left_eye[0]+1, left_eye[1]+3.4);
    line(left_eye[0]+1, left_eye[1]+3.7, left_eye[0]+1.2, left_eye[1]+3.4);
    line(left_eye[0]+1.2, left_eye[1]+3.7, left_eye[0]+1.4, left_eye[1]+3.4);//left
    line(right_eye[0]-1.4, right_eye[1]+3.7, right_eye[0]-1.2, right_eye[1]+3.4);
    line(right_eye[0]-1.2, right_eye[1]+3.7, right_eye[0]-1, right_eye[1]+3.4);
    line(right_eye[0]-1, right_eye[1]+3.7, right_eye[0]-0.8, right_eye[1]+3.4);//right
} else if (this.blushType == 2) { // Male blush
    noStroke();
    fill(255, 176, 120,98);
    ellipse(left_eye[0]+1.2, left_eye[1]+3.7, 0.7);
    ellipse(right_eye[0]-1, right_eye[1]+3.7, 0.7);
}

  }

  /* set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
  this.skin = int(map(settings[0], 0, 100, 1, 5));
  this.blushType = int(map(settings[1], 0, 100, 1, 2));
  this.ear = int(map(settings[2], 0, 100, 1, 3));
  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    let settings = new Array(2);
    settings[0] = map(this.skin, 1, 5, 0, 100);
    settings[1] = map(this.blushType, 1, 2, 0, 100);
    settings[2] = map(this.ear, 1, 3, 0, 100);
    return settings;
  }
}


// given an array of [x,y] points, return the average
function average_point(list) {
  var sum_x = 0;
  var sum_y = 0;
  var num_points = 0;
  for(var i=0; i<list.length; i++) {
    sum_x += list[i][0];
    sum_y += list[i][1];
    num_points += 1;
  }
  return [sum_x / num_points, sum_y / num_points];
}

ruan_training_values.json

{
  "000001": [
    50,
    100,
    50
  ],
  "000002": [
    25,
    0,
    0
  ],
  "000005": [
    50,
    0,
    0
  ],
  "000006": [
    75,
    0,
    50
  ],
  "000007": [
    50,
    100,
    50
  ],
  "000009": [
    50,
    0,
    50
  ],
  "000010": [
    25,
    0,
    0
  ],
  "000013": [
    75,
    100,
    0
  ],
  "000014": [
    100,
    0,
    100
  ],
  "000015": [
    50,
    100,
    50
  ],
  "000018": [
    25,
    0,
    0
  ],
  "000020": [
    50,
    100,
    50
  ],
  "000023": [
    50,
    100,
    50
  ],
  "000025": [
    50,
    100,
    50
  ],
  "000028": [
    50,
    0,
    0
  ],
  "000029": [
    50,
    0,
    0
  ],
  "000030": [
    75,
    100,
    0
  ],
  "000031": [
    75,
    0,
    50
  ],
  "000032": [
    50,
    100,
    0
  ],
  "000035": [
    25,
    0,
    50
  ],
  "000037": [
    75,
    100,
    50
  ],
  "000038": [
    25,
    100,
    50
  ],
  "000040": [
    50,
    0,
    0
  ],
  "000041": [
    75,
    100,
    50
  ],
  "000042": [
    50,
    0,
    0
  ],
  "000043": [
    50,
    0,
    50
  ],
  "000044": [
    100,
    0,
    100
  ],
  "000045": [
    50,
    0,
    0
  ],
  "000047": [
    100,
    0,
    100
  ],
  "000048": [
    25,
    100,
    50
  ],
  "000050": [
    50,
    100,
    50
  ],
  "000051": [
    50,
    100,
    50
  ],
  "000052": [
    75,
    100,
    50
  ],
  "000054": [
    25,
    0,
    0
  ],
  "000055": [
    50,
    100,
    50
  ],
  "000056": [
    25,
    100,
    50
  ],
  "000058": [
    25,
    0,
    50
  ],
  "000060": [
    75,
    0,
    50
  ],
  "000064": [
    25,
    100,
    50
  ],
  "000065": [
    75,
    100,
    50
  ],
  "000068": [
    50,
    100,
    50
  ],
  "000069": [
    75,
    100,
    50
  ],
  "000071": [
    50,
    0,
    0
  ],
  "000073": [
    50,
    0,
    50
  ],
  "000076": [
    75,
    100,
    50
  ],
  "000077": [
    25,
    0,
    50
  ],
  "000078": [
    75,
    0,
    50
  ],
  "000079": [
    75,
    100,
    50
  ],
  "000080": [
    50,
    100,
    50
  ],
  "000081": [
    50,
    100,
    100
  ],
  "000083": [
    50,
    0,
    50
  ],
  "000085": [
    50,
    0,
    50
  ],
  "000086": [
    50,
    0,
    0
  ],
  "000088": [
    25,
    0,
    50
  ],
  "000091": [
    25,
    100,
    50
  ],
  "000092": [
    50,
    0,
    0
  ],
  "000096": [
    100,
    0,
    50
  ],
  "000097": [
    25,
    0,
    0
  ],
  "000099": [
    50,
    0,
    0
  ],
  "000100": [
    25,
    0,
    0
  ],
  "000103": [
    50,
    0,
    50
  ],
  "000104": [
    25,
    0,
    0
  ],
  "000106": [
    50,
    0,
    0
  ],
  "000108": [
    50,
    0,
    0
  ],
  "000109": [
    75,
    100,
    50
  ],
  "000110": [
    50,
    0,
    0
  ],
  "000111": [
    75,
    0,
    0
  ],
  "000114": [
    50,
    100,
    50
  ],
  "000115": [
    50,
    100,
    0
  ],
  "000116": [
    50,
    100,
    50
  ],
  "000117": [
    100,
    0,
    100
  ],
  "000118": [
    75,
    0,
    50
  ],
  "000121": [
    50,
    0,
    50
  ],
  "000122": [
    25,
    0,
    0
  ],
  "000125": [
    50,
    100,
    0
  ],
  "000126": [
    75,
    0,
    0
  ],
  "000129": [
    50,
    100,
    50
  ],
  "000131": [
    75,
    0,
    50
  ],
  "000132": [
    75,
    0,
    50
  ],
  "000133": [
    75,
    0,
    0
  ],
  "000134": [
    100,
    100,
    100
  ],
  "000135": [
    75,
    100,
    100
  ],
  "000137": [
    50,
    100,
    50
  ],
  "000140": [
    75,
    0,
    0
  ],
  "000142": [
    25,
    0,
    50
  ],
  "000143": [
    50,
    100,
    50
  ],
  "000145": [
    50,
    0,
    50
  ],
  "000146": [
    75,
    0,
    50
  ],
  "000147": [
    75,
    0,
    0
  ],
  "000148": [
    50,
    0,
    50
  ],
  "000150": [
    25,
    100,
    50
  ],
  "000151": [
    50,
    0,
    50
  ],
  "000152": [
    75,
    100,
    0
  ],
  "000153": [
    75,
    100,
    50
  ],
  "000155": [
    50,
    0,
    50
  ],
  "000156": [
    25,
    0,
    0
  ],
  "000157": [
    50,
    0,
    0
  ],
  "000160": [
    25,
    100,
    50
  ],
  "000161": [
    25,
    0,
    50
  ],
  "000016": [
    75,
    100,
    50
  ]
}

salazar_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */  

// other variables can be in here too
// these control the colors used



function SalazarFace() {
  const bg_color = [225, 206, 187];
  const fg_color = "#A19588";
  const stroke_color = [95, 52, 8];

  // these are state variables for a face
  // (your variables may be different)
  this.eye_value = 0;
  this.mouth_value = 0;
  this.eyebrow_value = 0;
  this.nose_value = 0;
  this.outline_value = 0;
   this.skin_tone = [
    "#FDEFD6", "#F7DABD", "#EDBC9B", "#D6A37E", "#BD836D","#87563F"
  ]
  this.hair_tone = [
    "#edbc9b", "#edbc9b", "#e9858f", "#ed9ba3", "#f1b1b7", "#f5c6cb"
  ]
  

  

  /*
   * Draw a face with position lists that include:
   *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
   *    bottom_lip, top_lip, nose_tip, nose_bridge, 
   */  
    
    
  this.draw = function(positions) {
      
      
      let pos_leftcheek = positions.chin[2];
      let pos_rightcheek = positions.chin[15];
      let pos_bottomcheek = positions.chin[7];
      let pos_bottomcheek2 = positions.chin[9];
      
    let pos_lefteye = average_point(positions.left_eye);
    let pos_righteye = average_point(positions.right_eye);

    let pos_lefteyeline = positions.left_eye[0];
    let pos_lefteyeline2 = positions.left_eye[2];
    let pos_lefteyeline3 = positions.left_eye[3];

    let pos_righteyeline = positions.right_eye[0];
    let pos_righteyeline2 = positions.right_eye[2];
    let pos_righteyeline3 = positions.right_eye[3];
        
      let pos_rightbrow = positions.right_eyebrow[1];
      let pos_rightbrow2 = positions.right_eyebrow[4];
      let pos_rightbrow3 = positions.right_eyebrow[2];
      
      
      
      let pos_leftbrow = positions.left_eyebrow[2];
      let pos_leftbrow2 = positions.left_eyebrow[4];
      
      // let pos_bottomlip = average_point(positions.bottom_lip)
      // let pos_toplip = average_point(positions.top_lip)


    let pos_bottomleftlip = positions.bottom_lip[6];
    let pos_bottomleftlip2 = positions.bottom_lip[6];
    let pos_bottommidlip = positions.bottom_lip[3];
    let pos_bottomrightlip = positions.bottom_lip[0];
    let pos_bottomrightlip2 = positions.bottom_lip[11];


    let pos_topleftlip = positions.top_lip[0];
    let pos_topleftlip2 = positions.top_lip[0];
    let pos_topmidlip = positions.top_lip[4];
    let pos_topmidlip2 = positions.top_lip[2];
    let pos_topmidlip3 = positions.top_lip[3];
    let pos_toprightlip = positions.top_lip[6];
    let pos_toprightlip2 = positions.top_lip[7];

 
      let pos_nosetip = positions.nose_tip[0];
      let pos_nosetip2 = positions.nose_tip[3];
      let pos_nosebridge = positions.nose_bridge[4];
      
      
  //FACE

      push();
      fill(this.skin_tone[this.skin_tone_value]);
      noStroke()  
      beginShape();
            vertex(0, -3)
            quadraticVertex(2, -3, 2, 0);
            quadraticVertex(2, 2, 0, 2);
            quadraticVertex(-2, 2, -2,0);
            quadraticVertex(-2, -3, 0, -3);
       endShape();
       pop();
      
       //FACE OUTLINE
      push();
      scale(1.1);
      noFill();
      translate(0.2,0.1);
      strokeWeight(this.outline_value);
      stroke(this.hair_tone[this.hair_tone_value]);
      beginShape();
            vertex(0, -3)
            quadraticVertex(2, -3, 2, 0);
            quadraticVertex(2, 2, 0, 2);
            quadraticVertex(-2, 2, -2,0);
            quadraticVertex(-2, -3, 0, -3);
       endShape();
      pop();
  
    
  //NOSE
    push();
    noFill();
    stroke(0);
    strokeWeight(0.1);

  //EYEBROW
      beginShape();
              vertex(pos_nosetip[0],pos_nosetip[1]);
              bezierVertex(pos_nosetip2[0],0.7+this.nose_value,pos_nosetip2[1]-0.5, pos_rightbrow3[1]-this.eyebrow_value-1,pos_rightbrow2[0], pos_rightbrow2[1]);
      endShape();
      pop();
      

//MOUTH
beginShape();
    fill(0);
    vertex(pos_topleftlip[0], pos_topleftlip[1]);
      quadraticVertex(pos_topmidlip[0], pos_topmidlip[1]+0.3, pos_toprightlip[0], pos_toprightlip[1]);
      quadraticVertex(pos_topmidlip[0], pos_topmidlip[1], pos_topmidlip3[0], pos_topmidlip3[1]);
      quadraticVertex(pos_topmidlip2[0], pos_topmidlip2[1], pos_topleftlip[0], pos_topleftlip[1]);
  endShape();

    beginShape();
    fill(0);
    vertex(pos_bottomleftlip[0], pos_bottomleftlip[1] );
    quadraticVertex(pos_bottommidlip[0], pos_bottommidlip[1] +0.5 + this.mouth_value, pos_bottomrightlip[0], pos_bottomrightlip[1]);
    quadraticVertex(pos_bottommidlip[0], pos_bottommidlip[1] -0.2 + this.mouth_value, pos_bottomleftlip2[0], pos_bottomleftlip2[1]);
  endShape();


    //EYES 
    
      push();
           fill(0);
           noStroke();
           arc(pos_lefteye[0], pos_lefteye[1]-0.02, 0.5+this.eye_value, 0.5+this.eye_value, 360, 180);
           arc(pos_righteye[0],pos_righteye[1]-0.02, 0.5+this.eye_value, 0.5+this.eye_value, 360, 180);
      pop();


      push();
      noFill();
      stroke(0);
      strokeWeight(0.1);

      beginShape();
      vertex(pos_lefteyeline[0],pos_lefteyeline[1]);
      quadraticVertex(pos_lefteyeline2[0],pos_lefteyeline2[1],pos_lefteyeline3[0],pos_lefteyeline3[1]);
      endShape();

      beginShape();
      vertex(pos_righteyeline[0],pos_righteyeline[1]);
      quadraticVertex(pos_righteyeline2[0],pos_righteyeline2[1],pos_righteyeline3[0],pos_righteyeline3[1]);
      endShape();
      pop();

      
      
  }

  /* set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
    // print(settings);
      
    this.eye_value = map(settings[0], 0, 100, -0.3, 0.3);  
    this.eyebrow_value = map(settings[1],0,100,-0.7, 0.7);
    this.mouth_value = map(settings[2], 0, 100, -0.5, 0.5);
    this.nose_value = map(settings[3],0,100,-0.5,0.5);
    this.outline_value = map(settings[4],0,100,0,0.3);
    this.skin_tone_value = int(map(settings[5], 0, 100, 0, 5));
    this.hair_tone_value = int(map(settings[6], 0, 100,0, 5));

  
          
  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
   let settings = new Array(5);
    settings[0] = map( this.eye_value,  -0.3, 0.3, 0, 100);
    settings[1] = map( this.eyebrow_value,  -0.7, 0.7, 0, 100);
    settings[2] = map( this.mouth_value,  -0.5, 0.5, 0, 100);
    settings[3] = map( this.nose_value,  -0.5,0.5, 0, 100);
    settings[4] = map( this.outline_value,  0,0.3, 0, 100);
    settings[5] = map(this.skin_tone_value, 0,5,0,100);
    settings[6] = map(this.hair_tone_value, 0, 5, 0, 100);

    return settings;
  }
}


function average_point(list) {
  var sum_x = 0;
  var sum_y = 0;
  var num_points = 0;
  for(var i=0; i<list.length; i++) {
    sum_x += list[i][0];
    sum_y += list[i][1];
    num_points += 1; 
  }
  return [sum_x / num_points, sum_y / num_points];
}

salazar_training_values.json

{
  "000001": [
    54,
    28,
    64,
    30,
    100,
    70,
    45
  ],
  "000161": [
    50,
    50,
    50,
    50,
    100,
    0,
    40
  ],
  "000160": [
    50,
    50,
    50,
    50,
    13,
    20,
    40
  ],
  "000157": [
    50,
    50,
    50,
    50,
    100,
    20,
    40
  ],
  "000156": [
    50,
    50,
    50,
    50,
    100,
    0,
    40
  ],
  "000155": [
    68,
    20,
    74,
    41,
    100,
    40,
    40
  ],
  "000153": [
    50,
    50,
    50,
    50,
    15,
    40,
    40
  ],
  "000152": [
    50,
    50,
    50,
    50,
    3,
    20,
    40
  ],
  "000151": [
    50,
    50,
    50,
    50,
    100,
    40,
    40
  ],
  "000150": [
    50,
    50,
    50,
    50,
    10,
    0,
    40
  ],
  "000148": [
    50,
    50,
    50,
    50,
    100,
    20,
    40
  ],
  "000147": [
    50,
    50,
    50,
    50,
    100,
    40,
    40
  ],
  "000146": [
    50,
    50,
    50,
    50,
    100,
    60,
    40
  ],
  "000145": [
    50,
    50,
    50,
    50,
    100,
    40,
    40
  ],
  "000143": [
    50,
    50,
    50,
    50,
    8,
    40,
    40
  ],
  "000142": [
    50,
    50,
    50,
    50,
    100,
    20,
    40
  ],
  "000140": [
    50,
    50,
    50,
    50,
    100,
    40,
    40
  ],
  "000137": [
    50,
    50,
    50,
    50,
    10,
    0,
    40
  ],
  "000135": [
    50,
    50,
    50,
    50,
    1,
    80,
    40
  ],
  "000134": [
    50,
    50,
    50,
    50,
    5,
    100,
    40
  ],
  "000133": [
    50,
    50,
    50,
    50,
    100,
    40,
    40
  ],
  "000132": [
    50,
    50,
    50,
    50,
    100,
    60,
    40
  ],
  "000131": [
    50,
    50,
    50,
    50,
    100,
    60,
    60
  ],
  "000129": [
    26,
    30,
    77,
    50,
    7.000000000000001,
    20,
    40
  ],
  "000126": [
    50,
    50,
    50,
    50,
    100,
    40,
    40
  ],
  "000125": [
    50,
    50,
    50,
    50,
    5,
    40,
    40
  ],
  "000122": [
    50,
    50,
    50,
    50,
    100,
    0,
    40
  ],
  "000121": [
    50,
    50,
    50,
    50,
    100,
    60,
    40
  ],
  "000118": [
    60,
    32,
    31,
    91,
    100,
    40,
    40
  ],
  "000117": [
    71,
    42,
    68,
    0,
    100,
    100,
    40
  ],
  "000116": [
    28.999999999999996,
    4.0000000000000036,
    86,
    16.000000000000004,
    18,
    20,
    40
  ],
  "000002": [
    63,
    15,
    64,
    63,
    100,
    0,
    40
  ],
  "000005": [
    63,
    8,
    64,
    50,
    100,
    20,
    20
  ],
  "000006": [
    65,
    44,
    69,
    2.0000000000000018,
    100,
    80,
    60
  ],
  "000007": [
    16,
    50,
    30,
    50,
    11.000000000000002,
    40,
    40
  ],
  "000009": [
    37,
    0,
    72,
    50,
    99,
    40,
    60
  ],
  "000010": [
    70,
    30,
    50,
    52,
    100,
    20,
    0
  ],
  "000013": [
    19,
    0,
    74,
    0,
    6,
    0,
    0
  ],
  "000014": [
    70,
    26,
    59,
    69,
    100,
    60,
    40
  ],
  "000015": [
    17,
    4.0000000000000036,
    61,
    30,
    13,
    0,
    40
  ],
  "000016": [
    16,
    20,
    50,
    9.999999999999998,
    10,
    40,
    40
  ],
  "000018": [
    23.000000000000004,
    0,
    67,
    57.99999999999999,
    100,
    20,
    100
  ],
  "000020": [
    47,
    20,
    90,
    0,
    6,
    40,
    60
  ],
  "000023": [
    35,
    0,
    76,
    100,
    9,
    40,
    40
  ],
  "000025": [
    63,
    23,
    13,
    18,
    6,
    20,
    60
  ],
  "000028": [
    40,
    0,
    77,
    50,
    100,
    60,
    40
  ],
  "000029": [
    65,
    43,
    50,
    96,
    100,
    20,
    60
  ],
  "000030": [
    88.00000000000001,
    22,
    26,
    0,
    21.000000000000004,
    40,
    100
  ],
  "000031": [
    32,
    26,
    77,
    17.000000000000004,
    100,
    20,
    80
  ],
  "000032": [
    35,
    24,
    71,
    21.999999999999996,
    19,
    20,
    100
  ],
  "000035": [
    56.99999999999999,
    24,
    65,
    14.000000000000002,
    100,
    20,
    40
  ],
  "000037": [
    64,
    0,
    42,
    0,
    10,
    60,
    40
  ],
  "000038": [
    40,
    0,
    79,
    0,
    6,
    20,
    80
  ],
  "000040": [
    56.99999999999999,
    0,
    37,
    33,
    100,
    40,
    60
  ],
  "000041": [
    43.00000000000001,
    15,
    50,
    0,
    9,
    80,
    40
  ],
  "000042": [
    56.99999999999999,
    9.000000000000002,
    34,
    35,
    98,
    20,
    100
  ],
  "000043": [
    63,
    17,
    50,
    28.000000000000004,
    100,
    40,
    40
  ],
  "000044": [
    64,
    31,
    53,
    100,
    100,
    100,
    40
  ],
  "000045": [
    38,
    0,
    67,
    28.999999999999996,
    100,
    60,
    80
  ],
  "000047": [
    25,
    60,
    68,
    20.999999999999996,
    100,
    80,
    40
  ],
  "000048": [
    36,
    100,
    28.000000000000004,
    0,
    22.000000000000004,
    0,
    80
  ],
  "000050": [
    61,
    11.999999999999995,
    73,
    35,
    6,
    40,
    60
  ],
  "000051": [
    63,
    0,
    23,
    14.000000000000002,
    2,
    20,
    0
  ],
  "000052": [
    33,
    0,
    17.000000000000004,
    16.000000000000004,
    7.000000000000001,
    40,
    60
  ],
  "000054": [
    56.00000000000001,
    20,
    63,
    59,
    99,
    20,
    100
  ],
  "000055": [
    60,
    26,
    45,
    17.000000000000004,
    13,
    40,
    40
  ],
  "000056": [
    71,
    100,
    26,
    34,
    6,
    20,
    100
  ],
  "000058": [
    24,
    3.000000000000003,
    50,
    25,
    100,
    0,
    60
  ],
  "000060": [
    26,
    50,
    62,
    50,
    13,
    100,
    80
  ],
  "000064": [
    27,
    0,
    77,
    7.000000000000001,
    5,
    20,
    80
  ],
  "000065": [
    61,
    24,
    54,
    50,
    8,
    40,
    40
  ],
  "000068": [
    78,
    45,
    66,
    13,
    11.000000000000002,
    40,
    100
  ],
  "000069": [
    50,
    50,
    50,
    50,
    17,
    20,
    40
  ],
  "000077": [
    65,
    0,
    50,
    20,
    99,
    80,
    40
  ],
  "000091": [
    17,
    17,
    50,
    73,
    15,
    20,
    40
  ],
  "000092": [
    37,
    15,
    24,
    18,
    100,
    0,
    0
  ],
  "000096": [
    50,
    50,
    50,
    50,
    50,
    60,
    40
  ],
  "000097": [
    50,
    50,
    50,
    50,
    50,
    0,
    40
  ],
  "000099": [
    50,
    50,
    50,
    50,
    50,
    0,
    40
  ],
  "000100": [
    39,
    1.0000000000000009,
    32,
    50,
    100,
    80,
    0
  ],
  "000103": [
    50,
    50,
    50,
    71,
    100,
    60,
    40
  ],
  "000104": [
    50,
    50,
    50,
    50,
    9,
    0,
    20
  ],
  "000080": [
    50,
    50,
    50,
    50,
    18,
    60,
    0
  ],
  "000115": [
    37,
    2.0000000000000018,
    50,
    13,
    0,
    0,
    0
  ],
  "000114": [
    73,
    0,
    79,
    23,
    4,
    20,
    40
  ],
  "000111": [
    37,
    23,
    50,
    68,
    100,
    80,
    60
  ],
  "000110": [
    62,
    21,
    80,
    0,
    100,
    20,
    60
  ],
  "000109": [
    47,
    18.999999999999996,
    73,
    54,
    14.000000000000002,
    40,
    60
  ],
  "000106": [
    62,
    50,
    50,
    50,
    100,
    60,
    40
  ],
  "000108": [
    66,
    36.00000000000001,
    73,
    18,
    100,
    20,
    0
  ],
  "000088": [
    53,
    4.0000000000000036,
    50,
    30,
    100,
    60,
    60
  ],
  "000086": [
    59,
    28.000000000000004,
    74,
    6,
    100,
    0,
    80
  ],
  "000085": [
    70,
    32,
    36,
    100,
    100,
    0,
    60
  ],
  "000083": [
    41,
    18.999999999999996,
    49,
    20.999999999999996,
    100,
    20,
    60
  ],
  "000081": [
    72,
    13.999999999999998,
    79,
    28.000000000000004,
    4,
    60,
    40
  ],
  "000079": [
    69,
    28.999999999999996,
    26,
    57.99999999999999,
    0,
    40,
    40
  ],
  "000078": [
    49,
    0,
    44,
    0,
    100,
    40,
    60
  ],
  "000076": [
    51,
    42,
    23,
    50,
    2,
    40,
    40
  ],
  "000073": [
    63,
    33,
    57.99999999999999,
    0,
    100,
    20,
    80
  ],
  "000071": [
    46.00000000000001,
    3.000000000000003,
    72,
    53,
    100,
    20,
    20
  ]
}

sample_images.json

[
	"z_group_pic.jpg",
	"z_group_pic2.jpg",
	"z_single1.jpg",
	"z_single2.jpg",
	"z_single3.jpg",
	"oscar_selfie.jpg",
	"williams.jpg"
]

sapsford_anim.js

function sapsford_draw_one_frame(cur_frac) {
    rectMode(RADIUS);
    ellipseMode(RADIUS);
    colorMode(RGB);
    angleMode(DEGREES);

  // note: to clear the screen draw a rectangle
  // that is width x height - like this
  noStroke();
  let bg1 = color(60, 21, 59)
  let bg2 = color(91, 32, 89)
  let interpForward = lerpColor(bg1, bg2, cur_frac)
  let interpBack = lerpColor(bg2, bg1, cur_frac)
  if(cur_frac < 0.5){
      fill(interpForward)
    } else{
      fill(interpBack)
    }

  rect(0, 0, width, height);
  angleMode(DEGREES);
  colorMode(RGB)

  let half_width = width / 2;

  //Main centre arc variables
  let base_scale = width*0.9
  let base_angle = 180
  let steps = 5;
  let cur_scale = map(cur_frac,0,1,0,base_scale);
  let cur_deg = map(cur_frac,0,1,0,base_angle);
  let opacEle =  map(cur_frac,0,1,0.1,0.25)

  fill('rgba(220,171,107,0.2)');

  //I have added line breaks between arguments for these shapes for readability purposes
  //arc begins as a circle and eventually collapses on itself. size increases proportionate to cur_frac
  for(let i=0; i<steps; i++){
    arc(
      width/2, //x pos
      width/10, //y pos
      cur_scale/steps+(base_scale/steps+1)*i, //width
      cur_scale/steps+(base_scale/steps+1)*i, //height
      270+(cur_deg/steps+(base_angle/steps)*i), //arc start
      270-(cur_deg/steps+(base_angle/steps)*i) //arc stop
    )
  }

  //(cor)ner arcs
  let cor_deg = map(cur_frac,0,1,0,360); //corner angle variable
  let ref = -cor_deg //inverse used for the one on the other side
  let cor_height = width * 0.60 //proportionate to width to scale properly
  let cor_width = width * 1

  for(let i=0; i<4; i++){
    arc(-50,-50,cor_height,cor_width,
      cor_deg/i,
      cor_deg+(90/i) //staggeres the stop, creating a 'chasing' effect
    )
    arc(width+50,-50,cor_height,cor_width,
      (ref-(90/i))-180,
      (ref/i)-180
    )

  }

  //(cir)cle variables
  let cir_basescale = width*0.10 //cir(cle) scale variable
  let cir_offset = width*0.10 //the origin point for the smallest circles
  let cur_x = map(cur_frac,0,1,0,width/2); // (cur)rent x for individual circles
  let cir_y = map(cur_frac*cur_frac,0,1,0,height); //y value for each row, based on the steps
  let cir_scale = map(cur_frac,0,1,0,cir_basescale)
  let steps2 = 5 //outermost channels of circles
  let steps3 = 4
  let steps4 = 3 //centremost channel of circles

//left, left-centre, centre, right-centre, right channels of circles, respectively
  for(let i=0; i<steps2; i++){
    circle(
      (cur_x/steps2+(width/2/steps2+1)*i)+width/2,
      (cir_y/steps2+(height/steps2)*i)+cir_offset,
      cir_scale/steps2+(cir_basescale/steps2)*i
    )
  }
  for(let i=0; i<steps3; i++){
    circle(
      ((cur_x/2)/steps3+(width/4/steps3+1)*i)+width/2,
      (cir_y/steps3+(height/steps3)*i)+cir_offset,
      cir_scale/steps3+(cir_basescale/steps3)*i
    )
  }
  for(let i=0; i<steps4; i++){
    circle(
      width/2,
      (cir_y/steps4+(height/steps4)*i)+cir_offset,
      cir_scale/steps4+(cir_basescale/steps4)*i
    )
  }
  for(let i=0; i<steps3; i++){
    circle(
      -((cur_x/2)/steps3+(width/4/steps3+1)*i)+width/2,
      (cir_y/steps3+(height/steps3)*i)+cir_offset,
      cir_scale/steps3+(cir_basescale/steps3)*i
    )
  }
  for(let i=0; i<steps2; i++){
    circle(
      -(cur_x/steps2+(width/2/steps2+1)*i)+width/2,
      (cir_y/steps2+(height/steps2)*i)+cir_offset,
      cir_scale/steps2+(cir_basescale/steps2)*i
    )
  }





  // note: you can draw optional things depending on "debugView"
  if (debugView) {
    // we'll draw our "keyframes"
    noFill();
    stroke(255, 0, 0);
    strokeWeight(height/100);
    // here we "plug in" the values when cur_frac is 0
    rect(-half_width, 0, rect_width, height);
    rect( width - half_width, 0, rect_width, height);
    rect(-width - half_width, 0, rect_width, height);
  }

    rectMode(CORNER);
    ellipseMode(CENTER);
    // colorMode(RGB);
    // angleMode(RADIANS);
}

sapsford_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */

// remove this or set to false to enable full program (load will be slower)
var DEBUG_MODE = false;

// Number of required sliders
var NUM_SLIDERS = 9;


// example of a global function
// given a segment, this returns the average point [x, y]
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 ];
}

// Defining Face object
function SapsfordFace() {
  //my variables to test
  this.eye_type = 0; //which style of eye
  this.head_width = 10; //head width (also used to proportionately calculate the size of certain features)
  this.head_height = 5; //head height (also used to proportionately calculate the size of certain features)
  this.lash = 0; //whether or not the eyes have eyelashes
  this.helmet_colour = 0; //colour of the helmet
  this.skin_colour = 0; //skin tone
  this.hair_colour = 0; //hair colour, also for eyebrow colour
  this.mouth_type = 0; //which style of mouth
  this.hairstyle = 0; //which style of hair

  //the colour of the helmet: cyan to yellow on a gradient
  const primaryColours = ['#1cf3ff','#55E9BF','#8EE080','#C6D640','#FFCC00']
  //the corresponding colours used for the 'ears' of the helmet. Darker, muted shades of the above colours
  const secondaryColours = ['#2b8084','#427B63','#597642','#707121','#876C00']
  //skin colours, from fairest, to darkest
  const skinColours = ['#ffedd6','#ffdbac','#f1c27d','#e0ac69','#c68642','#8d5524'] //credit for this palette goes to 'messrskoonyfootseven' on color-hex.com
  //hair colours: light blonde, dark blonde, light brown, dark brown, black.
  const hairColours = ['#ffd54d','#c4a335','#876132','#2D2315','#0f0e0b']


  this.draw = function(positions) {
    //setting my preferred draw modes for various methods
    rectMode(RADIUS);
    ellipseMode(RADIUS);
    colorMode(RGB);
    angleMode(DEGREES);

    //internal variables to solve 'scope' problem
    let headW = map(this.head_height,0,100,3,9)
    let headH = map(this.head_width,0,100,2,6.5)
    let eye = this.eye_type;
    let lashes = this.lash
    let helmC = this.helmet_colour
    let skin = this.skin_colour
    let hairC = this.hair_colour
    let mouth = this.mouth_type
    let hair = this.hairstyle
    //Mapped positions
    let leftEye = segment_average(positions.left_eye)
    let rightEye = segment_average(positions.right_eye)
    let leftLip = positions.top_lip[0] //left corner of top lip
    let rightLip = positions.top_lip[5] //right corner of top lip
    let lipMid = positions.bottom_lip[9] //middle of bottom lip
    let browS = positions.left_eyebrow[0] //start of eyebrow
    let browE = positions.left_eyebrow[4] //end of eyebrow
    //ear covers for the helmet
    fill(secondaryColours[helmC]);
    noStroke();
    ellipse(headW*0.9,0,headW*0.35,headH*0.5)
    ellipse(-headW*0.9,0,headW*0.35,headH*0.5)
    //helmet
    fill(primaryColours[helmC]);
    rect(0,0,headW,headH,headH*0.6);
    //face
    fill(skinColours[skin])
    circle(0,0,headH-0.2)
    //blush
    fill(247,178,197)
    circle(headW*0.35,headH*0.4,0.75)
    circle(-headW*0.35,headH*0.4,0.75)
    //eyes
    if (eye < 1){ //wide open
      if(lashes == 1){
        stroke(0)
        strokeWeight(0.175)
        line(leftEye[0],-headH*0.175,leftEye[0]-1.2,-headH*0.175)
        line(leftEye[0],-headH*0.05,leftEye[0]-1.3,-headH*0.05)
        line(rightEye[0],-headH*0.175,rightEye[0]+1.2,-headH*0.175)
        line(rightEye[0],-headH*0.05,rightEye[0]+1.3,-headH*0.05)

      }
      fill(255)
      stroke(0)
      strokeWeight(0.1);
      circle(leftEye[0]-0.25,0,headH*0.3)
      circle(rightEye[0]+0.25,0,headH*0.3)
      fill(0);
      noStroke();
      circle(leftEye[0]-0.15,headH*0.05,headH*0.22)
      circle(rightEye[0]+0.35,headH*0.05,headH*0.22)
    } if (eye == 1){ //square
        if(lashes == 1){
          stroke(0)
          strokeWeight(0.175)
          line(leftEye[0],headH*0.175,leftEye[0]-1.2,headH*0.175)
          line(leftEye[0],headH*0.05,leftEye[0]-1.3,headH*0.05)
          line(rightEye[0],headH*0.175,rightEye[0]+1.2,headH*0.175)
          line(rightEye[0],headH*0.05,rightEye[0]+1.3,headH*0.05)
        }
        fill(255)
        stroke(0)
        strokeWeight(0.1);
        rect(leftEye[0]-0.25,headH*0.05,headH*0.3,headH*0.25,headW*0.15)
        rect(rightEye[0]+0.25,headH*0.05,headH*0.3,headH*0.25,headW*0.15)
        fill(0);
        noStroke();
        circle(leftEye[0]-0.25,headH*0.1,headH*0.22)
        circle(rightEye[0]+0.25,headH*0.1,headH*0.22)
      } if (eye == 2){ //half open
          if(lashes == 1){
            stroke(0)
            strokeWeight(0.175)
            line(leftEye[0],0,leftEye[0]-1.5,headH*0.175)
            line(leftEye[0],headH*0.05,leftEye[0]-1.6,headH*0.05)
            line(rightEye[0],0,rightEye[0]+1.5,headH*0.175)
            line(rightEye[0],headH*0.05,rightEye[0]+1.6,headH*0.05)
          }
          fill(255)
          stroke(0)
          strokeWeight(0.1);
          arc(leftEye[0]-0.35,-headH*0.1,headH*0.4,headH*0.4,355,185,CHORD)
          arc(rightEye[0]+0.35,-headH*0.1,headH*0.4,headH*0.4,355,185,CHORD)
          fill(0);
          noStroke();
          circle(leftEye[0]-0.35,(headH*0.1),headH*0.22)
          circle(rightEye[0]+0.35,(headH*0.1),headH*0.22)
      }
    //mouth
    if (mouth == 0){ //neutral
      stroke(0)
      strokeWeight(0.2);
      line(leftLip[0],1,rightLip[0],1)
    } if (mouth == 1){ //smile
      stroke(0)
      strokeWeight(0.2);
      beginShape()
      curveVertex(leftLip[0],1)
      curveVertex(leftLip[0],1)
      curveVertex(lipMid[0],1.1)
      curveVertex(rightLip[0],1)
      curveVertex(rightLip[0],1)
      endShape()
    } if (mouth == 2){ //wide grin
        stroke(0);
        fill(186, 89, 116)
        strokeWeight(0.1);
        arc(lipMid[0],headH*0.35,headH*0.2,headH*0.3,360,180,CHORD)
    }
    //hair (if 0, draw nothing)
    if (hair == 1){ //sprig style
      stroke(hairColours[hairC])
      strokeWeight(0.25)
      noFill()
      beginShape()
      curveVertex(headW*0.2,-headH-0.4)
      curveVertex(headW*0.15,-headH-0.4)
      curveVertex(headW*0.05,-headH-0.3)
      curveVertex(0,-headH+0.2)
      curveVertex(headW*0.1,-headH-0.1)
      curveVertex(headW*0.15,-headH)
      endShape()
    }if (hair == 2){ //tuft style
      stroke(hairColours[hairC])
      strokeWeight(0.25)
      line(0,-headH+0.3,0,-headH+0.9)
      line(0,-headH+0.3,0.2,-headH+0.7)
      line(0,-headH+0.3,-0.2,-headH+0.7)
    }
    //eyebrows
    stroke(hairColours[hairC])
    strokeWeight(0.4)
    line(-headW*0.45,browS[1]+0.5,-headW*0.2,browE[1]+0.5)//draws symmetrically to keep the style consistent 
    line(headW*0.45,browS[1]+0.5,headW*0.2,browE[1]+0.5)

    rectMode(CORNER);
    ellipseMode(CENTER);
    // colorMode(RGB);
    // angleMode(RADIANS);
  }

  /* set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
    this.head_width = map(settings[0], 0, 100, 1, 10);
    this.head_height = map(settings[1], 0, 100, 1, 10);
    this.eye_type = int(map(settings[2], 0, 100, 0, 2));
    this.lash = int(map(settings[3], 0, 100, 0, 1));
    this.helmet_colour = int(map(settings[4], 0, 100, 0, 4));
    this.skin_colour = int(map(settings[5], 0, 100, 0, 5));
    this.hair_colour = int(map(settings[6], 0, 100, 0, 4));
    this.mouth_type = int(map(settings[7], 0, 100, 0, 2));
    this.hairstyle = int(map(settings[8], 0, 100, 0, 2));
  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    let settings = new Array(9);
    settings[0] = map(this.head_width, 0, 10, 0, 100);
    settings[1] = map(this.head_height, 0, 10, 0, 100);
    settings[2] = int(map(this.eye_type, 0, 2, 0, 100));
    settings[3] = int(map(this.lash, 0, 1, 0, 100));
    settings[4] = int(map(this.helmet_colour, 0, 4, 0, 100));
    settings[5] = int(map(this.skin_colour, 0, 5, 0, 100));
    settings[6] = int(map(this.hair_colour, 0, 4, 0, 100));
    settings[7] = int(map(this.mouth_type, 0, 2, 0, 100));
    settings[8] = int(map(this.hairstyle, 0, 2, 0, 100));
    return settings;
  }
}

sapsford_training_values.json

{
  "000001": [
    78.4,
    58.60000000000001,
    50,
    100,
    75,
    20,
    25,
    100,
    100
  ],
  "000002": [
    40.6,
    34.300000000000004,
    0,
    100,
    100,
    0,
    50,
    100,
    100
  ],
  "000005": [
    46.9,
    35.2,
    100,
    100,
    0,
    0,
    0,
    0,
    50
  ],
  "000006": [
    64.9,
    34.300000000000004,
    100,
    100,
    0,
    60,
    0,
    0,
    100
  ],
  "000007": [
    79.3,
    100,
    50,
    0,
    100,
    40,
    75,
    0,
    50
  ],
  "000009": [
    55.89999999999999,
    55.89999999999999,
    50,
    100,
    50,
    0,
    50,
    50,
    100
  ],
  "000010": [
    37,
    43.3,
    50,
    100,
    25,
    0,
    0,
    50,
    100
  ],
  "000013": [
    47.79999999999999,
    82.9,
    100,
    0,
    0,
    0,
    0,
    50,
    0
  ],
  "000014": [
    66.7,
    44.2,
    100,
    100,
    75,
    80,
    75,
    50,
    100
  ],
  "000015": [
    37.9,
    55.00000000000001,
    100,
    0,
    100,
    20,
    50,
    0,
    50
  ],
  "000016": [
    37.9,
    55.00000000000001,
    0,
    0,
    0,
    20,
    50,
    50,
    50
  ],
  "000018": [
    35.2,
    27.1,
    100,
    100,
    25,
    20,
    0,
    50,
    100
  ],
  "000020": [
    33.4,
    75.7,
    50,
    0,
    50,
    20,
    50,
    0,
    100
  ],
  "000023": [
    62.2,
    55.00000000000001,
    100,
    0,
    0,
    0,
    50,
    50,
    50
  ],
  "000025": [
    69.4,
    63.99999999999999,
    50,
    0,
    75,
    40,
    25,
    0,
    0
  ],
  "000028": [
    44.2,
    34.300000000000004,
    50,
    100,
    25,
    40,
    25,
    100,
    100
  ],
  "000029": [
    44.2,
    34.300000000000004,
    0,
    100,
    25,
    20,
    0,
    50,
    100
  ],
  "000030": [
    64.9,
    77.5,
    0,
    0,
    75,
    20,
    75,
    0,
    0
  ],
  "000031": [
    68.5,
    44.2,
    100,
    100,
    0,
    20,
    0,
    50,
    100
  ],
  "000032": [
    28.9,
    47.79999999999999,
    50,
    0,
    100,
    20,
    25,
    0,
    50
  ],
  "000035": [
    42.400000000000006,
    34.300000000000004,
    50,
    100,
    50,
    40,
    75,
    0,
    50
  ],
  "000037": [
    66.7,
    94.6,
    50,
    0,
    50,
    80,
    75,
    0,
    0
  ],
  "000038": [
    71.2,
    71.2,
    0,
    0,
    100,
    20,
    25,
    100,
    50
  ],
  "000040": [
    52.29999999999999,
    40.6,
    0,
    100,
    0,
    0,
    75,
    0,
    50
  ],
  "000041": [
    67.6,
    67.6,
    0,
    0,
    75,
    20,
    75,
    100,
    50
  ],
  "000042": [
    48.699999999999996,
    40.6,
    0,
    100,
    25,
    20,
    25,
    50,
    100
  ],
  "000043": [
    64.9,
    56.8,
    0,
    100,
    25,
    0,
    50,
    100,
    100
  ],
  "000044": [
    63.99999999999999,
    63.99999999999999,
    0,
    100,
    50,
    100,
    75,
    0,
    100
  ],
  "000045": [
    48.699999999999996,
    40.6,
    0,
    100,
    25,
    20,
    100,
    100,
    100
  ],
  "000047": [
    62.2,
    58.60000000000001,
    0,
    100,
    75,
    40,
    75,
    50,
    50
  ],
  "000048": [
    62.2,
    58.60000000000001,
    0,
    0,
    75,
    0,
    75,
    0,
    50
  ],
  "000050": [
    77.5,
    90.99999999999999,
    100,
    0,
    50,
    20,
    50,
    100,
    50
  ],
  "000051": [
    51.4,
    82,
    0,
    0,
    0,
    20,
    50,
    50,
    0
  ],
  "000052": [
    67.6,
    66.7,
    50,
    0,
    75,
    0,
    50,
    0,
    50
  ],
  "000054": [
    71.2,
    70.30000000000001,
    0,
    100,
    75,
    0,
    0,
    50,
    100
  ],
  "000055": [
    37,
    77.5,
    50,
    0,
    0,
    0,
    75,
    0,
    50
  ],
  "000056": [
    43.3,
    80.19999999999999,
    50,
    0,
    0,
    0,
    75,
    0,
    100
  ],
  "000058": [
    63.99999999999999,
    27.1,
    0,
    100,
    100,
    0,
    75,
    50,
    50
  ],
  "000060": [
    61.3,
    95.49999999999999,
    100,
    0,
    0,
    60,
    75,
    50,
    50
  ],
  "000064": [
    43.3,
    59.5,
    100,
    0,
    100,
    20,
    50,
    50,
    50
  ],
  "000065": [
    59.5,
    87.4,
    50,
    0,
    25,
    40,
    75,
    100,
    50
  ],
  "000068": [
    63.99999999999999,
    75.7,
    0,
    0,
    50,
    0,
    75,
    50,
    50
  ],
  "000069": [
    67.6,
    42.400000000000006,
    0,
    0,
    0,
    20,
    75,
    0,
    50
  ],
  "000071": [
    27.1,
    27.1,
    50,
    100,
    25,
    20,
    0,
    50,
    100
  ],
  "000073": [
    34.300000000000004,
    34.300000000000004,
    50,
    100,
    25,
    20,
    75,
    0,
    100
  ],
  "000076": [
    59.5,
    55.89999999999999,
    0,
    0,
    50,
    20,
    75,
    50,
    50
  ],
  "000077": [
    67.6,
    34.300000000000004,
    0,
    100,
    100,
    0,
    75,
    50,
    50
  ],
  "000078": [
    72.09999999999998,
    54.1,
    0,
    100,
    75,
    20,
    75,
    50,
    100
  ],
  "000079": [
    67.6,
    63.99999999999999,
    0,
    0,
    25,
    0,
    50,
    50,
    0
  ],
  "000080": [
    66.7,
    74.8,
    0,
    0,
    50,
    20,
    50,
    0,
    50
  ],
  "000081": [
    60.400000000000006,
    81.1,
    50,
    0,
    25,
    20,
    75,
    100,
    50
  ],
  "000083": [
    63.1,
    47.79999999999999,
    0,
    100,
    0,
    20,
    50,
    50,
    100
  ],
  "000085": [
    62.2,
    62.2,
    0,
    100,
    50,
    0,
    100,
    50,
    100
  ],
  "000086": [
    48.699999999999996,
    40.6,
    50,
    100,
    25,
    20,
    25,
    100,
    100
  ],
  "000088": [
    55.89999999999999,
    45.099999999999994,
    0,
    100,
    50,
    0,
    25,
    0,
    50
  ],
  "000091": [
    55.89999999999999,
    78.4,
    100,
    0,
    25,
    0,
    25,
    0,
    0
  ],
  "000092": [
    54.1,
    34.300000000000004,
    50,
    100,
    75,
    20,
    0,
    50,
    50
  ],
  "000096": [
    47.79999999999999,
    46.9,
    0,
    100,
    25,
    0,
    75,
    0,
    50
  ],
  "000097": [
    51.4,
    63.99999999999999,
    50,
    100,
    0,
    0,
    50,
    0,
    100
  ],
  "000099": [
    55.00000000000001,
    55.00000000000001,
    50,
    100,
    50,
    0,
    25,
    100,
    100
  ],
  "000100": [
    59.5,
    61.3,
    0,
    100,
    0,
    0,
    25,
    50,
    100
  ],
  "000103": [
    55.00000000000001,
    55.00000000000001,
    50,
    100,
    75,
    0,
    75,
    0,
    100
  ],
  "000104": [
    48.699999999999996,
    27.1,
    100,
    0,
    0,
    20,
    25,
    100,
    0
  ],
  "000106": [
    55.89999999999999,
    63.1,
    100,
    100,
    75,
    0,
    50,
    100,
    50
  ],
  "000108": [
    48.699999999999996,
    40.6,
    50,
    100,
    25,
    20,
    0,
    100,
    100
  ],
  "000109": [
    70.30000000000001,
    68.5,
    50,
    0,
    50,
    0,
    50,
    50,
    0
  ],
  "000110": [
    59.5,
    47.79999999999999,
    100,
    100,
    25,
    0,
    25,
    100,
    50
  ],
  "000111": [
    55.89999999999999,
    47.79999999999999,
    100,
    100,
    25,
    60,
    0,
    100,
    50
  ],
  "000114": [
    70.30000000000001,
    57.70000000000001,
    0,
    0,
    0,
    0,
    75,
    50,
    0
  ],
  "000115": [
    53.2,
    84.69999999999999,
    50,
    0,
    0,
    0,
    0,
    0,
    0
  ],
  "000116": [
    69.4,
    62.2,
    0,
    0,
    100,
    0,
    25,
    100,
    100
  ],
  "000117": [
    68.5,
    57.70000000000001,
    50,
    100,
    25,
    80,
    75,
    50,
    100
  ],
  "000118": [
    74.8,
    65.8,
    100,
    100,
    25,
    60,
    75,
    50,
    100
  ],
  "000121": [
    54.1,
    46.9,
    50,
    100,
    100,
    20,
    75,
    50,
    100
  ],
  "000122": [
    58.60000000000001,
    47.79999999999999,
    0,
    100,
    0,
    0,
    0,
    50,
    50
  ],
  "000125": [
    63.99999999999999,
    78.4,
    50,
    0,
    50,
    0,
    25,
    50,
    0
  ],
  "000126": [
    55.89999999999999,
    57.70000000000001,
    50,
    100,
    25,
    40,
    0,
    100,
    100
  ],
  "000129": [
    65.8,
    76.6,
    0,
    0,
    100,
    0,
    75,
    100,
    50
  ],
  "000131": [
    69.4,
    79.3,
    50,
    100,
    100,
    40,
    75,
    100,
    100
  ],
  "000132": [
    68.5,
    59.5,
    0,
    100,
    50,
    60,
    75,
    100,
    100
  ],
  "000133": [
    61.3,
    57.70000000000001,
    0,
    100,
    25,
    0,
    25,
    100,
    50
  ],
  "000134": [
    70.30000000000001,
    91.89999999999999,
    0,
    0,
    100,
    100,
    75,
    50,
    0
  ],
  "000135": [
    67.6,
    63.99999999999999,
    0,
    0,
    75,
    60,
    75,
    50,
    50
  ],
  "000137": [
    59.5,
    67.6,
    0,
    0,
    100,
    0,
    50,
    100,
    50
  ],
  "000140": [
    54.1,
    51.4,
    0,
    100,
    25,
    0,
    0,
    0,
    50
  ],
  "000142": [
    55.89999999999999,
    47.79999999999999,
    50,
    100,
    25,
    0,
    50,
    0,
    100
  ],
  "000143": [
    55.00000000000001,
    63.99999999999999,
    50,
    0,
    50,
    0,
    50,
    50,
    50
  ],
  "000145": [
    53.2,
    50.5,
    100,
    100,
    25,
    0,
    75,
    100,
    100
  ],
  "000146": [
    60.400000000000006,
    62.2,
    0,
    100,
    50,
    0,
    100,
    100,
    50
  ],
  "000147": [
    47.79999999999999,
    48.699999999999996,
    0,
    100,
    0,
    0,
    0,
    0,
    50
  ],
  "000148": [
    60.400000000000006,
    55.00000000000001,
    50,
    100,
    25,
    0,
    75,
    0,
    100
  ],
  "000150": [
    60.400000000000006,
    80.19999999999999,
    0,
    0,
    100,
    0,
    100,
    0,
    0
  ],
  "000151": [
    64.9,
    69.4,
    50,
    100,
    25,
    40,
    75,
    100,
    50
  ],
  "000152": [
    55.89999999999999,
    68.5,
    0,
    0,
    50,
    0,
    25,
    100,
    50
  ],
  "000153": [
    55.89999999999999,
    70.30000000000001,
    0,
    0,
    75,
    0,
    50,
    100,
    50
  ],
  "000155": [
    70.30000000000001,
    68.5,
    0,
    100,
    100,
    20,
    75,
    100,
    100
  ],
  "000156": [
    58.60000000000001,
    60.400000000000006,
    0,
    100,
    25,
    0,
    0,
    100,
    50
  ],
  "000157": [
    46,
    50.5,
    0,
    100,
    0,
    0,
    0,
    0,
    50
  ],
  "000160": [
    73.9,
    81.1,
    0,
    0,
    50,
    20,
    50,
    0,
    0
  ],
  "000161": [
    54.1,
    46,
    0,
    100,
    0,
    0,
    75,
    100,
    50
  ]
}

seedrandom.min.js

!function(a,b){function c(c,j,k){var n=[];j=1==j?{entropy:!0}:j||{};var s=g(f(j.entropy?[c,i(a)]:null==c?h():c,3),n),t=new d(n),u=function(){for(var a=t.g(m),b=p,c=0;a<q;)a=(a+c)*l,b*=l,c=t.g(1);for(;a>=r;)a/=2,b/=2,c>>>=1;return(a+c)/b};return u.int32=function(){return 0|t.g(4)},u.quick=function(){return t.g(4)/4294967296},u.double=u,g(i(t.S),a),(j.pass||k||function(a,c,d,f){return f&&(f.S&&e(f,t),a.state=function(){return e(t,{})}),d?(b[o]=a,c):a})(u,s,"global"in j?j.global:this==b,j.state)}function d(a){var b,c=a.length,d=this,e=0,f=d.i=d.j=0,g=d.S=[];for(c||(a=[c++]);e<l;)g[e]=e++;for(e=0;e<l;e++)g[e]=g[f=s&f+a[e%c]+(b=g[e])],g[f]=b;(d.g=function(a){for(var b,c=0,e=d.i,f=d.j,g=d.S;a--;)b=g[e=s&e+1],c=c*l+g[s&(g[e]=g[f=s&f+b])+(g[f]=b)];return d.i=e,d.j=f,c})(l)}function e(a,b){return b.i=a.i,b.j=a.j,b.S=a.S.slice(),b}function f(a,b){var c,d=[],e=typeof a;if(b&&"object"==e)for(c in a)try{d.push(f(a[c],b-1))}catch(a){}return d.length?d:"string"==e?a:a+"\0"}function g(a,b){for(var c,d=a+"",e=0;e<d.length;)b[s&e]=s&(c^=19*b[s&e])+d.charCodeAt(e++);return i(b)}function h(){try{var b;return j&&(b=j.randomBytes)?b=b(l):(b=new Uint8Array(l),(k.crypto||k.msCrypto).getRandomValues(b)),i(b)}catch(b){var c=k.navigator,d=c&&c.plugins;return[+new Date,k,d,k.screen,i(a)]}}function i(a){return String.fromCharCode.apply(0,a)}var j,k=this,l=256,m=6,n=52,o="random",p=b.pow(l,m),q=b.pow(2,n),r=2*q,s=l-1;if(b["seed"+o]=c,g(b.random(),a),"object"==typeof module&&module.exports){module.exports=c;try{j=require("crypto")}catch(a){}}else"function"==typeof define&&define.amd&&define(function(){return c})}([],Math);

simplex-noise.js

/*
 * A fast javascript implementation of simplex noise by Jonas Wagner

Based on a speed-improved simplex noise algorithm for 2D, 3D and 4D in Java.
Which is based on example code by Stefan Gustavson (stegu@itn.liu.se).
With Optimisations by Peter Eastman (peastman@drizzle.stanford.edu).
Better rank ordering method by Stefan Gustavson in 2012.

 Copyright (c) 2018 Jonas Wagner

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:

 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.

 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 */
(function() {
  'use strict';

  var F2 = 0.5 * (Math.sqrt(3.0) - 1.0);
  var G2 = (3.0 - Math.sqrt(3.0)) / 6.0;
  var F3 = 1.0 / 3.0;
  var G3 = 1.0 / 6.0;
  var F4 = (Math.sqrt(5.0) - 1.0) / 4.0;
  var G4 = (5.0 - Math.sqrt(5.0)) / 20.0;

  function SimplexNoise(randomOrSeed) {
    var random;
    if (typeof randomOrSeed == 'function') {
      random = randomOrSeed;
    }
    else if (randomOrSeed) {
      random = alea(randomOrSeed);
    } else {
      random = Math.random;
    }
    this.p = buildPermutationTable(random);
    this.perm = new Uint8Array(512);
    this.permMod12 = new Uint8Array(512);
    for (var i = 0; i < 512; i++) {
      this.perm[i] = this.p[i & 255];
      this.permMod12[i] = this.perm[i] % 12;
    }

  }
  SimplexNoise.prototype = {
    grad3: new Float32Array([1, 1, 0,
      -1, 1, 0,
      1, -1, 0,

      -1, -1, 0,
      1, 0, 1,
      -1, 0, 1,

      1, 0, -1,
      -1, 0, -1,
      0, 1, 1,

      0, -1, 1,
      0, 1, -1,
      0, -1, -1]),
    grad4: new Float32Array([0, 1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1,
      0, -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1,
      1, 0, 1, 1, 1, 0, 1, -1, 1, 0, -1, 1, 1, 0, -1, -1,
      -1, 0, 1, 1, -1, 0, 1, -1, -1, 0, -1, 1, -1, 0, -1, -1,
      1, 1, 0, 1, 1, 1, 0, -1, 1, -1, 0, 1, 1, -1, 0, -1,
      -1, 1, 0, 1, -1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, -1,
      1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1, 0,
      -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1, 0]),
    noise2D: function(xin, yin) {
      var permMod12 = this.permMod12;
      var perm = this.perm;
      var grad3 = this.grad3;
      var n0 = 0; // Noise contributions from the three corners
      var n1 = 0;
      var n2 = 0;
      // Skew the input space to determine which simplex cell we're in
      var s = (xin + yin) * F2; // Hairy factor for 2D
      var i = Math.floor(xin + s);
      var j = Math.floor(yin + s);
      var t = (i + j) * G2;
      var X0 = i - t; // Unskew the cell origin back to (x,y) space
      var Y0 = j - t;
      var x0 = xin - X0; // The x,y distances from the cell origin
      var y0 = yin - Y0;
      // For the 2D case, the simplex shape is an equilateral triangle.
      // Determine which simplex we are in.
      var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords
      if (x0 > y0) {
        i1 = 1;
        j1 = 0;
      } // lower triangle, XY order: (0,0)->(1,0)->(1,1)
      else {
        i1 = 0;
        j1 = 1;
      } // upper triangle, YX order: (0,0)->(0,1)->(1,1)
      // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and
      // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where
      // c = (3-sqrt(3))/6
      var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords
      var y1 = y0 - j1 + G2;
      var x2 = x0 - 1.0 + 2.0 * G2; // Offsets for last corner in (x,y) unskewed coords
      var y2 = y0 - 1.0 + 2.0 * G2;
      // Work out the hashed gradient indices of the three simplex corners
      var ii = i & 255;
      var jj = j & 255;
      // Calculate the contribution from the three corners
      var t0 = 0.5 - x0 * x0 - y0 * y0;
      if (t0 >= 0) {
        var gi0 = permMod12[ii + perm[jj]] * 3;
        t0 *= t0;
        n0 = t0 * t0 * (grad3[gi0] * x0 + grad3[gi0 + 1] * y0); // (x,y) of grad3 used for 2D gradient
      }
      var t1 = 0.5 - x1 * x1 - y1 * y1;
      if (t1 >= 0) {
        var gi1 = permMod12[ii + i1 + perm[jj + j1]] * 3;
        t1 *= t1;
        n1 = t1 * t1 * (grad3[gi1] * x1 + grad3[gi1 + 1] * y1);
      }
      var t2 = 0.5 - x2 * x2 - y2 * y2;
      if (t2 >= 0) {
        var gi2 = permMod12[ii + 1 + perm[jj + 1]] * 3;
        t2 *= t2;
        n2 = t2 * t2 * (grad3[gi2] * x2 + grad3[gi2 + 1] * y2);
      }
      // Add contributions from each corner to get the final noise value.
      // The result is scaled to return values in the interval [-1,1].
      return 70.0 * (n0 + n1 + n2);
    },
    // 3D simplex noise
    noise3D: function(xin, yin, zin) {
      var permMod12 = this.permMod12;
      var perm = this.perm;
      var grad3 = this.grad3;
      var n0, n1, n2, n3; // Noise contributions from the four corners
      // Skew the input space to determine which simplex cell we're in
      var s = (xin + yin + zin) * F3; // Very nice and simple skew factor for 3D
      var i = Math.floor(xin + s);
      var j = Math.floor(yin + s);
      var k = Math.floor(zin + s);
      var t = (i + j + k) * G3;
      var X0 = i - t; // Unskew the cell origin back to (x,y,z) space
      var Y0 = j - t;
      var Z0 = k - t;
      var x0 = xin - X0; // The x,y,z distances from the cell origin
      var y0 = yin - Y0;
      var z0 = zin - Z0;
      // For the 3D case, the simplex shape is a slightly irregular tetrahedron.
      // Determine which simplex we are in.
      var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords
      var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords
      if (x0 >= y0) {
        if (y0 >= z0) {
          i1 = 1;
          j1 = 0;
          k1 = 0;
          i2 = 1;
          j2 = 1;
          k2 = 0;
        } // X Y Z order
        else if (x0 >= z0) {
          i1 = 1;
          j1 = 0;
          k1 = 0;
          i2 = 1;
          j2 = 0;
          k2 = 1;
        } // X Z Y order
        else {
          i1 = 0;
          j1 = 0;
          k1 = 1;
          i2 = 1;
          j2 = 0;
          k2 = 1;
        } // Z X Y order
      }
      else { // x0<y0
        if (y0 < z0) {
          i1 = 0;
          j1 = 0;
          k1 = 1;
          i2 = 0;
          j2 = 1;
          k2 = 1;
        } // Z Y X order
        else if (x0 < z0) {
          i1 = 0;
          j1 = 1;
          k1 = 0;
          i2 = 0;
          j2 = 1;
          k2 = 1;
        } // Y Z X order
        else {
          i1 = 0;
          j1 = 1;
          k1 = 0;
          i2 = 1;
          j2 = 1;
          k2 = 0;
        } // Y X Z order
      }
      // A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z),
      // a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and
      // a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where
      // c = 1/6.
      var x1 = x0 - i1 + G3; // Offsets for second corner in (x,y,z) coords
      var y1 = y0 - j1 + G3;
      var z1 = z0 - k1 + G3;
      var x2 = x0 - i2 + 2.0 * G3; // Offsets for third corner in (x,y,z) coords
      var y2 = y0 - j2 + 2.0 * G3;
      var z2 = z0 - k2 + 2.0 * G3;
      var x3 = x0 - 1.0 + 3.0 * G3; // Offsets for last corner in (x,y,z) coords
      var y3 = y0 - 1.0 + 3.0 * G3;
      var z3 = z0 - 1.0 + 3.0 * G3;
      // Work out the hashed gradient indices of the four simplex corners
      var ii = i & 255;
      var jj = j & 255;
      var kk = k & 255;
      // Calculate the contribution from the four corners
      var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0;
      if (t0 < 0) n0 = 0.0;
      else {
        var gi0 = permMod12[ii + perm[jj + perm[kk]]] * 3;
        t0 *= t0;
        n0 = t0 * t0 * (grad3[gi0] * x0 + grad3[gi0 + 1] * y0 + grad3[gi0 + 2] * z0);
      }
      var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1;
      if (t1 < 0) n1 = 0.0;
      else {
        var gi1 = permMod12[ii + i1 + perm[jj + j1 + perm[kk + k1]]] * 3;
        t1 *= t1;
        n1 = t1 * t1 * (grad3[gi1] * x1 + grad3[gi1 + 1] * y1 + grad3[gi1 + 2] * z1);
      }
      var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2;
      if (t2 < 0) n2 = 0.0;
      else {
        var gi2 = permMod12[ii + i2 + perm[jj + j2 + perm[kk + k2]]] * 3;
        t2 *= t2;
        n2 = t2 * t2 * (grad3[gi2] * x2 + grad3[gi2 + 1] * y2 + grad3[gi2 + 2] * z2);
      }
      var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3;
      if (t3 < 0) n3 = 0.0;
      else {
        var gi3 = permMod12[ii + 1 + perm[jj + 1 + perm[kk + 1]]] * 3;
        t3 *= t3;
        n3 = t3 * t3 * (grad3[gi3] * x3 + grad3[gi3 + 1] * y3 + grad3[gi3 + 2] * z3);
      }
      // Add contributions from each corner to get the final noise value.
      // The result is scaled to stay just inside [-1,1]
      return 32.0 * (n0 + n1 + n2 + n3);
    },
    // 4D simplex noise, better simplex rank ordering method 2012-03-09
    noise4D: function(x, y, z, w) {
      var perm = this.perm;
      var grad4 = this.grad4;

      var n0, n1, n2, n3, n4; // Noise contributions from the five corners
      // Skew the (x,y,z,w) space to determine which cell of 24 simplices we're in
      var s = (x + y + z + w) * F4; // Factor for 4D skewing
      var i = Math.floor(x + s);
      var j = Math.floor(y + s);
      var k = Math.floor(z + s);
      var l = Math.floor(w + s);
      var t = (i + j + k + l) * G4; // Factor for 4D unskewing
      var X0 = i - t; // Unskew the cell origin back to (x,y,z,w) space
      var Y0 = j - t;
      var Z0 = k - t;
      var W0 = l - t;
      var x0 = x - X0; // The x,y,z,w distances from the cell origin
      var y0 = y - Y0;
      var z0 = z - Z0;
      var w0 = w - W0;
      // For the 4D case, the simplex is a 4D shape I won't even try to describe.
      // To find out which of the 24 possible simplices we're in, we need to
      // determine the magnitude ordering of x0, y0, z0 and w0.
      // Six pair-wise comparisons are performed between each possible pair
      // of the four coordinates, and the results are used to rank the numbers.
      var rankx = 0;
      var ranky = 0;
      var rankz = 0;
      var rankw = 0;
      if (x0 > y0) rankx++;
      else ranky++;
      if (x0 > z0) rankx++;
      else rankz++;
      if (x0 > w0) rankx++;
      else rankw++;
      if (y0 > z0) ranky++;
      else rankz++;
      if (y0 > w0) ranky++;
      else rankw++;
      if (z0 > w0) rankz++;
      else rankw++;
      var i1, j1, k1, l1; // The integer offsets for the second simplex corner
      var i2, j2, k2, l2; // The integer offsets for the third simplex corner
      var i3, j3, k3, l3; // The integer offsets for the fourth simplex corner
      // simplex[c] is a 4-vector with the numbers 0, 1, 2 and 3 in some order.
      // Many values of c will never occur, since e.g. x>y>z>w makes x<z, y<w and x<w
      // impossible. Only the 24 indices which have non-zero entries make any sense.
      // We use a thresholding to set the coordinates in turn from the largest magnitude.
      // Rank 3 denotes the largest coordinate.
      i1 = rankx >= 3 ? 1 : 0;
      j1 = ranky >= 3 ? 1 : 0;
      k1 = rankz >= 3 ? 1 : 0;
      l1 = rankw >= 3 ? 1 : 0;
      // Rank 2 denotes the second largest coordinate.
      i2 = rankx >= 2 ? 1 : 0;
      j2 = ranky >= 2 ? 1 : 0;
      k2 = rankz >= 2 ? 1 : 0;
      l2 = rankw >= 2 ? 1 : 0;
      // Rank 1 denotes the second smallest coordinate.
      i3 = rankx >= 1 ? 1 : 0;
      j3 = ranky >= 1 ? 1 : 0;
      k3 = rankz >= 1 ? 1 : 0;
      l3 = rankw >= 1 ? 1 : 0;
      // The fifth corner has all coordinate offsets = 1, so no need to compute that.
      var x1 = x0 - i1 + G4; // Offsets for second corner in (x,y,z,w) coords
      var y1 = y0 - j1 + G4;
      var z1 = z0 - k1 + G4;
      var w1 = w0 - l1 + G4;
      var x2 = x0 - i2 + 2.0 * G4; // Offsets for third corner in (x,y,z,w) coords
      var y2 = y0 - j2 + 2.0 * G4;
      var z2 = z0 - k2 + 2.0 * G4;
      var w2 = w0 - l2 + 2.0 * G4;
      var x3 = x0 - i3 + 3.0 * G4; // Offsets for fourth corner in (x,y,z,w) coords
      var y3 = y0 - j3 + 3.0 * G4;
      var z3 = z0 - k3 + 3.0 * G4;
      var w3 = w0 - l3 + 3.0 * G4;
      var x4 = x0 - 1.0 + 4.0 * G4; // Offsets for last corner in (x,y,z,w) coords
      var y4 = y0 - 1.0 + 4.0 * G4;
      var z4 = z0 - 1.0 + 4.0 * G4;
      var w4 = w0 - 1.0 + 4.0 * G4;
      // Work out the hashed gradient indices of the five simplex corners
      var ii = i & 255;
      var jj = j & 255;
      var kk = k & 255;
      var ll = l & 255;
      // Calculate the contribution from the five corners
      var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0 - w0 * w0;
      if (t0 < 0) n0 = 0.0;
      else {
        var gi0 = (perm[ii + perm[jj + perm[kk + perm[ll]]]] % 32) * 4;
        t0 *= t0;
        n0 = t0 * t0 * (grad4[gi0] * x0 + grad4[gi0 + 1] * y0 + grad4[gi0 + 2] * z0 + grad4[gi0 + 3] * w0);
      }
      var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1 - w1 * w1;
      if (t1 < 0) n1 = 0.0;
      else {
        var gi1 = (perm[ii + i1 + perm[jj + j1 + perm[kk + k1 + perm[ll + l1]]]] % 32) * 4;
        t1 *= t1;
        n1 = t1 * t1 * (grad4[gi1] * x1 + grad4[gi1 + 1] * y1 + grad4[gi1 + 2] * z1 + grad4[gi1 + 3] * w1);
      }
      var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2 - w2 * w2;
      if (t2 < 0) n2 = 0.0;
      else {
        var gi2 = (perm[ii + i2 + perm[jj + j2 + perm[kk + k2 + perm[ll + l2]]]] % 32) * 4;
        t2 *= t2;
        n2 = t2 * t2 * (grad4[gi2] * x2 + grad4[gi2 + 1] * y2 + grad4[gi2 + 2] * z2 + grad4[gi2 + 3] * w2);
      }
      var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3 - w3 * w3;
      if (t3 < 0) n3 = 0.0;
      else {
        var gi3 = (perm[ii + i3 + perm[jj + j3 + perm[kk + k3 + perm[ll + l3]]]] % 32) * 4;
        t3 *= t3;
        n3 = t3 * t3 * (grad4[gi3] * x3 + grad4[gi3 + 1] * y3 + grad4[gi3 + 2] * z3 + grad4[gi3 + 3] * w3);
      }
      var t4 = 0.6 - x4 * x4 - y4 * y4 - z4 * z4 - w4 * w4;
      if (t4 < 0) n4 = 0.0;
      else {
        var gi4 = (perm[ii + 1 + perm[jj + 1 + perm[kk + 1 + perm[ll + 1]]]] % 32) * 4;
        t4 *= t4;
        n4 = t4 * t4 * (grad4[gi4] * x4 + grad4[gi4 + 1] * y4 + grad4[gi4 + 2] * z4 + grad4[gi4 + 3] * w4);
      }
      // Sum up and scale the result to cover the range [-1,1]
      return 27.0 * (n0 + n1 + n2 + n3 + n4);
    }
  };

  function buildPermutationTable(random) {
    var i;
    var p = new Uint8Array(256);
    for (i = 0; i < 256; i++) {
      p[i] = i;
    }
    for (i = 0; i < 255; i++) {
      var r = i + ~~(random() * (256 - i));
      var aux = p[i];
      p[i] = p[r];
      p[r] = aux;
    }
    return p;
  }
  SimplexNoise._buildPermutationTable = buildPermutationTable;

  /*
  The ALEA PRNG and masher code used by simplex-noise.js
  is based on code by Johannes Baagøe, modified by Jonas Wagner.
  See alea.md for the full license.
  */
  function alea() {
    var s0 = 0;
    var s1 = 0;
    var s2 = 0;
    var c = 1;

    var mash = masher();
    s0 = mash(' ');
    s1 = mash(' ');
    s2 = mash(' ');

    for (var i = 0; i < arguments.length; i++) {
      s0 -= mash(arguments[i]);
      if (s0 < 0) {
        s0 += 1;
      }
      s1 -= mash(arguments[i]);
      if (s1 < 0) {
        s1 += 1;
      }
      s2 -= mash(arguments[i]);
      if (s2 < 0) {
        s2 += 1;
      }
    }
    mash = null;
    return function() {
      var t = 2091639 * s0 + c * 2.3283064365386963e-10; // 2^-32
      s0 = s1;
      s1 = s2;
      return s2 = t - (c = t | 0);
    };
  }
  function masher() {
    var n = 0xefc8249d;
    return function(data) {
      data = data.toString();
      for (var i = 0; i < data.length; i++) {
        n += data.charCodeAt(i);
        var h = 0.02519603282416938 * n;
        n = h >>> 0;
        h -= n;
        h *= n;
        n = h >>> 0;
        h -= n;
        n += h * 0x100000000; // 2^32
      }
      return (n >>> 0) * 2.3283064365386963e-10; // 2^-32
    };
  }

  // amd
  if (typeof define !== 'undefined' && define.amd) define(function() {return SimplexNoise;});
  // common js
  if (typeof exports !== 'undefined') exports.SimplexNoise = SimplexNoise;
  // browser
  else if (typeof window !== 'undefined') window.SimplexNoise = SimplexNoise;
  // nodejs
  if (typeof module !== 'undefined') {
    module.exports = SimplexNoise;
  }

})();

// tom's helpers below
/* helper function */
String.prototype.hashCode = function() {
  var hash = 0, i, chr;
  if (this.length === 0) return hash;
  for (i = 0; i < this.length; i++) {
    chr   = this.charCodeAt(i);
    hash  = ((hash << 5) - hash) + chr;
    hash |= 0; // Convert to 32bit integer
  }
  return hash;
};

/* 
   getNoiseValue arguments:
   x: current grid location across
   y: current grid location down
   loop: can be any value from 0-1 and will loop
   name: the "name" of the lookup table. probably change this each time.
   min/max: the minimum and maximum of the value to return
   smoothness: 1 means elements are not related. larger numbers cause groupings.
*/

var global_simplex = null;

function getNoiseValue(x, y, loop, name, min, max, smoothness) {
  if (global_simplex === null) {
    global_simplex = new SimplexNoise();    
  }
  let hashNumber = name.hashCode();
  let xoff = Math.cos(2*PI*loop + (0.01 * hashNumber));
  let yoff = Math.sin(2*PI*loop + (0.01 * hashNumber));
  let noiseVal = global_simplex.noise4D(x / smoothness, y / smoothness, xoff + hashNumber, yoff);
  // let noiseVal = noise(x / smoothness, y / smoothness, xoff + hashNumber);
  return map(noiseVal, -1, 1, min, max);
}

sketch.html

<head>
    <style> body {padding: 0; margin: 0;} </style>
</head>
<body style="background-color:white">
<img src="same_pose.jpg" width="960" height="500"/><br>
Same Pose
<hr>
<img src="same_subject.jpg" width="960" height="500"/><br>
Same Subject
<p>
<a href="index.html">program</a>
</body>

to_face.js

// Remove or set to false to enable full program
//var DEBUG_MODE = true;

// Set the number of sliders to show
// var NUM_SLIDERS = 7;

// Given a segment, this returns the average point [x, y]
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];
}

function ToFace() {
    // State variables
    const purpleEyes = color(222, 181, 255);
    const pinkEyes = color(255, 181, 227);
    const blueEyes = color(158, 196, 255);
    const aquaEyes = color(161, 224, 230);

    // Set default slider values
    this.bubbleSize = 4.6; // Range is from 4 - 5
    this.faceTone = 50; // Range is from 0 - 100
    this.browType = 1; // Can be either 1 or 2
    this.browTilt = 5; // Range is from 0 - 10
    this.eyeColor = 1; // Can be either 1, 2, 3 or 4
    this.blushType = 1; // Can be either 1 or 2
    this.cheekPos = 21; // Range is from 0 - 100

    // Draws a segment, do_loop will connect the ends if true
    this.draw_segment = function(segment, do_loop) {
        for (let i = 0; i < segment.length; i++) {
            let px = segment[i][0];
            let py = segment[i][1];
            ellipse(px, py, 0.1);
            if (i < segment.length - 1) {
                let nx = segment[i + 1][0];
                let ny = segment[i + 1][1];
                line(px, py, nx, ny);
            } else if (do_loop) {
                let nx = segment[0][0];
                let ny = segment[0][1];
                line(px, py, nx, ny);
            }
        }
    };

    this.draw = function(positions) {
        let redValue = map(this.faceTone, 0, 100, 227, 196);
        let greenValue = map(this.faceTone, 0, 100, 238, 219);
        let facePos = segment_average(positions.chin);

        // Draw bubble
        stroke(196, 219, 255);
        strokeWeight(0.3);
        fill(redValue, greenValue, 255);
        ellipse(facePos[0], facePos[0], -this.bubbleSize, this.bubbleSize);

        // Draw upper bubble shine
        noStroke();
        strokeWeight(0.05);
        fill(255);
        beginShape();
        vertex(facePos[0] + 0.1 * this.bubbleSize, facePos[0] - 0.4 * this.bubbleSize);
        bezierVertex(facePos[0] + 0.15 * this.bubbleSize, facePos[0] - 0.45 * this.bubbleSize, facePos[0] + 0.35 * this.bubbleSize, facePos[0] - 0.3 * this.bubbleSize, facePos[0] + 0.4 * this.bubbleSize, facePos[0] - 0.15 * this.bubbleSize);
        bezierVertex(facePos[0] + 0.27 * this.bubbleSize, facePos[0] - 0.3 * this.bubbleSize, facePos[0] + 0.24 * this.bubbleSize, facePos[0] - 0.28 * this.bubbleSize, facePos[0] + 0.2 * this.bubbleSize, facePos[0] - 0.3 * this.bubbleSize);
        bezierVertex(facePos[0] + 0.2 * this.bubbleSize, facePos[0] - 0.3 * this.bubbleSize, facePos[0] + 0.02 * this.bubbleSize, facePos[0] - 0.35 * this.bubbleSize, facePos[0] + 0.1 * this.bubbleSize, facePos[0] - 0.4 * this.bubbleSize);
        endShape();
        // Draw lower bubble shine
        push();
        translate(-0.45, 0.45)
        scale(0.7);
        beginShape();
        vertex(facePos[0] - 0.1 * this.bubbleSize, facePos[0] + 0.4 * this.bubbleSize);
        bezierVertex(facePos[0] - 0.15 * this.bubbleSize, facePos[0] + 0.45 * this.bubbleSize, facePos[0] - 0.35 * this.bubbleSize, facePos[0] + 0.3 * this.bubbleSize, facePos[0] - 0.4 * this.bubbleSize, facePos[0] + 0.15 * this.bubbleSize);
        bezierVertex(facePos[0] - 0.27 * this.bubbleSize, facePos[0] + 0.3 * this.bubbleSize, facePos[0] - 0.24 * this.bubbleSize, facePos[0] + 0.28 * this.bubbleSize, facePos[0] - 0.2 * this.bubbleSize, facePos[0] + 0.3 * this.bubbleSize);
        bezierVertex(facePos[0] - 0.2 * this.bubbleSize, facePos[0] + 0.3 * this.bubbleSize, facePos[0] - 0.02 * this.bubbleSize, facePos[0] + 0.35 * this.bubbleSize, facePos[0] - 0.1 * this.bubbleSize, facePos[0] + 0.4 * this.bubbleSize);
        endShape();
        pop();


        // Draw brows
        let leftBrowLeft = positions.left_eyebrow[0];
        let leftBrowTop = positions.left_eyebrow[2];
        let leftBrowRight = positions.left_eyebrow[4];
        let rightBrowLeft = positions.right_eyebrow[0];
        let rightBrowTop = positions.right_eyebrow[2];
        let rightBrowRight = positions.right_eyebrow[4];
        stroke(162, 191, 235);
        strokeWeight(0.15);

        if (this.browType == 1) { // Feminine brows
            push();
            rotate(-this.browTilt);
            line(leftBrowLeft[0], leftBrowLeft[1] + 0.3, leftBrowTop[0], leftBrowTop[1]); // Left pointed brow
            line(leftBrowTop[0], leftBrowTop[1], leftBrowRight[0], leftBrowRight[1] + 0.3);
            rotate(this.browTilt * 2);
            line(rightBrowLeft[0], rightBrowLeft[1] + 0.3, rightBrowTop[0], rightBrowTop[1]); // Right pointed brow
            line(rightBrowTop[0], rightBrowTop[1], rightBrowRight[0], rightBrowRight[1] + 0.3);
            pop();
        } else if (this.browType == 2) { // Masculine brows
            push();
            strokeWeight(0.4);
            rotate(-this.browTilt); // Left brow
            line(leftBrowLeft[0], leftBrowLeft[0] + 0.3, leftBrowRight[0], leftBrowRight[1] + 0.3);
            rotate(this.browTilt * 2); // Right brow
            line(rightBrowLeft[0], rightBrowLeft[1] + 0.3, rightBrowRight[0], rightBrowRight[1] + 0.3);
            pop();
        }


        // Draw eyes
        let leftEyePos = segment_average(positions.left_eye);
        let rightEyePos = segment_average(positions.right_eye);
        let leftEyeShine = positions.left_eye[4];
        let rightEyeShine = positions.right_eye[4];

        if (this.eyeColor == 1) { // 1 = purple eyes (feminine brown eyes)
            fill(purpleEyes);
        } else if (this.eyeColor == 2) { // 2 = pink eyes (feminine other colour)
            fill(pinkEyes);
        } else if (this.eyeColor == 3) { // 3 = blue eyes (masculine brown eyes)
            fill(blueEyes);
        } else if (this.eyeColor == 4) { // 4 = aqua eyes (masculine other colour)
            fill(aquaEyes);
        }

        stroke(255); // Eyes
        strokeWeight(0.2)
        ellipse(leftEyePos[0], leftEyePos[0] + 0.8, 1);
        ellipse(rightEyePos[0], leftEyePos[0] + 0.8, 1);
        fill(255); // Eye shine
        ellipse(leftEyeShine[0], leftEyeShine[0] + 0.5, 0.15);
        ellipse(rightEyeShine[0], leftEyeShine[0] + 0.5, 0.15);


        // Draw blush
        let blushShift = map(this.cheekPos, 0, 100, -1, 1);
        let leftBlush = positions.chin[4];
        let rightBlush = positions.chin[12];

        if (this.blushType == 1) { // Feminine blush
            noStroke();
            fill(255, 181, 227);
            ellipse(leftBlush[0] + blushShift, leftBlush[1] - 0.1, 0.6, 0.25);
            ellipse(rightBlush[0] + blushShift, rightBlush[1] - 0.1, 0.6, 0.25);
        } else if (this.blushType == 2) { // Masculine blush
            stroke(162, 191, 235);
            strokeWeight(0.1);
            noFill();
            beginShape(); // Left cheek squiggle blush
            curveVertex(-1.7 + blushShift, 0.8);
            curveVertex(-1.7 + blushShift, 0.8);
            curveVertex(-1 + blushShift, 0.8);
            curveVertex(-1.4 + blushShift, 1);
            curveVertex(-1 + blushShift, 1);
            curveVertex(-1 + blushShift, 1);
            endShape();
            beginShape(); // Right cheek squiggle blush
            curveVertex(1.7 + blushShift, 0.8);
            curveVertex(1.7 + blushShift, 0.8);
            curveVertex(1 + blushShift, 0.8);
            curveVertex(1.4 + blushShift, 1);
            curveVertex(1 + blushShift, 1);
            curveVertex(1 + blushShift, 1);
            endShape();
        }


        // Draw mouth
        let mouthPos = segment_average(positions.bottom_lip);
        noFill(); // Mouth
        stroke(162, 191, 235);
        strokeWeight(0.2);
        arc(mouthPos[0] - 0.4, mouthPos[1] + 0.2, 0.6, 0.6, 0, 180);
        arc(mouthPos[0] + 0.2, mouthPos[1] + 0.2, 0.6, 0.6, 0, 180);
    }

    // Set internal properties based on list numbers 0-100 
    this.setProperties = function(settings) {
        this.bubbleSize = map(settings[0], 0, 100, 4.2, 5);
        this.faceTone = map(settings[1], 0, 100, 0, 100);
        this.browType = int(map(settings[2], 0, 100, 1, 2));
        this.browTilt = map(settings[3], 0, 100, 0, 10);
        this.eyeColor = int(map(settings[4], 0, 100, 1, 4));
        this.blushType = int(map(settings[5], 0, 100, 1, 2));
        this.cheekPos = map(settings[6], 0, 100, 0, 100);
    }
    // Get internal properties as list of numbers 0-100 
    this.getProperties = function() {
        let settings = new Array(7);
        settings[0] = map(this.bubbleSize, 4.2, 5, 0, 100);
        settings[1] = map(this.faceTone, 0, 100, 0, 100);
        settings[2] = map(this.browType, 1, 2, 0, 100);
        settings[3] = map(this.browTilt, 0, 10, 0, 100);
        settings[4] = map(this.eyeColor, 1, 4, 0, 100);
        settings[5] = map(this.blushType, 1, 2, 0, 100);
        settings[6] = map(this.cheekPos, 0, 100, 0, 100);
        return settings;
    }
}

to_training_values.json

{
  "000001": [
    43,
    43,
    25,
    39,
    16,
    25,
    50
  ],
  "000002": [
    14.000000000000016,
    0,
    0,
    71,
    0,
    0,
    28.999999999999996
  ],
  "000005": [
    22.000000000000025,
    7.000000000000001,
    0,
    100,
    40,
    0,
    48
  ],
  "000006": [
    24.00000000000003,
    62,
    0,
    51,
    0,
    0,
    65
  ],
  "000007": [
    67.99999999999996,
    30,
    100,
    100,
    70,
    100,
    45
  ],
  "000009": [
    47.00000000000005,
    6,
    0,
    66,
    0,
    0,
    66
  ],
  "000010": [
    39.00000000000004,
    7.000000000000001,
    0,
    64,
    40,
    0,
    50
  ],
  "000013": [
    67.99999999999996,
    27,
    100,
    100,
    100,
    100,
    47
  ],
  "000014": [
    25.00000000000003,
    82,
    0,
    32,
    0,
    0,
    66
  ],
  "000015": [
    71.99999999999996,
    0,
    100,
    82,
    100,
    100,
    49
  ],
  "000016": [
    76.99999999999999,
    39,
    100,
    28.000000000000004,
    70,
    100,
    45
  ],
  "000018": [
    35.000000000000036,
    0,
    0,
    50,
    40,
    0,
    53
  ],
  "000020": [
    57.99999999999995,
    11,
    100,
    100,
    70,
    100,
    48
  ],
  "000023": [
    80.99999999999999,
    3,
    100,
    61,
    100,
    100,
    48
  ],
  "000025": [
    70.99999999999996,
    0,
    100,
    54,
    70,
    100,
    47
  ],
  "000028": [
    74.99999999999997,
    51,
    0,
    30,
    0,
    0,
    48
  ],
  "000029": [
    38.00000000000004,
    10,
    0,
    34,
    40,
    0,
    53
  ],
  "000030": [
    49.00000000000006,
    27,
    100,
    65,
    70,
    100,
    45
  ],
  "000031": [
    49.00000000000006,
    3,
    0,
    86.99999999999999,
    40,
    0,
    51
  ],
  "000032": [
    70.99999999999996,
    9,
    100,
    67,
    70,
    100,
    50
  ],
  "000035": [
    37.000000000000036,
    0,
    0,
    100,
    0,
    0,
    51
  ],
  "000037": [
    62.99999999999996,
    73,
    100,
    0,
    70,
    100,
    47
  ],
  "000038": [
    82.99999999999999,
    0,
    100,
    41,
    100,
    100,
    51
  ],
  "000040": [
    61.99999999999996,
    0,
    0,
    100,
    0,
    0,
    56.99999999999999
  ],
  "000041": [
    75.99999999999997,
    30,
    100,
    0,
    70,
    100,
    47
  ],
  "000042": [
    49.00000000000006,
    0,
    0,
    15,
    40,
    0,
    56.00000000000001
  ],
  "000043": [
    37.000000000000036,
    0,
    0,
    76,
    0,
    0,
    54
  ],
  "000044": [
    24.00000000000003,
    92,
    0,
    75,
    0,
    0,
    46
  ],
  "000045": [
    37.000000000000036,
    35,
    0,
    88.00000000000001,
    0,
    0,
    47
  ],
  "000047": [
    39.00000000000004,
    60,
    0,
    76,
    0,
    0,
    46
  ],
  "000048": [
    72.99999999999997,
    0,
    100,
    37,
    70,
    100,
    46
  ],
  "000050": [
    84.99999999999999,
    20,
    100,
    55.00000000000001,
    70,
    100,
    47
  ],
  "000051": [
    84.99999999999999,
    28.999999999999996,
    100,
    45,
    70,
    100,
    46
  ],
  "000052": [
    86.99999999999999,
    51,
    100,
    20,
    100,
    100,
    47
  ],
  "000054": [
    51.00000000000006,
    0,
    0,
    52,
    40,
    0,
    47
  ],
  "000055": [
    70.99999999999996,
    0,
    100,
    64,
    70,
    100,
    44
  ],
  "000056": [
    51.00000000000006,
    0,
    0,
    0,
    40,
    0,
    66
  ],
  "000058": [
    53.00000000000006,
    0,
    0,
    55.00000000000001,
    40,
    0,
    52
  ],
  "000060": [
    62.99999999999996,
    85,
    100,
    30,
    70,
    100,
    44
  ],
  "000064": [
    71.99999999999996,
    0,
    100,
    46.99999999999999,
    100,
    100,
    47
  ],
  "000065": [
    71.99999999999996,
    37,
    100,
    24,
    70,
    100,
    47
  ],
  "000068": [
    56.99999999999995,
    14.000000000000002,
    100,
    95,
    70,
    100,
    47
  ],
  "000069": [
    80.99999999999999,
    7.000000000000001,
    100,
    100,
    70,
    100,
    47
  ],
  "000071": [
    65.99999999999996,
    15,
    0,
    23.000000000000004,
    40,
    0,
    45
  ],
  "000073": [
    55.00000000000006,
    8,
    0,
    86,
    0,
    0,
    25
  ],
  "000076": [
    70.99999999999996,
    22,
    100,
    39,
    70,
    100,
    45
  ],
  "000077": [
    70.99999999999996,
    0,
    0,
    56.00000000000001,
    0,
    0,
    39
  ],
  "000161": [
    22.000000000000025,
    0,
    0,
    66,
    40,
    0,
    44
  ],
  "000160": [
    82.99999999999999,
    20,
    100,
    32,
    70,
    100,
    47
  ],
  "000157": [
    51.99999999999994,
    11,
    0,
    3,
    40,
    0,
    53
  ],
  "000156": [
    35.000000000000036,
    0,
    0,
    82.99999999999999,
    40,
    0,
    41
  ],
  "000155": [
    9.000000000000009,
    18,
    0,
    71,
    0,
    0,
    43
  ],
  "000153": [
    63.99999999999996,
    1,
    100,
    73,
    70,
    100,
    48
  ],
  "000152": [
    71.99999999999996,
    13,
    100,
    45,
    100,
    100,
    48
  ],
  "000151": [
    47.00000000000005,
    48,
    0,
    0,
    0,
    0,
    54
  ],
  "000150": [
    78.99999999999999,
    0,
    100,
    100,
    70,
    100,
    50
  ],
  "000148": [
    40.00000000000005,
    0,
    0,
    21.000000000000004,
    40,
    0,
    76
  ],
  "000147": [
    37.000000000000036,
    22,
    0,
    82.99999999999999,
    40,
    0,
    51
  ],
  "000146": [
    33.000000000000036,
    41,
    0,
    52,
    0,
    0,
    92
  ],
  "000145": [
    21.000000000000025,
    13,
    0,
    23.000000000000004,
    0,
    0,
    61
  ],
  "000143": [
    73.99999999999997,
    8,
    100,
    46.99999999999999,
    100,
    100,
    49
  ],
  "000142": [
    32.000000000000036,
    0,
    0,
    41,
    40,
    0,
    56.00000000000001
  ],
  "000140": [
    35.000000000000036,
    25,
    0,
    100,
    40,
    0,
    56.99999999999999
  ],
  "000137": [
    67.99999999999996,
    0,
    100,
    24,
    100,
    100,
    53
  ],
  "000135": [
    75.99999999999997,
    59,
    100,
    35,
    70,
    100,
    48
  ],
  "000134": [
    62.99999999999996,
    100,
    100,
    38,
    70,
    100,
    46
  ],
  "000133": [
    35.000000000000036,
    6,
    0,
    54,
    40,
    0,
    56.99999999999999
  ],
  "000132": [
    9.000000000000009,
    45,
    0,
    68,
    0,
    0,
    37
  ],
  "000131": [
    27.00000000000003,
    62,
    0,
    77,
    0,
    0,
    32
  ],
  "000129": [
    70.99999999999996,
    2,
    100,
    49.00000000000001,
    70,
    100,
    47
  ],
  "000126": [
    39.00000000000004,
    49,
    0,
    61,
    40,
    0,
    39
  ],
  "000125": [
    77.99999999999999,
    14.000000000000002,
    100,
    59,
    100,
    100,
    47
  ],
  "000122": [
    21.000000000000025,
    0,
    0,
    55.00000000000001,
    0,
    0,
    48
  ],
  "000121": [
    20.000000000000025,
    32,
    0,
    49.00000000000001,
    0,
    0,
    49
  ],
  "000118": [
    19.00000000000002,
    37,
    0,
    20,
    0,
    0,
    74
  ],
  "000117": [
    23.000000000000025,
    79,
    0,
    31,
    0,
    0,
    37
  ],
  "000116": [
    83.99999999999999,
    0,
    100,
    27,
    70,
    100,
    47
  ],
  "000115": [
    63.99999999999996,
    0,
    100,
    0,
    100,
    100,
    49
  ],
  "000114": [
    82.99999999999999,
    0,
    100,
    0,
    70,
    100,
    47
  ],
  "000111": [
    20.000000000000025,
    62,
    0,
    62,
    0,
    0,
    35
  ],
  "000110": [
    18.000000000000018,
    5,
    0,
    65,
    40,
    0,
    52
  ],
  "000078": [
    8.000000000000009,
    25,
    0,
    82.99999999999999,
    40,
    0,
    56.00000000000001
  ],
  "000079": [
    78.99999999999999,
    40,
    100,
    10,
    70,
    100,
    49
  ],
  "000080": [
    75.99999999999997,
    12,
    100,
    31,
    100,
    100,
    47
  ],
  "000081": [
    75.99999999999997,
    26,
    100,
    1,
    70,
    100,
    46
  ],
  "000083": [
    25.00000000000003,
    0,
    0,
    59,
    40,
    0,
    48
  ],
  "000085": [
    31.000000000000032,
    0,
    0,
    60,
    40,
    0,
    48
  ],
  "000086": [
    8.000000000000009,
    0,
    0,
    100,
    40,
    0,
    67
  ],
  "000088": [
    31.000000000000032,
    6,
    0,
    100,
    0,
    0,
    33
  ],
  "000091": [
    87.99999999999999,
    0,
    100,
    56.00000000000001,
    70,
    100,
    48
  ],
  "000092": [
    28.000000000000032,
    3,
    0,
    100,
    40,
    0,
    62
  ],
  "000096": [
    22.000000000000025,
    15,
    0,
    100,
    0,
    0,
    55.00000000000001
  ],
  "000097": [
    33.000000000000036,
    0,
    0,
    100,
    40,
    0,
    47
  ],
  "000099": [
    27.00000000000003,
    0,
    0,
    66,
    40,
    0,
    51
  ],
  "000100": [
    23.000000000000025,
    0,
    0,
    100,
    0,
    0,
    62
  ],
  "000103": [
    27.00000000000003,
    0,
    0,
    76,
    40,
    0,
    62
  ],
  "000104": [
    80.99999999999999,
    0,
    100,
    46.99999999999999,
    100,
    100,
    48
  ],
  "000106": [
    27.00000000000003,
    22,
    0,
    88.00000000000001,
    0,
    0,
    67
  ],
  "000108": [
    17.000000000000018,
    3,
    0,
    100,
    40,
    0,
    56.00000000000001
  ],
  "000109": [
    73.99999999999997,
    17,
    100,
    72,
    100,
    100,
    48
  ]
}

trewavas_face.js

/*
 * FaceMap class - holds all information about one mapped
 * face and is able to draw itself.
 */

// other variables can be in here too
// these control the colors used
// const bg_color = [225, 206, 187];
// const fg_color = [151, 102, 52];
// const stroke_color = [95, 52, 8];

function TrewavasFace() {

  // these are state variables for a face
  // (your variables may be different)
  this.eye_value = 2;    // can be either 2 (eyes) or 3 (no eyes)
  this.mouth_value = 1;  // range is 0.5 to 8
  this.tilt_value = 0;   // range is -30 to 30

  this.chin_val = 5; //1, 5
  this.head_width = 5; //5, 10
  this.eye_pos = 3; // 3, 6
  this.mouthEmo = 1; // 0.5, 1.5
  this.noseX = 1; // 0.5, 2
  this.eyebrow_y = -3; // -4, -2.5
  this.eyebrow_emo = 1; // 0.8, 1.2
  this.skin_val = 0; // 0, 5
  this.age = 0;   // 0, 6
  this.face_size = 1;   // 0.5, 1
  this.eyebrow_thick = 0.5;
  this.eyebrowTween = 0.5;

  this.skinColor = [];

  /*
   * Draw a face with position lists that include:
   *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
   *    bottom_lip, top_lip, nose_tip, nose_bridge,
   */
  this.draw = function(positions) {

  push();
  scale(0.45);
    angleMode(DEGREES);
    rectMode(CENTER);
    ellipseMode(CENTER);
    strokeCap(ROUND);
    colorMode(RGB);
    noStroke();
    noFill();

  //Skin Colours
  this.light_light_tone = color(244, 212, 187);
  this.light_tone =  color(248, 196, 161);
  this.light_mid_tone = color(229, 202, 155);
  this.mid_tone = color(219, 169, 116);
  this.mid_dark_tone = color(145, 96, 56);
  this.dark_tone = color(110,64,28);
  this.dark_dark_tone = color(87, 69, 57);

  this.skinColor = [this.light_light_tone, this.light_tone, this.light_mid_tone, this.mid_tone, this.mid_dark_tone, this.dark_tone, this.dark_dark_tone];
  fill(this.skinColor[this.skin_val])

  push();
  strokeWeight(0.2);
  stroke(50);

  //Ears
  ellipse(-this.eye_pos - 2, -1, 2, 2)
  ellipse(this.eye_pos + 2, -1, 2, 2)

  //Inner Ear
  push();
  strokeWeight(0.1)
  ellipse(-this.eye_pos - 1.8, -1 , 1, 1 )
  ellipse(this.eye_pos + 1.8, -1 , 1, 1 )
  pop();

  //Head
  rect(0,0, 5 + this.head_width,12,5,5,this.chin_val,this.chin_val);
  pop();

  //eyes
  fill(50);
  strokeWeight(2);
  translate(0,-1);
  ellipse(this.eye_pos,-1,0.7,0.9);
  ellipse(-this.eye_pos,-1,0.7,0.9);

  noFill();
  stroke(50);

  strokeWeight(0.08);
  if (this.age >= 1) {
  push();
  beginShape();
  curveVertex(-this.eye_pos + 0.5, -3);
  curveVertex(-this.eye_pos + 0.5, -0.5);
  curveVertex(-this.eye_pos - 0.5, -0.3);
  curveVertex(-this.eye_pos - 0.5, -3);
  endShape();
  pop();

  //Right
  push();
  beginShape();
  curveVertex(this.eye_pos - 0.5, -2);
  curveVertex(this.eye_pos - 0.5, -0.5);
  curveVertex(this.eye_pos + 0.5, -0.3);
  curveVertex(this.eye_pos + 0.5, -2);
  endShape();
  pop();

  push();
  translate(0.2, 0.4)
  beginShape();
  curveVertex(-this.eye_pos + 0.5, -2);
  curveVertex(-this.eye_pos + 0.5, -0.5);
  curveVertex(-this.eye_pos - 0.8, -0.4);
  curveVertex(-this.eye_pos - 0.8, -4);
  endShape();

  push();
  translate(-0.2, 0)
  beginShape();
  curveVertex(this.eye_pos - 0.5, -2);
  curveVertex(this.eye_pos - 0.5, -0.5);
  curveVertex(this.eye_pos + 0.8, -0.4);
  curveVertex(this.eye_pos + 0.8, -4);
  endShape();
  pop();
  pop();

  } else {

  //Eye Details
  //Left
  push();
  beginShape();
  curveVertex(-this.eye_pos + 0.5, -3);
  curveVertex(-this.eye_pos + 0.5, -0.5);
  curveVertex(-this.eye_pos - 0.5, -0.3);
  curveVertex(-this.eye_pos - 0.5, -3);
  endShape();
  pop();

  //Right
  push();
  beginShape();
  curveVertex(this.eye_pos - 0.5, -3);
  curveVertex(this.eye_pos - 0.5, -0.5);
  curveVertex(this.eye_pos + 0.5, -0.3);
  curveVertex(this.eye_pos + 0.5, -3);
  endShape();
  pop();
  }

  //If Female Add Eyelashes
  if(this.gender >= 1){
  push();
  strokeWeight(0.1);
  translate(0, -0.7)
  push();
  line(this.eye_pos, -1, this.eye_pos, -0.1)
  pop();
  
  push();
  line(this.eye_pos + 0.4, -1, this.eye_pos, -0.1)
  pop();

  push();
  line(this.eye_pos - 0.4, -1, this.eye_pos, -0.1)
  pop();

  push();
  line(-this.eye_pos, -1, -this.eye_pos, -0.1)
  pop();
  
  push();
  line(-this.eye_pos + 0.4, -1, -this.eye_pos, -0.1)
  pop();

  push();
  line(-this.eye_pos - 0.4, -1, -this.eye_pos, -0.1)
  pop();
  pop();
  }

  //Eyebrows
  push();
  if(this.age >= 3) {
    //If Elderly add grey eyebrows
    translate(this.eye_pos,this.eyebrow_y);
    stroke(200);
  } else {
  translate(this.eye_pos,this.eyebrow_y);
  stroke(50);
  }
  strokeWeight(this.eyebrow_thick);
  beginShape();
  curveVertex(-this.eye_pos /4, 1);
  curveVertex(-this.eye_pos/4, 1);
  curveVertex(-this.eye_pos/4 + this.eyebrowTween, this.eyebrow_emo);
  curveVertex(this.eye_pos/4 - this.eyebrowTween, this.eyebrow_emo);
  curveVertex(this.eye_pos/4, 1);
  curveVertex(this.eye_pos/4, 1);
  endShape();
  pop();

    push();
  if(this.age >= 3) {
    translate(-this.eye_pos,this.eyebrow_y);
    stroke(200);
  } else {
  translate(-this.eye_pos,this.eyebrow_y);
  stroke(50);
  }
  //stroke(233,130,114);
  noFill();
  strokeWeight(this.eyebrow_thick);
  beginShape();
  curveVertex(-this.eye_pos/4, 1);
  curveVertex(-this.eye_pos/4, 1);
  curveVertex(-this.eye_pos/4 + this.eyebrowTween, this.eyebrow_emo);
  curveVertex(this.eye_pos/4 - this.eyebrowTween, this.eyebrow_emo);
  curveVertex(this.eye_pos/4, 1);
  curveVertex(this.eye_pos/4, 1);
  endShape();
  pop();

//Mouth Region

//Correcting mouth location to target
 translate(0,1);

//If female, add lipstick(1 colour)
if(this.gender >= 1) {
  //Feminine Lips/Lipstick
  push();
  translate(0.5,1);
  stroke(255,20,20);
  noFill();
  strokeWeight(0.9);
  beginShape();
  curveVertex(-this.eye_pos + 1.1 , 1);
  curveVertex(-this.eye_pos + 1.1, 1);
  curveVertex(-this.eye_pos + 2.1, this.mouthEmo);
  curveVertex(this.eye_pos - 3.1 ,this.mouthEmo);
  curveVertex(this.eye_pos - 2.1, 1);
  curveVertex(this.eye_pos - 2.1, 1);
  endShape();
  pop();
}

//Default Mouth
  push();
  translate(0.5,1);
  strokeWeight(0.5);
  beginShape();
  curveVertex(-this.eye_pos + 0.1 , 1);
  curveVertex(-this.eye_pos + 0.1, 1);
  curveVertex(-this.eye_pos + 1.1, this.mouthEmo);
  curveVertex(this.eye_pos - 2.1 ,this.mouthEmo);
  curveVertex(this.eye_pos - 1.1, 1);
  curveVertex(this.eye_pos - 1.1, 1);
  endShape();
  pop();

  //Mouth detail
  push();
  scale(0.3);
  translate(0.5, 7 + this.mouthEmo * 2);
  stroke(50);
  strokeWeight(0.3);
  beginShape();
  curveVertex(-this.eye_pos + 1.1 , 1);
  curveVertex(-this.eye_pos + 1.1, 1);
  curveVertex(-this.eye_pos + 0.1, 1);
  curveVertex(this.eye_pos - 1.1 ,1);
  curveVertex(this.eye_pos - 2.1, 1);
  curveVertex(this.eye_pos - 2.1, 1);
  endShape();
  pop();


  //Head wrinkles
  if(this.age >= 2){
  push();
  scale(0.9);
  strokeWeight(0.1);
  stroke(50);
    line(-this.eye_pos + 1.5, -3.5, this.eye_pos - 1.5, -3.5);
    line(-this.eye_pos + 1.7, -3.2, this.eye_pos -1.7, -3.2);
  pop();
  }
  pop();

  //Create nose based on target image landmarks of nose
  push();
    noFill();
  scale(0.9)
  strokeWeight(0.08);
  beginShape();
  curveVertex(positions.nose_tip[0][0], -1)
  curveVertex(positions.nose_tip[0][0] + -this.noseX, -1)
  curveVertex(positions.nose_tip[0][0], positions.nose_tip[0][1])
  curveVertex(positions.nose_tip[1][0], positions.nose_tip[1][1])
  curveVertex(positions.nose_tip[2][0], positions.nose_tip[2][1])
  curveVertex(positions.nose_tip[3][0], positions.nose_tip[3][1])
  curveVertex(positions.nose_tip[4][0], positions.nose_tip[4][1])
  curveVertex(positions.nose_tip[4][0] + this.noseX, -1)
  curveVertex(positions.nose_tip[4][0], -1)
  endShape();
  pop();
  }

  /* set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
    this.chin_val = map(settings[0], 0, 100, 1, 5);
    this.head_width = map(settings[1], 0, 100, 3, 6);
    this.eye_pos = map(settings[1], 0, 100, 2, 4);
    this.eyebrowTween = map(settings[1], 0, 100, 0.2, 0.5);
    this.mouthEmo = map(settings[2], 0, 100, 0.8, 1.2);
    this.noseX = map(settings[3], 0, 100, -0.3, -0.1)
    this.eyebrow_y = map(settings[4], 0, 100, -4, -2.5);
    this.eyebrow_thick = map(settings[5], 0, 100, 0.1, 0.8);
    this.eyebrow_emo = map(settings[6], 0, 100, 0.8, 1.2);
    this.skin_val = floor(map(settings[7], 0, 100, 0, 5));
    this.age = floor(map(settings[8], 0, 100, 0, 6));
    this.gender = floor(map(settings[9], 0, 100, 0, 2));
  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    let settings = new Array(3);
    settings[0] = map(this.chin_val, 1, 5, 0, 100);
    settings[1] = map(this.head_width, 3, 6, 0, 100);
    settings[1] = map(this.eye_pos, 2, 4, 0, 100);
    settings[1] = map(this.eyebrowTween, 0.2, 0.5, 0, 100);
    settings[2] = map(this.mouthEmo, 0.8, 1.2, 0, 100);
    settings[3] = map(this.noseX, -0.3, -0.1, 0, 100);
    settings[4] = map(this.eyebrow_y, -4, -2.5, 0, 100);
    settings[5] = map(this.eyebrow_thick, 0.1, 0.8, 0, 100);
    settings[6] = map(this.eyebrow_emo, 0.8, 1.2, 0, 100);
    settings[7] = floor(map(this.skin_val, 0, 5, 0, 100));
    settings[8] = floor(map(this.age, 0, 6, 0, 100));
    settings[9] = floor(map(this.gender, 0, 2, 0, 100));
    return settings;
  }
}

trewavas_training_values.json

{
  "000001": [
    87.00000000000001,
    0,
    92,
    53.99999999999999,
    5.999999999999991,
    20,
    23,
    20,
    16,
    100
  ],
  "000002": [
    100,
    0,
    100,
    38.000000000000014,
    11.000000000000004,
    0,
    0,
    0,
    0,
    100
  ],
  "000005": [
    48,
    0,
    0,
    100,
    68,
    50.000000000000014,
    50,
    20,
    0,
    100
  ],
  "000006": [
    100,
    0,
    0,
    49.99999999999999,
    0,
    21.999999999999996,
    50,
    60,
    0,
    100
  ],
  "000007": [
    0,
    100,
    16.99999999999999,
    100,
    82,
    82,
    70.00000000000001,
    60,
    0,
    0
  ],
  "000009": [
    59,
    0,
    100,
    21.999999999999993,
    0,
    17,
    27,
    0,
    0,
    100
  ],
  "000010": [
    100,
    0,
    75.00000000000003,
    32,
    34.99999999999999,
    13.999999999999998,
    34.99999999999998,
    20,
    0,
    100
  ],
  "000013": [
    34.00000000000001,
    100,
    100,
    49.99999999999999,
    77.00000000000001,
    62,
    0,
    0,
    50,
    0
  ],
  "000014": [
    100,
    0,
    72.00000000000001,
    83,
    72.00000000000001,
    30.000000000000004,
    33.00000000000001,
    80,
    0,
    100
  ],
  "000015": [
    65,
    100,
    70.00000000000001,
    85,
    82,
    50.000000000000014,
    50,
    40,
    0,
    0
  ],
  "000016": [
    62,
    100,
    79.00000000000004,
    100,
    77.00000000000001,
    69,
    19.999999999999996,
    40,
    0,
    0
  ],
  "000018": [
    77,
    0,
    90.99999999999999,
    70,
    0,
    37,
    19.999999999999996,
    0,
    50,
    100
  ],
  "000020": [
    77,
    100,
    0,
    76,
    19.999999999999986,
    62,
    70.00000000000001,
    20,
    50,
    0
  ],
  "000023": [
    100,
    100,
    95,
    49.99999999999999,
    72.00000000000001,
    50.000000000000014,
    27,
    20,
    50,
    0
  ],
  "000025": [
    50,
    100,
    64.00000000000001,
    87,
    88.00000000000003,
    50.000000000000014,
    33.00000000000001,
    40,
    50,
    0
  ],
  "000028": [
    100,
    0,
    100,
    49.99999999999999,
    0,
    18,
    0,
    60,
    0,
    100
  ],
  "000029": [
    74,
    0,
    74.00000000000003,
    49.99999999999999,
    0,
    16,
    32.00000000000001,
    20,
    0,
    100
  ],
  "000030": [
    83,
    100,
    49,
    80,
    52.99999999999999,
    21.999999999999996,
    49,
    20,
    50,
    0
  ],
  "000031": [
    74,
    0,
    100,
    72,
    50,
    21.000000000000004,
    0,
    20,
    50,
    100
  ],
  "000032": [
    100,
    100,
    29.000000000000004,
    75,
    72.99999999999999,
    0,
    66.00000000000001,
    20,
    50,
    0
  ],
  "000035": [
    100,
    0,
    50,
    47.99999999999999,
    0,
    50.000000000000014,
    50,
    40,
    0,
    100
  ],
  "000037": [
    18,
    100,
    21.999999999999996,
    100,
    100,
    50.000000000000014,
    60.00000000000001,
    60,
    0,
    0
  ],
  "000038": [
    13,
    100,
    100,
    100,
    76.00000000000001,
    50.000000000000014,
    0,
    0,
    50,
    0
  ],
  "000040": [
    100,
    0,
    68.00000000000001,
    49.99999999999999,
    4.0000000000000036,
    24,
    50,
    40,
    0,
    100
  ],
  "000041": [
    1.0000000000000009,
    100,
    100,
    100,
    73.99999999999999,
    66,
    0,
    60,
    50,
    0
  ],
  "000042": [
    100,
    0,
    76.00000000000003,
    49.99999999999999,
    26.000000000000007,
    20,
    18.999999999999993,
    0,
    0,
    100
  ],
  "000043": [
    78,
    0,
    100,
    49.99999999999999,
    0,
    50.000000000000014,
    0,
    20,
    0,
    100
  ],
  "000044": [
    60,
    0,
    77.00000000000003,
    49.99999999999999,
    0,
    55.000000000000014,
    19.999999999999996,
    80,
    0,
    100
  ],
  "000045": [
    81,
    0,
    100,
    49.99999999999999,
    0,
    27,
    21.999999999999996,
    40,
    16,
    100
  ],
  "000047": [
    100,
    0,
    73.00000000000001,
    100,
    0,
    34.99999999999999,
    14.000000000000016,
    60,
    33,
    100
  ],
  "000048": [
    10.999999999999998,
    100,
    0,
    48.99999999999999,
    76.00000000000001,
    65,
    50,
    0,
    0,
    0
  ],
  "000050": [
    100,
    100,
    100,
    100,
    91.00000000000001,
    87.00000000000001,
    0,
    20,
    50,
    0
  ],
  "000051": [
    0,
    100,
    100,
    49.99999999999999,
    100,
    75,
    0,
    60,
    100,
    0
  ],
  "000052": [
    0,
    100,
    62.000000000000014,
    49.99999999999999,
    83,
    100,
    50,
    60,
    100,
    0
  ],
  "000054": [
    100,
    0,
    100,
    69,
    50,
    21.000000000000004,
    0,
    40,
    16,
    100
  ],
  "000055": [
    0,
    100,
    66.00000000000001,
    100,
    82,
    84.00000000000001,
    50,
    20,
    50,
    0
  ],
  "000056": [
    43.99999999999999,
    0,
    73.00000000000001,
    49.99999999999999,
    18.000000000000004,
    31.000000000000007,
    24,
    0,
    0,
    100
  ],
  "000058": [
    73,
    0,
    65.00000000000001,
    49.99999999999999,
    0,
    9,
    14.000000000000016,
    0,
    0,
    100
  ],
  "000060": [
    0,
    100,
    99,
    49.99999999999999,
    100,
    10,
    0,
    100,
    50,
    0
  ],
  "000064": [
    30.000000000000004,
    100,
    80.00000000000004,
    49.99999999999999,
    83,
    38,
    26,
    0,
    50,
    0
  ],
  "000065": [
    10.999999999999998,
    100,
    100,
    100,
    38.99999999999999,
    75,
    18.999999999999993,
    60,
    0,
    0
  ],
  "000068": [
    18,
    100,
    100,
    49.99999999999999,
    83,
    3.0000000000000004,
    49,
    20,
    100,
    0
  ],
  "000069": [
    0,
    100,
    50,
    90,
    77.00000000000001,
    59,
    50,
    20,
    50,
    0
  ],
  "000071": [
    100,
    0,
    77.00000000000003,
    49.99999999999999,
    25,
    11.999999999999998,
    32.00000000000001,
    40,
    16,
    100
  ],
  "000073": [
    100,
    0,
    64.00000000000001,
    49.99999999999999,
    0,
    13.999999999999998,
    50,
    40,
    0,
    100
  ],
  "000076": [
    0,
    100,
    81.99999999999999,
    96,
    47,
    19,
    50,
    20,
    16,
    0
  ],
  "000077": [
    100,
    0,
    81.99999999999999,
    49.99999999999999,
    0,
    12.999999999999998,
    20.999999999999996,
    40,
    0,
    100
  ],
  "000078": [
    68,
    0,
    74.00000000000003,
    65,
    0,
    18,
    24,
    20,
    16,
    100
  ],
  "000079": [
    0,
    100,
    76.00000000000003,
    98,
    100,
    21.999999999999996,
    19.999999999999996,
    60,
    50,
    0
  ],
  "000080": [
    0,
    100,
    80.00000000000004,
    49.99999999999999,
    69.99999999999999,
    46,
    18.999999999999993,
    40,
    0,
    0
  ],
  "000081": [
    0,
    100,
    100,
    100,
    67,
    67,
    0,
    60,
    16,
    0
  ],
  "000083": [
    60,
    0,
    81.99999999999999,
    49.99999999999999,
    0,
    9,
    11.000000000000012,
    0,
    33,
    100
  ],
  "000085": [
    75,
    0,
    76.00000000000003,
    49.99999999999999,
    0,
    28.000000000000004,
    32.00000000000001,
    40,
    16,
    100
  ],
  "000086": [
    67,
    0,
    50,
    49.99999999999999,
    86,
    50.000000000000014,
    50,
    0,
    0,
    100
  ],
  "000088": [
    100,
    0,
    65.00000000000001,
    49.99999999999999,
    0,
    8.000000000000004,
    50,
    40,
    0,
    100
  ],
  "000091": [
    50,
    100,
    38.99999999999999,
    49.99999999999999,
    80.00000000000001,
    37,
    100,
    0,
    0,
    0
  ],
  "000092": [
    77,
    0,
    76.00000000000003,
    49.99999999999999,
    16.999999999999993,
    19,
    33.00000000000001,
    20,
    33,
    100
  ],
  "000096": [
    50,
    0,
    13.000000000000014,
    49.99999999999999,
    0,
    26,
    50,
    20,
    0,
    100
  ],
  "000097": [
    40.99999999999999,
    0,
    38.99999999999999,
    49.99999999999999,
    0,
    13.999999999999998,
    50,
    20,
    0,
    100
  ],
  "000099": [
    80,
    0,
    100,
    49.99999999999999,
    0,
    12.999999999999998,
    0,
    0,
    16,
    100
  ],
  "000100": [
    94,
    0,
    69.00000000000001,
    49.99999999999999,
    81,
    17,
    31.000000000000007,
    0,
    16,
    100
  ],
  "000103": [
    69,
    0,
    50,
    49.99999999999999,
    15.000000000000005,
    25,
    58.00000000000001,
    20,
    0,
    100
  ],
  "000104": [
    3.0000000000000027,
    100,
    100,
    100,
    83.99999999999999,
    50.000000000000014,
    8.000000000000009,
    0,
    16,
    0
  ],
  "000106": [
    100,
    0,
    100,
    61,
    73.99999999999999,
    11.999999999999998,
    17.99999999999999,
    40,
    16,
    100
  ],
  "000108": [
    73,
    0,
    100,
    49.99999999999999,
    27.000000000000018,
    6.000000000000001,
    24,
    20,
    16,
    100
  ],
  "000109": [
    0,
    100,
    81.99999999999999,
    49.99999999999999,
    81,
    50.000000000000014,
    50,
    60,
    50,
    0
  ],
  "000110": [
    100,
    0,
    100,
    49.99999999999999,
    64,
    21.999999999999996,
    2.000000000000002,
    40,
    16,
    100
  ],
  "000111": [
    100,
    0,
    100,
    49.99999999999999,
    67,
    21.999999999999996,
    20.999999999999996,
    80,
    16,
    100
  ],
  "000114": [
    0,
    100,
    100,
    100,
    73.99999999999999,
    79,
    21.999999999999996,
    40,
    16,
    0
  ],
  "000115": [
    0,
    100,
    59.00000000000001,
    50.99999999999999,
    100,
    50.000000000000014,
    50,
    40,
    0,
    0
  ],
  "000116": [
    35,
    100,
    100,
    49.99999999999999,
    50,
    100,
    16.99999999999999,
    20,
    16,
    0
  ],
  "000117": [
    100,
    0,
    100,
    78,
    0,
    21.999999999999996,
    50,
    80,
    0,
    100
  ],
  "000118": [
    100,
    0,
    78.00000000000004,
    49.99999999999999,
    69,
    24,
    26,
    60,
    16,
    100
  ],
  "000121": [
    100,
    0,
    83.99999999999999,
    49.99999999999999,
    0,
    0,
    34.00000000000001,
    40,
    16,
    100
  ],
  "000122": [
    65,
    0,
    100,
    49.99999999999999,
    67,
    29.000000000000004,
    14.000000000000016,
    40,
    100,
    100
  ],
  "000125": [
    0,
    100,
    63.000000000000014,
    49.99999999999999,
    100,
    50.000000000000014,
    30.000000000000004,
    60,
    100,
    0
  ],
  "000126": [
    100,
    0,
    79.00000000000004,
    49.99999999999999,
    0,
    21.000000000000004,
    50,
    60,
    16,
    100
  ],
  "000129": [
    0,
    100,
    100,
    49.99999999999999,
    76.00000000000001,
    62,
    13.000000000000014,
    20,
    50,
    0
  ],
  "000131": [
    96,
    0,
    100,
    69,
    0,
    23,
    18.999999999999993,
    80,
    0,
    100
  ],
  "000132": [
    100,
    0,
    100,
    75,
    50,
    24,
    12.000000000000014,
    80,
    16,
    100
  ],
  "000133": [
    100,
    0,
    100,
    57.99999999999999,
    69.99999999999999,
    50.000000000000014,
    13.000000000000014,
    60,
    16,
    100
  ],
  "000134": [
    14.000000000000002,
    100,
    100,
    100,
    93,
    50.000000000000014,
    10.000000000000012,
    100,
    16,
    0
  ],
  "000135": [
    15.000000000000002,
    100,
    100,
    79,
    77.00000000000001,
    100,
    50,
    80,
    16,
    0
  ],
  "000137": [
    4.999999999999999,
    100,
    100,
    99,
    100,
    56.000000000000014,
    5.000000000000006,
    0,
    50,
    0
  ],
  "000140": [
    100,
    0,
    13.000000000000014,
    49.99999999999999,
    0,
    13.999999999999998,
    75.00000000000003,
    60,
    16,
    100
  ],
  "000142": [
    100,
    0,
    33.00000000000001,
    70,
    0,
    23,
    35.99999999999998,
    0,
    16,
    100
  ],
  "000143": [
    0,
    100,
    81.99999999999999,
    77,
    80.00000000000001,
    50.000000000000014,
    50,
    20,
    66,
    0
  ],
  "000145": [
    68,
    0,
    100,
    49.99999999999999,
    0,
    18,
    15.99999999999999,
    20,
    16,
    100
  ],
  "000146": [
    77,
    0,
    100,
    49.99999999999999,
    0,
    0,
    0,
    60,
    16,
    100
  ],
  "000147": [
    83.99999999999999,
    0,
    65.00000000000001,
    49.99999999999999,
    9.999999999999993,
    20,
    27,
    60,
    0,
    100
  ],
  "000148": [
    71,
    0,
    71.00000000000001,
    49.99999999999999,
    77.00000000000001,
    3.9999999999999996,
    50,
    0,
    50,
    100
  ],
  "000150": [
    2.0000000000000018,
    100,
    50,
    49.99999999999999,
    75,
    24,
    50,
    0,
    16,
    0
  ],
  "000151": [
    91.00000000000001,
    0,
    100,
    49.99999999999999,
    0,
    20,
    0,
    60,
    16,
    100
  ],
  "000156": [
    75,
    0,
    100,
    49.99999999999999,
    76.00000000000001,
    12.999999999999998,
    14.999999999999988,
    0,
    0,
    100
  ],
  "000157": [
    69,
    0,
    50,
    49.99999999999999,
    50,
    19,
    37.999999999999986,
    20,
    0,
    100
  ],
  "000160": [
    20,
    100,
    68.00000000000001,
    74,
    83,
    50.000000000000014,
    38.99999999999999,
    0,
    50,
    0
  ],
  "000161": [
    100,
    0,
    100,
    49.99999999999999,
    0,
    18,
    30.000000000000004,
    0,
    16,
    100
  ],
  "000152": [
    10.999999999999998,
    100,
    100,
    82,
    73.99999999999999,
    19,
    13.000000000000014,
    20,
    16,
    0
  ],
  "000153": [
    6,
    100,
    100,
    49.99999999999999,
    79,
    61,
    8.000000000000009,
    20,
    33,
    0
  ],
  "000155": [
    100,
    0,
    100,
    49.99999999999999,
    0,
    49.00000000000001,
    0,
    20,
    0,
    100
  ]
}

truong_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */  

// remove this or set to false to enable full program (load will be slower)
//var DEBUG_MODE = true;

// this can be used to set the number of sliders to show
// var NUM_SLIDERS = 7;

// example of a global function
// given a segment, this returns the average point [x, y]
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 ];
}

// This where you define your own face object
function TruongFace() {
  // these are state variables for a face
  // (your variables should be different!)

/*
 * earSize can vary from 0 to 4
 * earDist is the distance between ears and varies from 0 to 4
 * faceColor is 1,2,3,4 for yellow,blue,red, or violet respectively
 */
  
  this.faceColor = 1;
  this.eyeColor = 1;
  this.hairColor = 1;
  this.blush = 1;
  this.mouth_type = 1;
  this.brow_tilt = 5;
  this.browsColor = 1;

  /*
   * Draw the face with position lists that include:
   *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
   *    bottom_lip, top_lip, nose_tip, nose_bridge, 
   */  
  this.draw = function(positions) {
    noStroke();
    

    //hair
    let facePos = segment_average(positions.chin);
    push();
    if (this.hairColor == 1) { //light blonde
        fill("#d6ad5a");
    } else if (this.hairColor == 2) { //mid blonde
        fill("#ad8c49");
    } else if (this.hairColor == 3) { //dark blonde
        fill("#997b46");
    } else if (this.hairColor == 4) { //brown
        fill("#3b2f19");
    } else if (this.hairColor == 5) { //black
        fill("#1a140a");
    }
    ellipse(facePos[0],facePos[0]-0.5,4);
    ellipse(facePos[0],facePos[0]-3,0.5);
    ellipse(facePos[0],facePos[0]-2.55,0.5);
    ellipse(facePos[0],facePos[0]-3.5,1);
    pop();

    // head
    push();
    if (this.faceColor == 1) { 
        fill("#f7ebe4"); //white tone
    } else if (this.faceColor == 2) { 
        fill("#cfb4a5"); //tan tone
    } else if (this.faceColor == 3) { 
        fill("#997560"); //dark tone
    }
    ellipse(facePos[0],facePos[0],3.5);
    pop();

    //eyes
    let leftEyePos = segment_average(positions.left_eye);
    let rightEyePos = segment_average(positions.right_eye);
    let leftPupil = positions.left_eye[4];
    let rightPupil = positions.right_eye[4];
    push();
    if (this.eyeColor == 1) { 
        fill("#855740"); //brow
    } else if (this.eyeColor == 2) { 
        fill("#331b0e"); //dark brow
    } else if (this.eyeColor == 3) { 
        fill("#3a85ba"); //blue
    }
    stroke(255); 
    strokeWeight(0.05)
    ellipse(leftEyePos[0],0,0.5);
    ellipse(rightEyePos[0],0,0.5);
    fill(255); 
    ellipse(leftPupil[0],-0.1,0.1); 
    ellipse(rightPupil[0],-0.1,0.1);
    pop();

    //blush
    let leftBlush = positions.right_eye[0];
    let rightBlush = positions.left_eye[0];
    if (this.blush == 1){ 
     noStroke();
     fill("#f7a6a6");
     ellipse(leftBlush[0]+0.4,leftBlush[1]+1.6,0.5,0.25);
     ellipse(rightBlush[0]+0.1,rightBlush[1]+1.6,0.5,0.25);
     stroke("#e38f8f");
     strokeWeight(0.03);
     line(leftBlush[0]+0.5,leftBlush[1]+1.65,leftBlush[0]+0.45,leftBlush[1]+1.55);
     line(leftBlush[0]+0.35,leftBlush[1]+1.65,leftBlush[0]+0.3,leftBlush[1]+1.55);
     line(rightBlush[0]+0.05,rightBlush[1]+1.65,rightBlush[0],rightBlush[1]+1.55);
     line(rightBlush[0]+0.2,rightBlush[1]+1.65,rightBlush[0]+0.15,rightBlush[1]+1.55);
   }

    //nose
    noStroke();
    let nose = color("#d6b4a1")
    let nose_shadow = color("#c2a391")
    if (positions.nose_bridge[3][0] <= positions.nose_tip[2][0]) {
      nose = color("#d6b4a1")
      nose_shadow = color("#c2a391")
    }
    fill(nose);
    triangle(positions.nose_bridge[0][0],positions.nose_bridge[0][1]+0.5,positions.nose_tip[0][0]-0.1,positions.nose_tip[0][1]+0.4,positions.nose_tip[2][0]+0.3,positions.nose_tip[2][1]+0.4);
    fill(nose_shadow);
    triangle(positions.nose_bridge[0][0],positions.nose_bridge[0][1]+0.5,positions.nose_tip[0][0]+0.1,positions.nose_tip[0][1]+0.35,positions.nose_tip[2][0]+0.3,positions.nose_tip[2][1]+0.4);
    

    //mouth
    noStroke();
    let mouthPos = segment_average(positions.top_lip);
    let mouthPos2 = segment_average(positions.bottom_lip);
    if (this.mouth_type == 1){ //smile
      fill("#edb4b4");
      rect(mouthPos[0]-0.3,mouthPos2[1],0.8,0.4,0,0,40,40);
    }
    else if (this.mouth_type == 2){ //little smile
      fill("#edb4b4");
      rect(mouthPos[0]-0.3,mouthPos2[1],0.8,0.2,0,0,40,40);
    }
    else if (this.mouth_type == 3){ //lips
      fill("#000000");
      stroke("#9c5454");
      strokeWeight(0.05);
      rect(mouthPos[0]-0.3,mouthPos2[1],0.8,0.1,0,0,40,40);
    }

    //brows
    let leftBrowLeft = positions.left_eyebrow[0];
    let leftBrowArc = positions.left_eyebrow[2];
    let leftBrowRight = positions.left_eyebrow[4];
    let rightBrowLeft = positions.right_eyebrow[0];
    let rightBrowArc = positions.right_eyebrow[2];
    let rightBrowRight = positions.right_eyebrow[4];
    strokeWeight(0.08);
    push();
    if (this.browsColor == 1) { 
        stroke("#d6ad5a");
    } else if (this.browsColor == 2) { 
        stroke("#ad8c49");
    } else if (this.browsColor == 3) { 
        stroke("#997b46");
    } else if (this.browsColor == 4) { 
        stroke("#3b2f19");
    } else if (this.browsColor == 5) { 
        stroke("#1a140a");
    }
    rotate(-this.brow_tilt);
    line(leftBrowLeft[0]+0.25,leftBrowLeft[1]+1,leftBrowArc[0],leftBrowArc[1]+1); 
    line(leftBrowArc[0],leftBrowArc[1]+1,leftBrowRight[0],leftBrowRight[1]+1);
    rotate(this.brow_tilt*2);
    line(rightBrowLeft[0],rightBrowLeft[1]+1,rightBrowArc[0],rightBrowArc[1]+1);
    line(rightBrowArc[0],rightBrowArc[1]+1,rightBrowRight[0]-0.4,rightBrowRight[1]+1);
    pop();
  

  }

  /* set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
    this.faceColor = int(map(settings[0],0,100,1,3));
    this.hairColor = int(map(settings[1],0,100,1,5));
    this.eyeColor = int(map(settings[2],0,100,1,3));
    this.blush = (map(settings[3],0,100,0,1));
    this.mouth_type = int(map(settings[4],0,100,1,3));
    this.brow_tilt = map(settings[5],0,100,0,8);
    this.browsColor = int(map(settings[6],0,100,1,5));
  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    let settings = new Array(3);
    settings[0] = map(this.faceColor,1,3,0,100);
    settings[1] = map(this.hairColor,1,5,0,100);
    settings[2] = map(this.eyeColor,1,3,0,100);
    settings[3] = map(this.blush,0,1,0,100);
    settings[4] = map(this.mouth_type,1,3,0,100);
    settings[5] = map(this.brow_tilt,0,8,0,100);
    settings[6] = map(this.browsColor,1,5,0,100);
    return settings;
  }
}

truong_training_values.json

{
  "000001": [
    0,
    0,
    50,
    100,
    0,
    72,
    0
  ],
  "000002": [
    0,
    50,
    50,
    100,
    0,
    81,
    50
  ],
  "000005": [
    0,
    0,
    0,
    100,
    50,
    25,
    0
  ],
  "000006": [
    50,
    50,
    50,
    100,
    50,
    0,
    50
  ],
  "000007": [
    0,
    100,
    50,
    0,
    100,
    100,
    100
  ],
  "000009": [
    0,
    75,
    0,
    100,
    50,
    25,
    75
  ],
  "000010": [
    0,
    25,
    100,
    100,
    100,
    64,
    25
  ],
  "000013": [
    0,
    0,
    100,
    0,
    50,
    92,
    25
  ],
  "000014": [
    50,
    100,
    50,
    100,
    100,
    100,
    100
  ],
  "000015": [
    0,
    75,
    0,
    0,
    100,
    100,
    75
  ],
  "000044": [
    100,
    100,
    50,
    100,
    100,
    45,
    100
  ],
  "000016": [
    0,
    75,
    0,
    0,
    100,
    100,
    75
  ],
  "000018": [
    0,
    0,
    0,
    100,
    50,
    46,
    0
  ],
  "000020": [
    0,
    75,
    50,
    0,
    100,
    87,
    75
  ],
  "000023": [
    0,
    100,
    100,
    0,
    100,
    87,
    75
  ],
  "000025": [
    0,
    75,
    50,
    0,
    100,
    87,
    75
  ],
  "000028": [
    0,
    50,
    0,
    100,
    0,
    6,
    50
  ],
  "000029": [
    0,
    0,
    100,
    100,
    50,
    0,
    0
  ],
  "000030": [
    0,
    0,
    50,
    55.00000000000001,
    100,
    0,
    0
  ],
  "000031": [
    0,
    75,
    100,
    100,
    0,
    43,
    50
  ],
  "000032": [
    0,
    50,
    50,
    46,
    100,
    79,
    25
  ],
  "000035": [
    0,
    100,
    0,
    100,
    100,
    85,
    100
  ],
  "000037": [
    100,
    100,
    50,
    61,
    100,
    6,
    100
  ],
  "000038": [
    0,
    75,
    100,
    38,
    50,
    57.99999999999999,
    75
  ],
  "000040": [
    0,
    100,
    0,
    100,
    100,
    55.00000000000001,
    100
  ],
  "000041": [
    0,
    100,
    0,
    82,
    0,
    55.00000000000001,
    100
  ],
  "000042": [
    0,
    75,
    100,
    100,
    100,
    47,
    75
  ],
  "000043": [
    0,
    75,
    0,
    100,
    0,
    54,
    75
  ],
  "000045": [
    0,
    50,
    0,
    100,
    0,
    56.99999999999999,
    50
  ],
  "000047": [
    50,
    100,
    50,
    100,
    50,
    45,
    75
  ],
  "000048": [
    0,
    100,
    50,
    87,
    100,
    28.000000000000004,
    75
  ],
  "000050": [
    0,
    100,
    50,
    87,
    50,
    28.000000000000004,
    100
  ],
  "000051": [
    0,
    0,
    50,
    57.99999999999999,
    100,
    62,
    75
  ],
  "000052": [
    50,
    75,
    100,
    57.99999999999999,
    100,
    62,
    75
  ],
  "000054": [
    0,
    0,
    100,
    100,
    50,
    57.99999999999999,
    0
  ],
  "000055": [
    0,
    100,
    0,
    80,
    100,
    100,
    100
  ],
  "000056": [
    0,
    100,
    0,
    82,
    100,
    100,
    100
  ],
  "000058": [
    0,
    100,
    100,
    100,
    100,
    100,
    100
  ],
  "000060": [
    100,
    100,
    50,
    81,
    50,
    100,
    100
  ],
  "000064": [
    0,
    75,
    100,
    79,
    100,
    100,
    75
  ],
  "000065": [
    50,
    100,
    50,
    79,
    50,
    66,
    75
  ],
  "000068": [
    0,
    0,
    0,
    48,
    50,
    73,
    0
  ],
  "000069": [
    0,
    100,
    0,
    28.999999999999996,
    100,
    100,
    100
  ],
  "000071": [
    0,
    0,
    0,
    100,
    50,
    100,
    0
  ],
  "000073": [
    0,
    100,
    0,
    100,
    50,
    100,
    100
  ],
  "000076": [
    0,
    100,
    50,
    72,
    100,
    100,
    100
  ],
  "000077": [
    0,
    100,
    50,
    100,
    100,
    100,
    100
  ],
  "000078": [
    0,
    100,
    0,
    100,
    100,
    100,
    100
  ],
  "000079": [
    0,
    100,
    0,
    70,
    100,
    100,
    100
  ],
  "000080": [
    0,
    100,
    50,
    70,
    100,
    100,
    100
  ],
  "000081": [
    0,
    100,
    50,
    70,
    50,
    100,
    100
  ],
  "000083": [
    0,
    75,
    100,
    100,
    100,
    100,
    50
  ],
  "000085": [
    0,
    75,
    0,
    100,
    100,
    100,
    50
  ],
  "000086": [
    0,
    75,
    0,
    100,
    100,
    100,
    50
  ],
  "000088": [
    0,
    75,
    50,
    100,
    100,
    100,
    50
  ],
  "000091": [
    0,
    100,
    50,
    86,
    100,
    100,
    100
  ],
  "000092": [
    0,
    0,
    0,
    100,
    100,
    100,
    0
  ],
  "000096": [
    0,
    75,
    50,
    100,
    100,
    100,
    50
  ],
  "000097": [
    0,
    75,
    100,
    100,
    100,
    100,
    50
  ],
  "000099": [
    0,
    75,
    100,
    100,
    50,
    100,
    50
  ],
  "000100": [
    0,
    25,
    50,
    100,
    100,
    100,
    25
  ],
  "000103": [
    0,
    100,
    0,
    100,
    100,
    100,
    100
  ],
  "000104": [
    0,
    25,
    100,
    86,
    50,
    68,
    25
  ],
  "000106": [
    0,
    25,
    50,
    100,
    50,
    68,
    25
  ],
  "000108": [
    0,
    25,
    100,
    100,
    50,
    68,
    25
  ],
  "000109": [
    0,
    25,
    100,
    84,
    50,
    68,
    25
  ],
  "000110": [
    0,
    25,
    0,
    100,
    50,
    68,
    25
  ],
  "000111": [
    50,
    0,
    0,
    100,
    50,
    68,
    25
  ],
  "000114": [
    0,
    100,
    50,
    83,
    50,
    68,
    75
  ],
  "000115": [
    0,
    100,
    0,
    83,
    100,
    100,
    100
  ],
  "000116": [
    0,
    75,
    0,
    83,
    50,
    97,
    75
  ],
  "000117": [
    50,
    100,
    50,
    100,
    50,
    97,
    75
  ],
  "000118": [
    50,
    100,
    0,
    100,
    100,
    97,
    75
  ],
  "000121": [
    0,
    100,
    0,
    100,
    100,
    97,
    75
  ],
  "000122": [
    0,
    0,
    0,
    100,
    50,
    28.000000000000004,
    0
  ],
  "000125": [
    0,
    100,
    100,
    85,
    50,
    28.000000000000004,
    100
  ],
  "000126": [
    0,
    0,
    100,
    100,
    50,
    65,
    0
  ],
  "000129": [
    0,
    100,
    100,
    81,
    50,
    65,
    75
  ],
  "000131": [
    0,
    100,
    50,
    100,
    50,
    65,
    75
  ],
  "000132": [
    0,
    100,
    50,
    100,
    50,
    65,
    75
  ],
  "000133": [
    0,
    50,
    100,
    100,
    50,
    25,
    25
  ],
  "000134": [
    100,
    100,
    50,
    69,
    50,
    0,
    100
  ],
  "000135": [
    50,
    100,
    50,
    69,
    100,
    0,
    100
  ],
  "000137": [
    0,
    75,
    100,
    69,
    50,
    44,
    75
  ],
  "000140": [
    0,
    0,
    100,
    100,
    100,
    100,
    75
  ],
  "000142": [
    0,
    75,
    100,
    100,
    100,
    100,
    75
  ],
  "000143": [
    0,
    75,
    100,
    86,
    50,
    88,
    75
  ],
  "000145": [
    0,
    100,
    50,
    100,
    0,
    51,
    75
  ],
  "000146": [
    0,
    50,
    50,
    100,
    50,
    100,
    50
  ],
  "000147": [
    0,
    50,
    100,
    100,
    50,
    100,
    50
  ],
  "000148": [
    0,
    100,
    100,
    100,
    50,
    100,
    75
  ],
  "000150": [
    0,
    50,
    100,
    64,
    100,
    47,
    50
  ],
  "000151": [
    0,
    100,
    50,
    100,
    0,
    54,
    100
  ],
  "000152": [
    0,
    75,
    100,
    86,
    50,
    65,
    75
  ],
  "000153": [
    0,
    75,
    50,
    86,
    50,
    65,
    75
  ],
  "000155": [
    0,
    75,
    50,
    100,
    50,
    65,
    75
  ],
  "000156": [
    0,
    25,
    100,
    100,
    50,
    100,
    50
  ],
  "000157": [
    0,
    25,
    100,
    100,
    100,
    100,
    50
  ],
  "000160": [
    0,
    100,
    50,
    86,
    100,
    100,
    100
  ],
  "000161": [
    0,
    100,
    100,
    100,
    50,
    42,
    100
  ]
}



tuala_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */  

// remove this or set to false to enable full program (load will be slower)
//var DEBUG_MODE = true;

// this can be used to set the number of sliders to show
// var NUM_SLIDERS = 6;

// other variables can be in here too
// here's some examples for colors used

// example of a global function
// given a segment, this returns the average point [x, y]

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 ];
}


function TualaFace() {
 // faceColor values
  const light_shade = color(232,198,153); 
  const medium_shade = color(241,194,125);
  const tan_shade = color(198,134,66);
  const dark_shade = color(141,85,36);
 // eyeColor values
  const light_blue = color(161,202,241);
  const green_eye = color(108,165,128);
 // hairColor values
  const dark_tone = color(69,24,0); 
  const light_tone = color(235,215,141);
  const medium_tone = color(132,97,39); 
  // lip_color values
  const neutral_lip = color(227,158,116);
  const pink_lip = color(240,157,151);
  const dark_lip = color(148,82,80);
  const red_lip = color(255,0,0);
  
  /* THE RANGE OF MY VALUES BELOW:
  *faceColor,eyeColor,hairColor,lip_color = 0-3
  *headShape = eyeSize = 0-10
  *mouth_open1 = 0-5
  */

  this.faceColor = 0;
  this.eyeColor = 0;
  this.hair_change = 0;
  this.hairColor = 0;
  this.eyeSize = 10;
  this.lip_color = 0;
  this.mouth_open1 = 0;
  this.nose_shade = 0;
 
   /*
   * Draw the face with position lists that include:
   *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
   *    bottom_lip, top_lip, nose_tip, nose_bridge, 
   */   
    this.draw = function(positions) {
   
    /*--------------------------------------------------------------
    //HAIR
	* HAIR SHADES MAPPED TO SLIDER 5
	* HAIR STYLE CHANGE MAPPED TO SLIDER 4
	* Hair changes style based on gender; female = longer hair, male = shorter hair. 
	-------------------------------------------------------------- */
    noStroke();
    if(this.hairColor == 0) {
      fill(0);
    }
    else if (this.hairColor==1) {
      fill(dark_tone);
    }
    else if (this.hairColor==2) {
      fill(medium_tone);
    }
    else {
      fill(light_tone);
    }
	//longer hair
	if (this.hair_change == 0) {
	   beginShape();
        curveVertex(positions.chin[0][0]+1, positions.chin[0][1]);
        curveVertex(positions.chin[16][0]+0.5, positions.chin[16][1]);
        curveVertex(2.5, -2);
        curveVertex(1, -3);
        curveVertex(0, -3);
        curveVertex(-0.5, -3);
        curveVertex(-2, -2.2);
        curveVertex(positions.chin[0][0]-0.8, positions.chin[0][1]+2);
        curveVertex(positions.left_eyebrow[2][0]-1.5,positions.left_eyebrow[2][0]+3.5);
        curveVertex(0,2);
        curveVertex(positions.right_eyebrow[2][0]+2.2,positions.right_eyebrow[2][1]+3.5);
	    curveVertex(positions.chin[16][0]+0.6, positions.chin[16][1]-0.5);
        curveVertex(positions.chin[16][0], positions.chin[16][1]);
       endShape();
	}
	else { //shorter hair
         beginShape();
        curveVertex(positions.chin[0][0]+1, positions.chin[0][1]);
        curveVertex(positions.chin[16][0]+0.5, positions.chin[16][1]);
        curveVertex(+2.2, -2);
        curveVertex(+1, -3);
        curveVertex(0, -3);
        curveVertex(-1, -3);
        curveVertex(-1.5, -2);
        curveVertex(positions.chin[0][0], positions.chin[0][1]);
        curveVertex(positions.left_eyebrow[2][0],positions.left_eyebrow[2][0]+1);
        curveVertex(0,1);
        curveVertex(positions.right_eyebrow[2][0],positions.right_eyebrow[2][1]+1);
        curveVertex(positions.chin[11][5], positions.chin[16][1]);
        curveVertex(positions.chin[11][5], positions.chin[16][1]);
       endShape();
	}

    //--------------------------------------------------------------
    // FACE - SKIN TONE MAPPED TO SLIDER 2
	//--------------------------------------------------------------
	
    //stroke(235,177,92);
	//strokeWeight(0.03);
	noStroke();
    if(this.faceColor == 0) {
      fill(light_shade);
    }
    else if (this.faceColor==1) {
      fill(medium_shade);
    }
    else if (this.faceColor==2) {
      fill(tan_shade);
    }
    else {
      fill(dark_shade);
    }
	
	beginShape();
    for(let i = 0; i < positions.chin.length; i++) {
      curveVertex(positions.chin[i][0], positions.chin[i][1]);
      curveVertex(positions.chin[i][0], positions.chin[i][1]);
    }
    for(let i = 4; i >= 0; i--) {
      curveVertex(positions.right_eyebrow[i][0], positions.right_eyebrow[i][1]-0.4);
    }
    for(let i = 4; i >= 0; i--) {
      curveVertex(positions.left_eyebrow[i][0], positions.left_eyebrow[i][1]-0.4);
    }
    curveVertex(positions.chin[1][0], positions.chin[0][1]);
    curveVertex(positions.chin[0][0], positions.chin[0][1]);
    curveVertex(positions.chin[0][0], positions.chin[0][1]);
    endShape();
	
	//--------------------------------------------------------------
	//MOUTH - this.mouth_open1 MAPPED TO SLIDER 1 - DOES NOT WORK YET
	// I copied this code from a student but I have adjusted it to suit my own face.
    //--------------------------------------------------------------	
	
	//white back (teeth) inside mouth
	noStroke();
	fill(255);
      beginShape();
      curveVertex(positions.top_lip[0][0], positions.top_lip[0][1]);
      curveVertex(positions.top_lip[1][0], positions.top_lip[1][1]);
      curveVertex(positions.top_lip[2][0], positions.top_lip[2][1]);
      curveVertex(positions.top_lip[3][0], positions.top_lip[3][1]);
      curveVertex(positions.top_lip[4][0], positions.top_lip[4][1]);
      curveVertex(positions.top_lip[5][0], positions.top_lip[5][1]);
      curveVertex(positions.top_lip[6][0], positions.top_lip[6][1]);

      curveVertex(positions.bottom_lip[7][0], positions.bottom_lip[6][1]);
      curveVertex(positions.bottom_lip[8][0], positions.bottom_lip[8][1]);
      curveVertex(positions.bottom_lip[9][0], positions.bottom_lip[9][1]);
      curveVertex(positions.bottom_lip[10][0], positions.bottom_lip[10][1]);
      curveVertex(positions.bottom_lip[0][0], positions.bottom_lip[0][1]);

      curveVertex(positions.top_lip[0][0], positions.top_lip[0][1]);
      curveVertex(positions.bottom_lip[7][0], positions.bottom_lip[7][1]);
      endShape();
	
	//LIPS - MAPPED TO SLIDER 6
	 if (this.lip_color == 0){
	  fill(neutral_lip);
	} 
	else if (this.lip_color == 1) {
	  fill(pink_lip);
	}	
	else if (this.lip_color == 2) {
	  fill(dark_lip);
	}	
	else {
	  fill(red_lip);
	}	
	
	   beginShape();
      curveVertex(positions.top_lip[0][0], positions.top_lip[0][1]+0.05);
      curveVertex(positions.top_lip[2][0], positions.top_lip[2][1]-0.03);
      curveVertex(positions.top_lip[3][0], positions.top_lip[3][1]);
      curveVertex(positions.top_lip[4][0], positions.top_lip[4][1]);
      curveVertex(positions.top_lip[6][0], positions.top_lip[6][1]+0.05);
      curveVertex(positions.top_lip[8][0], positions.top_lip[8][1]+0.05);
      curveVertex(positions.top_lip[10][0], positions.top_lip[10][1]+0.05);
      curveVertex(positions.top_lip[0][0], positions.top_lip[0][1]+0.05);
      curveVertex(positions.top_lip[2][0], positions.top_lip[2][1]-0.03);
      curveVertex(positions.top_lip[3][0], positions.top_lip[3][1]);
      endShape();
	
      beginShape();
      curveVertex(positions.bottom_lip[0][0], positions.bottom_lip[0][1]);
      curveVertex(positions.bottom_lip[1][0], positions.bottom_lip[1][1]);
      curveVertex(positions.bottom_lip[2][0], positions.bottom_lip[2][1]);
      curveVertex(positions.bottom_lip[3][0], positions.bottom_lip[3][1]);
      curveVertex(positions.bottom_lip[5][0], positions.bottom_lip[5][1]);
      curveVertex(positions.bottom_lip[6][0], positions.bottom_lip[6][1]);
      curveVertex(positions.bottom_lip[8][0], positions.bottom_lip[8][1]);
      curveVertex(positions.bottom_lip[9][0], positions.bottom_lip[9][1]);
      curveVertex(positions.bottom_lip[10][0], positions.bottom_lip[10][1]);
      curveVertex(positions.bottom_lip[0][0], positions.bottom_lip[0][1]);
      curveVertex(positions.bottom_lip[1][0], positions.bottom_lip[1][1]);
      curveVertex(positions.bottom_lip[3][0], positions.bottom_lip[3][1]);
      endShape();

    //--------------------------------------------------------------
    //EYES
	//--------------------------------------------------------------
	
	//EYE POSITIONS
    noStroke();
    let left_eye_pos = segment_average(positions.left_eye);
    let right_eye_pos = segment_average(positions.right_eye); 	
	//EYE BACKGROUND
	fill(255);
	noStroke();
	ellipse(left_eye_pos[0], left_eye_pos[1], 0.58, 0.37);
    ellipse(right_eye_pos[0], right_eye_pos[1], 0.58, 0.37);
	
    //EYE COLOR - COLORS MAPPED TO SLIDER 3
  noStroke();
    if(this.eyeColor == 0) {
      fill('#A87A51');
    }
    else if (this.eyeColor==1) {
      fill(light_blue);
	}
    else {
      fill(green_eye);
    } 
    ellipse(left_eye_pos[0], left_eye_pos[1], this.eyeSize/30);
    ellipse(right_eye_pos[0], right_eye_pos[1],this.eyeSize/30);
  
    //EYE PUPILS 
    fill(50);
    ellipse(left_eye_pos[0], left_eye_pos[1], 0.18);
    ellipse(right_eye_pos[0], right_eye_pos[1],0.18); 
    //EYE REFLECTION	 
    fill(255);
    ellipse(left_eye_pos[0]+0.1, left_eye_pos[1]-0.1, 0.1);
    ellipse(right_eye_pos[0]+0.1, right_eye_pos[1]-0.1,0.1);
	
	//--------------------------------------------------------------
	//EYEBROWS
	//--------------------------------------------------------------
	
	fill(50);
    stroke(50);
    strokeWeight(0.07);
    // LEFT EYEBROW
    beginShape();
    for(let i = 1; i < positions.left_eyebrow.length; i++) {
      curveVertex(positions.left_eyebrow[i][0], positions.left_eyebrow[i][1]);
      curveVertex(positions.left_eyebrow[i][0], positions.left_eyebrow[i][1]);
    }  
    endShape();
    // RIGHT EYEBROW
    beginShape();
    for(let i = 0; i < 4; i++) {
      curveVertex(positions.right_eyebrow[i][0], positions.right_eyebrow[i][1]);
      curveVertex(positions.right_eyebrow[i][0], positions.right_eyebrow[i][1]);
    }
    endShape();
 	
    //--------------------------------------------------------------
	//NOSE 
	//--------------------------------------------------------------
	
    let nose_top = positions.nose_bridge[0];
    let nose_bottom = positions.nose_bridge[3];
	
    noFill();
    stroke(145,97,60);
    strokeWeight(0.07);
    //NOSE ARROW
    beginShape();
    vertex(positions.nose_tip[0][0], positions.nose_tip[0][1])
    vertex(positions.nose_tip[1][0], positions.nose_tip[1][1])
    vertex(positions.nose_tip[1][0], positions.nose_tip[1][1])
    vertex(positions.nose_tip[2][0], positions.nose_tip[2][1])
    vertex(positions.nose_tip[2][0], positions.nose_tip[2][1])
    vertex(positions.nose_tip[3][0], positions.nose_tip[3][1])
    vertex(positions.nose_tip[3][0], positions.nose_tip[3][1])
    vertex(positions.nose_tip[4][0], positions.nose_tip[4][1])
    endShape();
    //NOSE LINE
	stroke(145,97,60);
    beginShape();
    vertex(positions.nose_bridge[0][0], positions.nose_bridge[0][1])
    vertex(positions.nose_bridge[1][0], positions.nose_bridge[1][1])
    vertex(positions.nose_bridge[1][0], positions.nose_bridge[1][1])
    vertex(positions.nose_bridge[2][0], positions.nose_bridge[2][1])
    vertex(positions.nose_bridge[2][0], positions.nose_bridge[2][1])
    vertex(positions.nose_bridge[3][0], positions.nose_bridge[3][1])
    vertex(positions.nose_bridge[3][0], positions.nose_bridge[3][1])
    vertex(positions.nose_tip[2][0], positions.nose_tip[2][1])
    endShape();
	
	
}

  /* set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
    //this.mouthRadius = map(settings[0], 0, 100, 0.7, 2);
	this.mouth_open1 = map(settings[0], 0, 100, 0, 5);
    this.faceColor = int(map(settings[1], 0, 100, 0,3));
    this.eyeColor = int(map(settings[2], 0, 100, 0, 2));
	this.hair_change = int(map(settings[3], 0, 100, 0, 2));
	this.hairColor = int(map(settings[4], 0, 100, 0, 3));	
	this.lip_color = int(map(settings[5], 0, 100, 0, 3));
  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    let settings = new Array(6);
    //settings[0] = map(this.mouthRadius, 0.7, 2, 0, 100);
	settings[0] = map(this.mouth_open1, 0, 5, 0, 100);
    settings[1] = map(this.faceColor, 0, 3, 0, 100);
    settings[2] = map(this.eyeColor, 0, 2, 0, 100);
	settings[3] = map(this.hair_change, 0, 2, 0, 100);
	settings[4] = map(this.hairColor, 0, 3, 0, 100);
	settings[5] = map(this.lip_color, 0, 3, 0, 100);
    return settings;
  }
}

tuala_training_values.json

{
  "000001": [
    0,
    0,
    0,
    0,
    66.66666666666666,
    0
  ],
  "000002": [
    0,
    0,
    0,
    0,
    33.33333333333333,
    0
  ],
  "000005": [
    0,
    0,
    50,
    0,
    100,
    0
  ],
  "000006": [
    0,
    66.66666666666666,
    0,
    0,
    66.66666666666666,
    66.66666666666666
  ],
  "000007": [
    0,
    0,
    0,
    100,
    0,
    0
  ],
  "000009": [
    0,
    0,
    0,
    0,
    66.66666666666666,
    66.66666666666666
  ],
  "000010": [
    0,
    0,
    50,
    0,
    100,
    33.33333333333333
  ],
  "000013": [
    0,
    0,
    50,
    100,
    100,
    0
  ],
  "000014": [
    0,
    66.66666666666666,
    0,
    0,
    0,
    0
  ],
  "000015": [
    0,
    0,
    50,
    100,
    0,
    0
  ],
  "000016": [
    0,
    0,
    0,
    100,
    66.66666666666666,
    0
  ],
  "000018": [
    0,
    0,
    50,
    0,
    100,
    33.33333333333333
  ],
  "000020": [
    0,
    0,
    50,
    100,
    0,
    0
  ],
  "000023": [
    0,
    0,
    50,
    100,
    0,
    0
  ],
  "000025": [
    0,
    0,
    0,
    100,
    66.66666666666666,
    0
  ],
  "000028": [
    0,
    0,
    0,
    0,
    66.66666666666666,
    0
  ],
  "000029": [
    0,
    0,
    50,
    0,
    100,
    0
  ],
  "000030": [
    0,
    0,
    0,
    100,
    100,
    0
  ],
  "000031": [
    0,
    0,
    50,
    0,
    66.66666666666666,
    0
  ],
  "000032": [
    0,
    0,
    0,
    100,
    66.66666666666666,
    0
  ],
  "000035": [
    0,
    0,
    100,
    0,
    0,
    66.66666666666666
  ],
  "000037": [
    0,
    66.66666666666666,
    0,
    100,
    0,
    0
  ],
  "000038": [
    0,
    0,
    100,
    100,
    66.66666666666666,
    0
  ],
  "000040": [
    0,
    0,
    0,
    0,
    0,
    0
  ],
  "000041": [
    0,
    0,
    0,
    100,
    0,
    0
  ],
  "000042": [
    0,
    0,
    100,
    0,
    66.66666666666666,
    100
  ],
  "000043": [
    0,
    0,
    100,
    0,
    66.66666666666666,
    0
  ],
  "000044": [
    0,
    100,
    0,
    0,
    0,
    33.33333333333333
  ],
  "000045": [
    0,
    33.33333333333333,
    0,
    0,
    33.33333333333333,
    0
  ],
  "000047": [
    0,
    0,
    0,
    0,
    0,
    33.33333333333333
  ],
  "000048": [
    0,
    0,
    0,
    100,
    0,
    0
  ],
  "000050": [
    0,
    0,
    0,
    100,
    0,
    0
  ],
  "000051": [
    0,
    0,
    0,
    100,
    100,
    0
  ],
  "000052": [
    0,
    0,
    100,
    100,
    66.66666666666666,
    0
  ],
  "000054": [
    0,
    0,
    50,
    0,
    100,
    0
  ],
  "000055": [
    0,
    0,
    0,
    100,
    0,
    0
  ],
  "000056": [
    0,
    0,
    50,
    100,
    0,
    0
  ],
  "000058": [
    0,
    0,
    50,
    0,
    0,
    66.66666666666666
  ],
  "000060": [
    0,
    100,
    0,
    100,
    0,
    0
  ],
  "000064": [
    0,
    0,
    100,
    100,
    66.66666666666666,
    0
  ],
  "000065": [
    0,
    0,
    0,
    100,
    0,
    0
  ],
  "000068": [
    0,
    0,
    0,
    100,
    0,
    0
  ],
  "000069": [
    0,
    0,
    0,
    100,
    0,
    0
  ],
  "000071": [
    0,
    0,
    50,
    0,
    100,
    33.33333333333333
  ],
  "000073": [
    0,
    0,
    0,
    0,
    33.33333333333333,
    33.33333333333333
  ],
  "000076": [
    0,
    0,
    0,
    100,
    0,
    0
  ],
  "000077": [
    0,
    0,
    0,
    0,
    0,
    33.33333333333333
  ],
  "000078": [
    0,
    0,
    50,
    0,
    0,
    100
  ],
  "000079": [
    0,
    0,
    0,
    100,
    100,
    0
  ],
  "000080": [
    0,
    0,
    50,
    100,
    0,
    0
  ],
  "000081": [
    0,
    33.33333333333333,
    0,
    100,
    0,
    0
  ],
  "000083": [
    0,
    0,
    100,
    0,
    33.33333333333333,
    100
  ],
  "000085": [
    0,
    0,
    100,
    0,
    33.33333333333333,
    33.33333333333333
  ],
  "000086": [
    0,
    0,
    50,
    0,
    66.66666666666666,
    0
  ],
  "000088": [
    0,
    0,
    0,
    0,
    33.33333333333333,
    33.33333333333333
  ],
  "000091": [
    0,
    0,
    0,
    100,
    0,
    0
  ],
  "000092": [
    0,
    0,
    50,
    0,
    100,
    66.66666666666666
  ],
  "000096": [
    0,
    0,
    0,
    0,
    33.33333333333333,
    66.66666666666666
  ],
  "000097": [
    0,
    0,
    50,
    0,
    66.66666666666666,
    33.33333333333333
  ],
  "000099": [
    0,
    0,
    100,
    0,
    66.66666666666666,
    33.33333333333333
  ],
  "000100": [
    0,
    0,
    0,
    0,
    66.66666666666666,
    100
  ],
  "000103": [
    0,
    0,
    100,
    0,
    66.66666666666666,
    66.66666666666666
  ],
  "000104": [
    0,
    0,
    50,
    100,
    100,
    0
  ],
  "000106": [
    0,
    0,
    0,
    0,
    66.66666666666666,
    0
  ],
  "000108": [
    0,
    0,
    50,
    0,
    100,
    66.66666666666666
  ],
  "000109": [
    0,
    0,
    100,
    100,
    66.66666666666666,
    0
  ],
  "000110": [
    0,
    0,
    100,
    0,
    66.66666666666666,
    0
  ],
  "000111": [
    0,
    66.66666666666666,
    0,
    0,
    66.66666666666666,
    66.66666666666666
  ],
  "000114": [
    0,
    0,
    0,
    100,
    0,
    0
  ],
  "000115": [
    0,
    0,
    100,
    100,
    100,
    0
  ],
  "000116": [
    0,
    0,
    0,
    100,
    66.66666666666666,
    0
  ],
  "000117": [
    0,
    100,
    0,
    0,
    0,
    100
  ],
  "000118": [
    0,
    33.33333333333333,
    0,
    0,
    0,
    66.66666666666666
  ],
  "000121": [
    0,
    0,
    0,
    0,
    0,
    0
  ],
  "000122": [
    0,
    0,
    50,
    0,
    100,
    100
  ],
  "000125": [
    0,
    0,
    50,
    100,
    66.66666666666666,
    0
  ],
  "000126": [
    0,
    0,
    100,
    0,
    100,
    33.33333333333333
  ],
  "000129": [
    0,
    0,
    100,
    100,
    0,
    0
  ],
  "000131": [
    0,
    66.66666666666666,
    0,
    0,
    0,
    66.66666666666666
  ],
  "000132": [
    0,
    33.33333333333333,
    0,
    0,
    0,
    100
  ],
  "000133": [
    0,
    0,
    50,
    0,
    100,
    33.33333333333333
  ],
  "000134": [
    0,
    100,
    0,
    100,
    0,
    0
  ],
  "000135": [
    0,
    66.66666666666666,
    0,
    100,
    0,
    0
  ],
  "000137": [
    0,
    0,
    50,
    100,
    0,
    0
  ],
  "000140": [
    0,
    0,
    50,
    0,
    100,
    33.33333333333333
  ],
  "000142": [
    0,
    0,
    50,
    0,
    33.33333333333333,
    0
  ],
  "000143": [
    0,
    0,
    50,
    100,
    66.66666666666666,
    0
  ],
  "000145": [
    0,
    0,
    0,
    0,
    0,
    0
  ],
  "000146": [
    0,
    0,
    0,
    0,
    33.33333333333333,
    33.33333333333333
  ],
  "000147": [
    0,
    0,
    50,
    0,
    100,
    33.33333333333333
  ],
  "000148": [
    0,
    0,
    50,
    0,
    0,
    33.33333333333333
  ],
  "000150": [
    0,
    0,
    50,
    100,
    33.33333333333333,
    0
  ],
  "000151": [
    0,
    0,
    0,
    0,
    0,
    0
  ],
  "000152": [
    0,
    0,
    50,
    100,
    66.66666666666666,
    0
  ],
  "000153": [
    0,
    0,
    0,
    100,
    0,
    0
  ],
  "000155": [
    0,
    0,
    0,
    0,
    33.33333333333333,
    33.33333333333333
  ],
  "000156": [
    0,
    0,
    100,
    0,
    100,
    33.33333333333333
  ],
  "000157": [
    0,
    0,
    50,
    0,
    100,
    0
  ],
  "000160": [
    0,
    0,
    0,
    100,
    0,
    0
  ],
  "000161": [
    0,
    0,
    50,
    0,
    0,
    33.33333333333333
  ]
}


    


    
    


    






    





wang_training_values.json

{
  "000001": [
    0,
    0,
    44,
    0,
    65,
    100,
    35
  ],
  "000002": [
    0,
    0,
    100,
    100,
    56.00000000000001,
    100,
    100
  ],
  "000005": [
    0,
    0,
    26,
    100,
    67,
    53,
    37
  ],
  "000006": [
    0,
    0,
    31,
    100,
    80,
    89,
    0
  ],
  "000007": [
    100,
    100,
    80,
    0,
    20,
    100,
    100
  ],
  "000009": [
    0,
    0,
    73,
    0,
    100,
    33,
    26
  ],
  "000010": [
    0,
    0,
    10,
    0,
    62,
    17,
    100
  ],
  "000013": [
    100,
    100,
    12,
    2,
    28.000000000000004,
    24,
    100
  ],
  "000014": [
    0,
    0,
    85,
    100,
    90,
    100,
    0
  ],
  "000015": [
    100,
    100,
    21,
    0,
    90,
    56.00000000000001,
    100
  ],
  "000016": [
    100,
    100,
    84,
    16,
    91,
    89,
    100
  ],
  "000018": [
    0,
    0,
    0,
    100,
    66,
    89,
    100
  ],
  "000020": [
    100,
    100,
    79,
    0,
    62,
    100,
    100
  ],
  "000023": [
    100,
    100,
    84,
    0,
    38,
    28.999999999999996,
    100
  ],
  "000028": [
    0,
    0,
    86,
    0,
    71,
    100,
    35
  ],
  "000029": [
    0,
    0,
    0,
    0,
    61,
    0,
    80
  ],
  "000030": [
    100,
    100,
    9,
    35,
    30,
    88,
    80
  ],
  "000031": [
    0,
    0,
    69,
    11,
    81,
    4,
    53
  ],
  "000032": [
    100,
    100,
    34,
    60,
    72,
    100,
    53
  ],
  "000035": [
    0,
    0,
    71,
    49,
    100,
    48,
    100
  ],
  "000037": [
    100,
    100,
    28.000000000000004,
    100,
    68,
    100,
    100
  ],
  "000038": [
    100,
    100,
    36,
    0,
    50,
    30,
    100
  ],
  "000040": [
    0,
    0,
    55.00000000000001,
    0,
    49,
    90,
    100
  ],
  "000041": [
    100,
    100,
    63,
    39,
    65,
    100,
    100
  ],
  "000042": [
    0,
    0,
    64,
    15,
    100,
    6,
    51
  ],
  "000043": [
    0,
    0,
    73,
    0,
    49,
    53,
    51
  ],
  "000044": [
    0,
    0,
    67,
    0,
    78,
    100,
    0
  ],
  "000045": [
    0,
    0,
    91,
    0,
    100,
    100,
    5
  ],
  "000047": [
    0,
    0,
    78,
    0,
    53,
    100,
    0
  ],
  "000048": [
    100,
    100,
    57.99999999999999,
    0,
    55.00000000000001,
    100,
    0
  ],
  "000050": [
    100,
    100,
    68,
    0,
    66,
    100,
    0
  ],
  "000051": [
    100,
    100,
    0,
    5,
    11,
    100,
    0
  ],
  "000052": [
    100,
    100,
    77,
    68,
    54,
    100,
    0
  ],
  "000054": [
    0,
    0,
    0,
    8,
    85,
    38,
    47
  ],
  "000055": [
    100,
    100,
    84,
    2,
    68,
    81,
    47
  ],
  "000056": [
    100,
    100,
    78,
    2,
    75,
    31,
    47
  ],
  "000058": [
    0,
    0,
    80,
    2,
    82,
    0,
    100
  ],
  "000060": [
    100,
    100,
    14.000000000000002,
    100,
    20,
    100,
    100
  ],
  "000064": [
    100,
    100,
    64,
    0,
    49,
    100,
    100
  ],
  "000065": [
    100,
    100,
    75,
    37,
    73,
    100,
    100
  ],
  "000068": [
    100,
    100,
    0,
    27,
    0,
    31,
    100
  ],
  "000069": [
    100,
    100,
    79,
    75,
    77,
    100,
    100
  ],
  "000071": [
    0,
    0,
    0,
    38,
    57.99999999999999,
    20,
    99
  ],
  "000073": [
    0,
    0,
    78,
    38,
    75,
    70,
    27
  ],
  "000076": [
    100,
    100,
    78,
    5,
    43,
    100,
    27
  ],
  "000077": [
    0,
    0,
    77,
    5,
    50,
    100,
    59
  ],
  "000078": [
    0,
    0,
    68,
    5,
    100,
    67,
    17
  ],
  "000079": [
    100,
    100,
    0,
    4,
    47,
    67,
    17
  ],
  "000080": [
    100,
    100,
    70,
    17,
    16,
    100,
    17
  ],
  "000081": [
    100,
    100,
    77,
    0,
    91,
    100,
    17
  ],
  "000083": [
    0,
    0,
    77,
    0,
    91,
    74,
    85
  ],
  "000085": [
    0,
    0,
    83,
    0,
    73,
    17,
    100
  ],
  "000086": [
    0,
    0,
    53,
    0,
    64,
    100,
    100
  ],
  "000088": [
    0,
    0,
    88,
    0,
    77,
    81,
    76
  ],
  "000091": [
    100,
    100,
    78,
    0,
    68,
    100,
    76
  ],
  "000092": [
    0,
    0,
    0,
    0,
    94,
    17,
    100
  ],
  "000096": [
    0,
    0,
    45,
    0,
    100,
    100,
    0
  ],
  "000097": [
    0,
    0,
    53,
    0,
    63,
    0,
    51
  ],
  "000099": [
    0,
    0,
    49,
    0,
    83,
    28.000000000000004,
    42
  ],
  "000100": [
    0,
    0,
    0,
    0,
    100,
    50,
    100
  ],
  "000103": [
    0,
    0,
    79,
    0,
    100,
    0,
    81
  ],
  "000104": [
    100,
    100,
    30,
    0,
    55.00000000000001,
    40,
    81
  ],
  "000106": [
    0,
    0,
    43,
    0,
    100,
    94,
    38
  ],
  "000108": [
    0,
    0,
    0,
    0,
    100,
    0,
    92
  ],
  "000109": [
    100,
    100,
    65,
    21,
    56.99999999999999,
    0,
    92
  ],
  "000110": [
    0,
    0,
    55.00000000000001,
    28.000000000000004,
    50,
    12,
    62
  ],
  "000111": [
    0,
    0,
    0,
    36,
    100,
    100,
    0
  ],
  "000114": [
    100,
    100,
    69,
    0,
    34,
    100,
    0
  ],
  "000115": [
    100,
    100,
    0,
    0,
    71,
    6,
    0
  ],
  "000116": [
    100,
    100,
    68,
    0,
    41,
    100,
    0
  ],
  "000117": [
    0,
    0,
    74,
    0,
    100,
    100,
    0
  ],
  "000118": [
    0,
    0,
    74,
    0,
    76,
    100,
    0
  ],
  "000121": [
    0,
    0,
    62,
    0,
    67,
    100,
    69
  ],
  "000122": [
    0,
    0,
    0,
    0,
    100,
    100,
    100
  ],
  "000125": [
    100,
    100,
    40,
    42,
    26,
    0,
    100
  ],
  "000126": [
    0,
    0,
    0,
    42,
    31,
    0,
    100
  ],
  "000129": [
    100,
    100,
    82,
    0,
    64,
    56.00000000000001,
    100
  ],
  "000131": [
    0,
    0,
    72,
    3,
    100,
    100,
    0
  ],
  "000132": [
    0,
    0,
    72,
    3,
    61,
    100,
    16
  ],
  "000133": [
    0,
    0,
    0,
    3,
    87,
    0,
    33
  ],
  "000134": [
    100,
    100,
    76,
    100,
    37,
    100,
    33
  ],
  "000135": [
    100,
    100,
    74,
    37,
    50,
    100,
    33
  ],
  "000137": [
    100,
    100,
    74,
    34,
    50,
    48,
    33
  ],
  "000140": [
    0,
    0,
    0,
    34,
    65,
    18,
    17
  ],
  "000142": [
    0,
    0,
    71,
    32,
    45,
    0,
    100
  ],
  "000143": [
    100,
    100,
    69,
    6,
    68,
    0,
    100
  ],
  "000145": [
    0,
    0,
    76,
    0,
    77,
    100,
    11
  ],
  "000146": [
    0,
    0,
    91,
    0,
    55.00000000000001,
    100,
    11
  ],
  "000147": [
    0,
    0,
    0,
    0,
    70,
    74,
    9
  ],
  "000148": [
    0,
    0,
    81,
    0,
    56.00000000000001,
    0,
    100
  ],
  "000150": [
    100,
    100,
    94,
    0,
    49,
    68,
    100
  ],
  "000151": [
    0,
    0,
    69,
    0,
    66,
    56.00000000000001,
    60
  ],
  "000152": [
    100,
    100,
    25,
    57.99999999999999,
    64,
    33,
    60
  ],
  "000153": [
    100,
    100,
    68,
    57.99999999999999,
    68,
    75,
    60
  ],
  "000155": [
    0,
    0,
    100,
    57.99999999999999,
    84,
    100,
    28.000000000000004
  ],
  "000156": [
    0,
    0,
    0,
    57.99999999999999,
    67,
    0,
    100
  ],
  "000157": [
    0,
    0,
    0,
    57.99999999999999,
    63,
    0,
    31
  ],
  "000160": [
    100,
    100,
    73,
    0,
    37,
    100,
    31
  ],
  "000161": [
    0,
    0,
    66,
    0,
    45,
    0,
    100
  ]
}

wei_anim.js

const ease_wei = new p5.Ease();

 function wei_draw_one_frame(cur_frac) {

  // blur
  noStroke();
  fill(240);
  rect(0, 0, width, height);
  fill(0);
  let num_cols = 99;
  let num_rows = 55;
  let cell_height = height / num_rows;
  let cell_width = width / num_cols;

  let size_smoothness = 1;

  for(let col=0; col<num_cols; col++) {
    let cur_x = col * cell_width;
    for(let row=0; row<num_rows; row++) {
      let cur_y = row * cell_height;
      let brightness = getNoiseValue(cur_x, cur_y, cur_frac, "brightness", 0, 255, size_smoothness);
      let fill_color = int(brightness);
   fill(fill_color-10,fill_color+50,fill_color-30);
      rect(cur_x, cur_y, cell_width-1, cell_height-1);
    }
  }
 
push();
translate(-80,10);
  push()
   angleMode(DEGREES);
   //head left 
   // noStroke();
   // fill(171, 132, 103);
   // rect(0, 0, width, height);
   fill(158, 156, 153);
   rect(250, 120, 150, 100);
   fill(135, 133, 128);
   beginShape();
   vertex(250, 120);
   vertex(225, 145);
   vertex(225, 200);
   vertex(250, 220);
   endShape(CLOSE);
   fill(126)
   beginShape();
   vertex(230, 150);
   vertex(225, 145);
   vertex(225, 200);
   vertex(230, 220);
   endShape(CLOSE);

   stroke(126);
   strokeWeight(4)
   line(248,140,248,180);
   
   //eye left
   fill(207, 203, 198);
   noStroke();
   ellipse(280, 170, 30);
   ellipse(370, 170, 30);
   
   //airball
  let nudgeRight = getNoiseValue(0,0,cur_frac,"nudgeRight",0,70,1);
   let nudgeRight2 = getNoiseValue(0,0,cur_frac,"nudgeRight",0,6,1);
  push();
  stroke(255);
  strokeWeight(3);
  beginShape();
  curveVertex(450+nudgeRight, 150);//right
   curveVertex(460+nudgeRight, 200); 
  curveVertex(430+nudgeRight, 250); //left
  curveVertex(440+nudgeRight, 300); //top
  endShape();
   pop();

   push();
   fill(247, 97, 87);
   rotate(15);
   
   ellipse(500+nudgeRight,30, 70,90);
   pop();


  //body
  push();
  translate(300,320);
   rotate(10+nudgeRight/5);
   fill(158, 156, 153);
   rectMode(CENTER);
   rect(0, 0, 180, 100);
   pop();

   //hand 
    push();
  translate(300,320);
   rotate(10+nudgeRight2);
   fill(158, 156, 153);
   rectMode(CENTER);
   rect(100, -80, 30, 30);
   pop();

//lege 
    push();
  translate(300,320);
   rotate(10);
   fill(158, 156, 153);
   rectMode(CENTER);
   rect(100, 80, 30, 30);
   pop();

 push();
  translate(210,320);
   rotate(-10);
   fill(158, 156, 153);
   rectMode(CENTER);
   rect(0, 80, 30, 30);
   pop();
   
   pop()

   // robot2
   //easing 
   let amount_across = 0;
   amount_across = cur_frac * 2;
    const ease_amount_across = ease_wei.circularInOut(amount_across);
    const left_x = int(0.15 * width);
   const right_x = int(0.85 * width);
   let ellipse_radius = int(0.08*height);
    cur_x1 = map(amount_across, 0, 1, 0.03*left_x, 0.03*right_x);
    cur_x2 = map(ease_amount_across, 0, 1, 0.1*left_x, 0.1*right_x);
    let ellipse_y1 = int(0.25 * height);
    let ellipse_y2 = int(0.75 * height);
    fill(cur_x2+10,200-cur_x1,10*cur_x1)
    ellipse(-cur_x1+850, ellipse_y1-40, ellipse_radius-10);
    ellipse(cur_x2+620, ellipse_y1+230, ellipse_radius-10);

   push();
   translate(210,360);
   fill(255);
   rotate(-15);
   ellipse(550,cur_x1-20, 150,250);
   fill(150);
   ellipse(545,cur_x1-50, 120,70);
   fill(120);
   ellipse(520,cur_x1-50,10);
   ellipse(570,cur_x1-50,10);
   pop();
pop();
}

wei_face.js

 /*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */  

// remove this or set to false to enable full program (load will be slower)
// var DEBUG_MODE = true;

// this can be used to set the number of sliders to show
 var NUM_SLIDERS = 8;

// other variables can be in here too
// here's some examples for colors used

// example of a global function
// given a segment, this returns the average point [x, y]
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 ];
}

// This where you define your own face object
function WeiFace() {
  // these are state variables for a face
  // (your variables should be different!)
  const yellow = color(255,255,0);
  const blue = color(255,255,0);
  const red = color(200,0,0);
  const violet = color(150,0,150);
  const error_green = color(150,0,150);

  this.ecolor = 1;
  this.mood = 1;
  this.color = 2;
  this.eye_shift = -1;   
  this.fcolor = 1;
  this.eyedist = 0;
  this.eu = 0;


  /*
   * Draw the face with position lists that include:
   *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
   *    bottom_lip, top_lip, nose_tip, nose_bridge, 
   */  


  this.draw = function(positions) {
   

   //body
  
   strokeWeight(0.05);
   noStroke();
   push();
    if (this.fcolor == 0 ){
        fill(247, 247, 247);

    }else if (this.fcolor == 1 ){
       fill(245, 201, 135);

    } else if (this.fcolor == 2){
       fill(143, 89, 60);

    } else if (this.fcolor == 3){
        fill(23, 23, 22);

    } else if (this.fcolor == 4){
        fill(74, 47, 48);

    }
   scale(0.8);
        beginShape();
        curveVertex(-3.4, 1.5);
        curveVertex(-3.4, 1.5);
        curveVertex(-2, -3.9);
        curveVertex(1, -3.95);
        curveVertex(3, 0.5);
         vertex(2.5,0.5);
         vertex(2,1.5);
         vertex(1.5,2);
         vertex(0.5,1.5);
         vertex(0,2);
         vertex(-0.5,1.5);
         vertex(-1,1.2);
         vertex(-1.4,1.4);
         vertex(-1.8,1.2);
         vertex(-2.2,1.7);
         vertex(-2.8,1.2);
         vertex(-3.4, 1.5);
         vertex(-3.4, 1.5);
         endShape();
         pop();
     
   


   

   let top_lip = positions.top_lip[0];
    let top2_lip = positions.top_lip[9];
   let bottom_lip = positions.top_lip[6];
   let coner_lip = positions.bottom_lip[4];
   let conertwo_lip = positions.bottom_lip[1];
   let chin  = positions.chin[3];
   let chintwo = positions.chin[13]; 
   let chinsix = positions.chin[6];
   let left_eyebrow = positions.left_eyebrow[2];
   let lefttwo_eyebrow = positions.left_eyebrow[3];
   let leftthree_eyebrow = positions.left_eyebrow[4];
   let right_eyebrow = positions.right_eyebrow[0];
   let righttwo_eyebrow = positions.right_eyebrow[1];
   let rightthree_eyebrow = positions.right_eyebrow[2];
  
   let nose_tip = positions.nose_tip[1];
   let nosetwo_tip = positions.nose_tip[3];
   let nose_bridge = positions.nose_bridge[3];

   // print(top_lip,bottom_lip);

 //mouth
  stroke(10,10,10);
  strokeWeight(0.25); 
  stroke(10,10,10);
  push();
  strokeWeight(0.05); 
   scale(2);
   noFill();
   beginShape();
   curveVertex(chin[0]-0.1, chin[1]-0.5);
   curveVertex(chin[0]-0.1, chin[1]-0.5);
   curveVertex(top_lip[0], top_lip[1]-0.7);
   curveVertex(coner_lip[0], coner_lip[1]-0.7);
   curveVertex(conertwo_lip[0], conertwo_lip[1]-0.7);
   curveVertex(chintwo[0], chintwo[1]-0.7);
   curveVertex(chintwo[0], chintwo[1]-0.7);
   endShape();
   pop();

   //eye
   noStroke();
  if (this.ecolor == 0 ){
        fill(92, 132, 181);

    }else if (this.ecolor == 1 ){
       fill(171, 111, 85);

    } else if (this.ecolor == 2){
       fill(13, 12, 12);

    } 
  let left_eye_pos = segment_average(positions.left_eye);
  let right_eye_pos = segment_average(positions.right_eye); 

   ellipse(left_eye_pos[0],left_eye_pos[1],1.2,0.4);
   ellipse(right_eye_pos[0],right_eye_pos[1],1.2,0.4);
   noStroke();


   //eye ball 
   fill(255);
    ellipse(left_eye_pos[0]+this.eyedist,left_eye_pos[1]+this.eu,0.3);
   ellipse(right_eye_pos[0]+this.eyedist,right_eye_pos[1]+this.eu,0.3);

  for (let i = 0; i<positions.left_eye.length; i++){
    let pos = positions.left_eye[i];
   
  }

 
   //nose
 push();
 noStroke();
 fill(0,0,0);
 triangle(nose_tip[0], nose_tip[1], nosetwo_tip[0], nosetwo_tip[1], nose_bridge[0], nose_bridge[1]);
 pop();
 
  //eyebrow
  stroke(135,134,130);
  strokeWeight(0.1); 
  beginShape();
  curveVertex(left_eyebrow[0], left_eyebrow[1]);
  curveVertex(left_eyebrow[0], left_eyebrow[1]);
  curveVertex(lefttwo_eyebrow[0], lefttwo_eyebrow[1]);
  curveVertex(leftthree_eyebrow[0], leftthree_eyebrow[1]);
  curveVertex(leftthree_eyebrow[0], leftthree_eyebrow[1]);
  endShape();
 
  beginShape();
  curveVertex(right_eyebrow[0], right_eyebrow[1]);
  curveVertex(right_eyebrow[0], right_eyebrow[1]);
  curveVertex(righttwo_eyebrow[0], righttwo_eyebrow[1]);
  curveVertex(rightthree_eyebrow[0], rightthree_eyebrow[1]);
  curveVertex(rightthree_eyebrow[0], rightthree_eyebrow[1]);
  endShape();
  noStroke();

  

  //float 
     strokeWeight(0.5);
     push();
     noFill();
 //float color
    if (this.color == 0 ){
        stroke(247, 247, 247);

    }else if (this.color == 1 ){
       stroke(245, 201, 135);

    } else if (this.color == 2){
       stroke(143, 89, 60);

    } else if (this.color == 3){
        stroke(23, 23, 22);

    } else if (this.color == 4){
        stroke(23, 23, 22);

    }
    
 // float setting (happy or not)
   if ( top_lip[1] < top2_lip[1] || this.mood == 2){      
   
   ellipse(nose_tip[0],-3.5,3,1.5);       

    } else if ( top_lip[1] > top2_lip[1] || this.mood == -2)

    {    
        strokeWeight(0.1)
        if (this.color == 0 ){
        fill(247, 247, 247);

    }else if (this.color == 1 ){
       fill(245, 201, 135);

    } else if (this.color == 2){
       fill(143, 89, 60);

    } else if (this.color == 3){
        fill(23, 23, 22);

    } else if (this.color == 4){
        fill(23, 23, 22);

    } 

        triangle(chinsix[0]-1,-2.5,chinsix[0]-0.9,-4,chinsix[0],-3.2);
       

    }

    
    
    pop();
        

 
  }


  /* set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
    this.color = int(map(settings[0], 0, 100, 0, 5));
    this.fcolor = int(map(settings[1], 0, 100, 0, 4));
    this.mood = int(map(settings[2], 0, 100, -2, 2));
    this.ecolor = int(map(settings[3], 0, 100, 0, 2));
    this.eyedist = map(settings[4], 0, 100, -1, 1);
    this.eu = map(settings[5], 0, 100, -2, 2);
  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    let settings = new Array(6);
    settings[0] = map(this.color, 0, 5, 0, 100);
    settings[1]  = map(this.fcolor,0, 4, 0, 100);
    settings[2]  = map(this.mood,-2, 2, 0, 100);
    settings[3]  = map(this.ecolor,0, 2, 0, 100);
    settings[4] = map(this.eyedist, -1, 1, 0, 100);
    settings[5] = map(this.eu, -2, 2, 0, 100);
    return settings;
  }
}

wei_training_values.json

{
 "000001": [
    40,
    25,
    75,
    50,
    64,
    50
  ],
  "000002": [
    40,
    0,
    75,
    50,
    52,
    47
  ],
  "000005": [
    20,
    0,
    75,
    50,
    52,
    47
  ],
  "000006": [
    20,
    50,
    75,
    50,
    56.99999999999999,
    50
  ],
  "000007": [
    60,
    25,
    75,
    50,
    50,
    48
  ],
  "000009": [
    40,
    0,
    75,
    50,
    45,
    49
  ],
  "000010": [
    20,
    25,
    75,
    0,
    45,
    49
  ],
  "000013": [
    20,
    0,
    75,
    0,
    57.99999999999999,
    48
  ],
  "000014": [
    80,
    50,
    75,
    100,
    38,
    48
  ],
  "000015": [
    20,
    0,
    75,
    100,
    38,
    48
  ],
  "000016": [
    40,
    25,
    75,
    50,
    59,
    49
  ],
  "000018": [
    20,
    0,
    100,
    0,
    51,
    49
  ],
  "000020": [
    40,
    0,
    75,
    0,
    56.00000000000001,
    47
  ],
  "000029": [
    20,
    0,
    100,
    0,
    51,
    50
  ],
  "000030": [
    20,
    25,
    100,
    100,
    51,
    50
  ],
  "000031": [
    20,
    0,
    100,
    0,
    51,
    50
  ],
  "000056": [
    60,
    0,
    100,
    50,
    50,
    49
  ],
  "000058": [
    60,
    0,
    100,
    0,
    53,
    49
  ],
  "000060": [
    60,
    50,
    100,
    50,
    53,
    49
  ],
  "000064": [
    60,
    25,
    100,
    50,
    53,
    49
  ],
  "000065": [
    60,
    25,
    100,
    100,
    49,
    49
  ],
  "000068": [
    0,
    25,
    50,
    50,
    49,
    49
  ],
  "000069": [
    60,
    25,
    50,
    50,
    49,
    49
  ],
  "000071": [
    20,
    25,
    50,
    0,
    52,
    48
  ],
  "000073": [
    40,
    25,
    50,
    50,
    47,
    50
  ],
  "000076": [
    60,
    25,
    50,
    100,
    50,
    50
  ],
  "000077": [
    40,
    25,
    50,
    100,
    64,
    50
  ],
  "000078": [
    40,
    0,
    50,
    100,
    51,
    50
  ],
  "000079": [
    100,
    0,
    50,
    50,
    57.99999999999999,
    49
  ],
  "000080": [
    40,
    25,
    50,
    0,
    45,
    49
  ],
  "000081": [
    60,
    25,
    50,
    50,
    45,
    49
  ],
  "000083": [
    40,
    25,
    50,
    50,
    50,
    49
  ],
  "000085": [
    40,
    0,
    50,
    50,
    50,
    49
  ],
  "000086": [
    40,
    0,
    50,
    50,
    33,
    50
  ],
  "000088": [
    40,
    25,
    50,
    50,
    65,
    50
  ],
  "000091": [
    80,
    0,
    50,
    100,
    51,
    47
  ],
  "000092": [
    20,
    25,
    50,
    50,
    44,
    49
  ],
  "000096": [
    40,
    25,
    50,
    100,
    44,
    49
  ],
  "000097": [
    40,
    25,
    50,
    0,
    50,
    49
  ],
  "000099": [
    40,
    25,
    50,
    0,
    50,
    50
  ],
  "000100": [
    40,
    0,
    50,
    50,
    50,
    50
  ],
  "000103": [
    60,
    25,
    50,
    0,
    40,
    50
  ],
  "000104": [
    20,
    0,
    50,
    0,
    43,
    50
  ],
  "000106": [
    40,
    0,
    50,
    50,
    43,
    50
  ],
  "000108": [
    20,
    25,
    50,
    0,
    52,
    50
  ],
  "000109": [
    40,
    25,
    50,
    0,
    52,
    48
  ],
  "000110": [
    40,
    0,
    50,
    0,
    52,
    50
  ],
  "000111": [
    20,
    50,
    50,
    100,
    67,
    51
  ],
  "000114": [
    60,
    25,
    100,
    100,
    51,
    50
  ],
  "000115": [
    100,
    0,
    100,
    0,
    60,
    48
  ],
  "000116": [
    40,
    0,
    100,
    100,
    52,
    48
  ],
  "000117": [
    80,
    50,
    100,
    100,
    50,
    49
  ],
  "000118": [
    60,
    25,
    100,
    50,
    39,
    47
  ],
  "000121": [
    60,
    25,
    100,
    50,
    51,
    49
  ],
  "000122": [
    20,
    0,
    100,
    50,
    51,
    49
  ],
  "000125": [
    100,
    0,
    100,
    0,
    51,
    49
  ],
  "000126": [
    20,
    50,
    100,
    0,
    64,
    50
  ],
  "000129": [
    60,
    25,
    100,
    50,
    56.99999999999999,
    50
  ],
  "000131": [
    60,
    25,
    100,
    100,
    70,
    50
  ],
  "000132": [
    60,
    25,
    100,
    100,
    63,
    50
  ],
  "000133": [
    40,
    25,
    100,
    0,
    52,
    50
  ],
  "000134": [
    80,
    50,
    100,
    100,
    31,
    50
  ],
  "000135": [
    80,
    25,
    100,
    100,
    68,
    50
  ],
  "000137": [
    0,
    0,
    100,
    100,
    68,
    50
  ],
  "000140": [
    20,
    25,
    100,
    0,
    36,
    49
  ],
  "000142": [
    40,
    0,
    100,
    0,
    50,
    48
  ],
  "000143": [
    40,
    0,
    100,
    0,
    50,
    49
  ],
  "000145": [
    40,
    25,
    100,
    50,
    50,
    50
  ],
  "000146": [
    40,
    25,
    100,
    50,
    32,
    50
  ],
  "000147": [
    20,
    0,
    100,
    0,
    56.99999999999999,
    50
  ],
  "000148": [
    40,
    0,
    100,
    0,
    68,
    50
  ],
  "000150": [
    40,
    0,
    100,
    50,
    45,
    44
  ],
  "000151": [
    60,
    25,
    100,
    100,
    50,
    50
  ],
  "000152": [
    20,
    0,
    100,
    0,
    50,
    47
  ],
  "000153": [
    40,
    25,
    100,
    50,
    49,
    48
  ],
  "000155": [
    40,
    25,
    100,
    50,
    49,
    48
  ],
  "000156": [
    20,
    0,
    50,
    0,
    61,
    48
  ],
  "000157": [
    20,
    0,
    50,
    0,
    50,
    48
  ],
  "000160": [
    60,
    25,
    50,
    50,
    50,
    48
  ],
  "000161": [
    60,
    0,
    50,
    0,
    49,
    50
  ],
  "000023": [
    60,
    0,
    75,
    0,
    64,
    48
  ],
  "000025": [
    40,
    25,
    75,
    0,
    51,
    50
  ],
  "000028": [
    20,
    0,
    100,
    50,
    51,
    50
  ],
  "000032": [
    20,
    0,
    25,
    100,
    51,
    50
  ],
  "000035": [
    60,
    0,
    25,
    100,
    51,
    50
  ],
  "000037": [
    60,
    25,
    25,
    50,
    55.00000000000001,
    49
  ],
  "000038": [
    60,
    0,
    25,
    0,
    52,
    49
  ],
  "000040": [
    60,
    0,
    25,
    50,
    52,
    49
  ],
  "000050": [
    60,
    0,
    100,
    50,
    47,
    49
  ],
  "000051": [
    0,
    0,
    50,
    50,
    55.00000000000001,
    49
  ],
  "000052": [
    40,
    25,
    50,
    0,
    55.00000000000001,
    49
  ],
  "000054": [
    20,
    0,
    50,
    0,
    53,
    49
  ],
  "000055": [
    60,
    0,
    50,
    50,
    50,
    49
  ],
  "000045": [
    60,
    25,
    25,
    50,
    48,
    50
  ],
  "000047": [
    60,
    50,
    25,
    100,
    55.00000000000001,
    51
  ],
  "000048": [
    60,
    0,
    25,
    100,
    55.00000000000001,
    51
  ],
  "000044": [
    60,
    50,
    50,
    100
  ],
  "000041": [
    60,
    0,
    25,
    50,
    45,
    50
  ],
  "000042": [
    40,
    0,
    25,
    0,
    45,
    50
  ],
  "000043": [
    40,
    25,
    25,
    50,
    48,
    50
  ]
}

yee_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */  

// remove this or set to false to enable full program (load will be slower)
// var DEBUG_MODE = true;

// this can be used to set the number of sliders to show
// var NUM_SLIDERS = 7;

// other variables can be in here too
// here's some examples for colors used
// const yee_bg_color = [225, 206, 187];
// const yee_fg_color = [151, 102, 52];
// const stroke_color = [95, 52, 8];

// example of a global function
// given a segment, this returns the average point [x, y]
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 ];
}

// This where you define your own face object
function YeeFace() {
  // these are state variables for a face
  // (your variables should be different!)

  this.gender = 1;
  this.suits = 0;
  this.eyeball_move = 0;
  this.eye_color = 0;
  this.blush_color = 0;
  this.mouth_open = 0;
  this.hair_bun = 0;
  this.hair_color = 0;

  const skin = [255, 229, 184];
  const gold = [255, 227, 82];
  const mustache = [204, 150, 82];
  const red = [250, 80, 80];
  const black = [50];
  const pink = [255, 200, 200];
  const orange = [255, 140, 0];
  const brown = [130, 90, 5];
  const grey = [120];
  const blue = [52, 141, 224];
  const shadow = [180, 130, 10];

  const hair_black = [30];
  const hair_yellow = [219, 175, 39];
  const hair_brown = [105, 76, 29];
  const hair_red = [128, 44, 23];

  /*
   * Draw the face with position lists that include:
   *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
   *    bottom_lip, top_lip, nose_tip, nose_bridge, 
   */  
   this.draw = function(positions) {

    let crown_dist = dist(positions.left_eye[0][0], positions.left_eye[0][1], positions.right_eye[3][0], positions.right_eye[3][1]);
    let crown_1 = dist(positions.right_eye[3][0], positions.right_eye[3][1], positions.chin[16][0], positions.chin[16][1]);
    let crown_2 = dist(positions.chin[0][0], positions.chin[0][1], positions.left_eye[0][0], positions.left_eye[0][1]);
    let map_crown1 = map(crown_1, 0.2, 1.8, 0.1, -0.2);
    let map_crown2 = map(crown_2, 0.2, 1.5, 0.1, -0.2);
    let map_hairbun1 = map(crown_1, 0.2, 1.8, 1.5, 0.5);
    let map_hairbun2 = map(crown_2, 0.2, 1.8, 0.5, 1.5);


    noStroke();
    angleMode(DEGREES);

    //Face
    fill(skin);
    beginShape();
    noStroke();
    curveVertex(positions.chin[0][0], positions.chin[0][1]-0.8);
    curveVertex(positions.chin[4][0]-0.5, positions.chin[4][1]);
    curveVertex(positions.chin[8][0], positions.chin[8][1]);
    curveVertex(positions.chin[12][0]+0.1, positions.chin[12][1]+0.1);
    curveVertex(positions.chin[16][0]-0.2, positions.chin[16][1]-0.8);
    curveVertex(positions.chin[0][0], positions.chin[0][1]-0.8);
    curveVertex(positions.chin[4][0]-0.5, positions.chin[4][1]);
    curveVertex(positions.chin[8][0], positions.chin[8][1]);
    curveVertex(positions.chin[12][0], positions.chin[12][1]);
    endShape();
    
    //Left_eye
    fill(255);
    push();
    translate(0, 0.3);
    beginShape();
    noStroke();
    curveVertex(positions.left_eye[0][0]-0.5, positions.left_eye[0][1]+0.2);
    curveVertex(positions.left_eye[1][0]-0.3, positions.left_eye[1][1]);
    curveVertex(positions.left_eye[2][0], positions.left_eye[2][1]);
    curveVertex(positions.left_eye[3][0], positions.left_eye[3][1]);
    curveVertex(positions.left_eye[4][0], positions.left_eye[4][1]+0.3);
    curveVertex(positions.left_eye[5][0]-0.4, positions.left_eye[5][1]+0.3);
    curveVertex(positions.left_eye[0][0]-0.5, positions.left_eye[0][1]+0.1);
    curveVertex(positions.left_eye[1][0]-0.3, positions.left_eye[1][1]);
    curveVertex(positions.left_eye[2][0], positions.left_eye[2][1]);
    endShape();
    pop();

    //Right_eye
    push();
    translate(0, 0.3);
    beginShape();
    noStroke();
    curveVertex(positions.right_eye[0][0], positions.right_eye[0][1]);
    curveVertex(positions.right_eye[1][0], positions.right_eye[1][1]);
    curveVertex(positions.right_eye[2][0]+0.3, positions.right_eye[2][1]);
    curveVertex(positions.right_eye[3][0]+0.3, positions.right_eye[3][1]+0.1);
    curveVertex(positions.right_eye[4][0]+0.3, positions.right_eye[4][1]+0.25);
    curveVertex(positions.right_eye[5][0], positions.right_eye[5][1]+0.25);
    curveVertex(positions.right_eye[0][0], positions.right_eye[0][1]);
    curveVertex(positions.right_eye[1][0], positions.right_eye[1][1]);
    curveVertex(positions.right_eye[2][0]+0.3, positions.right_eye[2][1]);
    endShape();
    pop();

    //Eyeball color
    if(this.eye_color >0 && this.eye_color <= 1){
      fill(brown);
    }else
    if(this.eye_color >1 && this.eye_color <= 2){
      fill(black);
    }else
    if(this.eye_color >2 && this.eye_color <= 3){
      fill(grey);
    }else
    if(this.eye_color >3 && this.eye_color <= 4){
      fill(blue);
    }

    //Eyeball
    let left_eye_pos = segment_average(positions.left_eye);
    let right_eye_pos = segment_average(positions.right_eye);
    ellipse(left_eye_pos[0]+this.eyeball_move, left_eye_pos[1]+0.4, 0.2, 0.3);
    ellipse(right_eye_pos[0]+this.eyeball_move, right_eye_pos[1]+0.35, 0.2, 0.3);

    //Blush
    let from = color(pink);
    let to = color(orange);
    colorMode(RGB);
    let inter = lerpColor(from, to, this.blush_color);
    fill(inter);
    ellipse(positions.top_lip[0][0]-0.5, positions.top_lip[0][1]-0.2, 0.8);
    ellipse(positions.top_lip[6][0]+0.5, positions.top_lip[6][1]-0.2, 0.8);

    //nose
    fill(100);
    if(positions.nose_tip[2][1] < 0.1){
      ellipse(positions.nose_tip[1][0], positions.nose_tip[1][1], 0.2, 0.15);
      ellipse(positions.nose_tip[3][0], positions.nose_tip[3][1], 0.2, 0.15);
    }


    if (this.gender < 0 && this.gender <= 0.5){

    ///QUEEN///

      //Hair color
      if(this.hair_color > 0 && this.hair_color <= 1){
        fill(hair_black);
      }else
      if(this.hair_color > 1 && this.hair_color <= 2){
        fill(hair_brown);
      }else
      if(this.hair_color > 2 && this.hair_color <= 3){
        fill(hair_red);
      }else
      if(this.hair_color > 3 && this.hair_color <= 4){
        fill(hair_yellow);
      }

      //Queen hair
      push();
      beginShape();
      curveVertex(positions.chin[0][0]-0.5, positions.chin[0][1]-1);
      curveVertex(positions.chin[1][0]-0.5, positions.chin[1][1]-0.5);
      curveVertex(positions.nose_bridge[0][0], positions.nose_bridge[0][1]-0.3);
      curveVertex(positions.chin[15][0]+0.1, positions.chin[15][1]-0.3);
      curveVertex(positions.chin[16][0]+0.1, positions.chin[16][1]-1);
      curveVertex(positions.right_eyebrow[3][0], positions.right_eyebrow[3][1]-1.2);
      curveVertex(positions.left_eyebrow[1][0], positions.left_eyebrow[2][1]-1);
      curveVertex(positions.chin[0][0]-0.5, positions.chin[0][1]-1);
      curveVertex(positions.chin[1][0]-0.5, positions.chin[1][1]-0.5);
      curveVertex(positions.left_eyebrow[1][0], positions.left_eyebrow[1][1]-0.3);
      endShape();
      pop();

      //Hair 'bun'
      let bun = segment_average(positions.chin);
      if(positions.nose_bridge[0][0] < -0.17){
        push();
        translate(positions.nose_bridge[0][0]+map_hairbun2, positions.nose_bridge[0][1]-2.6);
        beginShape();
        curveVertex(bun[0], bun[1]);
        curveVertex(bun[0], bun[1]-1);
        curveVertex(bun[0]+1, bun[1]-1);
        curveVertex(bun[0]+1, bun[1]);
        curveVertex(bun[0], bun[1]);
        curveVertex(bun[0], bun[1]-1);
        curveVertex(bun[0]+1, bun[1]-1);
        endShape();
        pop();
      }else{
        push();
        translate(positions.nose_bridge[0][0]-map_hairbun1, positions.nose_bridge[0][1]-2.6);
        beginShape();
        curveVertex(bun[0], bun[1]);
        curveVertex(bun[0], bun[1]-1);
        curveVertex(bun[0]+1, bun[1]-1);
        curveVertex(bun[0]+1, bun[1]);
        curveVertex(bun[0], bun[1]);
        curveVertex(bun[0], bun[1]-1);
        curveVertex(bun[0]+1, bun[1]-1);
        endShape();
        pop();
      }

      //Queen crown_left shadow
      if (positions.nose_bridge[0][0] < -0.05){
        push();
        fill(shadow);
        translate(positions.nose_bridge[0][0]+0.4, positions.nose_bridge[0][1]-0.8);
        beginShape();
        vertex(-crown_dist/2, -0.5-map_crown2);
        vertex(0.2+crown_dist/2, -0.5-map_crown1);
        vertex(0.2+crown_dist/2, 0);
        vertex(-crown_dist/2, 0);
        endShape();

        triangle(positions.nose_bridge[0][0], positions.nose_bridge[0][1]-0.2, 
         positions.nose_bridge[0][0]-0.6, positions.nose_bridge[0][1]+0.7, 
         positions.nose_bridge[0][0]+0.6, positions.nose_bridge[0][1]+0.7);
        pop();
      }

      //Queen crown_right shadow
      if (positions.nose_bridge[0][0] > 0.05){
        push();
        fill(shadow);
        translate(positions.nose_bridge[0][0]+0.2, positions.nose_bridge[0][1]-0.8);
        beginShape();
        vertex(-crown_dist/2, -0.5-map_crown2);
        vertex(0.2+crown_dist/2, -0.5-map_crown1);
        vertex(0.2+crown_dist/2, 0);
        vertex(-crown_dist/2, 0);
        endShape();

        triangle(positions.nose_bridge[0][0], positions.nose_bridge[0][1]-0.2, 
         positions.nose_bridge[0][0]-0.6, positions.nose_bridge[0][1]+0.7, 
         positions.nose_bridge[0][0]+0.6, positions.nose_bridge[0][1]+0.7);
        pop();
      }

      //Queen crown  
      push();
      fill(gold);
      translate(positions.nose_bridge[0][0]+0.3, positions.nose_bridge[0][1]-0.8);
      beginShape();
      vertex(-crown_dist/2, -0.5-map_crown2);
      vertex(0.2+crown_dist/2, -0.5-map_crown1);
      vertex(0.2+crown_dist/2, 0);
      vertex(-crown_dist/2, 0);
      endShape();

      triangle(positions.nose_bridge[0][0], positions.nose_bridge[0][1]-0.2, 
       positions.nose_bridge[0][0]-0.6, positions.nose_bridge[0][1]+0.7, 
       positions.nose_bridge[0][0]+0.6, positions.nose_bridge[0][1]+0.7);
      
      //Suits
      fill(red);
      translate(positions.nose_bridge[0][0]+0.1, positions.nose_bridge[0][1]+1.7);
      scale(0.5);
      if(this.suits > 0 && this.suits <= 1){
         draw_diamond();
      }
      if(this.suits > 1 && this.suits <= 2){
        draw_heart();
      }
      if(this.suits > 2 && this.suits <= 3){
        draw_spade();
      }
      if(this.suits > 3 && this.suits <=4){
        draw_club();
      }
      pop();

      //Queen mouth
      push();
      fill(255);
      translate(0, 0.2);
      beginShape();
      curveVertex(positions.top_lip[7][0], positions.top_lip[6][1]);
      curveVertex(positions.top_lip[8][0], positions.top_lip[8][1]);
      curveVertex(positions.top_lip[9][0], positions.top_lip[9][1]);
      curveVertex(positions.top_lip[10][0], positions.top_lip[10][1]);
      curveVertex(positions.top_lip[0][0], positions.top_lip[0][1]);

      curveVertex(positions.bottom_lip[7][0], positions.bottom_lip[6][1]);
      curveVertex(positions.bottom_lip[8][0], positions.bottom_lip[8][1]);
      curveVertex(positions.bottom_lip[9][0], positions.bottom_lip[9][1]);
      curveVertex(positions.bottom_lip[10][0], positions.bottom_lip[10][1]);
      curveVertex(positions.bottom_lip[0][0], positions.bottom_lip[0][1]);
      curveVertex(positions.top_lip[0][0], positions.top_lip[0][1]);
      endShape();
      pop();

      //Queen lips
      fill(red);
      push();
      translate(0, 0.2);
      beginShape();
      curveVertex(positions.top_lip[0][0], positions.top_lip[0][1]+0.05);
      curveVertex(positions.top_lip[2][0], positions.top_lip[2][1]-0.03);
      curveVertex(positions.top_lip[3][0], positions.top_lip[3][1]);
      curveVertex(positions.top_lip[4][0], positions.top_lip[4][1]);
      curveVertex(positions.top_lip[6][0], positions.top_lip[6][1]+0.05);
      curveVertex(positions.top_lip[8][0], positions.top_lip[8][1]+0.05);
      curveVertex(positions.top_lip[10][0], positions.top_lip[10][1]+0.05);
      curveVertex(positions.top_lip[0][0], positions.top_lip[0][1]+0.05);
      curveVertex(positions.top_lip[2][0], positions.top_lip[2][1]-0.03);
      curveVertex(positions.top_lip[3][0], positions.top_lip[3][1]);
      endShape();
      beginShape();
      curveVertex(positions.bottom_lip[0][0], positions.bottom_lip[0][1]);
      curveVertex(positions.bottom_lip[1][0], positions.bottom_lip[1][1]);
      curveVertex(positions.bottom_lip[2][0], positions.bottom_lip[2][1]);
      curveVertex(positions.bottom_lip[3][0], positions.bottom_lip[3][1]);
      curveVertex(positions.bottom_lip[5][0], positions.bottom_lip[5][1]);
      curveVertex(positions.bottom_lip[6][0], positions.bottom_lip[6][1]);
      curveVertex(positions.bottom_lip[8][0], positions.bottom_lip[8][1]);
      curveVertex(positions.bottom_lip[9][0], positions.bottom_lip[9][1]);
      curveVertex(positions.bottom_lip[10][0], positions.bottom_lip[10][1]);
      curveVertex(positions.bottom_lip[0][0], positions.bottom_lip[0][1]);
      curveVertex(positions.bottom_lip[1][0], positions.bottom_lip[1][1]);
      curveVertex(positions.bottom_lip[3][0], positions.bottom_lip[3][1]);
      endShape();
      pop();
    }else{

    ///KING///

      //King crown_left shadow
      if (positions.nose_bridge[0][0] > 0.1){
        push();
        fill(shadow);
        translate(-0.1, -0.05);
        beginShape();
        vertex(positions.left_eyebrow[2][0], positions.left_eyebrow[2][1]-map_crown1);
        vertex(positions.right_eyebrow[2][0], positions.right_eyebrow[2][1]-map_crown2);
        vertex(positions.right_eyebrow[2][0], positions.right_eyebrow[2][1]-1.5-map_crown1);
        vertex(positions.right_eyebrow[0][0], positions.right_eyebrow[0][1]-1);
        vertex(positions.nose_bridge[0][0], positions.nose_bridge[0][1]-2.3-map_crown1);
        vertex(positions.left_eyebrow[4][0], positions.left_eyebrow[4][1]-1);
        vertex(positions.left_eyebrow[2][0], positions.left_eyebrow[2][1]-1.5-map_crown2);
        endShape();
        pop();
      }

      //King crown_right shadow
      if (positions.nose_bridge[0][0] < -0.1){
        push();
        fill(shadow);
        translate(0.1, -0.05);
        beginShape();
        vertex(positions.left_eyebrow[2][0], positions.left_eyebrow[2][1]-map_crown1);
        vertex(positions.right_eyebrow[2][0], positions.right_eyebrow[2][1]-map_crown2);
        vertex(positions.right_eyebrow[2][0], positions.right_eyebrow[2][1]-1.5-map_crown1);
        vertex(positions.right_eyebrow[0][0], positions.right_eyebrow[0][1]-1);
        vertex(positions.nose_bridge[0][0], positions.nose_bridge[0][1]-2.3-map_crown1);
        vertex(positions.left_eyebrow[4][0], positions.left_eyebrow[4][1]-1);
        vertex(positions.left_eyebrow[2][0], positions.left_eyebrow[2][1]-1.5-map_crown2);
        endShape();
        pop();
      }

      //King crown
      fill(gold);
      push();
      beginShape();
      vertex(positions.left_eyebrow[2][0], positions.left_eyebrow[2][1]-map_crown1);
      vertex(positions.right_eyebrow[2][0], positions.right_eyebrow[2][1]-map_crown2);
      vertex(positions.right_eyebrow[2][0], positions.right_eyebrow[2][1]-1.5-map_crown1);
      vertex(positions.right_eyebrow[0][0], positions.right_eyebrow[0][1]-1);
      vertex(positions.nose_bridge[0][0], positions.nose_bridge[0][1]-2.3-map_crown1);
      vertex(positions.left_eyebrow[4][0], positions.left_eyebrow[4][1]-1);
      vertex(positions.left_eyebrow[2][0], positions.left_eyebrow[2][1]-1.5-map_crown2);
      endShape();
      pop();

      push();
      fill(red);
      translate(positions.nose_bridge[0][0]+0.1, positions.nose_bridge[0][1]+0.1);
      scale(0.5);
      if(this.suits > 0 && this.suits <= 1){
         draw_diamond();
      }
      if(this.suits > 1 && this.suits <= 2){
        draw_heart();
      }
      if(this.suits > 2 && this.suits <= 3){
        draw_spade();
      }
      if(this.suits > 3 && this.suits <=4){
        draw_club();
      } 
      pop();

      //King mustache
      fill(mustache);
      beginShape();
      curveVertex(positions.top_lip[0][0], positions.top_lip[0][1]+0.1);
      curveVertex(positions.top_lip[6][0], positions.top_lip[6][1]+0.1);
      curveVertex(positions.bottom_lip[0][0], positions.bottom_lip[1][1]+0.8);
      curveVertex(positions.bottom_lip[5][0], positions.bottom_lip[5][1]+0.8);
      curveVertex(positions.top_lip[0][0], positions.top_lip[0][1]+0.1);
      curveVertex(positions.top_lip[6][0], positions.top_lip[6][1]+0.1);
      curveVertex(positions.bottom_lip[0][0], positions.bottom_lip[1][1]+0.8);
      endShape();

      fill(255);
      //King mouth
      translate(0, 0.3);
      beginShape();
      curveVertex(positions.bottom_lip[7][0]+0.2, positions.bottom_lip[7][1]);
      curveVertex(positions.top_lip[7][0]-0.2, positions.top_lip[7][1]);
      curveVertex(positions.bottom_lip[10][0], positions.bottom_lip[10][1]+this.mouth_open);
      curveVertex(positions.bottom_lip[8][0], positions.bottom_lip[8][1]+this.mouth_open);
      curveVertex(positions.bottom_lip[7][0]+0.2, positions.bottom_lip[7][1]);
      curveVertex(positions.top_lip[7][0]-0.2, positions.top_lip[7][1]);
      curveVertex(positions.bottom_lip[10][0], positions.bottom_lip[10][1]+this.mouth_open);
      endShape();
    }
  }

  /* set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
    this.gender = map(settings[0],0, 1, 0.5, 0);
    this.suits = map(settings[1], 0, 100, 1, 4);
    this.eyeball_move = map(settings[2], 0, 100, -0.1, 0.1);
    this.eye_color = map(settings[3], 0, 100, 1, 4);
    this.blush_color = map(settings[4], 0, 100, 0, 1);
    this.mouth_open = map(settings[5], 0, 100, 0.05, 0.3);
    this.hair_color = map(settings[6], 0, 100, 1, 4);
  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    let settings = new Array(7);
    settings[0] = map(this.gender, 0.5, 0, 0, 1);
    settings[1] = map(this.suits, 0, 4, 0, 100);
    settings[2] = map(this.eyeball_move, -0.1, 0.1, 0, 100);
    settings[3] = map(this.eye_color, 1, 4, 0, 100);
    settings[4] = map(this.blush_color, 0, 1, 0, 100);
    settings[5] = map(this.mouth_open, 0.05, 0.3, 0, 100);
    settings[6] = map(this.hair_color, 1, 4, 0, 100);
    return settings;
  }
}

//Suits
function draw_diamond(){
  beginShape();
  vertex(-0.7, -2.5);
  vertex(-0.2, -3);
  vertex(0.3, -2.5);
  vertex(-0.2, -2);
  endShape();
}

function draw_heart(){
  beginShape();
  vertex(-0.7, -2.5);
  vertex(-0.4, -2.8);
  vertex(-0.2, -2.6);
  vertex(0, -2.8);
  vertex(0.3, -2.5);
  vertex(-0.2, -2);
  endShape();
}

function draw_spade(){
  beginShape();
  vertex(-0.7, -2.5);
  vertex(-0.2, -3);
  vertex(0.3, -2.5);
  vertex(0, -2.3);
  vertex(-0.2, -2.5);
  vertex(-0.4, -2.3);
  endShape();
  triangle(-0.2, -2.5, -0.05, -2.1, -0.35, -2.1);
}

function draw_club(){
  beginShape();
  vertex(-0.2, -2.5);
  vertex(-0.35, -2.75);
  vertex(-0.2, -3);
  vertex(-0.05, -2.75);

  vertex(-0.2, -2.5);
  vertex(-0.45, -2.35);
  vertex(-0.7, -2.5);
  vertex(-0.45, -2.65);

  vertex(-0.2, -2.5);
  vertex(0, -2.65);
  vertex(0.3, -2.5);
  vertex(0, -2.35);
  endShape();
  triangle(-0.2, -2.5, -0.05, -2.1, -0.35, -2.1);
}

yee_training_values.json

{
  "000001": [
    100,
    73.75,
    18.000000000000004,
    26,
    16,
    58.00000000000001,
    100
  ],
  "000002": [
    100,
    100,
    0,
    17,
    0,
    33,
    62
  ],
  "000005": [
    100,
    81.25,
    0,
    45,
    0,
    66.00000000000001,
    100
  ],
  "000006": [
    100,
    100,
    100,
    0,
    100,
    0,
    26
  ],
  "000007": [
    0,
    53.5,
    0,
    11.999999999999995,
    0,
    33,
    33
  ],
  "000009": [
    100,
    43.75,
    0,
    19.000000000000004,
    33,
    33,
    17
  ],
  "000010": [
    100,
    56.49999999999999,
    0,
    41.99999999999999,
    0,
    66.00000000000001,
    100
  ],
  "000013": [
    0,
    41.5,
    35.99999999999999,
    48.99999999999999,
    0,
    66.00000000000001,
    0
  ],
  "000014": [
    100,
    43.75,
    0,
    0,
    100,
    33,
    0
  ],
  "000015": [
    0,
    57.25,
    38.00000000000001,
    44.000000000000014,
    0,
    66.00000000000001,
    0
  ],
  "000016": [
    0,
    92.5,
    100,
    9.000000000000002,
    66,
    33,
    0
  ],
  "000018": [
    100,
    63.25000000000001,
    9.000000000000002,
    45,
    0,
    66.00000000000001,
    94
  ],
  "000020": [
    0,
    56.49999999999999,
    43,
    13.000000000000004,
    33,
    0,
    0
  ],
  "000023": [
    0,
    100,
    9.000000000000002,
    45,
    0,
    100,
    0
  ],
  "000025": [
    0,
    45.25,
    9.000000000000002,
    45,
    66,
    0,
    0
  ],
  "000028": [
    100,
    56.49999999999999,
    9.000000000000002,
    26,
    66,
    0,
    65
  ],
  "000029": [
    100,
    36.25,
    9.000000000000002,
    100,
    0,
    100,
    100
  ],
  "000030": [
    0,
    25,
    0,
    0,
    66,
    66.00000000000001,
    0
  ],
  "000031": [
    100,
    57.25,
    0,
    63,
    33,
    66.00000000000001,
    28.000000000000004
  ],
  "000032": [
    0,
    41.5,
    5.999999999999998,
    0,
    33,
    0,
    0
  ],
  "000035": [
    100,
    49.75,
    5.999999999999998,
    41.99999999999999,
    0,
    66.00000000000001,
    0
  ],
  "000037": [
    0,
    75.25,
    26,
    0,
    100,
    0,
    0
  ],
  "000038": [
    0,
    52,
    46,
    61,
    0,
    100,
    0
  ],
  "000040": [
    100,
    71.5,
    46,
    31,
    0,
    33,
    0
  ],
  "000041": [
    0,
    25,
    3.0000000000000027,
    0,
    66,
    0,
    33
  ],
  "000042": [
    100,
    61,
    3.0000000000000027,
    63,
    0,
    66.00000000000001,
    33
  ],
  "000043": [
    100,
    53.5,
    3.0000000000000027,
    16,
    33,
    33,
    0
  ],
  "000044": [
    100,
    53.5,
    3.0000000000000027,
    0,
    100,
    0,
    0
  ],
  "000045": [
    100,
    53.5,
    3.0000000000000027,
    15,
    0,
    33,
    43
  ],
  "000047": [
    100,
    65.5,
    3.0000000000000027,
    0,
    100,
    0,
    0
  ],
  "000048": [
    0,
    45.25,
    0,
    0,
    0,
    0,
    0
  ],
  "000050": [
    0,
    52,
    32,
    11.999999999999995,
    33,
    33,
    0
  ],
  "000051": [
    0,
    37.75,
    0,
    0,
    66,
    0,
    0
  ],
  "000052": [
    0,
    47,
    6,
    51,
    66,
    100,
    0
  ],
  "000054": [
    100,
    34.75,
    5.999999999999998,
    56.00000000000001,
    0,
    66.00000000000001,
    100
  ],
  "000055": [
    0,
    48.25,
    17,
    13.000000000000004,
    0,
    33,
    0
  ],
  "000056": [
    0,
    43.75,
    0,
    52,
    0,
    66.00000000000001,
    0
  ],
  "000058": [
    100,
    78.25,
    0,
    88,
    0,
    66.00000000000001,
    0
  ],
  "000060": [
    0,
    47.5,
    16,
    0,
    100,
    0,
    0
  ],
  "000064": [
    0,
    47.5,
    11.000000000000004,
    56.00000000000001,
    33,
    66.00000000000001,
    0
  ],
  "000065": [
    0,
    45.25,
    22,
    19.000000000000004,
    100,
    0,
    0
  ],
  "000068": [
    0,
    57.25,
    48,
    13.999999999999998,
    66,
    33,
    0
  ],
  "000069": [
    0,
    35.5,
    12.999999999999998,
    25,
    66,
    33,
    0
  ],
  "000071": [
    100,
    66.25000000000001,
    62,
    36.99999999999999,
    33,
    66.00000000000001,
    100
  ],
  "000073": [
    100,
    63.25000000000001,
    0,
    19.000000000000004,
    33,
    33,
    0
  ],
  "000076": [
    0,
    25,
    0,
    0,
    33,
    0,
    0
  ],
  "000077": [
    100,
    76.75,
    60,
    0,
    33,
    0,
    0
  ],
  "000078": [
    100,
    28.000000000000004,
    9.000000000000002,
    65,
    34,
    0,
    0
  ],
  "000079": [
    0,
    69.25,
    61,
    16,
    33,
    0,
    0
  ],
  "000080": [
    0,
    25,
    28.999999999999996,
    64,
    21,
    0,
    0
  ],
  "000081": [
    0,
    76.75,
    100,
    20.000000000000004,
    33,
    33,
    0
  ],
  "000083": [
    100,
    72.25,
    0,
    46,
    0,
    0,
    22.000000000000007
  ],
  "000085": [
    100,
    70,
    30,
    51.000000000000014,
    0,
    0,
    63
  ],
  "000086": [
    100,
    25,
    0,
    20.999999999999996,
    0,
    33,
    33
  ],
  "000088": [
    100,
    85.00000000000001,
    66,
    0,
    0,
    33,
    52.99999999999999
  ],
  "000091": [
    0,
    49,
    0,
    44.000000000000014,
    0,
    33,
    100
  ],
  "000092": [
    100,
    49.75,
    0,
    46,
    33,
    66.00000000000001,
    100
  ],
  "000096": [
    100,
    39.25,
    0,
    0,
    66,
    0,
    0
  ],
  "000097": [
    100,
    61,
    0,
    100,
    0,
    77,
    30
  ],
  "000099": [
    100,
    52.75,
    0,
    57.99999999999999,
    0,
    66.00000000000001,
    32
  ],
  "000100": [
    100,
    52.75,
    0,
    16,
    0,
    33,
    100
  ],
  "000103": [
    100,
    25,
    0,
    64,
    0,
    66.00000000000001,
    0
  ],
  "000104": [
    0,
    49,
    21,
    50,
    0,
    100,
    0
  ],
  "000106": [
    100,
    68.5,
    0,
    0,
    33,
    33,
    33
  ],
  "000108": [
    100,
    53.5,
    9.000000000000002,
    43,
    33,
    66.00000000000001,
    100
  ],
  "000109": [
    0,
    39.25,
    12.999999999999998,
    47,
    66,
    66.00000000000001,
    0
  ],
  "000110": [
    100,
    48.25,
    15,
    55.000000000000014,
    33,
    66.00000000000001,
    24
  ],
  "000111": [
    100,
    84.25,
    78.00000000000001,
    0,
    100,
    33,
    100
  ],
  "000114": [
    0,
    41.5,
    5.000000000000004,
    25,
    0,
    33,
    0
  ],
  "000115": [
    0,
    50.5,
    22,
    41,
    0,
    66.00000000000001,
    0
  ],
  "000116": [
    0,
    45.25,
    26,
    15,
    33,
    0,
    0
  ],
  "000117": [
    100,
    57.25,
    24,
    0,
    100,
    0,
    0
  ],
  "000118": [
    100,
    25,
    0,
    22.000000000000007,
    66,
    33,
    0
  ],
  "000121": [
    100,
    43.75,
    8,
    13.999999999999998,
    33,
    33,
    0
  ],
  "000122": [
    100,
    72.25,
    5.999999999999998,
    10.000000000000002,
    0,
    33,
    100
  ],
  "000125": [
    0,
    67,
    20.000000000000004,
    100,
    33,
    100,
    0
  ],
  "000126": [
    100,
    70,
    26,
    80.00000000000001,
    100,
    66.00000000000001,
    100
  ],
  "000129": [
    0,
    49.75,
    23,
    45,
    0,
    66.00000000000001,
    0
  ],
  "000131": [
    100,
    100,
    100,
    0,
    66,
    0,
    0
  ],
  "000132": [
    100,
    45.25,
    11.999999999999996,
    0,
    66,
    0,
    0
  ],
  "000133": [
    100,
    33.25,
    9.000000000000002,
    59,
    11,
    66.00000000000001,
    33
  ],
  "000134": [
    0,
    25,
    0,
    0,
    100,
    0,
    0
  ],
  "000135": [
    0,
    100,
    100,
    0,
    66,
    0,
    0
  ],
  "000137": [
    0,
    100,
    68,
    38.99999999999999,
    0,
    33,
    0
  ],
  "000140": [
    100,
    52,
    13.999999999999998,
    55.000000000000014,
    100,
    100,
    100
  ],
  "000142": [
    100,
    61,
    3.0000000000000027,
    38.99999999999999,
    0,
    66.00000000000001,
    28.000000000000004
  ],
  "000143": [
    0,
    50,
    34,
    100,
    33,
    100,
    33
  ],
  "000145": [
    100,
    47.5,
    34,
    10.000000000000002,
    33,
    33,
    0
  ],
  "000146": [
    100,
    43.75,
    34,
    13.999999999999998,
    33,
    33,
    38.99999999999999
  ],
  "000147": [
    100,
    100,
    48,
    59,
    66,
    100,
    100
  ],
  "000148": [
    100,
    100,
    34,
    56.99999999999999,
    0,
    66,
    0
  ],
  "000150": [
    0,
    1.0000000000000009,
    0,
    56.99999999999999,
    0,
    66,
    0
  ],
  "000151": [
    100,
    39.25,
    0,
    0,
    33,
    0,
    0
  ],
  "000152": [
    0,
    52,
    34,
    56.99999999999999,
    66,
    66,
    0
  ],
  "000153": [
    0,
    38.5,
    27,
    23,
    33,
    33,
    0
  ],
  "000155": [
    100,
    51.24999999999999,
    27,
    22.000000000000007,
    0,
    33,
    36.00000000000001
  ],
  "000156": [
    100,
    72.25,
    27,
    46,
    0,
    66.00000000000001,
    100
  ],
  "000157": [
    100,
    28.749999999999996,
    27,
    100,
    0,
    66.00000000000001,
    100
  ],
  "000160": [
    0,
    61.74999999999999,
    0,
    28.000000000000004,
    0,
    33,
    0
  ],
  "000161": [
    100,
    0,
    0,
    100,
    0,
    66,
    0
  ]
}

z_face_landmark_68_model-weights_manifest.json

[{"weights":[{"name":"dense0/conv0/filters","shape":[3,3,3,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.004853619781194949,"min":-0.5872879935245888}},{"name":"dense0/conv0/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.004396426443960153,"min":-0.7298067896973853}},{"name":"dense0/conv1/depthwise_filter","shape":[3,3,32,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00635151559231328,"min":-0.5589333721235686}},{"name":"dense0/conv1/pointwise_filter","shape":[1,1,32,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.009354315552057004,"min":-1.2628325995276957}},{"name":"dense0/conv1/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0029380727048013726,"min":-0.5846764682554731}},{"name":"dense0/conv2/depthwise_filter","shape":[3,3,32,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0049374802439820535,"min":-0.6171850304977566}},{"name":"dense0/conv2/pointwise_filter","shape":[1,1,32,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.009941946758943446,"min":-1.3421628124573652}},{"name":"dense0/conv2/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0030300481062309416,"min":-0.5272283704841838}},{"name":"dense0/conv3/depthwise_filter","shape":[3,3,32,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.005672684837790097,"min":-0.7431217137505026}},{"name":"dense0/conv3/pointwise_filter","shape":[1,1,32,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.010712201455060173,"min":-1.5639814124387852}},{"name":"dense0/conv3/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0030966934035806097,"min":-0.3839899820439956}},{"name":"dense1/conv0/depthwise_filter","shape":[3,3,32,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0039155554537679636,"min":-0.48161332081345953}},{"name":"dense1/conv0/pointwise_filter","shape":[1,1,32,64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.01023082966898002,"min":-1.094698774580862}},{"name":"dense1/conv0/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0027264176630506327,"min":-0.3871513081531898}},{"name":"dense1/conv1/depthwise_filter","shape":[3,3,64,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.004583378632863362,"min":-0.5454220573107401}},{"name":"dense1/conv1/pointwise_filter","shape":[1,1,64,64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00915846403907327,"min":-1.117332612766939}},{"name":"dense1/conv1/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.003091680419211294,"min":-0.5966943209077797}},{"name":"dense1/conv2/depthwise_filter","shape":[3,3,64,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.005407439727409214,"min":-0.708374604290607}},{"name":"dense1/conv2/pointwise_filter","shape":[1,1,64,64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00946493943532308,"min":-1.2399070660273235}},{"name":"dense1/conv2/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.004409168514550901,"min":-0.9788354102303}},{"name":"dense1/conv3/depthwise_filter","shape":[3,3,64,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.004478132958505668,"min":-0.6493292789833219}},{"name":"dense1/conv3/pointwise_filter","shape":[1,1,64,64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.011063695888893277,"min":-1.2501976354449402}},{"name":"dense1/conv3/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.003909627596537272,"min":-0.6646366914113363}},{"name":"dense2/conv0/depthwise_filter","shape":[3,3,64,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.003213915404151468,"min":-0.3374611174359041}},{"name":"dense2/conv0/pointwise_filter","shape":[1,1,64,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.010917326048308728,"min":-1.4520043644250609}},{"name":"dense2/conv0/bias","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.002800439152063108,"min":-0.38085972468058266}},{"name":"dense2/conv1/depthwise_filter","shape":[3,3,128,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0050568851770139206,"min":-0.6927932692509071}},{"name":"dense2/conv1/pointwise_filter","shape":[1,1,128,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.01074961213504567,"min":-1.3222022926106174}},{"name":"dense2/conv1/bias","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0030654204242369708,"min":-0.5487102559384177}},{"name":"dense2/conv2/depthwise_filter","shape":[3,3,128,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00591809165244009,"min":-0.917304206128214}},{"name":"dense2/conv2/pointwise_filter","shape":[1,1,128,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.01092823346455892,"min":-1.366029183069865}},{"name":"dense2/conv2/bias","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.002681120470458386,"min":-0.36463238398234055}},{"name":"dense2/conv3/depthwise_filter","shape":[3,3,128,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0048311497650894465,"min":-0.5797379718107336}},{"name":"dense2/conv3/pointwise_filter","shape":[1,1,128,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.011227761062921263,"min":-1.4483811771168429}},{"name":"dense2/conv3/bias","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0034643323982463162,"min":-0.3360402426298927}},{"name":"dense3/conv0/depthwise_filter","shape":[3,3,128,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.003394978887894574,"min":-0.49227193874471326}},{"name":"dense3/conv0/pointwise_filter","shape":[1,1,128,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.010051267287310432,"min":-1.2765109454884247}},{"name":"dense3/conv0/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.003142924752889895,"min":-0.4588670139219247}},{"name":"dense3/conv1/depthwise_filter","shape":[3,3,256,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00448304671867221,"min":-0.5872791201460595}},{"name":"dense3/conv1/pointwise_filter","shape":[1,1,256,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.016063522357566685,"min":-2.3613377865623026}},{"name":"dense3/conv1/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00287135781026354,"min":-0.47664539650374765}},{"name":"dense3/conv2/depthwise_filter","shape":[3,3,256,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.006002906724518421,"min":-0.7923836876364315}},{"name":"dense3/conv2/pointwise_filter","shape":[1,1,256,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.017087187019048954,"min":-1.6061955797906016}},{"name":"dense3/conv2/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.003124481205846749,"min":-0.46242321846531886}},{"name":"dense3/conv3/depthwise_filter","shape":[3,3,256,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.006576311588287353,"min":-1.0193282961845398}},{"name":"dense3/conv3/pointwise_filter","shape":[1,1,256,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.015590153955945782,"min":-1.99553970636106}},{"name":"dense3/conv3/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.004453541601405424,"min":-0.6546706154065973}},{"name":"fc/weights","shape":[256,136],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.010417488509533453,"min":-1.500118345372817}},{"name":"fc/bias","shape":[136],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0025084222648658005,"min":0.07683877646923065}}],"paths":["z_face_landmark_68_model-shard1"]}]

z_face_recognition_model-weights_manifest.json

[{"weights":[{"name":"conv32_down/conv/filters","shape":[7,7,3,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0005260649557207145,"min":-0.07101876902229645}},{"name":"conv32_down/conv/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":8.471445956577858e-7,"min":-0.00014740315964445472}},{"name":"conv32_down/scale/weights","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.06814416062598135,"min":5.788674831390381}},{"name":"conv32_down/scale/biases","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.008471635042452345,"min":-0.931879854669758}},{"name":"conv32_1/conv1/conv/filters","shape":[3,3,32,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0007328585666768691,"min":-0.0974701893680236}},{"name":"conv32_1/conv1/conv/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":1.5952091238361e-8,"min":-0.000001978059313556764}},{"name":"conv32_1/conv1/scale/weights","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.02146628510718252,"min":3.1103382110595703}},{"name":"conv32_1/conv1/scale/biases","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0194976619645661,"min":-2.3787147596770644}},{"name":"conv32_1/conv2/conv/filters","shape":[3,3,32,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0004114975824075587,"min":-0.05267169054816751}},{"name":"conv32_1/conv2/conv/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":4.600177166424806e-9,"min":-5.70421968636676e-7}},{"name":"conv32_1/conv2/scale/weights","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.03400764932819441,"min":2.1677730083465576}},{"name":"conv32_1/conv2/scale/biases","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.010974494616190593,"min":-1.240117891629537}},{"name":"conv32_2/conv1/conv/filters","shape":[3,3,32,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0005358753251094444,"min":-0.0760942961655411}},{"name":"conv32_2/conv1/conv/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":5.9886454383719385e-9,"min":-7.366033889197485e-7}},{"name":"conv32_2/conv1/scale/weights","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.014633869657329485,"min":2.769575357437134}},{"name":"conv32_2/conv1/scale/biases","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.022131107367721257,"min":-2.5229462399202234}},{"name":"conv32_2/conv2/conv/filters","shape":[3,3,32,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00030145110452876373,"min":-0.03949009469326805}},{"name":"conv32_2/conv2/conv/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":6.8779549306497095e-9,"min":-9.010120959151119e-7}},{"name":"conv32_2/conv2/scale/weights","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.03929369870354148,"min":4.8010945320129395}},{"name":"conv32_2/conv2/scale/biases","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.010553357180427103,"min":-1.2452961472903983}},{"name":"conv32_3/conv1/conv/filters","shape":[3,3,32,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0003133527642371608,"min":-0.040735859350830905}},{"name":"conv32_3/conv1/conv/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":4.1064200719547974e-9,"min":-3.0387508532465503e-7}},{"name":"conv32_3/conv1/scale/weights","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.009252088210161994,"min":2.333256721496582}},{"name":"conv32_3/conv1/scale/biases","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.007104101251153385,"min":-0.34810096130651585}},{"name":"conv32_3/conv2/conv/filters","shape":[3,3,32,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00029995629892629733,"min":-0.031195455088334923}},{"name":"conv32_3/conv2/conv/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":5.62726418316814e-9,"min":-6.921534945296811e-7}},{"name":"conv32_3/conv2/scale/weights","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0467432975769043,"min":5.362040996551514}},{"name":"conv32_3/conv2/scale/biases","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.010314425300149357,"min":-1.268674311918371}},{"name":"conv64_down/conv1/conv/filters","shape":[3,3,32,64],"dtype":"float32"},{"name":"conv64_down/conv1/conv/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":8.373908033218849e-10,"min":-1.172347124650639e-7}},{"name":"conv64_down/conv1/scale/weights","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0066875364266189875,"min":2.5088400840759277}},{"name":"conv64_down/conv1/scale/biases","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.01691421620986041,"min":-2.0973628100226906}},{"name":"conv64_down/conv2/conv/filters","shape":[3,3,64,64],"dtype":"float32"},{"name":"conv64_down/conv2/conv/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":2.3252014483766877e-9,"min":-2.673981665633191e-7}},{"name":"conv64_down/conv2/scale/weights","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.032557439804077146,"min":2.6351239681243896}},{"name":"conv64_down/conv2/scale/biases","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.015429047509735706,"min":-1.5429047509735707}},{"name":"conv64_1/conv1/conv/filters","shape":[3,3,64,64],"dtype":"float32"},{"name":"conv64_1/conv1/conv/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":1.1319172039756998e-9,"min":-1.4941307092479238e-7}},{"name":"conv64_1/conv1/scale/weights","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.007802607031429515,"min":3.401733160018921}},{"name":"conv64_1/conv1/scale/biases","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.01425027146058924,"min":-0.6982633015688727}},{"name":"conv64_1/conv2/conv/filters","shape":[3,3,64,64],"dtype":"float32"},{"name":"conv64_1/conv2/conv/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":2.5635019893325435e-9,"min":-2.717312108692496e-7}},{"name":"conv64_1/conv2/scale/weights","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.04062801716374416,"min":3.542381525039673}},{"name":"conv64_1/conv2/scale/biases","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.007973166306813557,"min":-0.7415044665336609}},{"name":"conv64_2/conv1/conv/filters","shape":[3,3,64,64],"dtype":"float32"},{"name":"conv64_2/conv1/conv/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":1.2535732661062331e-9,"min":-1.8302169685151004e-7}},{"name":"conv64_2/conv1/scale/weights","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.005631206549850164,"min":2.9051668643951416}},{"name":"conv64_2/conv1/scale/biases","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.01859012585060269,"min":-2.3795361088771445}},{"name":"conv64_2/conv2/conv/filters","shape":[3,3,64,64],"dtype":"float32"},{"name":"conv64_2/conv2/conv/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":2.486726369919351e-9,"min":-3.5311514452854786e-7}},{"name":"conv64_2/conv2/scale/weights","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.03740917467603497,"min":5.571568965911865}},{"name":"conv64_2/conv2/scale/biases","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.006418555858088475,"min":-0.5263215803632549}},{"name":"conv64_3/conv1/conv/filters","shape":[3,3,64,64],"dtype":"float32"},{"name":"conv64_3/conv1/conv/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":7.432564576875473e-10,"min":-8.47312361763804e-8}},{"name":"conv64_3/conv1/scale/weights","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.006400122362024644,"min":2.268010377883911}},{"name":"conv64_3/conv1/scale/biases","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.010945847922680425,"min":-1.3353934465670119}},{"name":"conv64_3/conv2/conv/filters","shape":[3,3,64,64],"dtype":"float32"},{"name":"conv64_3/conv2/conv/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":2.278228722014533e-9,"min":-3.212302498040492e-7}},{"name":"conv64_3/conv2/scale/weights","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.029840927498013366,"min":7.038398265838623}},{"name":"conv64_3/conv2/scale/biases","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.010651412197187834,"min":-1.161003929493474}},{"name":"conv128_down/conv1/conv/filters","shape":[3,3,64,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00020040544662989823,"min":-0.022245004575918704}},{"name":"conv128_down/conv1/conv/bias","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":4.3550543563576545e-10,"min":-4.311503812794078e-8}},{"name":"conv128_down/conv1/scale/weights","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.007448580685783835,"min":2.830846071243286}},{"name":"conv128_down/conv1/scale/biases","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.01211262824488621,"min":-1.6957679542840696}},{"name":"conv128_down/conv2/conv/filters","shape":[3,3,128,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00022380277514457702,"min":-0.02484210804104805}},{"name":"conv128_down/conv2/conv/bias","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":9.031058637304466e-10,"min":-1.1650065642122761e-7}},{"name":"conv128_down/conv2/scale/weights","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.027663578706629135,"min":3.1111555099487305}},{"name":"conv128_down/conv2/scale/biases","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.008878476946961646,"min":-1.029903325847551}},{"name":"conv128_1/conv1/conv/filters","shape":[3,3,128,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00022380667574265425,"min":-0.032899581334170175}},{"name":"conv128_1/conv1/conv/bias","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":4.4147297756478345e-10,"min":-5.253528433020923e-8}},{"name":"conv128_1/conv1/scale/weights","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.013599334978589825,"min":3.634530782699585}},{"name":"conv128_1/conv1/scale/biases","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.014059314073300829,"min":-1.4059314073300828}},{"name":"conv128_1/conv2/conv/filters","shape":[3,3,128,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00021715293474057143,"min":-0.02909849325523657}},{"name":"conv128_1/conv2/conv/bias","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":9.887046963276768e-10,"min":-1.1370104007768284e-7}},{"name":"conv128_1/conv2/scale/weights","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.029993299409454943,"min":3.630716562271118}},{"name":"conv128_1/conv2/scale/biases","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00782704236460667,"min":-0.7200878975438136}},{"name":"conv128_2/conv1/conv/filters","shape":[3,3,128,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00017718105923895743,"min":-0.022324813464108636}},{"name":"conv128_2/conv1/conv/bias","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":3.567012027797675e-10,"min":-5.243507680862582e-8}},{"name":"conv128_2/conv1/scale/weights","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.007940645778880399,"min":4.927767753601074}},{"name":"conv128_2/conv1/scale/biases","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.015933452867994122,"min":-1.5614783810634238}},{"name":"conv128_2/conv2/conv/filters","shape":[3,3,128,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0001451439717236687,"min":-0.01712698866339291}},{"name":"conv128_2/conv2/conv/bias","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":1.0383988570966347e-9,"min":-1.2356946399449953e-7}},{"name":"conv128_2/conv2/scale/weights","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.02892604528688917,"min":4.750600814819336}},{"name":"conv128_2/conv2/scale/biases","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00797275748907351,"min":-0.7414664464838364}},{"name":"conv256_down/conv1/conv/filters","shape":[3,3,128,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0002698827827093648,"min":-0.03994265184098599}},{"name":"conv256_down/conv1/conv/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":5.036909834755123e-10,"min":-6.396875490139006e-8}},{"name":"conv256_down/conv1/scale/weights","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.014870181738161573,"min":4.269900798797607}},{"name":"conv256_down/conv1/scale/biases","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.022031106200872685,"min":-3.1063859743230484}},{"name":"conv256_down/conv2/conv/filters","shape":[3,3,256,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00046430734150549946,"min":-0.03946612402796745}},{"name":"conv256_down/conv2/conv/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":6.693064577513153e-10,"min":-7.630093618364995e-8}},{"name":"conv256_down/conv2/scale/weights","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.03475512242784687,"min":3.608360528945923}},{"name":"conv256_down/conv2/scale/biases","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.01290142021927179,"min":-1.1482263995151893}},{"name":"conv256_1/conv1/conv/filters","shape":[3,3,256,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00037147209924810076,"min":-0.04234781931428348}},{"name":"conv256_1/conv1/conv/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":3.2105515457510146e-10,"min":-3.467395669411096e-8}},{"name":"conv256_1/conv1/scale/weights","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.043242172166412955,"min":5.28542947769165}},{"name":"conv256_1/conv1/scale/biases","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.01643658619300992,"min":-1.3149268954407936}},{"name":"conv256_1/conv2/conv/filters","shape":[3,3,256,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0003289232651392619,"min":-0.041773254672686264}},{"name":"conv256_1/conv2/conv/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":9.13591691187321e-10,"min":-1.2333487831028833e-7}},{"name":"conv256_1/conv2/scale/weights","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0573908618852204,"min":4.360693454742432}},{"name":"conv256_1/conv2/scale/biases","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0164216583850337,"min":-1.3958409627278647}},{"name":"conv256_2/conv1/conv/filters","shape":[3,3,256,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00010476927912118389,"min":-0.015610622589056398}},{"name":"conv256_2/conv1/conv/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":2.418552539068639e-10,"min":-2.539480166022071e-8}},{"name":"conv256_2/conv1/scale/weights","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.06024209564807368,"min":6.598613739013672}},{"name":"conv256_2/conv1/scale/biases","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.01578534350675695,"min":-1.1049740454729864}},{"name":"conv256_2/conv2/conv/filters","shape":[3,3,256,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00005543030908002573,"min":-0.007427661416723448}},{"name":"conv256_2/conv2/conv/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":1.0822061852320308e-9,"min":-1.515088659324843e-7}},{"name":"conv256_2/conv2/scale/weights","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.04302893993901272,"min":2.2855491638183594}},{"name":"conv256_2/conv2/scale/biases","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.006792667566561232,"min":-0.8083274404207865}},{"name":"conv256_down_out/conv1/conv/filters","shape":[3,3,256,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.000568966465253456,"min":-0.05632768006009214}},{"name":"conv256_down_out/conv1/conv/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":4.5347887884881677e-10,"min":-6.530095855422961e-8}},{"name":"conv256_down_out/conv1/scale/weights","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.017565592597512638,"min":4.594101905822754}},{"name":"conv256_down_out/conv1/scale/biases","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.04850864223405427,"min":-6.306123490427055}},{"name":"conv256_down_out/conv2/conv/filters","shape":[3,3,256,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0003739110687199761,"min":-0.06954745878191555}},{"name":"conv256_down_out/conv2/conv/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":1.2668428328152895e-9,"min":-2.2549802424112154e-7}},{"name":"conv256_down_out/conv2/scale/weights","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.04351314469879749,"min":4.31956672668457}},{"name":"conv256_down_out/conv2/scale/biases","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.021499746921015722,"min":-1.2039858275768804}},{"name":"fc","shape":[256,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.000357687911566566,"min":-0.04578405268052045}}],"paths":["z_face_recognition_model-shard1","z_face_recognition_model-shard2"]}]

z_face_system.js

// Arithmetic mean
let getMean = function (data) {
    return data.reduce(function (a, b) {
        return Number(a) + Number(b);
    }) / data.length;
};

// Standard deviation
let getSD = function (data) {
    let m = getMean(data);
    return Math.sqrt(data.reduce(function (sq, n) {
            return sq + Math.pow(n - m, 2);
        }, 0) / (data.length - 1));
};

const LM_LEN = 68;
const LM_parts = ['chin', 'left_eyebrow', 'right_eyebrow',
'nose_bridge', 'nose_tip', 'left_eye', 'right_eye',
'top_lip', 'bottom_lip'];
const LM_names = [
'chin', 'chin', 'chin', 'chin', 'chin',
'chin', 'chin', 'chin', 'chin', 'chin',
'chin', 'chin', 'chin', 'chin', 'chin',
'chin', 'chin',
'left_eyebrow', 'left_eyebrow', 'left_eyebrow', 'left_eyebrow', 'left_eyebrow',
'right_eyebrow', 'right_eyebrow', 'right_eyebrow', 'right_eyebrow', 'right_eyebrow',
'nose_bridge', 'nose_bridge', 'nose_bridge', 'nose_bridge',
'nose_tip', 'nose_tip', 'nose_tip', 'nose_tip', 'nose_tip',
'left_eye', 'left_eye', 'left_eye', 'left_eye', 'left_eye', 'left_eye',
'right_eye', 'right_eye', 'right_eye', 'right_eye', 'right_eye', 'right_eye',
'lip', 'lip', 'lip', 'lip',
'lip', 'lip', 'lip', 'lip',
'lip', 'lip', 'lip', 'lip',
'lip', 'lip', 'lip', 'lip',
'lip', 'lip', 'lip', 'lip'
]
// https://github.com/ageitgey/face_recognition/blob/d34c622bf42e2c619505a4884017051ecf61ac77/face_recognition/api.py#L190
const top_lip_indices =    [48, 49, 50, 51, 52, 53, 54, 64, 63, 62, 61, 60];
const bottom_lip_indices = [54, 55, 56, 57, 58, 59, 48, 60, 67, 66, 65, 64];

function get_landmarks(faceDescriptions) {
  let landmarks = []
  for(let i=0; i<faceDescriptions.length; i++) {
    let curLM = {
      'chin': [],
      'left_eyebrow': [],
      'right_eyebrow': [],
      'nose_bridge': [],
      'nose_tip': [],
      'left_eye': [],
      'right_eye': [],
      'top_lip': [],
      'bottom_lip': []
    };
    let lm = faceDescriptions[i].landmarks;
    let lpts = lm.positions;
    let x_points = [];
    let y_points = [];
    // print(lpts.length)
    for(let j=0; j<LM_LEN; j++) {
      x_points.push(lpts[j].x)
      y_points.push(lpts[j].y)
    }
    let mean_x = getMean(x_points);
    let mean_y = getMean(y_points);
    for(let j=0; j<LM_LEN; j++) {
      x_points[j] = x_points[j] - mean_x;
      y_points[j] = y_points[j] - mean_y;
    }
    let sdev_x = getSD(x_points);
    let sdev_y = getSD(y_points);
    let sdev = sdev_x > sdev_y ? sdev_x : sdev_y;
    // let p1 = lpts[27]
    // let p2 = lpts[28]
    // EYES VERSION
    // let p1 = lpts[36];
    // let p2 = lpts[42];
    // EARS VERSION
    let p1 = lpts[2];
    let p2 = lpts[14];
    let xd = p1.x - p2.x;
    let yd = p1.y - p2.y;
    let angle = Math.atan2(-yd, -xd);
    let s_a = Math.sin(-angle);
    let c_a = Math.cos(-angle);
    let raw_points = []
    for(let j=0; j<LM_LEN; j++) {
      let pt = [0, 0]
      pt[0] = lpts[j].x - mean_x;
      pt[1] = lpts[j].y - mean_y;
      pt[0] = pt[0] / sdev;
      pt[1] = pt[1] / sdev;
      let x_new = pt[0] * c_a - pt[1] * s_a;
      let y_new = pt[0] * s_a + pt[1] * c_a;
      pt[0] = x_new;
      pt[1] = y_new;
      raw_points.push(pt);
    }
    // put all raw points into landmarks objects
    // first everything but the lips (which start at 48)
    for(let j=0; j<48; j++) {
      let key = LM_names[j];
      curLM[key].push(raw_points[j]);
    }
    // now the lips, which have dupes
    for(let j=0; j<top_lip_indices.length; j++) {
      let cur_ix = top_lip_indices[j];
      let cur_pt = raw_points[cur_ix];
      let pt_copy = [cur_pt[0], cur_pt[1]];
      curLM['top_lip'].push(pt_copy);
    }
    for(let j=0; j<bottom_lip_indices.length; j++) {
      let cur_ix = bottom_lip_indices[j];
      let cur_pt = raw_points[cur_ix];
      let pt_copy = [cur_pt[0], cur_pt[1]];
      curLM['bottom_lip'].push(pt_copy);
    }
    curLM['transform'] = {
      'center': [mean_x, mean_y],
      'scale': sdev,
      'angle': angle
    }
    landmarks.push(curLM);
  }
  // print(JSON.stringify(landmarks));
  return landmarks;
}

function get_latents(faceDescriptions) {
  latents = [];
  for(let i=0; i<faceDescriptions.length; i++) {
    let lm = faceDescriptions[i].descriptor;
    latents.push(lm);
    // print(lm);
  }
  return latents;
}

z_focused_random.js

function resetFocusedRandom() {
  return Math.seedrandom(arguments);
}

function focusedRandom(min, max, focus, mean) {
  // console.log("hello")
  if(max === undefined) {
    max = min;
    min = 0;
  }
  if(focus === undefined) {
    focus = 1.0;
  }
  if(mean === undefined) {
    mean = (min + max) / 2.0;
  }
  if(focus == 0) {
    return d3.randomUniform(min, max)();
  }
  else if(focus < 0) {
    focus = -1 / focus;
  }
  let sigma = (max - min) / (2 * focus);
  let val = d3.randomNormal(mean, sigma)();
  if (val >= min && val < max) {
    return val;
  }
  return d3.randomUniform(min, max)();
}

z_kdTree.js

/**
 * k-d Tree JavaScript - V 1.01
 *
 * https://github.com/ubilabs/kd-tree-javascript
 *
 * @author Mircea Pricop <pricop@ubilabs.net>, 2012
 * @author Martin Kleppe <kleppe@ubilabs.net>, 2012
 * @author Ubilabs http://ubilabs.net, 2012
 * @license MIT License <http://www.opensource.org/licenses/mit-license.php>
 */

 (function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['exports'], factory);
    } else if (typeof exports === 'object') {
        factory(exports);
    } else {
        factory((root.commonJsStrict = {}));
    }
}(this, function (exports) {
  function Node(obj, dimension, parent) {
    this.obj = obj;
    this.left = null;
    this.right = null;
    this.parent = parent;
    this.dimension = dimension;
  }

  function kdTree(points, metric, dimensions) {

    var self = this;
    
    function buildTree(points, depth, parent) {
      var dim = depth % dimensions.length,
        median,
        node;

      if (points.length === 0) {
        return null;
      }
      if (points.length === 1) {
        return new Node(points[0], dim, parent);
      }

      points.sort(function (a, b) {
        return a[dimensions[dim]] - b[dimensions[dim]];
      });

      median = Math.floor(points.length / 2);
      node = new Node(points[median], dim, parent);
      node.left = buildTree(points.slice(0, median), depth + 1, node);
      node.right = buildTree(points.slice(median + 1), depth + 1, node);

      return node;
    }

    // Reloads a serialied tree
    function loadTree (data) {
      // Just need to restore the `parent` parameter
      self.root = data;

      function restoreParent (root) {
        if (root.left) {
          root.left.parent = root;
          restoreParent(root.left);
        }

        if (root.right) {
          root.right.parent = root;
          restoreParent(root.right);
        }
      }

      restoreParent(self.root);
    }
    
    // If points is not an array, assume we're loading a pre-built tree
    if (!Array.isArray(points)) loadTree(points, metric, dimensions);
    else this.root = buildTree(points, 0, null);

    // Convert to a JSON serializable structure; this just requires removing 
    // the `parent` property
    this.toJSON = function (src) {
      if (!src) src = this.root;
      var dest = new Node(src.obj, src.dimension, null);
      if (src.left) dest.left = self.toJSON(src.left);
      if (src.right) dest.right = self.toJSON(src.right);
      return dest;
    };

    this.insert = function (point) {
      function innerSearch(node, parent) {

        if (node === null) {
          return parent;
        }

        var dimension = dimensions[node.dimension];
        if (point[dimension] < node.obj[dimension]) {
          return innerSearch(node.left, node);
        } else {
          return innerSearch(node.right, node);
        }
      }

      var insertPosition = innerSearch(this.root, null),
        newNode,
        dimension;

      if (insertPosition === null) {
        this.root = new Node(point, 0, null);
        return;
      }

      newNode = new Node(point, (insertPosition.dimension + 1) % dimensions.length, insertPosition);
      dimension = dimensions[insertPosition.dimension];

      if (point[dimension] < insertPosition.obj[dimension]) {
        insertPosition.left = newNode;
      } else {
        insertPosition.right = newNode;
      }
    };

    this.remove = function (point) {
      var node;

      function nodeSearch(node) {
        if (node === null) {
          return null;
        }

        if (node.obj === point) {
          return node;
        }

        var dimension = dimensions[node.dimension];

        if (point[dimension] < node.obj[dimension]) {
          return nodeSearch(node.left, node);
        } else {
          return nodeSearch(node.right, node);
        }
      }

      function removeNode(node) {
        var nextNode,
          nextObj,
          pDimension;

        function findMin(node, dim) {
          var dimension,
            own,
            left,
            right,
            min;

          if (node === null) {
            return null;
          }

          dimension = dimensions[dim];

          if (node.dimension === dim) {
            if (node.left !== null) {
              return findMin(node.left, dim);
            }
            return node;
          }

          own = node.obj[dimension];
          left = findMin(node.left, dim);
          right = findMin(node.right, dim);
          min = node;

          if (left !== null && left.obj[dimension] < own) {
            min = left;
          }
          if (right !== null && right.obj[dimension] < min.obj[dimension]) {
            min = right;
          }
          return min;
        }

        if (node.left === null && node.right === null) {
          if (node.parent === null) {
            self.root = null;
            return;
          }

          pDimension = dimensions[node.parent.dimension];

          if (node.obj[pDimension] < node.parent.obj[pDimension]) {
            node.parent.left = null;
          } else {
            node.parent.right = null;
          }
          return;
        }

        // If the right subtree is not empty, swap with the minimum element on the
        // node's dimension. If it is empty, we swap the left and right subtrees and
        // do the same.
        if (node.right !== null) {
          nextNode = findMin(node.right, node.dimension);
          nextObj = nextNode.obj;
          removeNode(nextNode);          
          node.obj = nextObj;
        } else {
          nextNode = findMin(node.left, node.dimension);
          nextObj = nextNode.obj;
          removeNode(nextNode);
          node.right = node.left;
          node.left = null;
          node.obj = nextObj;
        }

      }

      node = nodeSearch(self.root);

      if (node === null) { return; }

      removeNode(node);
    };

    this.nearest = function (point, maxNodes, maxDistance) {
      var i,
        result,
        bestNodes;

      bestNodes = new BinaryHeap(
        function (e) { return -e[1]; }
      );

      function nearestSearch(node) {
        var bestChild,
          dimension = dimensions[node.dimension],
          ownDistance = metric(point, node.obj),
          linearPoint = {},
          linearDistance,
          otherChild,
          i;

        function saveNode(node, distance) {
          bestNodes.push([node, distance]);
          if (bestNodes.size() > maxNodes) {
            bestNodes.pop();
          }
        }

        for (i = 0; i < dimensions.length; i += 1) {
          if (i === node.dimension) {
            linearPoint[dimensions[i]] = point[dimensions[i]];
          } else {
            linearPoint[dimensions[i]] = node.obj[dimensions[i]];
          }
        }

        linearDistance = metric(linearPoint, node.obj);

        if (node.right === null && node.left === null) {
          if (bestNodes.size() < maxNodes || ownDistance < bestNodes.peek()[1]) {
            saveNode(node, ownDistance);
          }
          return;
        }

        if (node.right === null) {
          bestChild = node.left;
        } else if (node.left === null) {
          bestChild = node.right;
        } else {
          if (point[dimension] < node.obj[dimension]) {
            bestChild = node.left;
          } else {
            bestChild = node.right;
          }
        }

        nearestSearch(bestChild);

        if (bestNodes.size() < maxNodes || ownDistance < bestNodes.peek()[1]) {
          saveNode(node, ownDistance);
        }

        if (bestNodes.size() < maxNodes || Math.abs(linearDistance) < bestNodes.peek()[1]) {
          if (bestChild === node.left) {
            otherChild = node.right;
          } else {
            otherChild = node.left;
          }
          if (otherChild !== null) {
            nearestSearch(otherChild);
          }
        }
      }

      if (maxDistance) {
        for (i = 0; i < maxNodes; i += 1) {
          bestNodes.push([null, maxDistance]);
        }
      }

      if(self.root)
        nearestSearch(self.root);

      result = [];

      for (i = 0; i < Math.min(maxNodes, bestNodes.content.length); i += 1) {
        if (bestNodes.content[i][0]) {
          result.push([bestNodes.content[i][0].obj, bestNodes.content[i][1]]);
        }
      }
      return result;
    };

    this.balanceFactor = function () {
      function height(node) {
        if (node === null) {
          return 0;
        }
        return Math.max(height(node.left), height(node.right)) + 1;
      }

      function count(node) {
        if (node === null) {
          return 0;
        }
        return count(node.left) + count(node.right) + 1;
      }

      return height(self.root) / (Math.log(count(self.root)) / Math.log(2));
    };
  }

  // Binary heap implementation from:
  // http://eloquentjavascript.net/appendix2.html

  function BinaryHeap(scoreFunction){
    this.content = [];
    this.scoreFunction = scoreFunction;
  }

  BinaryHeap.prototype = {
    push: function(element) {
      // Add the new element to the end of the array.
      this.content.push(element);
      // Allow it to bubble up.
      this.bubbleUp(this.content.length - 1);
    },

    pop: function() {
      // Store the first element so we can return it later.
      var result = this.content[0];
      // Get the element at the end of the array.
      var end = this.content.pop();
      // If there are any elements left, put the end element at the
      // start, and let it sink down.
      if (this.content.length > 0) {
        this.content[0] = end;
        this.sinkDown(0);
      }
      return result;
    },

    peek: function() {
      return this.content[0];
    },

    remove: function(node) {
      var len = this.content.length;
      // To remove a value, we must search through the array to find
      // it.
      for (var i = 0; i < len; i++) {
        if (this.content[i] == node) {
          // When it is found, the process seen in 'pop' is repeated
          // to fill up the hole.
          var end = this.content.pop();
          if (i != len - 1) {
            this.content[i] = end;
            if (this.scoreFunction(end) < this.scoreFunction(node))
              this.bubbleUp(i);
            else
              this.sinkDown(i);
          }
          return;
        }
      }
      throw new Error("Node not found.");
    },

    size: function() {
      return this.content.length;
    },

    bubbleUp: function(n) {
      // Fetch the element that has to be moved.
      var element = this.content[n];
      // When at 0, an element can not go up any further.
      while (n > 0) {
        // Compute the parent element's index, and fetch it.
        var parentN = Math.floor((n + 1) / 2) - 1,
            parent = this.content[parentN];
        // Swap the elements if the parent is greater.
        if (this.scoreFunction(element) < this.scoreFunction(parent)) {
          this.content[parentN] = element;
          this.content[n] = parent;
          // Update 'n' to continue at the new position.
          n = parentN;
        }
        // Found a parent that is less, no need to move it further.
        else {
          break;
        }
      }
    },

    sinkDown: function(n) {
      // Look up the target element and its score.
      var length = this.content.length,
          element = this.content[n],
          elemScore = this.scoreFunction(element);

      while(true) {
        // Compute the indices of the child elements.
        var child2N = (n + 1) * 2, child1N = child2N - 1;
        // This is used to store the new position of the element,
        // if any.
        var swap = null;
        // If the first child exists (is inside the array)...
        if (child1N < length) {
          // Look it up and compute its score.
          var child1 = this.content[child1N],
              child1Score = this.scoreFunction(child1);
          // If the score is less than our element's, we need to swap.
          if (child1Score < elemScore)
            swap = child1N;
        }
        // Do the same checks for the other child.
        if (child2N < length) {
          var child2 = this.content[child2N],
              child2Score = this.scoreFunction(child2);
          if (child2Score < (swap == null ? elemScore : child1Score)){
            swap = child2N;
          }
        }

        // If the element needs to be moved, swap it, and continue.
        if (swap != null) {
          this.content[n] = this.content[swap];
          this.content[swap] = element;
          n = swap;
        }
        // Otherwise, we are done.
        else {
          break;
        }
      }
    }
  };
  
  this.kdTree = kdTree;
  
  exports.kdTree = kdTree;
  exports.BinaryHeap = BinaryHeap;
}));

z_purview_helper.js

// note: this file is poorly named - it can generally be ignored.

// helper functions below for supporting blocks/purview

function saveBlocksImages(doZoom) {
  if(doZoom == null) {
    doZoom = false;
  }

  // generate 960x500 preview.jpg of entire canvas
  // TODO: should this be recycled?
  var offscreenCanvas = document.createElement('canvas');
  offscreenCanvas.width = 960;
  offscreenCanvas.height = 500;
  var context = offscreenCanvas.getContext('2d');
  // background is flat white
  context.fillStyle="#FFFFFF";
  context.fillRect(0, 0, 960, 500);
  context.drawImage(this.canvas, 0, 0, 960, 500);
  // save to browser
  var downloadMime = 'image/octet-stream';
  var imageData = offscreenCanvas.toDataURL('image/jpeg');
  imageData = imageData.replace('image/jpeg', downloadMime);
  p5.prototype.downloadFile(imageData, 'preview.jpg', 'jpg');

  // generate 230x120 thumbnail.png centered on mouse
  offscreenCanvas.width = 230;
  offscreenCanvas.height = 120;

  // background is flat white  
  context = offscreenCanvas.getContext('2d');
  context.fillStyle="#FFFFFF";
  context.fillRect(0, 0, 230, 120);

  if(doZoom) {
    // pixelDensity does the right thing on retina displays
    var pd = this._pixelDensity;
    var sx = pd * mouseX - pd * 230/2;
    var sy = pd * mouseY - pd * 120/2;
    var sw = pd * 230;
    var sh = pd * 120;
    // bounds checking - just displace if necessary
    if (sx < 0) {
      sx = 0;
    }
    if (sx > this.canvas.width - sw) {
      sx = this.canvas.width - sw;
    }
    if (sy < 0) {
      sy = 0;
    }
    if (sy > this.canvas.height - sh) {
      sy = this.canvas.height - sh;
    }
    // save to browser
    context.drawImage(this.canvas, sx, sy, sw, sh, 0, 0, 230, 120);
  }
  else {
    // now scaledown
    var full_width = this.canvas.width;
    var full_height = this.canvas.height;
    context.drawImage(this.canvas, 0, 0, full_width, full_height, 0, 0, 230, 120);
  }
  imageData = offscreenCanvas.toDataURL('image/png');
  imageData = imageData.replace('image/png', downloadMime);
  // call this function after 1 second
  setTimeout(function(){
    p5.prototype.downloadFile(imageData, 'thumbnail.png', 'png');
  }, 1000);
}

zhang_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */



// remove this or set to false to enable full program (load will be slower)
//var DEBUG_MODE = true;

// this can be used to set the number of sliders to show
var NUM_SLIDERS = 10;

// example of a global function
// given a segment, this returns the average point [x, y]
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 ];
}

// This where you define your own face object
function ZhangFace() {

    //head color/////////////////////////////
   const orange1 = color (252, 128, 18); //front face color
    const oranget = color(158, 85, 11); //texture's color when orange1
   const orange2 = color (176, 94, 12);//darker orange
    const oranget2 = color(122, 66, 10); //texture's color when orange2
   const orange3 = color (252, 84, 18);//darker that orange2
    const oranget3 = color(126, 41, 7); //texture's color when orange3
   const orange4 = color (44, 5, 49);//most dark orange 94, 49, 4 25, 31, 10
    const oranget4 = color(18, 3, 16); //texture's color when orange3 13, 18, 1

  const evilgreen = color(74, 140, 43);
  const cutevil = color(128, 209, 116);

   const cut = color (242, 151, 61); //color of nose, eyes, mouth


   //vein color
   const green = color(105, 125, 16);
   const dry_vein = color (45, 47, 5);
   const dryer_vein = color (49, 30, 0);




  this.earSize = 5;
  this.earDist = 5;
  this.faceColor = 0;
  this.vein = 5;
  this.vein2 = 5;
  this.mouthshape = -2;
  this.mouth_value = -1;
  this.veinx = 5
  this.vein2x = 5
  this.veingreen = 5;
  this.pupil = 5;
  this.pupily = 5;

  this.leave_num = 0;
    this.blush = 0;

  angleMode(DEGREES);

  /*
   * Draw the face with position lists that include:
   *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
   *    bottom_lip, top_lip, nose_tip, nose_bridge,
   */
  this.draw = function(positions) {
  // lip variables///////////////////////////
  let top_lip0 = positions.top_lip[0];
  let top_lip1 = positions.top_lip[3];
  let top_lip2 = positions.top_lip[6];

  let bottom_lip0 = positions.bottom_lip[0];
  let bottom_lip1 = positions.bottom_lip[3];
  let bottom_lip2 = positions.bottom_lip[6];

  //Eyebrow variables///////////////////////////
  let eyebrow0 = positions. left_eyebrow[0];
  let eyebrow1 = positions. left_eyebrow[1];
  let eyebrow2 = positions. left_eyebrow[2];
  let eyebrow3 = positions. left_eyebrow[3];
  let eyebrow4 = positions. left_eyebrow[4];

  let eyebrow_right0 = positions. right_eyebrow[0];
  let eyebrow_right1 = positions. right_eyebrow[1];
  let eyebrow_right2 = positions. right_eyebrow[2];
  let eyebrow_right3 = positions. right_eyebrow[3];
  let eyebrow_right4 = positions. right_eyebrow[4];

  //head//////////////////////
  let face_pos = segment_average(positions.chin);
    strokeWeight(0.05);
    stroke(0);
    if(this.faceColor == 0) {
      fill(oranget);
    }
    else if (this.faceColor==1) {
      fill(oranget2);
    }
    else if (this.faceColor==2) {
      fill(oranget3);
    }
    else {
      fill(oranget4);
    }

    push();
    rectMode(CENTER);
    rect(face_pos[0]-0.05, face_pos[0],4, 4,1 );
    pop();

      //main vein/////////////////////////////////////////change based on length of hair
      let vein_length = map (this. veingreen, 0, 100, 0, -12);

      if (this.leave_num >= 0 && this.leave_num<1 ) {
        fill(dryer_vein);

      }else if (this.leave_num >= 1 && this.leave_num<2) {
        fill(dry_vein);
      }else {
        fill(green);
      }

      push();
      translate(0, vein_length);
        beginShape();
        vertex(-0.25, -2.25);
        vertex(0.1, -2);
        quadraticVertex(0.4, -1.5, 0.2, -0.5);
        vertex(-0.25, -0.5);
        quadraticVertex(0.3, -0.55, -0.2, -2.25);
        endShape();
      pop();


      let eyebrow_pos = segment_average(positions. right_eyebrow);
      let eyebrow_pos_l = segment_average(positions. left_eyebrow);


  // head///////////////////////////////////////////////////////
    if(this.faceColor == 0) {
      fill(orange1);
    }
    else if (this.faceColor==1) {
      fill(orange2);
    }
    else if (this.faceColor==2) {
      fill(orange3);
    }
    else {
      fill(orange4);
    }

    push();
    rectMode(CENTER);
    rect(0, 0, 4, 4,1);
    pop();


    //pumpkin texture, long stripes//////////////////////////////////////////////////////

    noFill();
    if(this.faceColor == 0) {
      stroke(oranget);
    }
    else if (this.faceColor==1) {
      stroke(oranget2);
    }
    else if (this.faceColor==2) {
      stroke(oranget3);

    }
    else {
      stroke(oranget4);
    }


    strokeWeight(0.15);
    let texture = segment_average(positions.nose_bridge);
    let texture1 = positions.chin[10];
    let texture2 = positions.chin[9];
    let texture3 = positions.chin[7];
    let texture4 = positions.chin[6];

    let short_texture1 = positions.chin[5];
    let short_texture2 = positions.chin[11];

    //long stripes
    arc (texture1[0], 0, 1.5, 3.8,270, 90);
    arc (texture2[0], 0, 1, 3.8,270, 90);

    arc (texture3[0], 0, 1, 3.8, 90, 270);
    arc (texture4[0], 0, 1.5, 3.8, 90, 270);

    stroke(0);
    strokeWeight(0.05);
    arc (texture1[0], 0, 1.5, 4,270, 90);
    arc (texture2[0], 0, 1, 4,270, 90);


    arc (texture3[0], 0, 1, 4, 90, 270);
    arc (texture4[0], 0, 1.5, 4, 90, 270);


    //pupil position//////////////////////////////////////////////////
  let left_eye_pos = segment_average(positions.left_eye);
  let right_eye_pos = segment_average(positions.right_eye);

  let pupil_pos = map (this.pupil, -40,40, -2, 1.5);
  let pupil_posy = map (this.pupily, -40,50, -1.5, 1.5);


  //When draw purple color///////////////////////////////////////
    if (this.faceColor == 3){
          let left = positions. left_eye [0];
          let left1 = positions. left_eye [1];
          let left2 = positions. left_eye [2];
          let left3 = positions. left_eye [3];
          let left4 = positions. left_eye [4];
          let left5 = positions. left_eye [5];



          //purple face, draw green eyes//////////////////
          push();
          translate(-1*left_eye_pos[0],-1*left_eye_pos[1]);
          fill(cutevil);
          scale(2);
          strokeWeight(0.03);
          beginShape();
          vertex(left[0], left[1]);
          vertex(left1[0], left1[1]);
          vertex(left2[0], left2[1]);
          vertex(left3[0], left3[1]);
          vertex(left4[0], left4[1]);
          vertex(left5[0], left5[1]);
          vertex(left[0], left[1]);
          endShape();
          pop();


          push();
          scale(1);
          strokeWeight(0.05);
          stroke(evilgreen);
          fill(evilgreen);
          beginShape();
          vertex(left[0], left[1]);
          vertex(left1[0], left1[1]);
          vertex(left2[0], left2[1]);
          vertex(left3[0], left3[1]);
          vertex(left4[0], left4[1]);
          vertex(left5[0], left5[1]);
          vertex(left[0], left[1]);
          endShape();
          pop();


          let right = positions. right_eye [0];
          let right1 = positions. right_eye [1];
          let right2 = positions. right_eye [2];
          let right3 = positions. right_eye [3];
          let right4 = positions. right_eye [4];
          let right5 = positions. right_eye [5];


          push();
          fill(cutevil);
          strokeWeight(0.03);
          translate(-right_eye_pos[0],-right_eye_pos[1]);
          scale(2);
          beginShape();
          vertex(right1[0]+0.1, right1[1]);
          vertex(right2[0], right2[1]);
          vertex(right3[0], right3[1]);
          vertex(right4[0], right4[1]);
          vertex(right5[0], right5[1]);
          vertex(right[0]+0.1, right[1]);
          endShape(CLOSE);
          pop();


          push();
          stroke(evilgreen);
          strokeWeight(0.01);
          fill(evilgreen);
          noStroke();
          beginShape();
          vertex(right1[0]+0.1, right1[1]);
          vertex(right2[0], right2[1]);
          vertex(right3[0], right3[1]);
          vertex(right4[0], right4[1]);
          vertex(right5[0], right5[1]);
          vertex(right[0], right[1]);
          endShape();
          pop();


    //evil smile/////////////////////////////////////////////////
    stroke(0);
    strokeWeight(0.05);
    fill(cutevil);

    beginShape();
    vertex(top_lip0[0]-0.6,top_lip0[1]-0.8);
    quadraticVertex(top_lip1[0],top_lip1[1]+0.5, top_lip2[0]+0.6,top_lip2[1]-0.8);
    quadraticVertex(bottom_lip0[0]+0.6, bottom_lip0[1]+0.5,bottom_lip1[0],bottom_lip1[1]+0.5);
    quadraticVertex(bottom_lip2[0]-0.6,bottom_lip2[1]+0.5, top_lip0[0]-0.6,top_lip0[1]-0.8);
    endShape();

    fill(evilgreen);
    push();
    beginShape();
    vertex(top_lip0[0]-0.6,top_lip0[1]-0.8);
    quadraticVertex(top_lip1[0]-0.1,top_lip1[1]+0.8, top_lip2[0]+0.55,top_lip2[1]-0.7);
    quadraticVertex(bottom_lip0[0]+0.4, bottom_lip0[1]+0.4,bottom_lip1[0],bottom_lip1[1]+0.3 );
    quadraticVertex(bottom_lip2[0]-0.4,bottom_lip2[1]+0.3, top_lip0[0]-0.6,top_lip0[1]-0.8);
    endShape();
    pop();


    //nose////////////////////////////

    fill(cutevil);
    let nose1 = positions.nose_bridge[1];
    let nose2 = positions.nose_tip[0];
    let nose3 = positions.nose_tip[4];
    beginShape();
    vertex(nose1[0],nose1[1]);
    vertex(nose2[0],nose2[1]);
    vertex(nose3[0],nose3[1]);
    vertex(nose1[0],nose1[1]);
    endShape();

    //nose, the dark part//////////////////////
    fill(evilgreen);
    push();
    noStroke();
    scale(0.8);
    beginShape();
    vertex(nose1[0],nose1[1]);
    vertex(nose2[0],nose2[1]);
    vertex(nose3[0],nose3[1]);
    vertex(nose1[0],nose1[1]);
    endShape();
    pop();

    push();
    noFill();
    beginShape();
    vertex(nose1[0],nose1[1]);
    vertex(nose2[0],nose2[1]);
    vertex(nose3[0],nose3[1]);
    vertex(nose1[0],nose1[1]);
    endShape();
    pop();
    }
    else {

      //when orange face color, draw normal face expression///////////////
      let left_eyepoint = positions.left_eye[5];
      let eye_d = dist (eyebrow2[0], eyebrow2[1], left_eyepoint[0], left_eyepoint[1]);
      if(eye_d<0.1){
        eye_d=0;
      }
      left_eye = map(eye_d, 0, 0.6, 0, 10);
      let eye_size = map(left_eye, 0, 10, 0.1,1);


      fill(cut); // dark orange shadow
      strokeWeight(0.05);
      stroke(0);

      ellipse(left_eye_pos[0], left_eye_pos[1], eye_size/2, eye_size);
      ellipse(right_eye_pos[0], right_eye_pos[1], eye_size/2, eye_size);



      //pupil
      noStroke();
      fill(0);
      ellipse(left_eye_pos[0]+ pupil_pos, left_eye_pos[1]+pupil_posy, eye_size/3, eye_size/1.2);
      ellipse(right_eye_pos[0] +pupil_pos, right_eye_pos[1]+pupil_posy, eye_size/3, eye_size/1.2);

      if(this.faceColor == 0) {
        fill(oranget);
      }
      else if (this.faceColor==1) {
        fill(oranget2);
      }
      else if (this.faceColor==2) {
        fill(oranget3);

      }
      else {
        fill(oranget4);
      }

      stroke(0);
      strokeWeight(0.05);
      ellipse(left_eye_pos[0]- pupil_pos, left_eye_pos[1]-pupil_posy, eye_size/4, eye_size/2);
      ellipse(right_eye_pos[0]- pupil_pos, right_eye_pos[1]-pupil_posy, eye_size/4, eye_size/2);


    //smile mouth//////////////////////////////////////////////
    stroke(0);
    strokeWeight(0.05);
    fill(cut);
    beginShape();
    vertex(top_lip0[0]-0.5,top_lip0[1]-0.5);
    quadraticVertex(top_lip1[0],top_lip1[1]+0.5, top_lip2[0]+0.5,top_lip2[1]-0.5);
    quadraticVertex(bottom_lip0[0], bottom_lip0[1]+0.5,bottom_lip1[0],bottom_lip1[1]);
    quadraticVertex(bottom_lip2[0],bottom_lip2[1]+0.5, top_lip0[0]-0.5,top_lip0[1]-0.5);
    endShape();

    fill(0);
    push();
    beginShape();
    vertex(top_lip0[0]-0.5,top_lip0[1]-0.5);
    quadraticVertex(top_lip1[0],top_lip1[1]+0.7, top_lip2[0]+0.5,top_lip2[1]-0.5);
    quadraticVertex(bottom_lip0[0], bottom_lip0[1]+0.4,bottom_lip1[0],bottom_lip1[1]-0.2 );
    quadraticVertex(bottom_lip2[0],bottom_lip2[1]+0.4, top_lip0[0]-0.5,top_lip0[1]-0.5);
    endShape();
    pop();


    //nose////////////////////////////

    fill(cut);
    let nose1 = positions.nose_bridge[1];
    let nose2 = positions.nose_tip[0];
    let nose3 = positions.nose_tip[4];
    beginShape();
    vertex(nose1[0],nose1[1]);
    vertex(nose2[0],nose2[1]);
    vertex(nose3[0],nose3[1]);
    vertex(nose1[0],nose1[1]);
    endShape();

    //nose, the dark part/////////////////////
    fill(0);
    push();
    noStroke();
    scale(0.8);
    beginShape();
    vertex(nose1[0],nose1[1]);
    vertex(nose2[0],nose2[1]);
    vertex(nose3[0],nose3[1]);
    vertex(nose1[0],nose1[1]);
    endShape();
    pop();
    }


    //eyebrow and small, curve vein////////////////////////////////////////////////////////////////

    let veinlefty = map (this.vein, 0, 100, -1, 10);
    let veinleftx = map (this.veinx, 0, 100, -1, 10);

    let veinrighty = map (this.vein2, 0, 100, -1, 10);
    let veinrightx = map (this.vein2x, 0, 100, -1, 10);
    stroke(1);
    strokeWeight(0.1);

    strokeWeight(0.05);
    push();
    translate(-eyebrow_pos_l[0]+veinleftx,-eyebrow_pos_l[0]+veinlefty );
    scale(2);
    noFill();
    beginShape();
    curveVertex(eyebrow0[0],eyebrow0[1]);
    curveVertex(eyebrow0[0],eyebrow0[1]);
    curveVertex(eyebrow1[0],eyebrow1[1]);
    curveVertex(eyebrow2[0],eyebrow2[1]);
    curveVertex(eyebrow3[0],eyebrow3[1]);
    curveVertex(eyebrow4[0],eyebrow4[1]);
    curveVertex(eyebrow4[0],eyebrow4[1]);
    endShape();
      ellipse(eyebrow_pos_l[0], eyebrow_pos_l[1], 0.3, 0.15);
    pop();

    push();
    translate(-eyebrow_pos[0]+veinrightx ,eyebrow_pos[0]+veinrighty );
    scale(2);
    noFill();
    beginShape();
    curveVertex(eyebrow_right0[0],eyebrow_right0[1]);
    curveVertex(eyebrow_right1[0],eyebrow_right1[1]);
    curveVertex(eyebrow_right2[0],eyebrow_right2[1]);
    curveVertex(eyebrow_right3[0],eyebrow_right3[1]);
    curveVertex(eyebrow_right4[0],eyebrow_right4[1]);
    curveVertex(eyebrow_right4[0],eyebrow_right4[1]);
    ellipse(eyebrow_pos[0], eyebrow_pos[1], 0.3, 0.15);

    endShape();
    strokeWeight(0.03);
    pop();


  //leave number represent the age/////////////////////////////////
    if (this.leave_num >= 0 && this.leave_num<1 ) {


      //draw one leaf represent old face//////////////////
      if(this.faceColor == 0) {
        stroke(oranget);
      }
      else if (this.faceColor==1) {
        stroke(oranget2);
      }
      else if (this.faceColor==2) {
        stroke(oranget3);

      }
      else {
        stroke(oranget4);
      }


      //draw wrinkle/////////////////////////////////////
      noFill();
      push();
      rotate(180);
      arc(texture2[0]-0.5, 2*texture2[0],1.5,1, 50, 130);
      arc(texture2[0]-0.5, 1.5*texture2[0],1.5,1, 50, 130);
      arc(texture2[0]-0.5, texture2[0],1.5,1, 50, 130);
      pop();

      //draw one leaf////////////////////////////
      fill(dryer_vein);
      stroke(0);
        push();
        translate(2*eyebrow2[0], 2* eyebrow2[1]);
        beginShape();
        vertex(0.2,0.2);
        quadraticVertex(0.2, 0.8, 0.8, 0.8);
        quadraticVertex(0.8, 0.2, 0.2, 0.2);
        endShape();
        pop();
    }else if (this.leave_num >= 1 && this.leave_num<2) {

      //draw two leave, represent mature face////////////////////////////
      fill(dry_vein);
        push();
        translate(2*eyebrow2[0], 2* eyebrow2[1]);
        beginShape();
        vertex(0.2,0.2);
        quadraticVertex(0.2, 0.8, 0.8, 0.8);
        quadraticVertex(0.8, 0.2, 0.2, 0.2);
        endShape();
        pop();

        push();
         translate(2*eyebrow_right2[0], 2* eyebrow_right2[1]);
         rotate(90);
         beginShape();
         vertex(0.8,0.8);
         quadraticVertex(0.8, 0, 0, 0);
         quadraticVertex(0, 0.8, 0.8, 0.8);
         endShape();
         pop();

    }else {

      //three leave, yound faces/////////////////////////////////////
      fill(green);
        push();
        translate(2*eyebrow2[0], 2* eyebrow2[1]);
        beginShape();
        vertex(0.2,0.2);
        quadraticVertex(0.2, 0.8, 0.8, 0.8);
        quadraticVertex(0.8, 0.2, 0.2, 0.2);
        endShape();
        pop();

        push();
        translate(2*eyebrow_right2[0], 2* eyebrow_right2[1]);
        rotate(90);
        beginShape();
        vertex(0.8,0.8);
        quadraticVertex(0.8, 0, 0, 0);
        quadraticVertex(0, 0.8, 0.8, 0.8);
        endShape();
        pop();

        push();
        translate(texture[0], -2);
        rotate(120);
        beginShape();
        vertex(0.6,0.6);
        quadraticVertex(0.6, 0, 0, 0);
        quadraticVertex(0, 0.6, 0.6, 0.6);
        endShape();

        beginShape();
        noFill();
        strokeWeight(0.1);
        vertex(0, 0);
        bezierVertex(0, -1, 1, 0, 1, -1);
        endShape();
        pop();
    }


//When people with big smile will have a blush
    if (this.blush >= 0 && this.blush <1.5){
      const blush = color(222, 157, 237);
      fill(blush);
      ellipse(top_lip2[0]+0.8, top_lip2[1]-0.8, 0.5,0.3);
      ellipse(top_lip1[0]-1.4, top_lip2[1]-0.8, 0.5,0.3);

    }

  }

  /* set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
    this.faceColor = int(map(settings[4], 0, 100, 0, 3));
    this.vein = map(settings[3], 0, 100, 0, 10);
    this.veinx = map(settings[5], 0, 100, 0, 10);
    this.vein2 = map(settings[1], 0, 100, 0, 10);
    this.vein2x = map(settings[2], 0, 100, 0, 10);
    this.veingreen = map(settings[0], 0, 100, 0, 10);
    this.pupil = map(settings[6], 0, 100, 0, 10);
    this.pupily = map(settings[7], 0, 100, 0, 10);
    this.leave_num = int(map(settings[8], 0, 100, 0, 3));
    this.blush = int(map(settings[9], 0, 100, 0, 2));
  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    let settings = new Array(10);
      settings[0] = map(this.veingreen,0, 10, 0, 100);
      settings[1] = map(this.vein2,0, 10, 0, 100);
      settings[2] = map(this.vein2x,0, 10, 0, 100);
      settings[3] = map(this.vein,0, 10, 0, 100);
      settings[4] = map(this.faceColor, 0,3, 0, 100);
      settings[5] = map(this.veinx,0, 10, 0, 100);
      settings[6] = map(this.pupil,0, 10, 0, 100);
      settings[7] = map(this.pupily,0, 10, 0, 100);
      settings[8] = map(this.leave_num,0, 3, 0, 100);
      settings[9] = map(this.blush,0, 2, 0, 100);
    return settings;
  }
}

zhang_training_values.json


{
"000001": [
41,
80,
72,
76,
0,
77,
49,
56,
33,
75
],
"000002": [
100,
100,
93,
71,
0,
100,
56.00000000000001,
53,
33.33333333333333,
0
],
"000005": [
86.99999999999999,
92.00000000000001,
78,
82,
0,
82,
56.00000000000001,
49.00000000000001,
33.33333333333333,
100
],
"000006": [
100,
100,
70,
89,
66.66666666666666,
89,
42.00000000000001,
64,
33.33333333333333,
100
],
"000007": [
35,
69,
79,
56.00000000000001,
0,
82,
56.00000000000001,
50,
33.33333333333333,
100
],
"000009": [
100,
92.00000000000001,
73,
86.99999999999999,
0,
74,
53,
52,
66.66666666666666,
0
],
"000010": [
100,
88.00000000000001,
74,
75,
0,
86,
53,
53,
66.66666666666666,
100
],
"000013": [
24,
82.99999999999999,
76,
72,
0,
81.00000000000001,
57.99999999999999,
57.99999999999999,
33.33333333333333,
100
],
"000014": [
100,
93,
71,
84.00000000000001,
100,
79,
48,
62,
66.66666666666666,
100
],
"000015": [
28.999999999999996,
84.00000000000001,
74,
84.00000000000001,
0,
70,
52,
53,
33.33333333333333,
100
],
"000016": [
23.000000000000004,
86.99999999999999,
72,
74,
0,
79,
56.00000000000001,
52,
33.33333333333333,
100
],
"000018": [
100,
100,
76,
86,
0,
90.99999999999999,
56.99999999999999,
56.99999999999999,
0,
100
],
"000037": [
16,
89,
82,
85,
100,
86,
56.00000000000001,
53,
33.33333333333333,
100
],
"000044": [
90,
93,
82,
81.00000000000001,
100,
90,
62,
52,
100,
100
],
"000045": [
100,
73,
79,
55.00000000000001,
0,
89,
61,
50,
100,
0
],
"000047": [
100,
90,
84.00000000000001,
75,
100,
89,
61,
50,
33.33333333333333,
100
],
"000065": [
26,
76,
72,
63,
0,
89,
54,
50,
100,
100
],
"000068": [
43,
88.00000000000001,
76,
90,
0,
72,
43,
50,
0,
100
],
"000071": [
79,
63,
86,
50,
0,
90,
71,
38,
100,
100
],
"000073": [
100,
100,
100,
81.00000000000001,
0,
100,
76,
41,
100,
100
],
"000020": [
61,
93,
84.00000000000001,
88.00000000000001,
0,
90,
52,
49.00000000000001,
0,
100
],
"000023": [
28.000000000000004,
84.00000000000001,
78,
75,
0,
70,
48,
50,
66.66666666666666,
100
],
"000025": [
26,
72,
81.00000000000001,
56.00000000000001,
0,
84.00000000000001,
63,
45,
33.33333333333333,
100
],
"000028": [
100,
88.00000000000001,
71,
74,
0,
74,
46.99999999999999,
54,
100,
0
],
"000029": [
100,
76,
74,
65,
0,
82,
56.00000000000001,
49.00000000000001,
66.66666666666666,
100
],
"000030": [
28.000000000000004,
80,
63,
69,
0,
56.00000000000001,
52,
51,
0,
100
],
"000031": [
100,
90,
73,
84.00000000000001,
0,
77,
52,
54,
33.33333333333333,
50
],
"000032": [
31,
84.00000000000001,
77,
76,
0,
75,
54,
56.00000000000001,
0,
100
],
"000035": [
95,
81.00000000000001,
77,
56.99999999999999,
0,
86.99999999999999,
57.99999999999999,
53,
33.33333333333333,
100
],
"000038": [
41,
90,
82.99999999999999,
78,
0,
86.99999999999999,
56.99999999999999,
50,
33.33333333333333,
0
],
"000040": [
89,
70,
70,
52,
0,
77,
62,
66,
100,
100
],
"000041": [
36,
100,
100,
63,
0,
100,
60,
46.99999999999999,
0,
50
],
"000042": [
93.99999999999999,
78,
71,
67,
0,
80,
52,
51,
66.66666666666666,
100
],
"000043": [
84.00000000000001,
78,
72,
71,
0,
84.00000000000001,
53,
57.99999999999999,
100,
50
],
"000048": [
28.000000000000004,
100,
74,
100,
0,
88.00000000000001,
56.99999999999999,
50,
100,
100
],
"000050": [
28.000000000000004,
81.00000000000001,
63,
80,
0,
72,
56.99999999999999,
50,
33.33333333333333,
50
],
"000051": [
0,
98.00000000000001,
66,
84.00000000000001,
0,
81.00000000000001,
56.99999999999999,
50,
0,
100
],
"000052": [
43,
98.00000000000001,
92.00000000000001,
85,
0,
92.00000000000001,
56.99999999999999,
50,
0,
100
],
"000054": [
100,
92.00000000000001,
82,
72,
0,
93,
56.99999999999999,
50,
100,
0
],
"000055": [
44.00000000000001,
82,
79,
81.00000000000001,
0,
86.99999999999999,
56.99999999999999,
50,
33.33333333333333,
100
],
"000056": [
67,
99,
66,
95,
0,
70,
42.00000000000001,
43,
100,
100
],
"000058": [
100,
90,
74,
81.00000000000001,
0,
85,
56.99999999999999,
50,
100,
100
],
"000060": [
0,
100,
93,
100,
100,
99,
56.99999999999999,
50,
100,
0
],
"000064": [
28.000000000000004,
93,
76,
86.99999999999999,
0,
81.00000000000001,
56.99999999999999,
50,
100,
100
],
"000069": [
43,
88.00000000000001,
77,
86.99999999999999,
0,
82,
56.00000000000001,
71,
33.33333333333333,
100
],
"000076": [
63,
100,
81.00000000000001,
95,
0,
90,
56.00000000000001,
78,
100,
100
],
"000077": [
100,
90,
89,
55.00000000000001,
0,
98.00000000000001,
73,
48,
100,
100
],
"000078": [
100,
100,
65,
100,
0,
81.00000000000001,
51,
82.99999999999999,
100,
100
],
"000079": [
0,
89,
80,
79,
0,
92.00000000000001,
77,
46.00000000000001,
33.33333333333333,
100
],
"000080": [
39,
70,
71,
53,
0,
78,
45,
46.99999999999999,
33.33333333333333,
100
],
"000117": [
100,
100,
82,
86.99999999999999,
100,
100,
59,
39,
66.66666666666666,
50
],
"000118": [
79,
82,
72,
67,
0,
88.00000000000001,
55.00000000000001,
54,
100,
100
],
"000081": [
39,
82,
64,
84.00000000000001,
0,
62,
41,
59,
33.33333333333333,
0
],
"000083": [
100,
82,
82,
73,
0,
82.99999999999999,
67,
48,
33.33333333333333,
100
],
"000085": [
100,
82,
82,
73,
0,
82.99999999999999,
67,
48,
66.66666666666666,
100
],
"000086": [
100,
96,
64,
100,
0,
67,
41,
57.99999999999999,
66.66666666666666,
100
],
"000088": [
100,
100,
95,
81.00000000000001,
0,
100,
68,
57.99999999999999,
33.33333333333333,
100
],
"000091": [
22.000000000000004,
50,
84.00000000000001,
28.999999999999996,
0,
82.99999999999999,
56.00000000000001,
57.99999999999999,
66.66666666666666,
100
],
"000092": [
100,
81.00000000000001,
62,
86.99999999999999,
0,
68,
49.00000000000001,
57.99999999999999,
66.66666666666666,
100
],
"000096": [
100,
95,
70,
88.00000000000001,
0,
84.00000000000001,
49.00000000000001,
54,
33.33333333333333,
100
],
"000097": [
100,
86.99999999999999,
77,
65,
0,
88.00000000000001,
55.00000000000001,
54,
66.66666666666666,
100
],
"000099": [
100,
82,
72,
67,
0,
88.00000000000001,
55.00000000000001,
54,
66.66666666666666,
0
],
"000100": [
61,
85,
62,
88.00000000000001,
0,
69,
46.00000000000001,
54,
66.66666666666666,
100
],
"000103": [
100,
93,
68,
88.00000000000001,
0,
79,
46.00000000000001,
54,
66.66666666666666,
100
],
"000104": [
37,
80,
76,
72,
0,
85,
46.00000000000001,
54,
66.66666666666666,
0
],
"000106": [
100,
80,
76,
72,
0,
85,
46.00000000000001,
54,
33.33333333333333,
0
],
"000108": [
100,
80,
76,
72,
0,
85,
46.00000000000001,
54,
66.66666666666666,
0
],
"000109": [
40,
80,
76,
72,
0,
85,
46.00000000000001,
54,
0,
100
],
"000110": [
70,
57.99999999999999,
73,
39,
0,
72,
57.99999999999999,
54,
100,
0
],
"000111": [
70,
89,
93.99999999999999,
69,
100,
100,
65,
54,
33.33333333333333,
0
],
"000114": [
51,
85,
75,
82,
0,
82.99999999999999,
65,
54,
100,
100
],
"000115": [
0,
85,
75,
82,
0,
82.99999999999999,
65,
54,
33.33333333333333,
100
],
"000116": [
32,
95,
76,
79,
0,
82.99999999999999,
55.00000000000001,
54,
100,
0
],
"000121": [
100,
82,
72,
67,
0,
88.00000000000001,
55.00000000000001,
54,
66.66666666666666,
100
],
"000122": [
49.00000000000001,
92.00000000000001,
81.00000000000001,
76,
0,
90,
55.00000000000001,
54,
0,
0
],
"000125": [
0,
92.00000000000001,
81.00000000000001,
76,
0,
90,
55.00000000000001,
54,
0,
100
],
"000126": [
100,
90,
86,
64,
0,
95,
55.00000000000001,
54,
66.66666666666666,
0
],
"000129": [
32,
90,
86,
64,
0,
95,
55.00000000000001,
54,
33.33333333333333,
0
],
"000131": [
32,
90,
86,
64,
100,
95,
55.00000000000001,
54,
66.66666666666666,
0
],
"000132": [
100,
90,
86,
64,
100,
95,
55.00000000000001,
54,
66.66666666666666,
0
],
"000133": [
100,
75,
73,
64,
66.66666666666666,
95,
55.00000000000001,
54,
66.66666666666666,
0
],
"000134": [
10,
100,
100,
100,
100,
100,
55.00000000000001,
54,
33.33333333333333,
0
],
"000135": [
49.00000000000001,
85,
72,
76,
100,
72,
55.00000000000001,
54,
66.66666666666666,
100
],
"000137": [
18,
77,
70,
100,
0,
25,
55.00000000000001,
54,
33.33333333333333,
0
],
"000140": [
100,
90.99999999999999,
76,
84.00000000000001,
66.66666666666666,
77,
55.00000000000001,
54,
100,
100
],
"000142": [
100,
90.99999999999999,
76,
84.00000000000001,
0,
77,
55.00000000000001,
54,
100,
100
],
"000143": [
100,
99,
86,
88.00000000000001,
0,
90.99999999999999,
55.00000000000001,
54,
33.33333333333333,
100
],
"000145": [
100,
99,
86,
88.00000000000001,
33.33333333333333,
90.99999999999999,
55.00000000000001,
54,
100,
0
],
"000146": [
100,
99,
61,
100,
66.66666666666666,
30,
55.00000000000001,
54,
100,
0
],
"000147": [
100,
80,
71,
60,
66.66666666666666,
80,
51,
54,
100,
100
],
"000148": [
100,
100,
74,
100,
0,
53,
51,
54,
33.33333333333333,
100
],
"000150": [
55.00000000000001,
68,
71,
45,
0,
70,
56.99999999999999,
54,
66.66666666666666,
100
],
"000151": [
100,
86,
77,
70,
0,
79,
59,
54,
66.66666666666666,
0
],
"000152": [
41,
95,
81.00000000000001,
81.00000000000001,
0,
79,
59,
54,
33.33333333333333,
0
],
"000153": [
41,
82,
81.00000000000001,
68,
0,
86,
56.99999999999999,
52,
33.33333333333333,
0
],
"000155": [
100,
76,
84.00000000000001,
56.99999999999999,
0,
96,
56.00000000000001,
52,
100,
0
],
"000156": [
55.00000000000001,
96,
90,
74,
0,
100,
63,
52,
100,
0
],
"000157": [
100,
77,
75,
62,
0,
86,
63,
52,
100,
100
],
"000160": [
33,
55.00000000000001,
86,
37,
0,
80,
62,
60,
33.33333333333333,
100
],
"000161": [
100,
100,
77,
86.99999999999999,
0,
93,
62,
60,
100,
50
]
}

zhao_face.js

/*
 * FaceMap class - holds all informaiton about one mapped
 * face and is able to draw itself.
 */  

// remove this or set to false to enable full program (load will be slower)
// var DEBUG_MODE = true;

// this can be used to set the number of sliders to show
// var NUM_SLIDERS = 4;

// other variables can be in here too
// here's some examples for colors used

// angleMode(DEGREES);
// given a segment, this returns the average point [x, y]
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 ];
}

// This where you define your own face object
/*
 * s1:tilt_value is in degrees from -30 to 25 and controls how the lips rotate
 * s2:lipsHeight ranges from 0.3 to -1 and controls the distance between nose and mouth
 * s3:lipsSize ranges from 0.7 to 1.5 and controls the scale of the mouth
 * s4:browpeakX ranges from -7 to -4 and controls the x position of the browpeak
 * s5:browpeakY ranges from -3 to -5 and controls the y position of the browpeak
 * s6:eyelashLength ranges from 1 to 3.5 and controls the length of the eyelash and eyeshadows
 * s7:nevusX ranges from 3 to 5 and controls the x position of the nevus
 * s8:nevusY ranges from 1 to 6 and controls the y position of the nevus
 * s9: blurLength decides how long the eyeshadow flows down the face
 */
function ZhaoFace() {
  const green = [210,221,185];//green
  const blue = [179, 198, 193];
  const fg_color3 = [151, 102, 52];
  const red = [196, 29, 54];
  const pink = [240, 55, 144];
  const purple = [222, 199, 255];
  const faceColor = [217, 160, 143];
  const black = [0,0,0];
  const darkblue = [49, 50, 56];

  // these are state variables for a face

  this.eyelashLength = 0.56;
  this.eyeShape = 1;
  this.tearValue = 1;
  this.lipColor = 0.5;   


  // this draws a segment, and do_loop will connect the ends if true
  this.draw_segment = function(segment, do_loop) {
    for(let i=0; i<segment.length; i++) {
        let px = segment[i][0];
        let py = segment[i][1];
        ellipse(px, py, 0.1);
        if(i < segment.length - 1) {
          let nx = segment[i+1][0];
          let ny = segment[i+1][1];
          line(px, py, nx, ny);
        }
        else if(do_loop) {
          let nx = segment[0][0];
          let ny = segment[0][1];
          line(px, py, nx, ny);
        }
    }
  }

  /*
   * Draw the face with position lists that include:
   *    chin, right_eye, left_eye, right_eyebrow, left_eyebrow
   *    bottom_lip, top_lip, nose_tip, nose_bridge, 
   */  
  this.draw = function(positions) {
  // scale(2.5/10) //a quarter of the original size
  let left_eye_pos = segment_average(positions.left_eye);
  let right_eye_pos = segment_average(positions.right_eye);
  //head----------------------------------------------------
  noStroke();
  push();
    translate(-2/4,0.5/4);
    rotate(-27);
    fill(blue);//blue
    ellipse(0,0, 30/2.2/4,5);
  pop();

  fill(faceColor);
  push();
    translate(2.3/4,0);
    rotate(15);
    ellipse(0,0, 30/2.2/4, 5);
  pop();

  //nose----------------------------------------------------
  let nose_top = positions.nose_bridge[0];
  let nose_bottom = positions.nose_bridge[3];
  let nose32 = positions.nose_tip[1];
  let nose34 = positions.nose_tip[3];
  let nose_apex = positions.nose_tip[2];

  let nd = nose_apex[1]-nose_bottom[1];

  // print(dist(nose_bottom[0],nose_bottom[1],nose_apex[0],nose_apex[1]));

  let nose_end = null;
  let nose_hole = null;
  let eyebrow_start = null;
  let eyebrow_end = null;
  let eyebrow_peak = null;
  let dx = null;
  let dy = null;
  let rightY = null;
  let leftY = null;


 
  noFill();
  beginShape();
  //turn right
  if(nose_top[0]<nose_bottom[0]&&abs(nose_top[0]-nose_bottom[0])>=0.05){
    if(nd >=0.33){
      nose_end = positions.nose_tip[2];
      nose_apex = positions.nose_tip[2]
    }
    else{
      nose_end = positions.nose_tip[0];      
    }
    eyebrow_start = positions.right_eyebrow[0];
    eyebrow_peak = positions.right_eyebrow[2];
    eyebrow_end = positions.right_eyebrow[4];
    // nose_hole = positions;
    dx = 0.55;
    rightY = right_eye_pos[1]+0.2;
    leftY = left_eye_pos[0]+0.7;
 
  }
  else if(abs(nose_top[0]-nose_bottom[0])<0.05){
    nose_end = positions.nose_tip[2];
    eyebrow_start = positions.right_eyebrow[0];
    eyebrow_peak = positions.right_eyebrow[2];
    eyebrow_end = positions.right_eyebrow[4];
    rightY = right_eye_pos[1]+0.4;
    leftY = left_eye_pos[0]+0.4;
    dx = 0.55;

  }
  //turn left
  else{
    if(nd > 0.33){
      nose_end = positions.nose_tip[3];
      nose_apex = positions.nose_tip[3];

    }
    else{
      nose_end = positions.nose_tip[4];      
    }
    eyebrow_start = positions.left_eyebrow[4];
    eyebrow_peak = positions.left_eyebrow[2];
    eyebrow_end = positions.left_eyebrow[1];
    dx = -0.55;
    rightY = right_eye_pos[1]+0.7;
    leftY = left_eye_pos[0]+0.2;
  }
  //right eyes ----------------------------------------------------
  var rightX = right_eye_pos[0]+0.2;

  

  if(this.eyeShape == 1){//quad
    var Dx = 2.5/4;
    var Dy = 0.3;
    var e1={x:rightX-Dx,y:rightY},e2={x:rightX,y:rightY-Dy},
        e3={x:rightX+Dx,y:rightY},e4={x:rightX,y:rightY+Dy};

    // eyelash-----------------------------------
    stroke(0);
    strokeWeight(0.075);
    push();
      translate(rightX,rightY);
      for(i=0;i<=7;i++){
          if (i == 3||i == 4) {
            stroke(faceColor);
          } 
          else {
            stroke(0);
          }
          rotate(45*i);
          strokeCap(SQUARE);
          strokeWeight(0.075);
          line(0,0,0,-this.eyelashLength);
      }
      push();
        noStroke();
        fill(faceColor);
        scale(this.eyelashLength*2);//0.25~0.875
        ellipse(0,0,0.7,0.6);
      pop();
    pop();
    
    fill(255,245,245);
    stroke(0);
    quad(e1.x,e1.y,e2.x,e2.y,e3.x,e3.y,e4.x,e4.y);
    fill(217, 184, 198);
    ellipse(rightX,rightY,0.5/4,0.5);

  }


  else if(this.eyeShape ==0){//cross
    noFill();
    stroke(0);
    push();
      var leftX = left_eye_pos[0]-0.3;//-0.4
      translate(rightX,rightY);
      rotate(45);
      for(i=0;i<=4;i++){
        rotate(90*i);
        strokeWeight(0.075);
        strokeCap(SQUARE);
        line(0,0,0,-1.7/4);
      }
    pop();


  }
  else{//ellipse

  // eyelash-----------------------------------
  stroke(0);
  strokeWeight(0.075);
  push();
    translate(rightX,rightY);
    for(i=0;i<=7;i++){
        if (i == 3||i == 4) {
          stroke(faceColor);
        } 
        else {
          stroke(0);
        }
        rotate(45*i);
        strokeCap(SQUARE);
        strokeWeight(0.075);
        line(0,0,0,-this.eyelashLength);
    }

    noStroke();
    push();
      fill(faceColor);
      scale(this.eyelashLength*2);//0.25~0.875
      ellipse(0,0,1,0.5);
    pop();
  pop();

    fill(255,245,245);
    stroke(0);
    ellipse(rightX,rightY,1,0.5);//right

    //pupils----------------------------------------------------
    fill(217, 184, 198);
    ellipse(rightX,rightY, 0.5/4, 0.5); 

  }
 
  

  //left cross eye----------------------------------------------------
  noFill();
  stroke(0);
  push();
    var leftX = left_eye_pos[0]-0.3;//-0.4
    translate(leftX,leftY);
    rotate(45);
    for(i=0;i<=4;i++){
        rotate(90*i);
        strokeWeight(0.3/4);
        strokeCap(SQUARE);
        line(0,0,0,-1.7/4);
    }
  pop();

  strokeWeight(0.075);
    curveVertex(eyebrow_end[0]+dx,eyebrow_end[1]);//eyebrow ends
    curveVertex(eyebrow_end[0]+dx,eyebrow_end[1]);
    curveVertex(eyebrow_peak[0]+dx/2,eyebrow_peak[1]);//browpeak
    curveVertex(eyebrow_start[0]+dx/3,eyebrow_start[1]);//browstart  
    curveVertex(nose_top[0],nose_top[1]);//connect brow and nose
    curveVertex(nose_bottom[0], nose_bottom[1]);
    curveVertex(nose_apex[0],nose_apex[1]);//nose apex
    curveVertex(nose_end[0],nose_end[1]);//nose end
    curveVertex(nose_end[0],nose_end[1]);//nose end
  endShape();


  // mouth----------------------------------------------------
  let mouth_left = positions.top_lip[0];//48
  let mouth_right = positions.top_lip[6];//54


  let lipbow1 = positions.top_lip[2];//50
  let lipbow2 = positions.top_lip[4];//52

  let lip62 = positions.top_lip[9];//62
  let lip66 = positions.bottom_lip[9];//66
  let lip61 = positions.bottom_lip[10];
  let lip65 = positions.bottom_lip[10];

  let lip57 = positions.bottom_lip[3];//57
  let lip51 = positions.top_lip[3];//51
  let lip56 = positions.bottom_lip[2];
  let lip58 = positions.bottom_lip[4];

  let mouthHei = lip57[1]-lipbow1[1];//57-50
  let mouthWid = mouth_right[0]-mouth_left[0];
  let mouthY = mouthHei/2+lip51[1];//57-50
  let mouthX = mouthWid/2+mouth_left[0];

  let openWid = mouthWid*0.85;
  let openHei = lip66[1]-lip62[1];
  let openY = lip62[1]+openHei/2;
  let openX = lip61[0]+(lip65[0]-lip61[0])/2;

  
  // // text---------------------------------------------------
  // textSize(0.08);
  // fill(0);
  // noStroke();
  // for(let i = 0;i<positions.bottom_lip.length;i++){
  //   let b = positions.bottom_lip[i];
  //   let t = positions.top_lip[i];
  //   text(i,t[0],t[1]);
  //   text(i,b[0],b[1]);
  // }

  //lips
  noStroke();
  if (this.lipColor == 0) {
    fill(red);

  } 
  else {
    fill(black);
  }
  beginShape();
    curveVertex(mouth_left[0],mouth_left[1]);
    curveVertex(lipbow1[0],lipbow1[1]);
    // curveVertex(lip51[0],lip51[1]);
    curveVertex(lipbow2[0],lipbow2[1]);
    curveVertex(mouth_right[0],mouth_right[1]);
    curveVertex(lip56[0],lip56[1]);
    // curveVertex(lip57[0],lip57[1]);
    curveVertex(lip58[0],lip58[1]);
  endShape(CLOSE);

  //open
  var ox = 0.2;
  fill(faceColor);
  beginShape();
    curveVertex(mouth_left[0]+ox,mouth_left[1]);
    curveVertex(lip62[0],lip62[1]);
    curveVertex(mouth_right[0]-ox,mouth_right[1]);
    curveVertex(lip66[0],lip66[1]);
  endShape(CLOSE);



  //tears----------------------------------------------------
  strokeWeight(0.05);
  let rEyeDis = 0.375;
  let q1 = {x:leftX, y:leftY+rEyeDis};
  let tW = 0.5/4;
  let tH = 1/4;
  let q2 = {x:q1.x-tW, y:q1.y+tH};
  let q3 = {x:q1.x, y:q1.y+2*tH};
  let q4 = {x:q1.x+tW, y:q1.y+tH};
  var tearD = 2.5/4;//diatance between each tear

      
      stroke(255);
      fill(purple);
      quad(q1.x,q1.y,q2.x,q2.y,q3.x,q3.y,q4.x,q4.y);

}

  /* set internal properties based on list numbers 0-100 */
  this.setProperties = function(settings) {
    this.lipColor = int(map(settings[0], 0, 100, 0, 1));
    this.eyeShape = int(map(settings[1], 0, 100, 0, 2));
    this.tearValue = int(map(settings[2], 0, 100, 0, 3));
    this.eyelashLength = map(settings[3],0,100,0.25,0.875);
  }

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    let settings = new Array(2);
    settings[0] = int(map(this.lipColor,0, 1, 0, 100));
    settings[1] = int(map(this.eyeShape, 0, 2, 0, 100));
    settings[2] = int(map(this.tearValue, 0, 3, 0, 100));
    settings[3] = map(this.eyelashLength, 0.25,0.875, 0, 100);
    return settings;
  }
}

zhao_training_values.json


{
  "000001": [
    25,
    87,
    0,
    28
  ],
  "000002": [
    0,
    100,
    0,
    41
  ],
  "000005": [
    0,
    100,
    33,
    72
  ],
  "000006": [
    0,
    100,
    33,
    50
  ],
  "000007": [
    100,
    50,
    0,
    71
  ],
  "000009": [
    0,
    100,
    0,
    51
  ],
  "000010": [
    0,
    100,
    0,
    68
  ],
  "000013": [
    100,
    50,
    0,
    93.99999999999999
  ],
  "000015": [
    100,
    50,
    0,
    40
  ],
  "000016": [
    100,
    50,
    0,
    50
  ],
  "000018": [
    0,
    100,
    0,
    39
  ],
  "000020": [
    100,
    0,
    0,
    24.000000000000004
  ],
  "000023": [
    100,
    50,
    0,
    64
  ],
  "000025": [
    100,
    50,
    0,
    18
  ],
  "000028": [
    0,
    100,
    0,
    41.99999999999999
  ],
  "000029": [
    0,
    100,
    0,
    41.99999999999999
  ],
  "000030": [
    100,
    50,
    0,
    44.00000000000001
  ],
  "000031": [
    0,
    100,
    33,
    43.00000000000001
  ],
  "000032": [
    100,
    50,
    0,
    22.000000000000004
  ],
  "000035": [
    0,
    100,
    0,
    93
  ],
  "000037": [
    100,
    50,
    0,
    32
  ],
  "000038": [
    100,
    50,
    0,
    61.999999999999986
  ],
  "000040": [
    0,
    100,
    0,
    85
  ],
  "000041": [
    100,
    50,
    0,
    39
  ],
  "000042": [
    0,
    100,
    0,
    39
  ],
  "000043": [
    0,
    100,
    0,
    100
  ],
  "000044": [
    0,
    100,
    0,
    72
  ],
  "000045": [
    0,
    100,
    0,
    48.00000000000001
  ],
  "000047": [
    0,
    100,
    0,
    72
  ],
  "000048": [
    100,
    0,
    0,
    44.00000000000001
  ],
  "000050": [
    100,
    50,
    0,
    58.00000000000001
  ],
  "000051": [
    100,
    50,
    0,
    43.00000000000001
  ],
  "000052": [
    100,
    50,
    0,
    18
  ],
  "000054": [
    0,
    100,
    0,
    73.00000000000001
  ],
  "000055": [
    100,
    50,
    0,
    55.00000000000001
  ],
  "000056": [
    100,
    50,
    0,
    64
  ],
  "000058": [
    0,
    100,
    0,
    78
  ],
  "000060": [
    100,
    100,
    0,
    30.999999999999993
  ],
  "000065": [
    100,
    50,
    0,
    48.00000000000001
  ],
  "000068": [
    100,
    50,
    0,
    48.00000000000001
  ],
  "000069": [
    100,
    50,
    0,
    97
  ],
  "000071": [
    0,
    100,
    0,
    97
  ],
  "000073": [
    0,
    100,
    0,
    68.99999999999999
  ],
  "000076": [
    100,
    50,
    0,
    68.99999999999999
  ],
  "000077": [
    0,
    100,
    0,
    100
  ],
  "000078": [
    0,
    100,
    0,
    64
  ],
  "000079": [
    100,
    50,
    0,
    51
  ],
  "000080": [
    100,
    50,
    0,
    36
  ],
  "000081": [
    100,
    50,
    0,
    28.000000000000007
  ],
  "000083": [
    0,
    100,
    0,
    66.00000000000001
  ],
  "000085": [
    0,
    100,
    0,
    81.00000000000001
  ],
  "000086": [
    0,
    100,
    0,
    41.99999999999999
  ],
  "000088": [
    0,
    100,
    0,
    27
  ],
  "000091": [
    100,
    50,
    0,
    81.00000000000001
  ],
  "000092": [
    0,
    50,
    0,
    54
  ],
  "000096": [
    0,
    100,
    0,
    80
  ],
  "000097": [
    0,
    100,
    0,
    80
  ],
  "000099": [
    0,
    100,
    0,
    50
  ],
  "000100": [
    0,
    100,
    0,
    50
  ],
  "000103": [
    0,
    100,
    0,
    65
  ],
  "000104": [
    100,
    100,
    0,
    33.00000000000001
  ],
  "000106": [
    0,
    100,
    0,
    50
  ],
  "000108": [
    0,
    100,
    0,
    34
  ],
  "000109": [
    100,
    50,
    0,
    45
  ],
  "000110": [
    0,
    100,
    0,
    56.000000000000014
  ],
  "000111": [
    0,
    100,
    0,
    43.00000000000001
  ],
  "000114": [
    100,
    50,
    0,
    58.00000000000001
  ],
  "000115": [
    100,
    50,
    0,
    32
  ],
  "000116": [
    100,
    50,
    0,
    15.999999999999998
  ],
  "000117": [
    0,
    100,
    0,
    56.000000000000014
  ],
  "000118": [
    0,
    100,
    0,
    56.000000000000014
  ],
  "000121": [
    0,
    100,
    0,
    100
  ],
  "000122": [
    0,
    100,
    0,
    67
  ],
  "000125": [
    100,
    50,
    0,
    34
  ],
  "000126": [
    0,
    100,
    0,
    76
  ],
  "000129": [
    100,
    50,
    0,
    92.00000000000001
  ],
  "000131": [
    0,
    100,
    0,
    39
  ],
  "000132": [
    0,
    100,
    0,
    39
  ],
  "000133": [
    0,
    100,
    0,
    72
  ],
  "000134": [
    100,
    50,
    0,
    30
  ],
  "000135": [
    100,
    50,
    0,
    72
  ],
  "000137": [
    100,
    50,
    0,
    44.00000000000001
  ],
  "000140": [
    0,
    100,
    0,
    46.99999999999999
  ],
  "000142": [
    0,
    100,
    0,
    58.00000000000001
  ],
  "000143": [
    100,
    50,
    0,
    54
  ],
  "000145": [
    0,
    100,
    0,
    29.000000000000004
  ],
  "000146": [
    0,
    100,
    0,
    29.000000000000004
  ],
  "000147": [
    0,
    100,
    0,
    46.000000000000014
  ],
  "000148": [
    0,
    100,
    0,
    46.000000000000014
  ],
  "000150": [
    100,
    50,
    0,
    56.000000000000014
  ],
  "000151": [
    0,
    100,
    0,
    0
  ],
  "000152": [
    100,
    50,
    0,
    0
  ],
  "000153": [
    100,
    50,
    0,
    49.00000000000001
  ],
  "000155": [
    0,
    100,
    0,
    100
  ],
  "000156": [
    0,
    100,
    0,
    39
  ],
  "000157": [
    0,
    100,
    0,
    79
  ],
  "000160": [
    100,
    50,
    0,
    20
  ],
  "000161": [
    0,
    100,
    0,
    56.99999999999999
  ],
  "000014": [
    0,
    100,
    0,
    85
  ],
  "000064": [
    100,
    100,
    0,
    41.99999999999999
  ]
}