EX#1
let video;
function setup() {
  createCanvas(640, 480); //畫面長寬比
  video = createCapture(VIDEO); //載入鏡頭
  video.hide(); //隱藏第2畫面
}
function draw() {
  image(video,0,0);//設定顯示畫面
}
=====================================================================
EX#2
let video;
let poseNet;
function setup() {
  createCanvas(640, 480); //畫面長寬比
  video = createCapture(VIDEO); //載入鏡頭
  video.hide(); //隱藏第2畫面
  poseNet = ml5.poseNet(video, modelLoaded);//引入posenet
  poseNet.on('pose',getPoses);//載入posenet姿勢辨識
}
function getPoses(poses){
  console.log(poses);//輸出辨識之姿勢資料
}
function modelLoaded() {
  console.log('poseNet ready');//確認posenet引入
}
function draw() {
  image(video,0,0);//設定顯示畫面
}
======================================================================
EX#3
let video;
let poseNet;
let pose;
let skeleton;

function setup() {
  createCanvas(640, 480); //畫面長寬比
  video = createCapture(VIDEO); //載入鏡頭
  video.hide(); //隱藏第2畫面
  poseNet = ml5.poseNet(video, modelLoaded);//引入posenet
  poseNet.on('pose',getPoses);//載入posenet姿勢辨識
}

function getPoses(poses){
  //console.log(poses);//輸出辨識之姿勢資料
   if (poses.length > 0){
    pose = poses[0].pose;//確認有1個pose以上的話將主要辨識的pose設定出來
    skeleton =poses[0].skeleton;//確認有1個pose以上的話將pose骨架設定出來
  }
}

function modelLoaded() {
  console.log('poseNet ready');//確認posenet引入
}

function draw() {
  image(video,0,0);//設定顯示畫面
  if(pose){
     for(let i=0;i<pose.keypoints.length;i++){
      let x=pose.keypoints[i].position.x;//使用keypoint做顯示需要使用position才能取得資料
      let y=pose.keypoints[i].position.y;
      fill(0);//設定圖型顏色
      ellipse(x,y,16);//設定圖型位置&大小
   }
    for(let i=0;i < skeleton.length ;i++){
     let a=skeleton[i][0];//無連起始點
     let b=skeleton[i][1];//連接結束
     strokeWeight(2);//線寬度
     stroke(0);//線顏色
     line(a.position.x,a.position.y,b.position.x,b.position.y);//將各點連接
   }
  }
}
======================================================================
EX#4
let video;
let poseNet;
let pose;
let skeleton;
let brain;

let state = 'waiting';//設定資料蒐集判斷點
let targetLabel;

function keyPressed(){
  if(key=='s'){//設定輸入S為下載資料集
    brain.saveData();
  }else{
  targetLabel = key;//設定輸入鍵為指定姿勢之註解
  console.log(targetLabel);
  setTimeout(function(){//設定等待10秒執行資料蒐集
    console.log('collecting');
    state = 'collecting';
    setTimeout(function(){//設蒐集資料10秒
      console.log('not collecting');
      state = 'waiting';
    },10000);
  },10000);
}
}

function setup() {
  createCanvas(640, 480); //畫面長寬比
  video = createCapture(VIDEO); //載入鏡頭
  video.hide(); //隱藏第2畫面
  poseNet = ml5.poseNet(video, modelLoaded);//引入posenet
  poseNet.on('pose',getPoses);//載入posenet姿勢辨識
  
   let options ={//辨識設定
    
    input: 34,//34個keypoint的xy
    outputs: 3,//指定姿勢種類
    task: 'classification',//為類別辨識
    debug: true
  }
  
  brain=ml5.neuralNetwork(options);//將設定載入neuralNetwork
}

function getPoses(poses){
  //console.log(poses);//輸出辨識之姿勢資料
   if (poses.length > 0){
    pose = poses[0].pose;//確認有1個pose以上的話將主要辨識的pose設定出來
    skeleton =poses[0].skeleton;//確認有1個pose以上的話將pose骨架設定出來
     
     if(state=='collecting'){//確認判斷點為蒐集狀態
      let inputs=[];//設定資料儲存陣列
      for(let i=0;i<pose.keypoints.length;i++){
        let x=pose.keypoints[i].position.x;//將keypoint位置存入xy
        let y=pose.keypoints[i].position.y;
        inputs.push(x);//將xy放入陣列
        inputs.push(y);
       }
      let target=[targetLabel];
      brain.addData(inputs,target);//將蒐集的資料陣列放入keyin之註解
    }
  }
}

function modelLoaded() {
  console.log('poseNet ready');//確認posenet引入
}

function draw() {
  translate(video.width,0);//將畫面向右移到視窗外
  scale(-1,1);//將畫面朝x軸往回擴1倍
  image(video,0,0,video.width,video.height);//設定顯示畫面配合攝影機全域
  if(pose){
     for(let i=0;i<pose.keypoints.length;i++){
      let x=pose.keypoints[i].position.x;//使用keypoint做顯示需要使用position才能取得資料
      let y=pose.keypoints[i].position.y;
      fill(0);//設定圖型顏色
      ellipse(x,y,16);//設定圖型位置&大小
   }
    for(let i=0;i < skeleton.length ;i++){
     let a=skeleton[i][0];//無連起始點
     let b=skeleton[i][1];//連接結束
     strokeWeight(2);//線寬度
     stroke(0);//線顏色
     line(a.position.x,a.position.y,b.position.x,b.position.y);//將各點連接
   }
  }
}
======================================================================
EX#5
let video;
let poseNet;
let pose;
let skeleton;
let brain;

function setup() {
  createCanvas(640, 480); //畫面長寬比
  video = createCapture(VIDEO); //載入鏡頭
  video.hide(); //隱藏第2畫面
  poseNet = ml5.poseNet(video, modelLoaded);//引入posenet
  poseNet.on('pose',getPoses);//載入posenet姿勢辨識
  
   let options ={//辨識設定
    
    input: 34,//34個keypoint的xy
    outputs: 3,//指定姿勢種類
    task: 'classification',//為類別辨識
    debug: true
  }
  
  brain=ml5.neuralNetwork(options);//將設定載入neuralNetwork
  brain.loadData('hand.json',dataReady);//將json資料集載入訓練function
}

function dataReady(){
  brain.normalizeData();//將資料設定與攝影機畫面匹配
  brain.train({epochs:100},finished);//資料訓練
}

function finished(){
  console.log('model trained');
  brain.save();//存儲模型
}

function getPoses(poses){
  //console.log(poses);//輸出辨識之姿勢資料
   if (poses.length > 0){
    pose = poses[0].pose;//確認有1個pose以上的話將主要辨識的pose設定出來
    skeleton =poses[0].skeleton;//確認有1個pose以上的話將pose骨架設定出來
     
  }
}

function modelLoaded() {
  console.log('poseNet ready');//確認posenet引入
}

function draw() {
  translate(video.width,0);//將畫面向右移到視窗外
  scale(-1,1);//將畫面朝x軸往回擴1倍
  image(video,0,0,video.width,video.height);//設定顯示畫面配合攝影機全域
  if(pose){
     for(let i=0;i<pose.keypoints.length;i++){
      let x=pose.keypoints[i].position.x;//使用keypoint做顯示需要使用position才能取得資料
      let y=pose.keypoints[i].position.y;
      fill(0);//設定圖型顏色
      ellipse(x,y,16);//設定圖型位置&大小
   }
    for(let i=0;i < skeleton.length ;i++){
     let a=skeleton[i][0];//無連起始點
     let b=skeleton[i][1];//連接結束
     strokeWeight(2);//線寬度
     stroke(0);//線顏色
     line(a.position.x,a.position.y,b.position.x,b.position.y);//將各點連接
   }
  }
}
======================================================================
EX#6
let video;
let poseNet;
let pose;
let skeleton;
let brain;

let targetLabel='U';
let poseLabel;


function setup() {
  createCanvas(640, 480); //畫面長寬比
  video = createCapture(VIDEO); //載入鏡頭
  video.hide(); //隱藏第2畫面
  poseNet = ml5.poseNet(video, modelLoaded);//引入posenet
  poseNet.on('pose',getPoses);//載入posenet姿勢辨識
  
   let options ={//辨識設定
    
    input: 34,//34個keypoint的xy
    outputs: 3,//指定姿勢種類
    task: 'classification',//為類別辨識
    debug: true
  }
  
  brain=ml5.neuralNetwork(options);//將設定載入neuralNetwork 
  brain.normalizeData();//將資料設定與攝影機畫面匹配
  const modelInfo = {
    model: 'model/model.json',
    metadata: 'model/model_meta.json',
    weights: 'model/model.weights.bin',//將模型放入載入位置
  };
  brain.load(modelInfo, modelReady);//載入模型
  //brain.loadData('hand.json',dataReady);//將json資料集載入訓練function
}
function modelReady(){
  console.log('pose classification ready!');//確認載入模型
  classifyPose();
}

function classifyPose(){
  if(pose){
    let inputs=[];
    for(let i=0;i<pose.keypoints.length;i++){
      let x=pose.keypoints[i].position.x;
      let y=pose.keypoints[i].position.y;
      inputs.push(x);
      inputs.push(y);
      }
    brain.classify(inputs,gotResult);//將pose的資料比對後載入輸出function
  }else{
    setTimeout(classifyPose,100);//等待1s重新執行
    
  }
}
function gotResult(error,results){
  poseLabel=results[0].label;//指定姿勢註解輸出
  console.log(results[0].confidence);//信心度
  classifyPose();  
}

function dataReady(){
  brain.train({epochs:100},finished);//資料訓練
}


function finished(){
  console.log('model trained');
  brain.save();//存儲模型
}

function getPoses(poses){
  //console.log(poses);//輸出辨識之姿勢資料
   if (poses.length > 0){
    pose = poses[0].pose;//確認有1個pose以上的話將主要辨識的pose設定出來
    skeleton =poses[0].skeleton;//確認有1個pose以上的話將pose骨架設定出來
     
  }
}

function modelLoaded() {
  console.log('poseNet ready');//確認posenet引入
}

function draw() {
  push();//區隔畫面設定
  translate(video.width,0);//將畫面向右移到視窗外
  scale(-1,1);//將畫面朝x軸往回擴1倍
  image(video,0,0,video.width,video.height);//設定顯示畫面配合攝影機全域
  if(pose){
     for(let i=0;i<pose.keypoints.length;i++){
      let x=pose.keypoints[i].position.x;//使用keypoint做顯示需要使用position才能取得資料
      let y=pose.keypoints[i].position.y;
      fill(0);//設定圖型顏色
      ellipse(x,y,16);//設定圖型位置&大小
   }
    for(let i=0;i < skeleton.length ;i++){
     let a=skeleton[i][0];//無連起始點
     let b=skeleton[i][1];//連接結束
     strokeWeight(2);//線寬度
     stroke(0);//線顏色
     line(a.position.x,a.position.y,b.position.x,b.position.y);//將各點連接
   }
  }
  pop();
  fill(255,255,0);
  noStroke();//去邊
  textSize(100);//大小設定
  textAlign(CENTER,CENTER);//位置設定
  text(poseLabel,width/2,height/2);//顯示文字
}
EX#7
let video;
let poseNet;
let pose;
let skeleton;
let brain;
let img;
let targetLabel='U';
let poseLabel;


function setup() {
  createCanvas(640, 480); //畫面長寬比
  video = createCapture(VIDEO); //載入鏡頭
  video.hide(); //隱藏第2畫面
  img = loadImage('assets/leap.png');//載入指定圖片
  poseNet = ml5.poseNet(video, modelLoaded);//引入posenet
  poseNet.on('pose',getPoses);//載入posenet姿勢辨識
  
   let options ={//辨識設定
    
    input: 34,//34個keypoint的xy
    outputs: 3,//指定姿勢種類
    task: 'classification',//為類別辨識
    debug: true
  }
  
  brain=ml5.neuralNetwork(options);//將設定載入neuralNetwork 
  //brain.normalizeData();//將資料設定與攝影機畫面匹配
  const modelInfo = {
    model: 'model/model.json',
    metadata: 'model/model_meta.json',
    weights: 'model/model.weights.bin',//將模型放入載入位置
  };
  brain.load(modelInfo, modelReady);//載入模型
  //brain.loadData('hand.json',dataReady);//將json資料集載入訓練function
}
function modelReady(){
  console.log('pose classification ready!');//確認載入模型
  classifyPose();
}

function classifyPose(){
  if(pose){
    let inputs=[];
    for(let i=0;i<pose.keypoints.length;i++){
      let x=pose.keypoints[i].position.x;
      let y=pose.keypoints[i].position.y;
      inputs.push(x);
      inputs.push(y);
      }
    brain.classify(inputs,gotResult);//將pose的資料比對後載入輸出function
  }else{
    setTimeout(classifyPose,100);//等待1s重新執行
    
  }
}
function gotResult(error,results){
  poseLabel=results[0].label;//指定姿勢註解輸出
  //console.log(results[0].confidence);//信心度
    if(poseLabel=='d'){//當動作標註為d(放下)
    img = loadImage('assets/leap.png');//設定圖片leap為img
     }else if(poseLabel=='l'){//當動作標註為l(左手)
              img = loadImage('assets/dog.png');//設定圖片為img
              }else if(poseLabel=='r'){//當動作標註為r(右手)
                img = loadImage('assets/dog.png');//設定圖片為img
              }
  classifyPose();
}

function dataReady(){
  brain.train({epochs:100},finished);//資料訓練
}


function finished(){
  console.log('model trained');
  brain.save();//存儲模型
}

function getPoses(poses){
  //console.log(poses);//輸出辨識之姿勢資料
   if (poses.length > 0){
    pose = poses[0].pose;//確認有1個pose以上的話將主要辨識的pose設定出來
    skeleton =poses[0].skeleton;//確認有1個pose以上的話將pose骨架設定出來
     
  }
}

function modelLoaded() {
  console.log('poseNet ready');//確認posenet引入
}

function draw() {
  push();//區隔畫面設定
  translate(video.width,0);//將畫面向右移到視窗外
  scale(-1,1);//將畫面朝x軸往回擴1倍
  image(video,0,0,video.width,video.height);//設定顯示畫面配合攝影機全域
  if(pose){
     image(img,pose.nose.x-30, pose.nose.y+10,img.width / 8, img.height / 8);//顯示圖片在鼻子中央
     for(let i=0;i<pose.keypoints.length;i++){
      let x=pose.keypoints[i].position.x;//使用keypoint做顯示需要使用position才能取得資料
      let y=pose.keypoints[i].position.y;
      fill(0);//設定圖型顏色
      ellipse(x,y,16);//設定圖型位置&大小
   }
    for(let i=0;i < skeleton.length ;i++){
     let a=skeleton[i][0];//無連起始點
     let b=skeleton[i][1];//連接結束
     strokeWeight(2);//線寬度
     stroke(0);//線顏色
     line(a.position.x,a.position.y,b.position.x,b.position.y);//將各點連接
   }
  }
  pop();
  // fill(255,255,0);
  // noStroke();//去邊
  // textSize(100);//大小設定
  // textAlign(CENTER,CENTER);//位置設定
  // text(poseLabel,width/2,height/2);//顯示文字
}
==========================================================================
EX#8
let video;
let poseNet;
let pose;
let skeleton;
let brain;
let wait;
let state ='start';
let poseLabel="enter to start";
let mess=" ";
let check='u';
let posecerrect=0;

// let state = 'waiting';
// let targetLabel;

function delay(time){
  return new Promise((resolve,reject)=>{
    if(isNaN(time)){
      reject(new Error('delay requires valid numer.'));
    }else{
      setTimeout(resolve,time);
    }
  })
}

async function keyPressed(){
//   if(key=='s'){
//     brain.saveData();
//   }else{
   // targetLabel = key;
   // console.log(targetLabel);
//   setTimeout(function(){
//     console.log('collecting');
//     state = 'collecting';
//     setTimeout(function(){
//       console.log('not collecting');
//       state = 'waiting';
//     },10000);
//   },10000);
// }
  if(key=='Enter'){
    await delay(3000);
    console.log('start the motion');
    state='waiting';
    modelReady();
  }
}
function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.hide();
  poseNet = ml5.poseNet(video, modelLoaded);
  poseNet.on('pose',getPoses);
  
  
  let options ={
    
    input: 34,
    outputs: 3,
    task: 'classification',  
    debug: true
  }
  
  brain=ml5.neuralNetwork(options);
  const modelInfo = {
    model: 'model/model.json',
    metadata: 'model/model_meta.json',
    weights: 'model/model.weights.bin',
  };
  brain.load(modelInfo, modelReady);
  //brain.loadData('hand.json',dataReady);
}

async function modelReady(){
  if(state=='waiting'){
    flot=getRandom(3);//設定亂數
    if(flot==0){
      poseLabel='put down';//設定畫面顯示確認姿勢
      await delay(5000);//等待5秒開始辨識
      check='d';//設定姿勢註解確認
      state='classify';//設定判斷點區分辨識與非辨識狀態
      classifyPose();
    }else if(flot==1){
      poseLabel='right hand';
      await delay(5000);
      check='r';
      state='classify';
      classifyPose();
    }else if(flot==2){
      poseLabel='left hand';
      await delay(5000);
      check='l';
      state='classify';
      classifyPose();
    }
   }
}


async function classifyPose(){
  if(pose){
    let inputs=[];
    for(let i=0;i<pose.keypoints.length;i++){
      let x=pose.keypoints[i].position.x;
      let y=pose.keypoints[i].position.y;
      inputs.push(x);
      inputs.push(y);
      }
    brain.classify(inputs,gotResult);
  }else{
    await delay(3000);
    classifyPose();
  }
}

async function gotResult(error,results){
  console.log("start");
  console.log[results[0].confidence]
  let stringa=results[0].label;
  
  if (stringa==check){//判斷是否為指定之姿勢
    poseLabel='pass';//設定正確顯示
    state='waiting';//設定判斷點狀態
    posecerrect=poscerrect+1;
    console.log('pose cerrect : '+posecerrect);//顯示正確次數
    await delay(3000);
    modelReady();//反回亂數取指定姿勢
  }
  
}

function dataReady(){
  brain.normalizeData();
  brain.train({epochs:100},finished);
}

function finished(){
  console.log('model trained');
  brain.save();
}

function getRandom(x){
    return Math.floor(Math.random()*x);
}

function getPoses(poses){
  //console.log(poses);
  if (poses.length > 0){
    pose = poses[0].pose;
    skeleton =poses[0].skeleton;
    
    // if(state=='collecting'){
    //   let inputs=[];
    //   for(let i=0;i<pose.keypoints.length;i++){
    //     let x=pose.keypoints[i].position.x;
    //     let y=pose.keypoints[i].position.y;
    //     inputs.push(x);
    //     inputs.push(y);
    //    }
    //   let target=[targetLabel];
    //   brain.addData(inputs,target);
    // }
  }
}
function modelLoaded() {
  console.log('poseNet ready');
}



function draw(){
  push();
  translate(video.width,0);
  scale(-1,1); 
  image(video,0,0,video.width,video.height);
  
  if(pose){ 
    for(let i=0;i < skeleton.length ;i++){
     let a=skeleton[i][0];//無連起始點
     let b=skeleton[i][1];//連接結束
     strokeWeight(2);
     stroke(0);
     line(a.position.x,a.position.y,b.position.x,b.position.y);
   }
    for(let i=0;i<pose.keypoints.length;i++){
      let x=pose.keypoints[i].position.x;//使用keypoint做顯示需要使用position才能取得資料
      let y=pose.keypoints[i].position.y;
      fill(0);
      stroke(255);
      ellipse(x,y,16,16);
   }
}
  pop();
  fill(255,255,0);
  noStroke();
  textSize(100);
  textAlign(CENTER,CENTER);
  text(poseLabel,width/2,height/2);
  
  
  

}