---
# System prepended metadata

title: Untitled

---

let video;
let poseNet;
let pose;
let skeleton;


  var rightEarImg,righthandImg
function preload(){	
	rightEarImg= loadImage("images.jpg")	
	noseImg=loadImage("1f43d.png")
	//righthandImg=loadImage("6767.png")
	leftImg=loadImage("0a65a5bf99bc30ff1680178e343a16b5.png")
	
	}

function setup() {
  createCanvas(640, 480);
	//createCanvas(windowWidth, windowHeight);
  video = createCapture(VIDEO);
  video.hide();
  poseNet = ml5.poseNet(video, modelLoaded); //呼叫在ml5.js上的net函數，用此函數來判斷各位置，呼叫成功即執行function modelLoaded 
  poseNet.on('pose', gotPoses);
}

function gotPoses(poses) {
  //console.log(poses);
  if (poses.length > 0) {
    pose = poses[0].pose;  //把抓到的幾個點，都放置pose變數內
    skeleton = poses[0].skeleton; //把相關於骨架的點都放到skeleton變數內
  }
}



function modelLoaded() {   //顯示pose model已經準備就緒
  console.log('poseNet ready');
}

function draw() {
    background(0);
		translate(video.width,0)  //因為攝影機顯示的是反像的畫面，需要透過這兩條指令來做反轉
		scale(-1,1)    //因為攝影機顯示的是反像的畫面，需要透過這兩條指令來做反轉
    image(video, 0, 0);  //顯示你的畫面在螢幕上
		if (pose) {
			let eyeR = pose.rightEye;  //抓到右眼資訊，放到eyeR
			let eyeL = pose.leftEye;   //抓到左眼資訊，放到eyeL
			let d = dist(eyeR.x, eyeR.y, eyeL.x, eyeL.y); //算出左右眼的距離，當作鼻子顯示圓的直徑
			//fill(255, 0, 0);
			//ellipse(pose.nose.x, pose.nose.y, d); //畫出鼻子的圓
			fill(0, 0, 255);
			//ellipse(pose.rightWrist.x, pose.rightWrist.y, 62); //畫出右手腕圓圈
			//ellipse(pose.leftWrist.x, pose.leftWrist.y, 62); //畫出左手腕圓圈
			//drawKeypoints()
			//drawSkeleton()

     if(pose.rightEar.confidence>0.7){
			push()
					translate(pose.rightEar.x-20, pose.rightEar.y) //以找到的右耳位置當作座標原點
					imageMode(CENTER); //圖片要以中心點為座標點
					scale(-1,1)  //左右翻轉
					scale(d/280)   //縮小到0.15
					image(rightEarImg,0, 0) //顯示該圖片
			pop()
			}
			
		  if(pose.leftEar.confidence>0.7){
			push()
					translate(pose.leftEar.x+20, pose.rightEar.y)
					imageMode(CENTER);
					//scale(-1,1)
					scale(d/280)
					image(rightEarImg,0, 0)
  		pop()
		      } 


      if(pose.nose.confidence>0.7){
			push()
     			translate(pose.nose.x, pose.nose.y-10) //以找到的右耳位置當作座標原點
     			imageMode(CENTER); //圖片要以中心點為座標點
					scale(d/250)   //縮小到0.1
     			image(noseImg,0, 0) //顯示該圖片
      pop()
		      }

      if(pose.rightWrist.confidence>0.2){
		  push()
     			translate(pose.rightWrist.x, pose.rightWrist.y) //以找到的右耳位置當作座標原點
     			imageMode(CENTER); //圖片要以中心點為座標點
		      scale(-1,1)
					scale(0.3)   //縮小到0.1
     			draw_1(0,0) //顯示該圖片
      pop()
		      }
		
      if(pose.leftWrist.confidence>0.2){
	    push()
     			translate(pose.leftWrist.x, pose.leftWrist.y)//以找到的右耳位置當作座標原點
     			imageMode(CENTER); //圖片要以中心點為座標點
					scale(0.3)   //縮小到0.1
     			draw_1(0,0) //顯示該圖片
      pop() 
		}
		
		if(pose.rightEye.confidence>0.7){
    push()
    translate(pose.rightEye.x, pose.rightEye.y)
    imageMode(CENTER); //圖片要以中心點為座標點
    scale(d/350)
    image(leftImg,0,0)
    pop()
    }
		
		if(pose.rightEye.confidence>0.7){
    push()
    translate(pose.rightEye.x, pose.rightEye.y)
    imageMode(CENTER); //圖片要以中心點為座標點
    scale(d/400)
    image(leftImg,0,0)
    pop()
    } 
		
		if(pose.leftEye.confidence>0.7){
    push()
    translate(pose.leftEye.x, pose.leftEye.y)
    imageMode(CENTER); //圖片要以中心點為座標點
    scale(d/400)
    image(leftImg,0,0)
    pop()
    }

			 		}
}

			

function drawKeypoints()  {  
    for (let i = 0; i < pose.keypoints.length; i++) {
      let x = pose.keypoints[i].position.x;//找出每一個點的x座標
      let y = pose.keypoints[i].position.y;//找出每一個點的y座標
      fill(0,255,0);
      ellipse(x,y,16,16);
    }
	//print(pose.keypoints.length)
	}
function drawSkeleton()  {
    for (let i = 0; i < skeleton.length; i++) {
      let a = skeleton[i][0];
      let b = skeleton[i][1];			
      strokeWeight(2);
      stroke(255,0,0);
      line(a.position.x, a.position.y,b.position.x,b.position.y);			
    }
  }

function draw_1(x,y){
 var r1=mouseX  //定義
 var r2=mouseY  //定義
 var Color_R= r1/2+30  //定義
 var Color_G= r1/2+50+r2  //定義
 var Color_B= r1/2+10  //定義
 
  ellipse(mouseX, mouseY, 300, 300);
	fill('black')
	rect(mouseX-110,mouseY,70,20)
	rect(mouseX+40,mouseY,70,20)
	rect(mouseX-40,mouseY+50,80,10)
	rect(mouseX-40,mouseY+50,10,40)
	fill(255,240,214)

}





