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)

}