/*
 * 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 bg_color = [225, 206, 187];
const fg_color = [151, 102, 52];
const stroke_color = [95, 52, 8];

function Face() {
  // 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

  /*
   * 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) {
    rotate(this.tilt_value);

    // head
    stroke(stroke_color);
    fill(fg_color);
    ellipse(0, 0, 3, 4);
    noStroke();

    // eyes
    if (this.eye_value === 2) {
      fill(bg_color);
      ellipse(-0.45, -0.73, 0.45, 0.27);
      ellipse( 0.45, -0.73, 0.45, 0.27);

      fill(fg_color);
      ellipse(-0.55, -0.73, 0.18, 0.18);
      ellipse( 0.36, -0.73, 0.18, 0.18);
    }

    // mouth
    fill(bg_color);
    ellipse(0, 0.64, 1.36, 0.25 * this.mouth_value);
  }

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

  /* get internal properties as list of numbers 0-100 */
  this.getProperties = function() {
    let settings = new Array(3);
    settings[0] = map(this.eye_value, 2, 3, 0, 100);
    settings[1] = map(this.mouth_value, 0.5, 8, 0, 100);
    settings[2] = map(this.tilt_value, -30, 30, 0, 100);
    return settings;
  }
}