I want to add the ability to upload custom pngs to my filters

I want a button that lets me upload a png that is displayed over my face like so:

My code:

let video 

let noseX
let noseY

let catNose
let hat

function preload(){
 custom = 
  catNose = createImg('cat-nose2.png')
  hat = createImg('hat.png')
}

function setup() {
  createCanvas(600, 500);
  video = createCapture(VIDEO)
  video.size(600,500)
  video.hide()
  
  let poseFinder = ml5.poseNet(video)
  poseFinder.on("pose", gotPose)
}

function draw() {
  background(220);
  image(video,0,0,600,500)
  fill(255,0,0)
 // ellipse(noseX,noseY,40)
  catNose.position(noseX-100,noseY-25)
  catNose.size(200,200)
  
  hat.position(noseX-125,noseY-280)
  hat.size(250,250)
}

function gotPose(poses){
  noseX = poses[0].pose.nose.x
  noseY = poses[0].pose.nose.y
}

HTML:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
<script src="https://unpkg.com/ml5@0.4.3/dist/ml5.min.js"></script>
      <input type="file" id="image-input" accept="image/jpeg, image/png, image/jpg">
  <div id="display-image"></div>
    <script src="script.js"></script>
  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

I want to add the ability to upload custom pngs to my filters

0 Answers