let video;

let hands = [];

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

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

​

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() {

  // 캔버스 좌우 반전 설정

  push(); // 현재 상태 저장

  translate(width, 0); // 캔버스 너비만큼 이동

  scale(-1, 1); // x축 방향 반전

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

  pop(); // 이전 상태 복원

​

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

  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);

  }

}