p5.js Web Editor | lil bear fam final 修好了勿動

xxxxxxxxxx
let outputWidth;
let outputHeight;
let rFlower;
​
let faceTracker; // Face Tracking
let videoInput;
​
let imgBearEarRight, imgBearEarLeft, imgBearNose, imgBearNoseSad, imgBearEarLSad, imgBearEarRSad; // Lil Bear Filter
​
function preload() {
  // Background
  imgBackground = loadImage("https://i.imgur.com/HAthcEy.jpg");
​
  // Bear Face Filter assets
  imgBearEarRight = loadImage("https://i.imgur.com/uUngYl9.png");
  imgBearEarLeft = loadImage("https://i.imgur.com/UsSOpgf.png");
  imgBearNose = loadImage("https://i.imgur.com/5dX9DCh.png");
  imgBearBlushR = loadImage("https://i.imgur.com/xG4k1Kk.png");
  imgBearBlushL = loadImage("https://i.imgur.com/xG4k1Kk.png")
  
  // Sad Bear
  imgBearEarLSad = loadImage("https://i.imgur.com/GkK3WrB.png");
  imgBearEarRSad = loadImage("https://i.imgur.com/iywiS0B.png");
  imgBearNoseSad = loadImage("https://i.imgur.com/0jFjTYB.png");
  
  // Angry Bear
  imgBearEarLAngry = loadImage("https://i.imgur.com/Q6BVdQm.png");
  imgBearEarRAngry = loadImage("https://i.imgur.com/Vk6eGoy.png");
  imgBearNoseAngry = loadImage("https://i.imgur.com/HPu5AYh.png");
  
  // Hyper Bear
  imgBearEarLHyper = loadImage("https://i.imgur.com/cNsd52z.png");
  imgBearEarRHyper = loadImage("https://i.imgur.com/OcJ0zvG.png");
  
  imgFlower = loadImage("https://i.imgur.com/AriMlRb.png");
}
​
function setup() {
  const maxWidth = Math.min(windowWidth, windowHeight);
  pixelDensity(1);
  outputWidth = maxWidth;
  outputHeight = maxWidth * 0.7; // 16:9
  
  createCanvas(outputWidth, outputHeight + 200);
​
  // Webcam capture
  videoInput = createCapture(VIDEO);
  videoInput.size(outputWidth, outputHeight);
  videoInput.hide();
​
  // Tracker
  faceTracker = new clm.tracker();
  faceTracker.init();
  faceTracker.start(videoInput.elt);
​
  background(imgBackground);
  rFlower = random(2,50);
  
  //mic
  //      mic = new p5.AudioIn();
  //    mic.start();
  //    cnv.mousePressed(userStartAudio);
}
​
function draw() {
  image(videoInput, 0, 0, outputWidth, outputHeight); // Render video from webcam
​
  drawImgFlower();
​
  if(key=="s"){
  drawBearSadFace()
  }
  else if(key=="d") {
  drawBearFace()  
  }
  
  else if(key=="a"){
  drawBearAngryFace()
  }
  
  else if(key=="h"){
  drawBearHyperFace()
  }
  
  else {
  drawBearFace()
   }
  
}
​
//Flowers
function drawImgFlower() {
  image(imgFlower, mouseX - 50, mouseY - 50, 50, 50);
}
​
// Lil Bear Filter
function drawBearFace() {
  const positions = faceTracker.getCurrentPosition();
  if (positions !== false) {
    if (positions.length >= 20) {
      push();
      translate(-80, -120); // Offset adjustment
      image(imgBearEarRight, positions[20][0], positions[20][1]);
      pop();
    }
​
    if (positions.length >= 16) {
      push();
      translate(-30, -130); // Offset adjustment
      image(imgBearEarLeft, positions[16][0], positions[16][1]);
      pop();
    }
​
    if (positions.length >= 62) {
      push();
      translate(-40, -33); // Offset adjustment
      image(imgBearNose, positions[62][0], positions[62][1], 100, 120);
      pop();
    }
       if (positions.length >= 23) {
      push();
      translate(-50, -20); // Offset adjustment
      image(imgBearBlushR, positions[23][0], positions[23][1]);
      pop();
    }
   
    if (positions.length >= 30) {
      push();
      translate(0, -20); // Offset adjustment
      image(imgBearBlushL, positions[30][0], positions[30][1]);
      pop();
    }
  }
}
​
function drawBearSadFace() {
  const positions = faceTracker.getCurrentPosition();
  if (positions !== false) {
    if (positions.length >= 20) {
      push();
      translate(-80, -120); // Offset adjustment
      image(imgBearEarRSad, positions[20][0], positions[20][1]);
      pop();
    }
​
    if (positions.length >= 16) {
      push();
      translate(-30, -130); // Offset adjustment
      image(imgBearEarLSad, positions[16][0], positions[16][1]);
      pop();
    }
​
    if (positions.length >= 62) {
      push();
      translate(-40, -33); // Offset adjustment
      image(imgBearNoseSad, positions[62][0], positions[62][1], 100, 120);
      pop();
    }
    
    if (positions.length >= 23) {
      push();
      translate(-50, -20); // Offset adjustment
      image(imgBearBlushR, positions[23][0], positions[23][1]);
      pop();
    }
   
    if (positions.length >= 30) {
      push();
      translate(0, -20); // Offset adjustment
      image(imgBearBlushL, positions[30][0], positions[30][1]);
      pop();
  }
  }
}
​
function drawBearAngryFace() {
  const positions = faceTracker.getCurrentPosition();
  if (positions !== false) {
    if (positions.length >= 20) {
      push();
      translate(-80, -120); // Offset adjustment
      image(imgBearEarRAngry, positions[20][0], positions[20][1]);
      pop();
    }
​
    if (positions.length >= 16) {
      push();
      translate(-30, -130); // Offset adjustment
      image(imgBearEarLAngry, positions[16][0], positions[16][1]);
      pop();
    }
​
    if (positions.length >= 62) {
      push();
      translate(-40, -33); // Offset adjustment
      image(imgBearNoseAngry, positions[62][0], positions[62][1], 100, 120);
      pop();
    }
    
    if (positions.length >= 23) {
      push();
      translate(-50, -20); // Offset adjustment
      image(imgBearBlushR, positions[23][0], positions[23][1]);
      pop();
    }
   
    if (positions.length >= 30) {
      push();
      translate(0, -20); // Offset adjustment
      image(imgBearBlushL, positions[30][0], positions[30][1]);
      pop();
  }
  }
}
​
function drawBearHyperFace() {
  const positions = faceTracker.getCurrentPosition();
  if (positions !== false) {
    if (positions.length >= 20) {
      push();
      translate(-80, -120); // Offset adjustment
      image(imgBearEarRHyper, positions[20][0], positions[20][1]);
      pop();
    }
​
    if (positions.length >= 16) {
      push();
      translate(-30, -130); // Offset adjustment
      image(imgBearEarLHyper, positions[16][0], positions[16][1]);
      pop();
    }
​
    if (positions.length >= 62) {
      push();
      translate(-40, -33); // Offset adjustment
      image(imgBearNose, positions[62][0], positions[62][1], 100, 120);
      pop();
    }
       if (positions.length >= 23) {
      push();
      translate(-50, -20); // Offset adjustment
      image(imgBearBlushR, positions[23][0], positions[23][1]);
      pop();
    }
   
    if (positions.length >= 30) {
      push();
      translate(0, -20); // Offset adjustment
      image(imgBearBlushL, positions[30][0], positions[30][1]);
      pop();
    }
  }
}
​
​
function windowResized() {
  const maxWidth = Math.min(windowWidth, windowHeight);
  pixelDensity(1);
  outputWidth = maxWidth;
  outputHeight = maxWidth * 0.7; // 16:9
  resizeCanvas(outputWidth, outputHeight + 200);
}
​
function mousePressed(){
  const randomWidthAndHeight = random(150)
  image(imgFlower,mouseX-45,mouseY-45,randomWidthAndHeight,randomWidthAndHeight)
}
​
Cookies

Sketch Files

Console

Preview
