---
tage:程式設計上課作品(A班)
---

# 期中作業三
410738024王靖涵
---
---
tags: 程式設計教材庫,範例版,互動藝術程式創作入門,Creative Coding
---

# 第三作業_學生版

## 作業要求

1. 畫出一個角色元件，透過滑鼠移動，會顯示出動態移動畫面
1. 按下音樂按鈕，隨著音樂舞動或是移動，請依照音樂音頻大小作適當的互動或跳動
1. 按下語音辨識，可以依照語音指令，做適度互動
1. 依照手指的移動，可以操控角色的互動

---

https://cfchengit.github.io/20221104/



## 產生按鈕

### 產生一個按鈕(最左邊的按鈕_音樂跳舞)

music_btn = createButton("音樂跳舞")
music_btn.position(10,10)
music_btn.size(350, 100);
music_btn.style('background-color', 'black');
music_btn.style('font-size', '44px');
music_btn.style('color', 'white');
music_btn.mousePressed(music_btn_pressed)

### 呼叫函數

function music_btn_pressed(){
  song.stop()
  song.play()
  songIsplay = true
  mosueIsplay = false
  amp=new p5.Amplitude()  

}


### 你的程式碼

var face_size=[]
var place_x=[]
var place_y=[]
var song
var songIsplay=false
var amp
var music_btn = []
var mouse_btn = []
var Speech_btn = []
var vol=0
var m_x,m_y
var mosueIsplay=true
//var myRec = new p5.SpeechRec();
var result=[]
var music_btn,mouse_btn,Speech_btn
//function preload(){
  //song = loadSound("");
//}
function setup() {
    createCanvas(windowWidth, windowHeight);
    angleMode(DEGREES)

  for (var i=0;i<5;i++){
    face_size[i] = random(0.5,5)
    place_x [i]= random(10,width)
    place_y [i]= random(10,height)
    }
	 createCanvas(windowWidth, windowHeight);
    angleMode(DEGREES)
  //第一個按鈕
  music_btn = createButton("音樂拿胡蘿蔔")
  music_btn.position(10,10)
  music_btn.size(300, 100);
  music_btn.style('background-color', '#F7F2B4');
  music_btn.style('font-size', '25px');
  music_btn.style('color', '#8D6CFF');
  music_btn.mousePressed(music_btn_pressed)
 
  //第二個按鈕
  mouse_btn = createButton("滑鼠折耳朵")
  mouse_btn.position(300,10)
  mouse_btn.size(300, 100);
  mouse_btn.style('background-color', '#CBBEE0');
  mouse_btn.style('font-size', '25px');
  mouse_btn.style('color', '#8D6CFF');
  mouse_btn.mousePressed(mouse_btn_pressed)
  
  //第三個按鈕
  Speech_btn = createButton("語音辨識(開始動作/停下)")
  Speech_btn.position(590,10)
  Speech_btn.size(300, 100);
  Speech_btn.style('background-color', '#F7D6D5');
  Speech_btn.style('font-size', '25px');
  Speech_btn.style('color', '#8D6CFF');
  Speech_btn.mousePressed(Speech_btn_pressed)

  }

function music_btn_pressed(){
	//song.stop()
  //song.play()
 // songIsplay = true
  //amp=new p5.Amplitude()
  music_btn.style('background-color', '#FF88B5')
  mouse_btn.style('background-color', '#CBBEE0')
  Speech_btn.style('background-color', '#F7D6D5')
}
function mouse_btn_pressed(){
	//song.pause()
 // songIsplay = false
  music_btn.style('background-color', '#F7F2B4')
  mouse_btn.style('background-color', '#FF88B5')
  Speech_btn.style('background-color', '#F7D6D5')
}
function Speech_btn_pressed(){
  music_btn.style('background-color', '#F7F2B4')
  mouse_btn.style('background-color', '#CBBEE0')
  Speech_btn.style('background-color', '#FF88B5')
	//myRec.onResult = showResult;
 // myRec.start(); 
}
function showResult(){
  if(myRec.resultValue==true) {
    result = myRec.resultString
      if(myRec.resultString==="跳動")
         {
             music_btn_pressed()
          }
      if(myRec.resultString==="停止")
         {
           mouse_btn_pressed()
          }
}
  }
  function draw() {
    background("#DFE9FF"); //一開始的背景顏色 
    textSize(50)
    text("X:"+mouseX+"  Y:"+mouseY,50,50)
    for(var j=0;j<5;j++)
    {
    push()
			var f_s = face_size[j]
    translate(place_x[j],place_y[j])
	//開始畫圖案
	noStroke()
	fill("#F56861")
  rect(-70/face_size[j]+face_size[j], 50/face_size[j]+face_size[j], 140/face_size[j], 80/face_size[j], 50/face_size[j]);//上衣
	rect(-100/face_size[j]+face_size[j],-100/face_size[j]+face_size[j],200/face_size[j],150/face_size[j],200/face_size[j]); //帽子
	//ellipse(-30/face_size[j]+face_size[j],-150/face_size[j]+face_size[j],30/face_size[j],100/face_size[j]); //帽子耳朵
	//ellipse(30/face_size[j]+face_size[j],-150/face_size[j]+face_size[j],30/face_size[j],100/face_size[j]); //帽子耳朵	
		
	 if(mouseIsPressed){
		fill("#F56861") 
		ellipse(-30/face_size[j]+face_size[j],-100/face_size[j]+face_size[j],30/face_size[j],100/face_size[j]); //帽子耳朵
	ellipse(30/face_size[j]+face_size[j],-100/face_size[j]+face_size[j],30/face_size[j],100/face_size[j]); //帽子耳朵	 
		ellipse(-55/face_size[j]+face_size[j],-145/face_size[j]+face_size[j],60/face_size[j],20/face_size[j]); //帽子耳朵 折耳朵
		ellipse(55/face_size[j]+face_size[j],-145/face_size[j]+face_size[j],60/face_size[j],20/face_size[j]); //帽子耳朵 折耳朵
		 
	 }
		else{
			ellipse(-30/face_size[j]+face_size[j],-150/face_size[j]+face_size[j],30/face_size[j],100/face_size[j]); //帽子耳朵
	ellipse(30/face_size[j]+face_size[j],-150/face_size[j]+face_size[j],30/face_size[j],100/face_size[j]); //帽子耳朵	
			fill(255)
	ellipse(-30/face_size[j]+face_size[j],-130/face_size[j]+face_size[j],10/face_size[j],80/face_size[j]); //帽子耳朵
	ellipse(30/face_size[j]+face_size[j],-130/face_size[j]+face_size[j],10/face_size[j],80/face_size[j]); //帽子耳朵	
		}
			
	//fill(255)
	//ellipse(-30/face_size[j]+face_size[j],-130/face_size[j]+face_size[j],10/face_size[j],80/face_size[j]); //帽子耳朵
	//ellipse(30/face_size[j]+face_size[j],-130/face_size[j]+face_size[j],10/face_size[j],80/face_size[j]); //帽子耳朵	
	fill("#FFDEAD") 
	rect(-70/face_size[j]+face_size[j], 120/face_size[j]+face_size[j], 140/face_size[j], 80/face_size[j], 10/face_size[j]);//裙子		
	fill(255)
	rect(-40/face_size[j]+face_size[j],230/face_size[j]+face_size[j],30/face_size[j],50/face_size[j])//襪子
	rect(10/face_size[j]+face_size[j],230/face_size[j]+face_size[j],30/face_size[j],50/face_size[j])//襪子	
	fill("#FFE8DC") //膚色
	rect(-40/face_size[j]+face_size[j],200/face_size[j]+face_size[j],30/face_size[j],50/face_size[j])//腳	
	rect(10/face_size[j]+face_size[j],200/face_size[j]+face_size[j],30/face_size[j],50/face_size[j])//腳		
	ellipse(-80/face_size[j]+face_size[j],150/face_size[j],65/face_size[j]); //右手
	ellipse(80/face_size[j]+face_size[j],150/face_size[j],65/face_size[j]); //左手
	//ellipse(-70/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
	//ellipse(90/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
	//ellipse(-90/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
	//ellipse(70/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
		 if(!songIsplay){
	fill("#F27713") //紅蘿蔔
	ellipse(-80/face_size[j]+face_size[j],105/face_size[j]+face_size[j],40/face_size[j],100/face_size[j]); //紅蘿蔔
	fill("#90F56F")
	ellipse(-70/face_size[j]+face_size[j],45/face_size[j]+face_size[j],20/face_size[j],40/face_size[j]); //葉
	ellipse(-90/face_size[j]+face_size[j],45/face_size[j]+face_size[j],20/face_size[j],40/face_size[j]); //葉
	fill("#77C722")		
	ellipse(-80/face_size[j]+face_size[j],45/face_size[j]+face_size[j],20/face_size[j],40/face_size[j]); //葉
		}
			 else{
          vol = amp.getLevel()
          console.log(vol)
	fill("#FFE8DC") //膚色			
	ellipse(-70/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
	ellipse(90/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
	ellipse(-90/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
	ellipse(70/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
			}
			
	fill("#8C635F")
	ellipse(-25/face_size[j]+face_size[j],280/face_size[j]+face_size[j],45/face_size[j],25/face_size[j])//鞋子
  ellipse(25/face_size[j]+face_size[j],280/face_size[j]+face_size[j],45/face_size[j],25/face_size[j])//鞋子	
	fill(0)
  fill(255)
	ellipse(face_size[j],100/face_size[j]+face_size[j],10/face_size[j],10/face_size[j]); //鈕扣
	ellipse(face_size[j],150/face_size[j]+face_size[j],10/face_size[j],10/face_size[j]); //鈕扣
	fill(50); //頭部
	noStroke();
  arc(face_size[j],-15/face_size[j]+face_size[j],250/face_size[j],40/face_size[j],180/face_size[j],face_size[j])//髮尾
	ellipse(face_size[j], -40/face_size[j]+face_size[j], 180/face_size[j], 170/face_size[j]); //頭髮		
	rect(-80/face_size[j]+face_size[j],-100/face_size[j]+face_size[j],160/face_size[j],30/face_size[j]) //角
	ellipseMode(CENTER); //耳朵
	strokeWeight(2);
	fill("#FFE8DC");
	ellipse(-77/face_size[j]+face_size[j],-10/face_size[j]+face_size[j], 25/face_size[j], 40/face_size[j]); //耳朵
	ellipse(78/face_size[j]+face_size[j],-13/face_size[j]+face_size[j], 25/face_size[j], 40/face_size[j]); //耳朵
	noStroke();
	fill("#FFE8DC");//臉
	ellipse(face_size[j],-20/face_size[j]+face_size[j], 159/face_size[j], 167/face_size[j]); 
	fill(0);//眼珠
	stroke(0);
	ellipse(-30/face_size[j]+face_size[j],-20/face_size[j]+face_size[j], 10/face_size[j], 20/face_size[j]); //眼睛
	ellipse(30/face_size[j]+face_size[j],-20/face_size[j]+face_size[j], 10/face_size[j], 20/face_size[j]); //眼睛
	fill(50);	
	noStroke();	
	rect(-45/face_size[j]+face_size[j],-92/face_size[j]+face_size[j],5/face_size[j],53/face_size[j],1/face_size[j])//瀏海
	rect(-25/face_size[j]+face_size[j],-103/face_size[j]+face_size[j],5/face_size[j],63/face_size[j],1/face_size[j])//瀏海	
  rect(-4/face_size[j]+face_size[j],-105/face_size[j]+face_size[j],5/face_size[j],65/face_size[j],1/face_size[j])//瀏海
	rect(35/face_size[j]+face_size[j],-95/face_size[j]+face_size[j],5/face_size[j],55/face_size[j],1/face_size[j])//瀏海	
	rect(15/face_size[j]+face_size[j],-105/face_size[j]+face_size[j],5/face_size[j],65/face_size[j],1/face_size[j])//瀏海	
	fill("#ffddd2")
	noFill();
	fill("#FF8286")
	strokeWeight(1.5);
		noStroke()
	ellipse(1/face_size[j]+face_size[j], 12/face_size[j]+face_size[j], 80/face_size[j], 15/face_size[j]) //嘴巴
	fill("#FCFAF9")
	rect(-22/face_size[j]+face_size[j],4/face_size[j]+face_size[j],50/face_size[j],5/face_size[j]) //牙齒
	fill("#FF417E")
	ellipse(45/face_size[j]+face_size[j],face_size[j],20/face_size[j],10/face_size[j]) //腮紅
	ellipse(-40/face_size[j]+face_size[j],face_size[j],20/face_size[j],10/face_size[j]) //腮紅 
	pop()		
			
	}
	}

## 物件跳動 耳朵跳動

設定一個函數畫物件

範例說明


function drawFlower(clr){
push()
	fill(255,211,33)
	ellipse(0, 0, 50);		//目前此圓，仍以圓心為座標點
	ellipseMode(CORNER)   // 設定以左上角為座標點上的座標
	fill(255,90,61)
	if(clr){
		fill(clr); //如果clr不是空的內容，就要設定為傳過來的值
	}
	for(var i =0;i<16;i++){
		ellipse(30, -20, 120, 40);  // 設定以左上角為座標點，做一個花瓣
		line(30,0,150,0)
		rotate(PI/8) //180度產生八片，360度產生16片
	}
		
	pop()
}

### 你的程式碼

var face_size=[]
var place_x=[]
var place_y=[]
var song
var songIsplay=false
var amp
var music_btn=[]
var mouse_btn=[]
var vol
var m_x,m_y
var Speech_btn=[]
var mosueIsplay=true
var myRec = new p5.SpeechRec();
var result=[]
function preload(){
  song = loadSound("Girasol - Quincas Moreira.mp3");
  
}
function setup() {
    createCanvas(windowWidth, windowHeight);
    angleMode(DEGREES)

  for (var i=0;i<5;i++){
    face_size[i] = random(0.5,5)
    place_x [i]= random(10,width)
    place_y [i]= random(10,height)
    }
  createCanvas(windowWidth, windowHeight);
    angleMode(DEGREES)
  //第一個按鈕
  music_btn = createButton("滑鼠折耳朵")
  music_btn.position(10,10)
  music_btn.size(300, 100);
  music_btn.style('background-color', '#F7F2B4');
  music_btn.style('font-size', '25px');
  music_btn.style('color', '#8D6CFF');
  music_btn.mousePressed(music_btn_pressed)
 
  //第二個按鈕
  mouse_btn = createButton("滑鼠折耳朵音樂拿胡蘿蔔")
  mouse_btn.position(300,10)
  mouse_btn.size(300, 100);
  mouse_btn.style('background-color', '#CBBEE0');
  mouse_btn.style('font-size', '25px');
  mouse_btn.style('color', '#8D6CFF');
  mouse_btn.mousePressed(mouse_btn_pressed)
  
  //第三個按鈕
  Speech_btn = createButton("語音辨識(開始動作/停下)")
  Speech_btn.position(590,10)
  Speech_btn.size(300, 100);
  Speech_btn.style('background-color', '#F7D6D5');
  Speech_btn.style('font-size', '25px');
  Speech_btn.style('color', '#8D6CFF');
  Speech_btn.mousePressed(Speech_btn_pressed)

  }

function music_btn_pressed(){
 song.stop()
  song.play()
  songIsplay = true
  amp=new p5.Amplitude()
  music_btn.style('background-color', '#FF88B5')
  mouse_btn.style('background-color', '#CBBEE0')
  Speech_btn.style('background-color', '#F7D6D5')
}
function mouse_btn_pressed(){
 song.pause()
  songIsplay = false
  music_btn.style('background-color', '#F7F2B4')
  mouse_btn.style('background-color', '#FF88B5')
  Speech_btn.style('background-color', '#F7D6D5')
}
function Speech_btn_pressed(){
  music_btn.style('background-color', '#F7F2B4')
  mouse_btn.style('background-color', '#CBBEE0')
  Speech_btn.style('background-color', '#FF88B5')
 myRec.onResult = showResult;
  myRec.start(); 
}
function showResult(){
  if(myRec.resultValue==true) {
    result = myRec.resultString
      if(myRec.resultString==="跳動")
         {
             music_btn_pressed()
          }
      if(myRec.resultString==="停止")
         {
           mouse_btn_pressed()
          }
}
  }
  function draw() {
    background("#DFE9FF"); //一開始的背景顏色 
    textSize(50)
    text("X:"+mouseX+"  Y:"+mouseY,50,50)
    for(var j=0;j<5;j++)
    {
    push()
   var f_s = face_size[j]
    translate(place_x[j],place_y[j])
 //開始畫圖案
 noStroke()
 fill("#F56861")
  rect(-70/face_size[j]+face_size[j], 50/face_size[j]+face_size[j], 140/face_size[j], 80/face_size[j], 50/face_size[j]);//上衣
 rect(-100/face_size[j]+face_size[j],-100/face_size[j]+face_size[j],200/face_size[j],150/face_size[j],200/face_size[j]); //帽子
 //ellipse(-30/face_size[j]+face_size[j],-150/face_size[j]+face_size[j],30/face_size[j],100/face_size[j]); //帽子耳朵
 //ellipse(30/face_size[j]+face_size[j],-150/face_size[j]+face_size[j],30/face_size[j],100/face_size[j]); //帽子耳朵 
  
  if(mouseIsPressed){
  fill("#F56861") 
  ellipse(-30/face_size[j]+face_size[j],-100/face_size[j]+face_size[j],30/face_size[j],100/face_size[j]); //帽子耳朵
 ellipse(30/face_size[j]+face_size[j],-100/face_size[j]+face_size[j],30/face_size[j],100/face_size[j]); //帽子耳朵  
  ellipse(-55/face_size[j]+face_size[j],-145/face_size[j]+face_size[j],60/face_size[j],20/face_size[j]); //帽子耳朵 折耳朵
  ellipse(55/face_size[j]+face_size[j],-145/face_size[j]+face_size[j],60/face_size[j],20/face_size[j]); //帽子耳朵 折耳朵
   
  }
  else{
   ellipse(-30/face_size[j]+face_size[j],-150/face_size[j]+face_size[j],30/face_size[j],100/face_size[j]); //帽子耳朵
 ellipse(30/face_size[j]+face_size[j],-150/face_size[j]+face_size[j],30/face_size[j],100/face_size[j]); //帽子耳朵 
   fill(255)
 ellipse(-30/face_size[j]+face_size[j],-130/face_size[j]+face_size[j],10/face_size[j],80/face_size[j]); //帽子耳朵
 ellipse(30/face_size[j]+face_size[j],-130/face_size[j]+face_size[j],10/face_size[j],80/face_size[j]); //帽子耳朵 
  }
   
 //fill(255)
 //ellipse(-30/face_size[j]+face_size[j],-130/face_size[j]+face_size[j],10/face_size[j],80/face_size[j]); //帽子耳朵
 //ellipse(30/face_size[j]+face_size[j],-130/face_size[j]+face_size[j],10/face_size[j],80/face_size[j]); //帽子耳朵 
 fill("#FFDEAD") 
 rect(-70/face_size[j]+face_size[j], 120/face_size[j]+face_size[j], 140/face_size[j], 80/face_size[j], 10/face_size[j]);//裙子  
 fill(255)
 rect(-40/face_size[j]+face_size[j],230/face_size[j]+face_size[j],30/face_size[j],50/face_size[j])//襪子
 rect(10/face_size[j]+face_size[j],230/face_size[j]+face_size[j],30/face_size[j],50/face_size[j])//襪子 
 fill("#FFE8DC") //膚色
 rect(-40/face_size[j]+face_size[j],200/face_size[j]+face_size[j],30/face_size[j],50/face_size[j])//腳 
 rect(10/face_size[j]+face_size[j],200/face_size[j]+face_size[j],30/face_size[j],50/face_size[j])//腳  
 ellipse(-80/face_size[j]+face_size[j],150/face_size[j],65/face_size[j]); //右手
 ellipse(80/face_size[j]+face_size[j],150/face_size[j],65/face_size[j]); //左手
 //ellipse(-70/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
 //ellipse(90/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
 //ellipse(-90/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
 //ellipse(70/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
   if(!songIsplay){
 fill("#F27713") //紅蘿蔔
 ellipse(-80/face_size[j]+face_size[j],105/face_size[j]+face_size[j],40/face_size[j],100/face_size[j]); //紅蘿蔔
 fill("#90F56F")
 ellipse(-70/face_size[j]+face_size[j],45/face_size[j]+face_size[j],20/face_size[j],40/face_size[j]); //葉
 ellipse(-90/face_size[j]+face_size[j],45/face_size[j]+face_size[j],20/face_size[j],40/face_size[j]); //葉
 fill("#77C722")  
 ellipse(-80/face_size[j]+face_size[j],45/face_size[j]+face_size[j],20/face_size[j],40/face_size[j]); //葉
  }
    else{
          vol = amp.getLevel()
          console.log(vol)
 fill("#FFE8DC") //膚色   
 ellipse(-70/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
 ellipse(90/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
 ellipse(-90/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
 ellipse(70/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
   }
   
 fill("#8C635F")
 ellipse(-25/face_size[j]+face_size[j],280/face_size[j]+face_size[j],45/face_size[j],25/face_size[j])//鞋子
  ellipse(25/face_size[j]+face_size[j],280/face_size[j]+face_size[j],45/face_size[j],25/face_size[j])//鞋子 
 fill(0)
  fill(255)
 ellipse(face_size[j],100/face_size[j]+face_size[j],10/face_size[j],10/face_size[j]); //鈕扣
 ellipse(face_size[j],150/face_size[j]+face_size[j],10/face_size[j],10/face_size[j]); //鈕扣
 fill(50); //頭部
 noStroke();
  arc(face_size[j],-15/face_size[j]+face_size[j],250/face_size[j],40/face_size[j],180/face_size[j],face_size[j])//髮尾
 ellipse(face_size[j], -40/face_size[j]+face_size[j], 180/face_size[j], 170/face_size[j]); //頭髮  
 rect(-80/face_size[j]+face_size[j],-100/face_size[j]+face_size[j],160/face_size[j],30/face_size[j]) //角
 ellipseMode(CENTER); //耳朵
 strokeWeight(2);
 fill("#FFE8DC");
 ellipse(-77/face_size[j]+face_size[j],-10/face_size[j]+face_size[j], 25/face_size[j], 40/face_size[j]); //耳朵
 ellipse(78/face_size[j]+face_size[j],-13/face_size[j]+face_size[j], 25/face_size[j], 40/face_size[j]); //耳朵
 noStroke();
 fill("#FFE8DC");//臉
 ellipse(face_size[j],-20/face_size[j]+face_size[j], 159/face_size[j], 167/face_size[j]); 
 fill(0);//眼珠
 stroke(0);
 ellipse(-30/face_size[j]+face_size[j],-20/face_size[j]+face_size[j], 10/face_size[j], 20/face_size[j]); //眼睛
 ellipse(30/face_size[j]+face_size[j],-20/face_size[j]+face_size[j], 10/face_size[j], 20/face_size[j]); //眼睛
 fill(50); 
 noStroke(); 
 rect(-45/face_size[j]+face_size[j],-92/face_size[j]+face_size[j],5/face_size[j],53/face_size[j],1/face_size[j])//瀏海
 rect(-25/face_size[j]+face_size[j],-103/face_size[j]+face_size[j],5/face_size[j],63/face_size[j],1/face_size[j])//瀏海 
  rect(-4/face_size[j]+face_size[j],-105/face_size[j]+face_size[j],5/face_size[j],65/face_size[j],1/face_size[j])//瀏海
 rect(35/face_size[j]+face_size[j],-95/face_size[j]+face_size[j],5/face_size[j],55/face_size[j],1/face_size[j])//瀏海 
 rect(15/face_size[j]+face_size[j],-105/face_size[j]+face_size[j],5/face_size[j],65/face_size[j],1/face_size[j])//瀏海 
 fill("#ffddd2")
 noFill();
 fill("#FF8286")
 strokeWeight(1.5);
  noStroke()
 ellipse(1/face_size[j]+face_size[j], 12/face_size[j]+face_size[j], 80/face_size[j], 15/face_size[j]) //嘴巴
 fill("#FCFAF9")
 rect(-22/face_size[j]+face_size[j],4/face_size[j]+face_size[j],50/face_size[j],5/face_size[j]) //牙齒
 fill("#FF417E")
 ellipse(45/face_size[j]+face_size[j],face_size[j],20/face_size[j],10/face_size[j]) //腮紅
 ellipse(-40/face_size[j]+face_size[j],face_size[j],20/face_size[j],10/face_size[j]) //腮紅 
 pop()  
   
 }
 }

---

## 音樂跳動 滑鼠折耳朵音樂拿胡蘿蔔

### 音樂的播放程式碼

設定一個變數songIsplay，判斷是否正在播放否


#### 範例說明

function music_btn_pressed(){
  song.stop()
  song.play()
  songIsplay = true
  mosueIsplay = false
  amp=new p5.Amplitude()
  

}

---

#### 利用songIsplay判斷是否需要位移多少(m_x與m_y為位移數值)

if(songIsplay){
    vol = amp.getLevel()
    m_x =map(vol,0,1,0,width) 
    m_y= map(vol,0,1,0,height)
  }
  else
  if(mosueIsplay)
  {
    m_x = mouseX
    m_y= mouseY

  }

### 你的程式碼

var face_size=[]
var place_x=[]
var place_y=[]
var song
var songIsplay=false
var amp
var music_btn=[]
var mouse_btn=[]
var vol
var m_x,m_y
var Speech_btn=[]
var mosueIsplay=true
var myRec = new p5.SpeechRec();
var result=[]
function preload(){
  song = loadSound("Girasol - Quincas Moreira.mp3");
  
}
function setup() {
    createCanvas(windowWidth, windowHeight);
    angleMode(DEGREES)

  for (var i=0;i<5;i++){
    face_size[i] = random(0.5,5)
    place_x [i]= random(10,width)
    place_y [i]= random(10,height)
    }
  createCanvas(windowWidth, windowHeight);
    angleMode(DEGREES)
  //第一個按鈕
  music_btn = createButton("滑鼠折耳朵")
  music_btn.position(10,10)
  music_btn.size(300, 100);
  music_btn.style('background-color', '#F7F2B4');
  music_btn.style('font-size', '25px');
  music_btn.style('color', '#8D6CFF');
  music_btn.mousePressed(music_btn_pressed)
 
  //第二個按鈕
  mouse_btn = createButton("滑鼠折耳朵音樂拿胡蘿蔔")
  mouse_btn.position(300,10)
  mouse_btn.size(300, 100);
  mouse_btn.style('background-color', '#CBBEE0');
  mouse_btn.style('font-size', '25px');
  mouse_btn.style('color', '#8D6CFF');
  mouse_btn.mousePressed(mouse_btn_pressed)
  
  //第三個按鈕
  Speech_btn = createButton("語音辨識(開始動作/停下)")
  Speech_btn.position(590,10)
  Speech_btn.size(300, 100);
  Speech_btn.style('background-color', '#F7D6D5');
  Speech_btn.style('font-size', '25px');
  Speech_btn.style('color', '#8D6CFF');
  Speech_btn.mousePressed(Speech_btn_pressed)

  }

function music_btn_pressed(){
 song.stop()
  song.play()
  songIsplay = true
  amp=new p5.Amplitude()
  music_btn.style('background-color', '#FF88B5')
  mouse_btn.style('background-color', '#CBBEE0')
  Speech_btn.style('background-color', '#F7D6D5')
}
function mouse_btn_pressed(){
 song.pause()
  songIsplay = false
  music_btn.style('background-color', '#F7F2B4')
  mouse_btn.style('background-color', '#FF88B5')
  Speech_btn.style('background-color', '#F7D6D5')
}
function Speech_btn_pressed(){
  music_btn.style('background-color', '#F7F2B4')
  mouse_btn.style('background-color', '#CBBEE0')
  Speech_btn.style('background-color', '#FF88B5')
 myRec.onResult = showResult;
  myRec.start(); 
}
function showResult(){
  if(myRec.resultValue==true) {
    result = myRec.resultString
      if(myRec.resultString==="跳動")
         {
             music_btn_pressed()
          }
      if(myRec.resultString==="停止")
         {
           mouse_btn_pressed()
          }
}
  }
  function draw() {
    background("#DFE9FF"); //一開始的背景顏色 
    textSize(50)
    text("X:"+mouseX+"  Y:"+mouseY,50,50)
    for(var j=0;j<5;j++)
    {
    push()
   var f_s = face_size[j]
    translate(place_x[j],place_y[j])
 //開始畫圖案
 noStroke()
 fill("#F56861")
  rect(-70/face_size[j]+face_size[j], 50/face_size[j]+face_size[j], 140/face_size[j], 80/face_size[j], 50/face_size[j]);//上衣
 rect(-100/face_size[j]+face_size[j],-100/face_size[j]+face_size[j],200/face_size[j],150/face_size[j],200/face_size[j]); //帽子
 //ellipse(-30/face_size[j]+face_size[j],-150/face_size[j]+face_size[j],30/face_size[j],100/face_size[j]); //帽子耳朵
 //ellipse(30/face_size[j]+face_size[j],-150/face_size[j]+face_size[j],30/face_size[j],100/face_size[j]); //帽子耳朵 
  
  if(mouseIsPressed){
  fill("#F56861") 
  ellipse(-30/face_size[j]+face_size[j],-100/face_size[j]+face_size[j],30/face_size[j],100/face_size[j]); //帽子耳朵
 ellipse(30/face_size[j]+face_size[j],-100/face_size[j]+face_size[j],30/face_size[j],100/face_size[j]); //帽子耳朵  
  ellipse(-55/face_size[j]+face_size[j],-145/face_size[j]+face_size[j],60/face_size[j],20/face_size[j]); //帽子耳朵 折耳朵
  ellipse(55/face_size[j]+face_size[j],-145/face_size[j]+face_size[j],60/face_size[j],20/face_size[j]); //帽子耳朵 折耳朵
   
  }
  else{
   ellipse(-30/face_size[j]+face_size[j],-150/face_size[j]+face_size[j],30/face_size[j],100/face_size[j]); //帽子耳朵
 ellipse(30/face_size[j]+face_size[j],-150/face_size[j]+face_size[j],30/face_size[j],100/face_size[j]); //帽子耳朵 
   fill(255)
 ellipse(-30/face_size[j]+face_size[j],-130/face_size[j]+face_size[j],10/face_size[j],80/face_size[j]); //帽子耳朵
 ellipse(30/face_size[j]+face_size[j],-130/face_size[j]+face_size[j],10/face_size[j],80/face_size[j]); //帽子耳朵 
  }
   
 //fill(255)
 //ellipse(-30/face_size[j]+face_size[j],-130/face_size[j]+face_size[j],10/face_size[j],80/face_size[j]); //帽子耳朵
 //ellipse(30/face_size[j]+face_size[j],-130/face_size[j]+face_size[j],10/face_size[j],80/face_size[j]); //帽子耳朵 
 fill("#FFDEAD") 
 rect(-70/face_size[j]+face_size[j], 120/face_size[j]+face_size[j], 140/face_size[j], 80/face_size[j], 10/face_size[j]);//裙子  
 fill(255)
 rect(-40/face_size[j]+face_size[j],230/face_size[j]+face_size[j],30/face_size[j],50/face_size[j])//襪子
 rect(10/face_size[j]+face_size[j],230/face_size[j]+face_size[j],30/face_size[j],50/face_size[j])//襪子 
 fill("#FFE8DC") //膚色
 rect(-40/face_size[j]+face_size[j],200/face_size[j]+face_size[j],30/face_size[j],50/face_size[j])//腳 
 rect(10/face_size[j]+face_size[j],200/face_size[j]+face_size[j],30/face_size[j],50/face_size[j])//腳  
 ellipse(-80/face_size[j]+face_size[j],150/face_size[j],65/face_size[j]); //右手
 ellipse(80/face_size[j]+face_size[j],150/face_size[j],65/face_size[j]); //左手
 //ellipse(-70/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
 //ellipse(90/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
 //ellipse(-90/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
 //ellipse(70/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
   if(!songIsplay){
 fill("#F27713") //紅蘿蔔
 ellipse(-80/face_size[j]+face_size[j],105/face_size[j]+face_size[j],40/face_size[j],100/face_size[j]); //紅蘿蔔
 fill("#90F56F")
 ellipse(-70/face_size[j]+face_size[j],45/face_size[j]+face_size[j],20/face_size[j],40/face_size[j]); //葉
 ellipse(-90/face_size[j]+face_size[j],45/face_size[j]+face_size[j],20/face_size[j],40/face_size[j]); //葉
 fill("#77C722")  
 ellipse(-80/face_size[j]+face_size[j],45/face_size[j]+face_size[j],20/face_size[j],40/face_size[j]); //葉
  }
    else{
          vol = amp.getLevel()
          console.log(vol)
 fill("#FFE8DC") //膚色   
 ellipse(-70/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
 ellipse(90/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
 ellipse(-90/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
 ellipse(70/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
   }
   
 fill("#8C635F")
 ellipse(-25/face_size[j]+face_size[j],280/face_size[j]+face_size[j],45/face_size[j],25/face_size[j])//鞋子
  ellipse(25/face_size[j]+face_size[j],280/face_size[j]+face_size[j],45/face_size[j],25/face_size[j])//鞋子 
 fill(0)
  fill(255)
 ellipse(face_size[j],100/face_size[j]+face_size[j],10/face_size[j],10/face_size[j]); //鈕扣
 ellipse(face_size[j],150/face_size[j]+face_size[j],10/face_size[j],10/face_size[j]); //鈕扣
 fill(50); //頭部
 noStroke();
  arc(face_size[j],-15/face_size[j]+face_size[j],250/face_size[j],40/face_size[j],180/face_size[j],face_size[j])//髮尾
 ellipse(face_size[j], -40/face_size[j]+face_size[j], 180/face_size[j], 170/face_size[j]); //頭髮  
 rect(-80/face_size[j]+face_size[j],-100/face_size[j]+face_size[j],160/face_size[j],30/face_size[j]) //角
 ellipseMode(CENTER); //耳朵
 strokeWeight(2);
 fill("#FFE8DC");
 ellipse(-77/face_size[j]+face_size[j],-10/face_size[j]+face_size[j], 25/face_size[j], 40/face_size[j]); //耳朵
 ellipse(78/face_size[j]+face_size[j],-13/face_size[j]+face_size[j], 25/face_size[j], 40/face_size[j]); //耳朵
 noStroke();
 fill("#FFE8DC");//臉
 ellipse(face_size[j],-20/face_size[j]+face_size[j], 159/face_size[j], 167/face_size[j]); 
 fill(0);//眼珠
 stroke(0);
 ellipse(-30/face_size[j]+face_size[j],-20/face_size[j]+face_size[j], 10/face_size[j], 20/face_size[j]); //眼睛
 ellipse(30/face_size[j]+face_size[j],-20/face_size[j]+face_size[j], 10/face_size[j], 20/face_size[j]); //眼睛
 fill(50); 
 noStroke(); 
 rect(-45/face_size[j]+face_size[j],-92/face_size[j]+face_size[j],5/face_size[j],53/face_size[j],1/face_size[j])//瀏海
 rect(-25/face_size[j]+face_size[j],-103/face_size[j]+face_size[j],5/face_size[j],63/face_size[j],1/face_size[j])//瀏海 
  rect(-4/face_size[j]+face_size[j],-105/face_size[j]+face_size[j],5/face_size[j],65/face_size[j],1/face_size[j])//瀏海
 rect(35/face_size[j]+face_size[j],-95/face_size[j]+face_size[j],5/face_size[j],55/face_size[j],1/face_size[j])//瀏海 
 rect(15/face_size[j]+face_size[j],-105/face_size[j]+face_size[j],5/face_size[j],65/face_size[j],1/face_size[j])//瀏海 
 fill("#ffddd2")
 noFill();
 fill("#FF8286")
 strokeWeight(1.5);
  noStroke()
 ellipse(1/face_size[j]+face_size[j], 12/face_size[j]+face_size[j], 80/face_size[j], 15/face_size[j]) //嘴巴
 fill("#FCFAF9")
 rect(-22/face_size[j]+face_size[j],4/face_size[j]+face_size[j],50/face_size[j],5/face_size[j]) //牙齒
 fill("#FF417E")
 ellipse(45/face_size[j]+face_size[j],face_size[j],20/face_size[j],10/face_size[j]) //腮紅
 ellipse(-40/face_size[j]+face_size[j],face_size[j],20/face_size[j],10/face_size[j]) //腮紅 
 pop()  
   
 }
 }

## 語音辨識

需要有個p5.speech.js檔案

### 範例說明

function Speech_btn_pressed(){
  myRec.onResult = showResult;
	myRec.start();
 
  // Speech_btn.style('value', '請發音');

}

---

### 辨識後解讀語音內容

function showResult()
	{
		if(myRec.resultValue==true) {
            //顯示辨識文字
          push()
            translate(0,0)
            background(192, 255, 192);
            fill(255,0,0)
            textStyle("italic")
            text(myRec.resultString,1200,10);
            text(myRec.resultString,0, height/2);
          pop()
        //=======================
          result = myRec.resultString
          if(myRec.resultString==="跳舞")
          {
            music_btn_pressed()
          }
          if(myRec.resultString==="不要跳")
          {
            song.pause()
            mosueIsplay = true
            songIsplay = false
            }
		}
	}

### 你的程式碼

var face_size=[]
var place_x=[]
var place_y=[]
var song
var songIsplay=false
var amp
var music_btn=[]
var mouse_btn=[]
var vol
var m_x,m_y
var Speech_btn=[]
var mosueIsplay=true
var myRec = new p5.SpeechRec();
var result=[]
function preload(){
song = loadSound("Girasol - Quincas Moreira.mp3");

}
function setup() {
createCanvas(windowWidth, windowHeight);
angleMode(DEGREES)

for (var i=0;i<5;i++){
face_size[i] = random(0.5,5)
place_x [i]= random(10,width)
place_y [i]= random(10,height)
}
createCanvas(windowWidth, windowHeight);
angleMode(DEGREES)
//第一個按鈕
music_btn = createButton("滑鼠折耳朵")
music_btn.position(10,10)
music_btn.size(300, 100);
music_btn.style('background-color', '#F7F2B4');
music_btn.style('font-size', '25px');
music_btn.style('color', '#8D6CFF');
music_btn.mousePressed(music_btn_pressed)

//第二個按鈕
mouse_btn = createButton("滑鼠折耳朵音樂拿胡蘿蔔")
mouse_btn.position(300,10)
mouse_btn.size(300, 100);
mouse_btn.style('background-color', '#CBBEE0');
mouse_btn.style('font-size', '25px');
mouse_btn.style('color', '#8D6CFF');
mouse_btn.mousePressed(mouse_btn_pressed)

//第三個按鈕
Speech_btn = createButton("語音辨識(開始動作/停下)")
Speech_btn.position(590,10)
Speech_btn.size(300, 100);
Speech_btn.style('background-color', '#F7D6D5');
Speech_btn.style('font-size', '25px');
Speech_btn.style('color', '#8D6CFF');
Speech_btn.mousePressed(Speech_btn_pressed)

}

function music_btn_pressed(){
song.stop()
song.play()
songIsplay = true
amp=new p5.Amplitude()
music_btn.style('background-color', '#FF88B5')
mouse_btn.style('background-color', '#CBBEE0')
Speech_btn.style('background-color', '#F7D6D5')
}
function mouse_btn_pressed(){
song.pause()
songIsplay = false
music_btn.style('background-color', '#F7F2B4')
mouse_btn.style('background-color', '#FF88B5')
Speech_btn.style('background-color', '#F7D6D5')
}
function Speech_btn_pressed(){
music_btn.style('background-color', '#F7F2B4')
mouse_btn.style('background-color', '#CBBEE0')
Speech_btn.style('background-color', '#FF88B5')
myRec.onResult = showResult;
myRec.start();
}
function showResult(){
if(myRec.resultValue==true) {
result = myRec.resultString
if(myRec.resultString==="跳動")
{
music_btn_pressed()
}
if(myRec.resultString==="停止")
{
mouse_btn_pressed()
}
}
}
function draw() {
background("#DFE9FF"); //一開始的背景顏色
textSize(50)
text("X:"+mouseX+" Y:"+mouseY,50,50)
for(var j=0;j<5;j++)
{
push()
var f_s = face_size[j]
translate(place_x[j],place_y[j])
//開始畫圖案
noStroke()
fill("#F56861")
rect(-70/face_size[j]+face_size[j], 50/face_size[j]+face_size[j], 140/face_size[j], 80/face_size[j], 50/face_size[j]);//上衣
rect(-100/face_size[j]+face_size[j],-100/face_size[j]+face_size[j],200/face_size[j],150/face_size[j],200/face_size[j]); //帽子
//ellipse(-30/face_size[j]+face_size[j],-150/face_size[j]+face_size[j],30/face_size[j],100/face_size[j]); //帽子耳朵
//ellipse(30/face_size[j]+face_size[j],-150/face_size[j]+face_size[j],30/face_size[j],100/face_size[j]); //帽子耳朵

if(mouseIsPressed){
fill("#F56861")
ellipse(-30/face_size[j]+face_size[j],-100/face_size[j]+face_size[j],30/face_size[j],100/face_size[j]); //帽子耳朵
ellipse(30/face_size[j]+face_size[j],-100/face_size[j]+face_size[j],30/face_size[j],100/face_size[j]); //帽子耳朵
ellipse(-55/face_size[j]+face_size[j],-145/face_size[j]+face_size[j],60/face_size[j],20/face_size[j]); //帽子耳朵 折耳朵
ellipse(55/face_size[j]+face_size[j],-145/face_size[j]+face_size[j],60/face_size[j],20/face_size[j]); //帽子耳朵 折耳朵

}
else{
ellipse(-30/face_size[j]+face_size[j],-150/face_size[j]+face_size[j],30/face_size[j],100/face_size[j]); //帽子耳朵
ellipse(30/face_size[j]+face_size[j],-150/face_size[j]+face_size[j],30/face_size[j],100/face_size[j]); //帽子耳朵
fill(255)
ellipse(-30/face_size[j]+face_size[j],-130/face_size[j]+face_size[j],10/face_size[j],80/face_size[j]); //帽子耳朵
ellipse(30/face_size[j]+face_size[j],-130/face_size[j]+face_size[j],10/face_size[j],80/face_size[j]); //帽子耳朵
}

//fill(255)
//ellipse(-30/face_size[j]+face_size[j],-130/face_size[j]+face_size[j],10/face_size[j],80/face_size[j]); //帽子耳朵
//ellipse(30/face_size[j]+face_size[j],-130/face_size[j]+face_size[j],10/face_size[j],80/face_size[j]); //帽子耳朵
fill("#FFDEAD")
rect(-70/face_size[j]+face_size[j], 120/face_size[j]+face_size[j], 140/face_size[j], 80/face_size[j], 10/face_size[j]);//裙子
fill(255)
rect(-40/face_size[j]+face_size[j],230/face_size[j]+face_size[j],30/face_size[j],50/face_size[j])//襪子
rect(10/face_size[j]+face_size[j],230/face_size[j]+face_size[j],30/face_size[j],50/face_size[j])//襪子
fill("#FFE8DC") //膚色
rect(-40/face_size[j]+face_size[j],200/face_size[j]+face_size[j],30/face_size[j],50/face_size[j])//腳
rect(10/face_size[j]+face_size[j],200/face_size[j]+face_size[j],30/face_size[j],50/face_size[j])//腳
ellipse(-80/face_size[j]+face_size[j],150/face_size[j],65/face_size[j]); //右手
ellipse(80/face_size[j]+face_size[j],150/face_size[j],65/face_size[j]); //左手
//ellipse(-70/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
//ellipse(90/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
//ellipse(-90/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
//ellipse(70/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
if(!songIsplay){
fill("#F27713") //紅蘿蔔
ellipse(-80/face_size[j]+face_size[j],105/face_size[j]+face_size[j],40/face_size[j],100/face_size[j]); //紅蘿蔔
fill("#90F56F")
ellipse(-70/face_size[j]+face_size[j],45/face_size[j]+face_size[j],20/face_size[j],40/face_size[j]); //葉
ellipse(-90/face_size[j]+face_size[j],45/face_size[j]+face_size[j],20/face_size[j],40/face_size[j]); //葉
fill("#77C722")
ellipse(-80/face_size[j]+face_size[j],45/face_size[j]+face_size[j],20/face_size[j],40/face_size[j]); //葉
}
else{
vol = amp.getLevel()
console.log(vol)
fill("#FFE8DC") //膚色
ellipse(-70/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
ellipse(90/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
ellipse(-90/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
ellipse(70/face_size[j]+face_size[j],125/face_size[j]+face_size[j],20/face_size[j],70/face_size[j]); //手指
}

fill("#8C635F")
ellipse(-25/face_size[j]+face_size[j],280/face_size[j]+face_size[j],45/face_size[j],25/face_size[j])//鞋子
ellipse(25/face_size[j]+face_size[j],280/face_size[j]+face_size[j],45/face_size[j],25/face_size[j])//鞋子
fill(0)
fill(255)
ellipse(face_size[j],100/face_size[j]+face_size[j],10/face_size[j],10/face_size[j]); //鈕扣
ellipse(face_size[j],150/face_size[j]+face_size[j],10/face_size[j],10/face_size[j]); //鈕扣
fill(50); //頭部
noStroke();
arc(face_size[j],-15/face_size[j]+face_size[j],250/face_size[j],40/face_size[j],180/face_size[j],face_size[j])//髮尾
ellipse(face_size[j], -40/face_size[j]+face_size[j], 180/face_size[j], 170/face_size[j]); //頭髮
rect(-80/face_size[j]+face_size[j],-100/face_size[j]+face_size[j],160/face_size[j],30/face_size[j]) //角
ellipseMode(CENTER); //耳朵
strokeWeight(2);
fill("#FFE8DC");
ellipse(-77/face_size[j]+face_size[j],-10/face_size[j]+face_size[j], 25/face_size[j], 40/face_size[j]); //耳朵
ellipse(78/face_size[j]+face_size[j],-13/face_size[j]+face_size[j], 25/face_size[j], 40/face_size[j]); //耳朵
noStroke();
fill("#FFE8DC");//臉
ellipse(face_size[j],-20/face_size[j]+face_size[j], 159/face_size[j], 167/face_size[j]);
fill(0);//眼珠
stroke(0);
ellipse(-30/face_size[j]+face_size[j],-20/face_size[j]+face_size[j], 10/face_size[j], 20/face_size[j]); //眼睛
ellipse(30/face_size[j]+face_size[j],-20/face_size[j]+face_size[j], 10/face_size[j], 20/face_size[j]); //眼睛
fill(50);
noStroke();
rect(-45/face_size[j]+face_size[j],-92/face_size[j]+face_size[j],5/face_size[j],53/face_size[j],1/face_size[j])//瀏海
rect(-25/face_size[j]+face_size[j],-103/face_size[j]+face_size[j],5/face_size[j],63/face_size[j],1/face_size[j])//瀏海
rect(-4/face_size[j]+face_size[j],-105/face_size[j]+face_size[j],5/face_size[j],65/face_size[j],1/face_size[j])//瀏海
rect(35/face_size[j]+face_size[j],-95/face_size[j]+face_size[j],5/face_size[j],55/face_size[j],1/face_size[j])//瀏海
rect(15/face_size[j]+face_size[j],-105/face_size[j]+face_size[j],5/face_size[j],65/face_size[j],1/face_size[j])//瀏海
fill("#ffddd2")
noFill();
fill("#FF8286")
strokeWeight(1.5);
noStroke()
ellipse(1/face_size[j]+face_size[j], 12/face_size[j]+face_size[j], 80/face_size[j], 15/face_size[j]) //嘴巴
fill("#FCFAF9")
rect(-22/face_size[j]+face_size[j],4/face_size[j]+face_size[j],50/face_size[j],5/face_size[j]) //牙齒
fill("#FF417E")
ellipse(45/face_size[j]+face_size[j],face_size[j],20/face_size[j],10/face_size[j]) //腮紅
ellipse(-40/face_size[j]+face_size[j],face_size[j],20/face_size[j],10/face_size[j]) //腮紅
pop()

}
}

---

## 手指辨識 將手指張開比數字5 會出現兔子跟胡蘿蔔

請查閱上課說明


![](https://i.imgur.com/Scqyb48.gif)

var colors = "c739ab-f532a7-9a85cc-e96868-305cc4".split("-").map(a=>"#"+a)
var colors_r = "aaaaaa-bbbbbb-cccccc-dddddd-eeeeee".split("-").map(a=>"#"+a)
var clr,clr_r
//+++++++++++資料集設定+++++++++++++
var positionListX =[] //所有花的X軸位置，List串列，array陣列
var positionListY =[] //所有花的Y軸位置
var clrList=[] //所有花瓣顏色
var clr_r_List = [] //所有花圓心顏色
var clr_r_r_List =[]
var sizeList =[] //所有花的大小
//---------------------------

//+++++++++++複製貼上+++++++++++++
let handpose;
let video; //攝影機取得影像，放影像資料
let predictions = [];
let pointerX, pointerY, pointerZ;
let pointerX8,pointerY8,pointerZ8,pointerX16,pointerY16,d
let pointerX14,pointerY14,pointerX10,pointerY10
function setup() {
createCanvas(windowWidth, windowHeight);
for(var j=0;j<10;j++){
positionListX.push(random(width))
positionListY.push(random(height))
clrList.push(colors[int(random(colors.length))])
clr_r_List.push(colors_r[int(random(colors_r.length))])
sizeList.push(random(0.5,1.5))
push()
translate(positionListX[j],positionListY[j])
clr = clrList[j]
clr_r = clr_r_List[j]
drawFlower(clr,clr_r,sizeList[j])
pop()
}
//取得攝影機開始執行
video = createCapture(VIDEO);//取得攝影機的影像並把畫面放到video
video.size(width, height);
handpose = ml5.handpose(video, modelReady);
handpose.on("predict", (results) => {
predictions = results;
});
video.hide();
}
function modelReady() {
console.log("start");
}
function draw() { //攝影機反向
translate(width, 0);
scale(-1, 1);
background(255);
image(video,0,0,width,height);
d= dist(pointerX8,pointerY8,pointerX16,pointerY16)
for(var j=0;j<positionListX.length;j++){
r_Flower(clrList[j], clr_r_List[j],sizeList[j],positionListX[j],positionListY[j])
}
drawKeypoints(); //取得手指位置
}
function drawFlower(clr,clr_r,size=1){
push()
scale(size)
fill(255)
ellipse(350,150,150,130) //臉
ellipse(320,50, 25, 140); //耳朵
ellipse(370,50, 25, 140); //耳朵
ellipse(370,200, 200, 200); //身體
ellipse(450,270,30,30) //尾巴
fill(0)
ellipse(325,130, 10, 20); //眼睛
ellipse(370,130, 10, 20); //眼睛
rect(250,155,50,5,5)//鬍鬚
rect(250,145,50,5,5)//鬍鬚
rect(400,155,50,5,5)//鬍鬚
rect(400,145,50,5,5)//鬍鬚
fill("#D44654")
rect(345,155,5,10,10)//鼻子
fill("#F2A1C8")
ellipse(315,150,20,10) //腮紅
ellipse(380,150,20,10) //腮紅
ellipse(320,50,15,90); //耳朵
ellipse(370,50,15,90); //耳朵
fill("#F8F7D5")
ellipse(350,230,80,80); //花蕊
fill("#FAEB7E")
ellipse(350,230,20,20); //花蕊
fill(clr)
ellipse(350,200,20,40); //花瓣
ellipse(350,260,20,40); //花瓣
ellipse(322,230,40,20); //花瓣
ellipse(378,230,40,20); //花瓣
ellipseMode(CORNER)
for(var i =0 ;i<5;i++){
fill("#F27713") //紅蘿蔔
ellipse(-80,105,40,100); //紅蘿蔔
fill("#90F56F")
ellipse(-70,45,20,40); //葉
ellipse(-90,45,20,40); //葉
fill("#77C722")
ellipse(-80,45,20,40); //葉
rotate(PI/1.5)
}
pop()
}
function mousePressed(){
positionListX.push(mouseX)
positionListY.push(mouseY)
clrList.push(colors[int(random(colors.length))])
clr_r_List.push(colors_r[int(random(colors_r.length))])
sizeList.push(random(0.5,1.5))
let data_length = positionListX.length
push()
translate(positionListX[data_length-1],positionListY[data_length-1])
clr = clrList[data_length-1]
clr_r = clr_r_List[data_length-1]
drawFlower(clr,clr_r,sizeList[data_length-1])
pop()
}
//畫出第8 16 20點
function drawKeypoints() {
for (let i = 0; i < predictions.length; i += 1) {
const prediction = predictions[i];
for (let j = 0; j < prediction.landmarks.length; j += 1) {
const keypoint = prediction.landmarks[j];
fill(0, 255, 0);
if (j == 8) {
pointerX8 = map(keypoint[0],0,640,0,width)
pointerY8 = map(keypoint[1],0,480,0,height)
pointerZ8 = map(keypoint[2],0,480,0,height)
console.log(pointerZ8)
if(pointerZ8<-40)
{
R_draw(pointerX8,pointerY8)
}
ellipse(pointerX8, pointerY8, 30, 30);
}
else
if (j == 16) {
fill(255,0,0)
pointerX16 = map(keypoint[0],0,640,0,width)
pointerY16 = map(keypoint[1],0,480,0,height)
ellipse(pointerX16, pointerY16, 30, 30);
}
if (j == 20) {
fill(255,0,0)
pointerX20 = map(keypoint[0],0,640,0,width)
pointerY20 = map(keypoint[1],0,480,0,height)
ellipse(pointerX20, pointerY20, 30, 30);
}
else
if (j == 14) {
pointerX14 = keypoint[0];
pointerY14 = keypoint[1];
} else
if (j == 10) {
pointerX10 = keypoint[0];
pointerY10 = keypoint[1];
}
}
}
}
function r_Flower(F_clr,F_clr_r,F_size,F_x,F_y){
push()
translate(F_x,F_y);
if(pointerY14<pointerY16){
drawFlower(F_clr,F_clr_r,map(d,0,500,F_size-1.2,F_size+1.3))
}else
{rotate(frameCount/20)
drawFlower(F_clr,F_clr_r,F_size)}
pop()
}
function R_draw(handX,handY){
positionListX.push(handX)
positionListY.push(handY)
clrList.push(colors[int(random(colors.length))])
clr_r_List.push(colors_r[int(random(colors_r.length))])
sizeList.push(random(0.5,1.5))
let data_length = positionListX.length
push()
translate(positionListX[data_length-2],positionListY[data_length-2])
clr = clrList[data_length-2]
clr_r = clr_r_List[data_length-2]
drawFlower(clr,clr_r,sizeList[data_length-2])
pop()
}