​

let facemesh;

let video;

let predictions = [];

let margin = 10;

let mX, mY;

let screenSize=512;

let screenScale = 10;

let drawMode = false;

let circles = [];

let img;

let path = [];

let prevMouseX;

let prevMouseY;

let colors = ["#FC5882", "#FC5858", "#FC7958",

              "#FC9A58", "#FCAA58", "#FCE858",

              "#E8FC58", "#D3FC58", "#AAFC58",

              "#58FC58", "#58FCAA", "#58FCD3",

              "#58E8FC", "#58D3FC", "#58AAFC",

              "#5858FC", "#9658FC", "#8000FF",

              "#BF00FF", "#FC58FC", "#FC58D3", "#FC58AA"];

let currentColorIndex = 0;

let img_sunglasses;

let mic;

let img_mic;

​

function preload() {

  img = loadImage('asset/pen.png');

  img_sunglasses = loadImage('asset/sunglass.png');

  img_mic = loadImage('asset/mike.png');

}

​

function setup() {

  mic = new p5.AudioIn();

  mic.start();

  createCanvas(35*screenScale, 42*screenScale);

  video = createCapture(VIDEO);

  video.size(300, 300);

​

  facemesh = ml5.facemesh(video, modelReady);

  margin = int(((5*screenScale)/2));

  // This sets up an event that fills the global variable "predictions"

  // with an array every time new predictions are made

  facemesh.on("predict", results => {

    predictions = results;

  });

​

  // Hide the video element, and just show the canvas

  video.hide();

  background(colors[currentColorIndex]);

  //drawing func, if mouse is clicked

  //erase all of drawings, if 

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  if(drawMode == false){

    drawMic()

    drawBackground()

​

    image(video, margin, margin, 30*screenScale, 30*screenScale);

    // We can call both functions to draw all keypoints

    drawKeypoints();

    noStroke()

    mX = map(mouseX, 0, width, 0, 25)

    mY = map(mouseY, 0, height, -5, 15)

    c = hexToColor(colors[currentColorIndex], 100);

    fill(c)

    for(var i=margin+margin/2; i<30*screenScale+margin+margin/2; i+=20){

      for(var j=margin+margin/2; j<30*screenScale+margin+margin/2; j+=20){

        ellipse(i, j, mX+mY, mX+mY)

      }

    }

    drawForeground()

    //drawSet(); // 이 부분을 추가합니다.

  }

  else{

      if (mouseIsPressed) {

        path.push({ x: mouseX, y: mouseY });

        if (prevMouseX && prevMouseY) {

          strokeWeight(5);

          stroke(0);

          line(prevMouseX, prevMouseY, mouseX, mouseY);

        }

        prevMouseX = mouseX;

        prevMouseY = mouseY;

      } else {

        path = [];

        prevMouseX = null;

        prevMouseY = null;

      }

      for (let point of path) {

        //image(img, point.x-4, point.y-4, 7, 7);

      }

  }

}

​

function mousePressed() {

  drawMode = true;

}

​

function keyPressed() {

  if (keyCode === ESCAPE) {

    background(colors[currentColorIndex]);

    drawMode = !drawMode;

    video.loop();

  }

  if (key === 's') {

    currentColorIndex++;

    if (currentColorIndex >= colors.length) {

      currentColorIndex = 0;

    }

  }

}

​

​

function hexToColor(hex, alpha = 255) {

  let r = parseInt(hex.slice(1, 3), 16);

  let g = parseInt(hex.slice(3, 5), 16);

  let b = parseInt(hex.slice(5, 7), 16);

  return color(r, g, b, alpha);

}

​

​

function drawForeground(){

}

​

function drawBackground(){

  //circle(random(width),random(height), 10)

}

​

function drawKeypoints() {

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

    const keypoints = predictions[i].scaledMesh;

​

    // Draw facial keypoints.

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

      const [x, y] = keypoints[j];

      push();

      scale(1)

      translate(-200, -70); // 위치 조정

      let leyePoint = keypoints[36][0];

      let reyePoint = keypoints[280][0];

      if (j == 6) {

        // 선글라스를 그립니다.

        image(img_sunglasses, x, y, 105, 25);

      }else if (j == 4) {

        //rotate(leyePoint-reyePoint)

        image(img_mic, x, y, 50, 50);

      }

      pop();

    }

    push();

    scale(0.4);

    translate(-200, -70); // 위치 조정

    // Interact with body

    let leftShoulderX = keypoints[162][0] + margin; // 위치 조정

    let leftShoulderY = keypoints[162][1] + margin;

    let rightShoulderX = keypoints[127][0] + margin;

    let rightShoulderY = keypoints[127][1] + margin;

​

    if (rightShoulderY < leftShoulderY) {

      // 어깨 위치에 따라 선을 그립니다.

      strokeWeight(10);

      line(leftShoulderX, leftShoulderY, rightShoulderX, rightShoulderY);

    }

    pop();

  }

}

​

​

function drawMic() {

  // Get the volume from the mic

  let vol = mic.getLevel();

  //console.log(vol);

  // Map the volume to the height

  let h = map(vol, 0, 1, height/2, height/50);

  let theta = map(vol, 0, 1, 360, 0);

  let count = 200;

  c_start = color("yellow");

  c_end = color("silver");

  stroke(0);

  strokeWeight(4);

  fill(c_start)

  //rotate(theta)

  ellipse(0, 0, h)

  ellipse(width, 0, h)

  ellipse(0, height, h)

  ellipse(width, height, h)

}

​

// Function to draw a star shape

function drawStar(x, y, n, outerRadius, innerRadius) {

  fill(c_start)

  beginShape();

  for (let i = 0; i < 2 * n; i++) {

    let radius = i % 2 === 0 ? outerRadius : innerRadius;

    let angle = (i * PI) / n - HALF_PI;

    vertex(x + cos(angle) * radius, y + sin(angle) * radius);

  }

  endShape(CLOSE);

}