let video;

    let predictions = [];

    let canvas_w = 800;

    let canvas_h = 450;

    let video_w = 240;

    let video_h = 180;

    let margin_left = 420;

    let margin_top = 80;

    let img_sonic;

    let song;

    let flag_music = false;

let angle = 0;

    function setup() {

      cnv = createCanvas(canvas_w, canvas_h);

      centerCanvas();

      video = createCapture(VIDEO);

      video.size(video_w, video_h);

​

      facemesh = ml5.facemesh(video, modelReady);

      img_sonic = loadImage('Sonic.jpeg');

​

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

      mic = new p5.AudioIn();

      mic.start();

      cnv.mousePressed(userStartAudio);

      angleMode(DEGREES);

  // Create a graphics object the same size as the image

  maskGraphics = createGraphics(img_sonic.width, img_sonic.height);

​

  // Draw a white circle in the center of the graphics object

  maskGraphics.background(0);

  maskGraphics.fill(255);

  maskGraphics.noStroke();

  maskGraphics.ellipse(maskGraphics.width / 2, maskGraphics.height / 2, min(maskGraphics.width, maskGraphics.height));

​

  // Use the graphics object as a mask for the image

    img_sonic.mask(maskGraphics.get());

    fft = new p5.FFT();

    fft.setInput(mic);

    fft2 = new  p5.FFT();

    fft2.setInput(song);

    song = loadSound('opening.mp3');

    }

​

    function modelReady() {

      console.log("Model ready!");

    }

​

    function drawMicLevel(x, y) {

      push();

      translate(x, y)

      fill("black");

      text("click to start mic", 50, 30);

      micLevel = mic.getLevel();

      //text(micLevel, width / 2, height / 2);

        let waveform = fft.waveform();

      noFill();

      beginShape();

      stroke(20);

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

        let x = map(i, 0, waveform.length, 0, width);

        let y = map(waveform[i], -1, 1, 0, height);

        vertex(x,y);

      }

      endShape();

      pop();

    }

    function drawMusicLevel(x, y) {

      push();

      translate(x, y)

      fill("black");

      //text("click to start mic", 50, 30);

      musicLevel = mic.getLevel();

      //text(micLevel, width / 2, height / 2);

        let waveform = fft2.waveform();

      noFill();

      beginShape();

      stroke(20);

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

        let x = map(i, 0, waveform.length, 0, width);

        let y = map(waveform[i], -1, 1, 0, height);

        vertex(x,y);

      }

      endShape();

      pop();

    }

    function drawKeyboardEffects() {

      if (key == "1") {

        fill(random(["lime", "pink", "yellow"]));

        noStroke();

        circle(random(width), random(height), random(10, 20));

      } else if (key == "2") {

        strokeWeight(random(1, 5));

        stroke(random(["lime", "pink", "yellow"]));

        line(random(width), random(height), random(width), random(height));

      }

    }

​

    function drawTurntable(x, y, s, speed){

      push();

      translate(x, y);

      scale(s)

      if (flag_music){

        angle = frameCount*speed;

        // Rotate the canvas

        rotate(angle);

      }

      fill("#192D4D");

      circle(0, 0, 100);

      let imgsize = 40;

      //blendMode(DIFFERENCE);

      //circle(0, 0, imgsize);

      imageMode(CENTER);

​

      image(img_sonic,0, 0, imgsize, imgsize);

      noStroke()

      fill("#f5f5dc");

      circle(0, 0, 10);

      noFill();

      stroke("#1A1919");

      circle(0, 0, 10);

      let stWeight = 4;

      strokeWeight(stWeight);

      let flipflap = true;

      for(let i=imgsize; i<100; i+=stWeight){

        if(flipflap == true){

          stroke("#1A1919");

          flipflap = false;

        }else{

          stroke("#312E2E");

          flipflap = true;

        }

        circle(0, 0, i)

      }

      pop();

    }

​

    function draw() {

      drawBackground();

​

      image(video, margin_left, margin_top, video_w, video_h);

      // We can call both functions to draw all keypoints

      drawKeypoints();

      drawForeground();

      drawKeyboardEffects();

      drawMicLevel(+width/5*1.2, +height/2-10, 3, 1/5);

      drawMusicLevel(-width/5*1.2, -height/2+10, 3, 1/5)

      drawTurntable(width/5*1.2, height/2, 3, 1.5);

    }

​

    function drawForeground() {

      noStroke();

      circle(random(width), random(height), map(mouseY, 0, height, 0, 100));

    }

​

    function drawBackground() {

      background("#f5f5dc");

      //12noStroke();

      //rect(random(width), 0, map(mouseX, 0, width, 10, 100), height);

      fill("#CED3BB");

      rect(0, 0, width, height/8);

      rect(0, height/8 * 7, width, height/8);

    }

​

    // A function to draw ellipses over the detected keypoints

    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]; // 468 points

          push();

          translate(margin_left, margin_top);

          textAlign(CENTER, CENTER);

​

          if (key == 3) {

            strokeWeight(1);

            stroke(0, 255, 0, 32);

            noFill();

            rectMode(CENTER);

            square(x, y, random(100));

          } else if (key == 4) {

            if (j % 3 == 0) {

              text(random(["💚", "🟩"]), x, y);

            }

          } else {

            stroke("lime");

            point(x, y);

          }

​

          pop();

        }

      }

    }

    function centerCanvas() {

      var x = (windowWidth - width) / 2;

      var y = (windowHeight - height) / 2;

      cnv.position(x, y);

    }

    function windowResized() {

      centerCanvas();

    }

​

function mousePressed() {

  if (song.isPlaying()) {

    // .isPlaying()은 불리언 값을 반환합니다.

    song.stop();

    flag_music = false;

  } else {

    song.play();

    flag_music = true;

  }

}

​