​

// 1. Pinch with your thumb and index finger to generate stars

// 2. Twinkling sounds are panned based on the star’s position

// 3. Click <generate> button to display the drawn constellations in the night sky

// 4. Generated constellation changes to random color

​

​

​

let handPose;

let video;

let hands = [];

let points = []; // 손가락 맞닿는 위치에 그려지는 점들

let scatteredDots = []; // 버튼 클릭 후 뿌려지는 작은 점들

let isTouching = false; // 엄지,검지가 붙어있는지 상태 추적

let overlayOpacity = 51; // 시작부분 웹캠 오버레이 투명도 (20%)

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

let twinkleSound; // 손가락으로 점 생성시 사운드 플레이

let isBackgroundChanged = false; // 버튼 클릭 후 배경 검은색으로 바뀌는지 확인

let randomStrokeColor; // 버튼 클릭 후 점,선 랜덤 컬러로 변경

let dotIndex = 0; // 현재 나타낼 점의 인덱스

​

function preload() {

  // handpose 모델 불러오기

  handPose = ml5.handPose();

​

  // 별 반짝이는 소리 불러오기

  twinkleSound = loadSound("twinkle.wav");

}

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(640, 480);

  video.hide();

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

}

​

function draw() {

  if (isBackgroundChanged) {

    background(0); // 배경 검은색으로 바꾸기

​

    // 빠르게 하나씩 나타나는 점들 그리기

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

      if (i < scatteredDots.length) {

        fill(255); // 흰색

        noStroke();

        circle(scatteredDots[i].x, scatteredDots[i].y, scatteredDots[i].size);

      }

    }

​

    // 점이 아직 남아 있다면, 매 프레임에 하나씩 추가

    if (dotIndex < scatteredDots.length) {

      dotIndex++;

    }

  } else {

    background(0);

​

    // 웹캠 좌우반전 시키기(mirroring)

    push();

    translate(width, 0);

    scale(-1, 1);

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

​

    // 웹캠에 살짝 어두운 오버레이 씌우기

    fill(0, overlayOpacity);

    noStroke();

    rect(0, 0, width, height);

    pop();

​

    // 매 프레임마다 handpose 추적하기

    handPose.detect(video, gotHands);

  }

​

  // 손가락으로 그린 점들을 잇는 선 그리기

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

    // 배경이 검은색으로 바뀌고 랜덤한 컬러로 선 색 바꾸기

    let colorR = isBackgroundChanged ? randomStrokeColor[0] : 255;

    let colorG = isBackgroundChanged ? randomStrokeColor[1] : 255;

    let colorB = isBackgroundChanged ? randomStrokeColor[2] : 255;

​

    fill(colorR, colorG, colorB);

    noStroke();

    circle(points[i].x, points[i].y, 10); // 점 그리기

​

    if (i > 0) {

      stroke(colorR, colorG, colorB);

      line(points[i - 1].x, points[i - 1].y, points[i].x, points[i].y); // 선 그리기

    }

  }

​

  // 텍스트 버튼 그리기

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

}

​

function gotHands(results) {

  hands = results;

​

  // handpose 실행하기

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

    let hand = hands[i];

    let keypoints = hand.keypoints;

​

    // thumb tip, 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) < 15) {

        if (!isTouching) {

          let midPoint = createVector(

            (thumbPos.x + indexPos.x) / 2,

            (thumbPos.y + indexPos.y) / 2

          );

          points.push(midPoint);

​

          // 별 반짝이는 소리를 랜덤 피치로 재생

          if (twinkleSound.isLoaded()) {

            let randomPitch = random(0.5, 2.0); // 0.5배속(low)에서 2배속(high) 사이

            twinkleSound.rate(randomPitch); // pitch 설정

​

            // -1: left, 1: right

            // 캔버스 기준 왼쪽 생성 점은 왼쪽 패닝, 오른쪽 생성 점은 오른쪽 패닝

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

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

​

            twinkleSound.play();

          }

​

          isTouching = true;

        }

      } else {

        isTouching = false;

      }

    }

  }

}

​

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

​

      // 마우스 클릭 시 배경 검은색으로 바꾸기

      isBackgroundChanged = true;

      generateScatteredDots(80); // 배경에 흩뿌려지는 점 80개 생성

      dotIndex = 0; // 초기화

​

      // 랜덤한 컬러로 점과 선 변경

      randomStrokeColor = [random(120, 255), random(120, 255), random(120, 255)];

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

      location.reload();

    }

  }

}

​

function generateScatteredDots(numDots) {

  scatteredDots = [];

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

    scatteredDots.push({

      x: random(width),

      y: random(height),

      size: random(1, 4), // 흩뿌려지는 점들의 랜덤 생성 크기

    });

  }

}