410730872王宣閔 期末報告
-
https://gifs.com/gif/2222-K8mPox
以上為我的gif，因為我的電腦錄製一直失敗，故我使用網站的方式呈現
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
https://openprocessing.org/sketch/1424836
這是我的網站
首先我使用rightWristImg=loadImage("11.jpg")這行來貼上我的自畫像
接下來是我的程式碼

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

var rightEarImg,noseImg,rightWristImg,leftWristImg
function preload(){

 rightEarImg= loadImage("UoKfhYw.png")
 noseImg =loadImage("123.jpg")
 rightWristImg=loadImage("11.jpg")
// leftWristImg=loadImage("11.jpg")
}



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); //算出左右眼的距離，當作鼻子顯示圓的直徑
   
   
   push()
   translate(pose.rightEar.x, pose.rightEar.y) //以找到的右耳位置當作座標原點
   imageMode(CENTER); //圖片要以中心點為座標點
   scale(-1,1)  //左右翻轉
   scale(0.1)   //縮小到0.1
   image(rightEarImg,0, 0) //顯示該圖片
    pop()
   
  push()
   translate(pose.leftEar.x, pose.leftEar.y) //以找到的右耳位置當作座標原點
   imageMode(CENTER); //圖片要以中心點為座標點
   scale(0.1)   //縮小到0.1
   image(rightEarImg,0, 0) //顯示該圖片
    pop()
   
  push()
   translate(pose.nose.x, pose.nose.y) //以找到的右耳位置當作座標原點
   imageMode(CENTER); //圖片要以中心點為座標點
   scale(0.1)   //縮小到0.1
   image(noseImg,0, 0) //顯示該圖片
    pop()
   
  push()
   translate(eyeR.x-50,eyeR.y-40) //以找到的右耳位置當作座標原點
   imageMode(CENTER); //圖片要以中心點為座標點
   scale(0.11)   //縮小到0.1
   draw_1()//顯示該圖片
    pop()
   
  push()
   translate(eyeL.x+50,eyeL.y-40) //以找到的右耳位置當作座標原點
   imageMode(CENTER); //圖片要以中心點為座標點
   scale(0.11)//縮小到0.1
  scale(-1,1) 
   draw_1()//顯示該圖片
    pop()
   
  push()
   translate(pose.rightWrist.x, pose.rightWrist.y);
   imageMode(CENTER); //圖片要以中心點為座標點
   scale(0.1)   //縮小到0.1
   image(rightWristImg,0, 0) //顯示該圖片
    pop()
   
   //push()
   //translate(pose.leftWrist.x, pose.leftWrist.y);
  // imageMode(CENTER); //圖片要以中心點為座標點
   //scale(1)   //縮小到0.1
  // image(leftWristImg,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(){
 translate(width/2,height/2); //以視窗中心為整個座標的(0,0)
 push()
 fill(255,211,33)
 ellipse(0,0,50)  //(0,0)直徑為50的圓
 fill('#FFC1E0')
 ellipseMode(CORNER)
 for(var i=0;i<16;i=i+1){
 ellipse(30,-20,100,30)
 line(30,-5,120,-5)
 rotate(PI/8)
 }
 //ellipse(30,-20,100,30)
 //rotate(PI/8)
 //ellipse(30,-20,100,30)
//rotate(PI/8)
 //ellipse(30,-20,100,30)
//rotate(PI/8)
 //ellipse(30,-20,100,30)
//rotate(PI/8)
 //ellipse(30,-20,100,30)
//rotate(PI/8)
 //ellipse(30,-20,100,30)
//rotate(PI/8)
 //ellipse(30,-20,100,30)
 pop()
}
謝謝老師