Boca Aberta 2

let menu = [

  { name: "Entrada: Salada caprese ao pesto manjericão", image: "Salada caprese.png" },

  { name: "Entrada: Quiche Napolitana", image: "quiche napolitano.png" },

  { name: "Entrada: Profiteroles de Salmon", image: "profiteroles de salmão.png" },

  { name: "Prato Principal: Bobó de camarão", image: "Bobo de camarão.png" },

  { name: "Prato Principal: Bacalhau gratinado", image: "bacalhau gratinado.png" },

  { name: "Sobremesa: Tortinha Marquise", image: "Sobremesa tortinha.png" }

];

​

let currentDishIndex = -1;

let eating = false;

let noivos = "Alice e João";

​

let video;

let mouthOpen = false;

let mouthX;

let mouthY;

let faceMesh;

let options = { maxFaces: 1, refineLandmarks: false, flipped: false };

let faces = [];

​

let weddingImage;  // Declaração da imagem do casamento

let menuImage; // Adicionando a imagem do menu

var menuWidth;

​

var current = 0;

​

const WIDTH = 800;

const HEIGHT = 600;

​

let selfieSegmentation;

let selfieSegmentationResults;

​

let posisitions = [

  {x: 80, y: 180},

  {x: 80, y: 320},

  {x: 80, y: 420}

]

​

let foods = []

​

let animPct = 0;

​

function preload() {

  // Carregar as imagens

  weddingImage = loadImage("Post-Blog-Organize-5-1080x675.png");  // Imagem do casamento

  menuImage = loadImage("Cardápio menu de casamento floral delicado creme e marrom_20241213_205204_0000.png");  // Imagem do cardápio

  faceMesh = ml5.faceMesh(options);

  let foodsNames = [

    "Salada caprese.png",

    "quiche napolitano.png",

    "profiteroles de salmão.png"

  ]

  for(var i = 0; i < foodsNames.length; i++){

    var img = loadImage(foodsNames[i]);

    foods.push(img);

  }

  selfieSegmentation = new SelfieSegmentation({

    locateFile: (file) => {

      return `https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/${file}`;

    }

  });

​

  selfieSegmentation.setOptions({

    modelSelection: 0,

  });

​

  selfieSegmentation.onResults(onResults);

}

​

function setup() {

  menuWidth = HEIGHT * menuImage.width / menuImage.height;

  createCanvas(WIDTH + menuWidth, HEIGHT);

  video = createCapture(VIDEO);

  video.size(width, height);

  video.hide();

  const camera = new Camera(video.elt, {

  onFrame: async () => {

    await selfieSegmentation.send({

      image: video.elt

    });

  },

  width: WIDTH,

  height: HEIGHT

});

camera.start();

​

  faceMesh.detectStart(video, gotFaces);

}

​

function gotFaces(results) {

  faces = results;

}

​

function draw() {

  background(200);

  if(selfieSegmentationResults){

    //overlay

    image(video, menuWidth, 0, WIDTH, HEIGHT);

​

    drawingContext.save();

      drawingContext.globalCompositeOperation="destination-atop";

      //mask

      drawingContext.drawImage(selfieSegmentationResults.segmentationMask, menuWidth, 0, WIDTH, HEIGHT);

​

      //background

      image(weddingImage, menuWidth, 0, WIDTH, HEIGHT);

    drawingContext.restore();

  }

  // Desenhar o fundo do cardápio

  image(menuImage, 0, 0, menuWidth, height);

​

  let bocaAberta = false;

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

    let face = faces[i];

    bocaAberta |= isMouthOpen(face.keypoints);

  }

​

  if (currentDishIndex === -1) {

    drawStartMenu();

  } else {

    if(bocaAberta) {

      if(animPct < 1)

        animPct += 0.01;

      if(animPct >= 0.99){

        animPct = 0;

        current++;

      }

      if(current==3){

        alert("Acabei")

      }

    }else{

      if(animPct > 0)

        animPct -= 0.01;

    }

    if(mouthX && mouthY && current < 3){

      var x = lerp(posisitions[current].x, mouthX, animPct);

      var y = lerp(posisitions[current].y, mouthY, animPct);

      image(foods[current], x, y, (foods[current].width/2)*animPct, (foods[current].height/2)*animPct);

    }

  }

}

​

function onResults(results) {

  selfieSegmentationResults = results;

}

​

function isMouthOpen(keypoints) {

  const topLip = keypoints[13];

  const bottomLip = keypoints[14];

  const leftEye = keypoints[33];

  const rightEye = keypoints[133];

  const mouthDistance = dist(topLip.x, topLip.y, bottomLip.x, bottomLip.y);

  const faceWidth = dist(leftEye.x, leftEye.y, rightEye.x, rightEye.y);

  const threshold = faceWidth * 0.5;

  mouthX = bottomLip.x;

  mouthY = bottomLip.y;

​

  return mouthDistance > threshold;

}

​

function drawStartMenu() {

  fill(255, 255, 255, 200);

  rect(50, 50, width - 100, height - 100, 20);

  fill(0);

  textSize(32);

  textAlign(CENTER, CENTER);

  text(`Bem-vindos ao menu degustação de ${noivos}`, width / 2, 100);

  // Texto para iniciar a degustação

  textSize(24);

  text("Clique para iniciar a degustação", width / 2, height / 2);

}

​

function mousePressed() {

  if (currentDishIndex === -1) {

    currentDishIndex = 0;  // Inicia a degustação ao clicar

  }

}

​