let video;

let hands = [];

let points = []; // 저장된 점들

let isTouching = false; // 손가락이 붙어있는 상태를 추적

​

function preload() {

  handPose = ml5.handPose();

}

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(640, 480);

  video.hide();

  handPose.detectStart(video, gotHands);

}

​

// Callback function for when handPose outputs data

function gotHands(results) {

  hands = results;

}

​

function draw() {

  background(0);

​

  // Render the mirrored webcam

  push(); // Save the current transformation

  translate(width, 0); // Move the origin to the right edge

  scale(-1, 1); // Flip horizontally

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

​

  // Apply a semi-transparent black overlay

  fill(0, 51); // Black with 20% opacity

  noStroke();

  rect(0, 0, width, height);

  pop(); // Restore the original transformation

​

  // Draw the tracked hand points and lines

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

    let hand = hands[i];

    let keypoints = hand.keypoints;

​

    // Get the positions of the thumb tip and index finger tip

    let thumbTip = keypoints.find((kp) => kp.name === "thumb_tip");

    let indexTip = keypoints.find((kp) => kp.name === "index_finger_tip");

​

    if (thumbTip && indexTip) {

      // Adjust positions for mirroring

      let thumbPos = createVector(width - thumbTip.x, thumbTip.y);

      let indexPos = createVector(width - indexTip.x, indexTip.y);

​

      // Check if the thumb and index finger are close enough

      if (thumbPos.dist(indexPos) < 15) {

        if (!isTouching) {

          // Add the average point between thumb and index to the points array

          let midPoint = createVector((thumbPos.x + indexPos.x) / 2, (thumbPos.y + indexPos.y) / 2);

          points.push(midPoint);

          isTouching = true; // 손가락이 붙었음을 표시

        }

      } else {

        isTouching = false; // 손가락이 떨어짐

      }

    }

  }

​

  // Draw the points and lines

  stroke(255);

  strokeWeight(2);

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

    fill(255);

    noStroke();

    circle(points[i].x, points[i].y, 15); // Draw the point

​

    if (i > 0) {

      stroke(255);

      line(points[i - 1].x, points[i - 1].y, points[i].x, points[i].y); // Draw the line

    }

  }

​

  // Draw the button

  drawButton();

}

​

function drawButton() {

  const buttonWidth = 100;

  const buttonHeight = 50;

  const buttonX = (width - buttonWidth) / 2; // Center the button horizontally

  const buttonY = height - buttonHeight - 30; // 30 pixels above the bottom edge

​

  // Draw the button rectangle with outline and rounded corners

  stroke(255);

  strokeWeight(2);

  fill(0, 102); // Black fill with 40% opacity

  rect(buttonX, buttonY, buttonWidth, buttonHeight, 5); // 5-pixel corner rounding

​

  // Draw the button text

  fill(255); // White text

  noStroke();

  textAlign(CENTER, CENTER);

  textSize(16);

  textStyle(BOLD);

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

}