---
# System prepended metadata

title: 期中作業三

---

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

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

# 第三作業_學生版

## 作業要求

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

---

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

![](https://hackmd.io/_uploads/ByYh1MJLo.png)

![](https://hackmd.io/_uploads/HyLOgzkUo.gif)


## 產生按鈕

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

```javascript=
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)
```

### 呼叫函數

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

}
```

![](https://i.imgur.com/gggctUJ.png)


### 你的程式碼

```javascript=
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()		
			
	}
	}

```

## 物件跳動 耳朵跳動

設定一個函數畫物件

範例說明

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

```javascript=
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()
}

```

### 你的程式碼

```javascript=
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，判斷是否正在播放否

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


#### 範例說明

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

}
```

---

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

```javascript=
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

  }
```


### 你的程式碼

```javascript=
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檔案

### 範例說明
![](https://i.imgur.com/ixpG7vs.gif)


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

}
```
---

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

```javascript=
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
            }
		}
	}
```javascript=

 ```
### 你的程式碼
```javascript=
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)


```javascript=
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()
}
```
