//instructionPage = loadImage('instructions.png');

  // for (let i = 1; i <= carNum; i++) {

  //   carArray.push(new Sprite(spriteWidth, spriteHeight, 160, 80));

  //   carArray[i - 1].x = 80 + i * 20;

  //   carArray[i - 1].y = 100 * i;

  //   carArray[i - 1].spriteSheet = 'spritesheet.png';

  //   carArray[i - 1].anis.offset.x = 5;

  //   carArray[i - 1].anis.frameDelay = 8;

  //   carArray[i - 1].addAnis({

  //     move: { row: 0, frames: 16 },

  //   });

  //   carArray[i - 1].changeAni('move');

  //   carArray[i - 1].layer = 2;

  //   carArray[i - 1].visible = false;

  // }

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  video = createCapture(VIDEO);

  video.size(width, height);

  handpose = ml5.handpose(video, modelReady);

  handpose.on("predict", results => {

    predictions = results;

  });

  video.hide();

}

​

function draw() {

  background(255);

  flippedVideo = ml5.flipImage(video);

  // Calculate the aspect ratios for video and canvas

  videoAspectRatio = video.width / video.height;

  canvasAspectRatio = width / height;

  // Adjust video dimensions based on aspect ratios

  if (canvasAspectRatio > videoAspectRatio) {

    videoWidth = width;

    videoHeight = width / videoAspectRatio;

  } else {

    videoWidth = height * videoAspectRatio;

    videoHeight = height;

  }

  // Calculate video position

  video_x = (width - videoWidth) / 2;

  video_y = (height - videoHeight) / 2;

  if (currentPage == 1) {

    // display instructions page

    image(instructionPage, 0, 0, width, height);

  }

  else if (currentPage == 2) {

    // serial connection page

    if (!serialActive) {

      runSerialPage();

    } 

    else {

      // hides car animation

      for (let i = 0; i < carNum; i++) {

        carArray[i].visible = false;

      }

      // controlling page

      if (controlState) {

        runControllingPage();

      } 

      // device has been turned off

      else {

        runTorqueyOff();

      }

    }

  }

}

​

function readSerial(data) {

  if (data != null) {

    ////////////////////////////////////

    //READ FROM ARDUINO HERE

    ////////////////////////////////////

    if (int(trim(data)) == maxVoltReading) {

      controlState = true;

    }

    else if (int(trim(data)) == minVoltReading){

      controlState = false;

    }

    //////////////////////////////////

    //SEND TO ARDUINO HERE (handshake)

    //////////////////////////////////

    let sendToArduino = value + "\n";

    writeSerial(sendToArduino);

    // reset value

    value = defaultState;

  }

}

​

​

function drawKeypoints() {

  for (let i = 0; i < predictions.length; i += 1) {

    const prediction = predictions[i];

    let area = [0, 0, 0, 0, 0];

    for (let j = 0; j < prediction.landmarks.length; j += 1) {

      const keypoint = prediction.landmarks[j];

      fill(0, 255, 0);

      noStroke();

      let x = map(keypoint[0], 0, 640, 0, videoWidth);

      let y = map(keypoint[1], 0, 480, 0, videoHeight);

      ellipse(x, y, 10, 10);

      // count number of trues

      // -- helps to detect the area the detected hand is in

      if (withinLeft(x, y)) {

        area[0] += 1;

      }

      if (withinTopCenter(x, y)) {

        area[1] += 1;

      }

      if (withinRight(x, y)) {

        area[2] += 1;

      }

      if (withinMiddleCenter(x, y)) {

        area[3] += 1;

      }

      if (withinBottomCenter(x, y)) {

        area[4] += 1;

      }

      // end of count

    }

    // print index

    for (let i = 0; i < area.length; i += 1) {

      if (area[i] == 21) {

        value = i;

      }

    }

  }

}

​