let video;

let hands = [];

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

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

let overlayOpacity = 51; // 초기 웹캠 오버레이 투명도 (20%)

let buttonText = "GENERATE"; // 버튼 텍스트

let strokeColor = [255, 255, 255]; // 초기 선과 점의 색상 (흰색)

let sparkleSound; // 반짝이는 소리를 저장할 변수

​

function preload() {

  // Load the handpose model

  handPose = ml5.handPose();

​

  // Load the sparkle sound

  sparkleSound = loadSound("twinkle.wav"); // 소리 파일 이름에 맞게 수정

}

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(640, 480);

  video.hide();

  userStartAudio(); // p5.js에서 오디오 초기화

}

​

function draw() {

  background(0);

​

  // Render the mirrored webcam

  push();

  translate(width, 0);

  scale(-1, 1);

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

​

  // Apply a semi-transparent black overlay

  fill(0, overlayOpacity);

  noStroke();

  rect(0, 0, width, height);

  pop();

​

  // Detect handpose on every frame

  handPose.detect(video, gotHands);

​

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

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

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

​

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

        if (!isTouching) {

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

          points.push(midPoint);

​

          // Play the sparkle sound with random pitch and pan based on position

          if (sparkleSound.isLoaded()) {

            let randomPitch = random(0.5, 2.0); // 0.5배속(낮은 음)에서 2배속(높은 음) 사이

            sparkleSound.rate(randomPitch); // 음높이를 설정

​

            // Calculate pan based on horizontal position (-1: left, 1: right)

            let panValue = map(midPoint.x, 0, width, -1, 1);

            sparkleSound.pan(panValue); // 패닝 설정

​

            sparkleSound.play();

          }

​

          isTouching = true;

        }

      } else {

        isTouching = false;

      }

    }

  }

​

  // Draw the points and lines

  stroke(strokeColor[0], strokeColor[1], strokeColor[2]);

  strokeWeight(1.5);

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

    fill(strokeColor[0], strokeColor[1], strokeColor[2]);

    noStroke();

    circle(points[i].x, points[i].y, 10);

​

    if (i > 0) {

      stroke(strokeColor[0], strokeColor[1], strokeColor[2]);

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

    }

  }

​

  // Draw the button

  drawButton();

}

​

function drawButton() {

  const buttonWidth = 100;

  const buttonHeight = 40;

  const buttonX = (width - buttonWidth) / 2;

  const buttonY = height - buttonHeight - 30;

​

  stroke(255);

  strokeWeight(2);

  fill(0, 102);

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

​

  fill(255);

  noStroke();

  textAlign(CENTER, CENTER);

  textSize(16);

  textStyle(BOLD);

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

}

​

function gotHands(results) {

  hands = results;

}

​

function mousePressed() {

  const buttonWidth = 100;

  const buttonHeight = 50;

  const buttonX = (width - buttonWidth) / 2;

  const buttonY = height - buttonHeight - 30;

​

  if (

    mouseX > buttonX &&

    mouseX < buttonX + buttonWidth &&

    mouseY > buttonY &&

    mouseY < buttonY + buttonHeight

  ) {

    if (buttonText === "GENERATE") {

      overlayOpacity = 255;

      buttonText = "RESTART";

      strokeColor = [random(255), random(255), random(255)];

    } else if (buttonText === "RESTART") {

      location.reload();

    }

  }

}