let video;

let hands = [];

let points = []; // 흰색 점의 위치를 저장할 배열

let isTouching = false; // 손가락이 맞닿은 상태를 추적

let isEnterPressed = false; // Enter 키 상태를 추적

let showWebcam = true; // 웹캠 화면을 보여줄지 여부

​

function preload() {

  // Handpose 모델 로드

  handPose = ml5.handPose();

}

​

function setup() {

  createCanvas(640, 480);

​

  // 비디오 생성 및 숨기기

  video = createCapture(VIDEO);

  video.size(640, 480);

  video.hide();

​

  // Handpose 감지 시작

  handPose.detectStart(video, gotHands);

}

​

// Handpose 결과를 처리하는 콜백 함수

function gotHands(results) {

  hands = results;

}

​

function draw() {

  if (showWebcam) {

    // 웹캠 화면 렌더링

    push();

    translate(width, 0);

    scale(-1, 1);

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

    pop();

  } else {

    // 검은색 배경

    background(0);

  }

​

  // 감지된 모든 손에 대해 처리

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

    let hand = hands[i];

​

    // 손의 키포인트들을 순회

    for (let j = 0; j < hand.keypoints.length; j++) {

      let keypoint = hand.keypoints[j];

      fill(0, 255, 0);

      noStroke();

      circle(width - keypoint.x, keypoint.y, 10);

    }

​

    // 엄지(Thumb)와 검지(Index)의 끝 좌표

    let thumbTip = hand.keypoints[4];

    let indexTip = hand.keypoints[8];

​

    // 반전된 좌표

    let thumbTipX = width - thumbTip.x;

    let indexTipX = width - indexTip.x;

​

    // 두 점 간 거리 계산

    let d = dist(thumbTipX, thumbTip.y, indexTipX, indexTip.y);

​

    if (d < 20 && !isTouching) {

      points.push({ x: thumbTipX, y: thumbTip.y });

      isTouching = true;

    } else if (d >= 20) {

      isTouching = false;

    }

  }

​

  // 저장된 흰색 점 그리기

  fill(255);

  noStroke();

  for (let pt of points) {

    circle(pt.x, pt.y, 10);

  }

​

  // 하단 중앙에 버튼 생성

  drawButton();

}

​

// 버튼 그리기

function drawButton() {

  let buttonWidth = 120;

  let buttonHeight = 50;

  let buttonX = width / 2 - buttonWidth / 2;

  let buttonY = height - buttonHeight - 30;

​

  if (isEnterPressed) {

    // Enter 키를 누를 때 버튼 상태

    fill(255);

    stroke(255);

    strokeWeight(2);

    rect(buttonX, buttonY, buttonWidth, buttonHeight, 10);

​

    fill(0); // 텍스트 색을 검은색으로 변경

    noStroke();

    textAlign(CENTER, CENTER);

    textSize(16);

    textStyle(BOLD);

    text("GENERATE", buttonX + buttonWidth / 2, buttonY + buttonHeight / 2);

  } else {

    // 기본 버튼 상태

    noFill();

    stroke(255);

    strokeWeight(2);

    rect(buttonX, buttonY, buttonWidth, buttonHeight, 10);

​

    fill(255); // 텍스트 색을 흰색으로 설정

    noStroke();

    textAlign(CENTER, CENTER);

    textSize(16);

    textStyle(BOLD);

    text("GENERATE", buttonX + buttonWidth / 2, buttonY + buttonHeight / 2);

  }

}

​

// 키보드 이벤트 처리

function keyPressed() {

  if (keyCode === ENTER) {

    isEnterPressed = true; // Enter 키 눌림 상태로 설정

  }

}

​

function keyReleased() {

  if (keyCode === ENTER) {

    isEnterPressed = false; // Enter 키 상태 해제

    showWebcam = false; // 웹캠 화면 대신 검은색 배경 표시

  }

}