let beeps;

let myFont;

let circleArray = [];

let colorHolder = [];

let colorNames = [

  "red",

  "orange",

  "yellow",

  "light green",

  "dark green",

  "light blue",

  "dark blue",

  "purple",

  "pink",

];

​

let colorCodes = [0, 30, 55, 80, 155, 185, 225, 270, 310];

score = 0;

​

let video; // webcam input

let model; // BlazeFace machine-learning model

let face; // detected face

let firstFace = true; // print details when a face is first found

​

function preload() {

  myFont = loadFont("CODE Bold.otf");

  correct = loadSound("correct.wav");

  beeps = loadSound("beeps.wav");

}

​

function setup() {

  createCanvas(700, 550);

  colorMode(HSB, 360);

​

  setTimeout(firstscreen, 0.01);

  beeps.play();

  setInterval(backgroundsetting, 2500);

  setInterval(pickcolors, 2500);

  setInterval(assigncolors, 2500);

  setInterval(playercorrectresult, 800);

​

  let c0 = new Circle(350, 100, 110); // top circle

  let c1 = new Circle(600, 275, 110); // right circle

  let c2 = new Circle(350, 450, 110); // bottom circle

  let c3 = new Circle(100, 275, 110); //left circle

​

  circleArray.push(c0);

  circleArray.push(c1);

  circleArray.push(c2);

  circleArray.push(c3);

​

  video = createCapture(VIDEO);

  video.hide();

  loadFaceModel(); //load the BlazeFace model

}

​

async function loadFaceModel() {

  model = await blazeface.load();

  // face detection code adapted from Jeff Thompson: jeffreythompson.org

}

​

function firstscreen() {

  background(0);

  noStroke();

  textFont(myFont, 25);

  textAlign(CENTER, CENTER);

  fill(360);

  text(

    "Move your eyes to the\n color of the prompt in\n under 3 seconds!",

    width / 2,

    height / 2

  );

}

​

function backgroundsetting() {

  background(0);

}

​

function draw() {

  // background(0);

  // pickcolors();

  // assigncolors();

​

  circleArray[0].show();

  circleArray[1].show();

  circleArray[2].show();

  circleArray[3].show();

​

  //score button

  fill(360);

  noStroke();

  textFont(myFont, 19);

  textAlign(CENTER, CENTER);

  text("Score : " + score, 630, 40);

​

  // if the video is active and the model has

  // been loaded, get the face from this frame

  if (video.loadedmetadata && model !== undefined) {

    getFace();

  }

  // if we have face data, display it

  if (face !== undefined) {

    // image(video, 0, 0, width, height);

    // if this is the first face we've

    // found, print the info

    if (firstFace) {

      console.log(face);

      firstFace = false;

    }

​

    // the model returns us a variety of info

    let rightEye = face.landmarks[0];

    let leftEye = face.landmarks[1];

    let nose = face.landmarks[2];

    let mouth = face.landmarks[3];

    let rightEar = face.landmarks[4];

    let leftEar = face.landmarks[5];

​

    //scaling points on the video dimensions to points on

    //the canvas dimesnions using map() function below

    rightEye = scalePoint(rightEye);

    leftEye = scalePoint(leftEye);

    nose = scalePoint(nose);

    mouth = scalePoint(mouth);

​

    rightEye.x = 700 - rightEye.x;

    //what do do at those points:

    fill(360);

    ellipse(rightEye.x, rightEye.y, 10, 10);

  }

}

​

function playercorrectresult() {

  //   // if the video is active and the model has

  //   // been loaded, get the face from this frame

  //   if (video.loadedmetadata && model !== undefined) {

  //     getFace();

  //   }

  // if we have face data, display it

  if (face !== undefined) {

    // image(video, 0, 0, width, height);

    // if this is the first face we've

    // found, print the info

    if (firstFace) {

      console.log(face);

      firstFace = false;

    }

​

    // the model returns us a variety of info

    let rightEye = face.landmarks[0];

    let leftEye = face.landmarks[1];

    let nose = face.landmarks[2];

    let mouth = face.landmarks[3];

    let rightEar = face.landmarks[4];

    let leftEar = face.landmarks[5];

​

    //scaling points on the video dimensions to points on

    //the canvas dimesnions using map() function below

    rightEye = scalePoint(rightEye);

    leftEye = scalePoint(leftEye);

    nose = scalePoint(nose);

    mouth = scalePoint(mouth);

    rightEye.x = 700 - rightEye.x;

​

    //   let counter = 0;

    // let randNumber = Math.floor(Math.random() * (3 + 1)) + 0; //should be a random number from 0 to 3

    // correctCircle = randNumber;

​

    if (

      rightEye.x < circleArray[correctCircle].maxX &&

      rightEye.x > circleArray[correctCircle].minX &&

      rightEye.y < circleArray[correctCircle].maxY &&

      rightEye.y > circleArray[correctCircle].minY

    ) {

      background(155, 360, 340);

      //center color word prompt

      noStroke();

      textFont(myFont, 50);

      textAlign(CENTER, CENTER);

      fill(0);

      text("CORRECT!", width / 2, height / 2);

      correct.play();

      score = score + 1;

    }

  }

}

​

function pickcolors() {

  while (colorHolder.length < 4) {

    let tempNumber = Math.floor(Math.random() * (8 + 1));

    if (!colorHolder.includes(tempNumber)) {

      colorHolder.push(tempNumber);

    }

  }

​

  //center color word prompt

  promptText = colorNames[colorHolder[1]];

  promptColor = colorCodes[colorHolder[0]];

  noStroke();

  textFont(myFont, 50);

  textAlign(CENTER, CENTER);

  fill(promptColor, 360, 360);

  text(promptText, width / 2, height / 2);

}

​

function assigncolors() {

  let counter = 0;

  let randNumber = Math.floor(Math.random() * (3 + 1)) + 0; //should be a random number from 0 to 3

  correctCircle = randNumber;

​

  while (counter != 4) {

    circleArray[randNumber].color = colorCodes[colorHolder[counter]];

​

    if (randNumber == 3) {

      randNumber = 0;

    } else {

      randNumber = randNumber + 1;

    }

​

    counter = counter + 1;

  }

​

  colorHolder = [];

}

​

// a function that converts positions

// in the video to the canvas' dimensions

function scalePoint(pt) {

  let x = map(pt[0], 0, video.width, 0, width);

  let y = map(pt[1], 0, video.height, 0, height);

  return createVector(x, y);

}

​

// like loading the model, TensorFlow requires

// we get the face data using an async function

async function getFace() {

  // get predictions using the video as

  // an input source (can also be an image

  // or canvas!)

  const predictions = await model.estimateFaces(

    document.querySelector("video"),

    false

  );

​

  // false means we want positions rather than

  // tensors (ie useful screen locations instead

  // of super-mathy bits)

​

  // if we there were no predictions, set

  // the face to undefined

  if (predictions.length === 0) {

    face = undefined;

  }

​

  // otherwise, grab the first face

  else {

    face = predictions[0];

  }

}

​

class Circle {

  constructor(x, y, r) {

    this.x = x;

    this.y = y;

    this.r = r;

    this.maxX = x + r / 1.5;

    this.minX = x - r / 1.5;

    this.maxY = y + r / 1.5;

    this.minY = y - r / 1.5;

    this.color = 360;

  }

​

  show() {

    stroke(360);

    strokeWeight(2);

    fill(this.color, 360, 360);

    ellipse(this.x, this.y, this.r);

  }

}

​