PoseNet介紹

程式碼介紹

首先，將p5.js Web Editor 與ml5.js使用連接字串於index.html進行連接，使p5.js Web Editor可使用ml5.js中的函數，才能使用其中的PoseNet。

<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script> 

設立以下變數

let video;

let poseNet;

let pose;

let skeleton;

程式初始會先跑setup()函數

function setup() {

  createCanvas(640, 480); //創造640*480的畫布

  video = createCapture(VIDEO); //打開攝影機

  video.hide(); //隱藏video,只顯示canvas

  poseNet = ml5.poseNet(video,modelReady);

  poseNet.on('pose',gotPoses); 

}

function modelReady(){

  console.log('model ready'); //模型準備好時通知，因是將"線上"的模型取來用，需要點時間

}

function gotPoses(poses){

  console.log(poses); //接收到動作就寫入console

  if(poses.length>0){ //有接收到動作才將動作放入pose及skeleton變數內

    pose = poses[0].pose;

    skeleton = poses[0].skeleton;

  }

}

function draw() {

  image(video,0,0); //將video放在(0,0)的地方，並且它可以作畫

  var mypoints = [3,4,5,6,11,12,15,16];//將一些點對應的id放進陣列內

  if(pose)//如果pose內有值

  {

    for(let i = 0;i<pose.keypoints.length;i++){ //將每個點掃過一次

      let x = pose.keypoints[i].position.x;

      let y = pose.keypoints[i].position.y; //將每個點之x,y存起來

      if (mypoints.includes(i)) //如果這個部位包含在我所設的陣列內

        {

          fill(255,0,0);  //畫紅色

          ellipse(x,y,16,16) //用16*16的圓

        }

      else

        {

          fill(0,255,0); //畫綠色

          ellipse(x,y,16,16); //用16*16的圓

        }

    }

    for (let j = 0 ; j<skeleton.length;j++) //跑過每個骨骼

      { //將相近兩點的骨骼畫白線

        let a = skeleton[j][0];

        let b = skeleton[j][1];

        strokeWeight(2);

        stroke(255);

        line(a.position.x , a.position.y , b.position.x , b.position.y);

      }

  }

}

相關連結   

Hour of Code with p5.js and PoseNet

ml5.js

ml5.js-PoseNet

p5.js