---
# System prepended metadata

title: 第三作業_409000618陳昱廷
tags: [範例版, 程式設計教材庫, Creative Coding, 互動藝術程式創作入門]

---

---
tags: 程式設計教材庫,範例版,互動藝術程式創作入門,Creative Coding
---

# 第三作業_409000618陳昱廷

## 作業要求

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


---




![](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/pQQyB72.png)

### 你的程式碼

```javascript=
// var face_x,face_y,face_size
var face_x = [] //新增臉x軸的變數
var face_y = [] //新增臉y軸的變數
var face_size = [] //新增臉大小的變數
var face_num = 7 //新增臉數量的變數並設為7


var song //宣告變數song
var songIsplay=false //宣告變數songIsplay=false
var amp //宣告變數amp
var vol=0 //宣告變數vol=0
var m_x,m_y //宣告變數m_x,m_y
var music_btn,mouse_btn,Speech_btn //宣告變數music_btn,mouse_btn,Speech_btn
var mosueIsplay=true //宣告變數mosueIsplay=true
var myRec = new p5.SpeechRec(); //宣告變數myRec = new p5.SpeechRec();
var result //宣告變數result
var clr=[] //宣告變數clr=[]
function preload(){ //設定存入歌曲"Bruno Mars - Locked Out Of Heaven (Official Video)MV.mp3
  song = loadSound("Bruno Mars - Locked Out Of Heaven (Official Video)MV.mp3");
}


var colors = "79b473-70a37f-41658a-414073-4c3957".split("-").map(a=>"#"+a)//輸入5個顏色，並設為變數

function setup() {
  createCanvas(windowWidth, windowHeight); //設定畫布大小為視窗寬高
  angleMode(DEGREES) 
  

  music_btn = createButton("播音樂") //設定按鈕(播音樂)
  music_btn.position(10,10) //設定按鈕(位置10,10)
  music_btn.size(300, 100); //設定按鈕(大小300,100)
  music_btn.style('background-color', 'black'); //設定按鈕(背景:黑)
  music_btn.style('font-size', '40px'); //設定按鈕(文字大小40)
  music_btn.style('color', 'yellow'); //設定按鈕(文字顏色黃色)
  music_btn.mousePressed(music_btn_pressed) //設定按鈕(music_btn_pressed)


  mouse_btn = createButton("暫停音樂")//設定按鈕(暫停音樂)
  mouse_btn.position(370,10)//設定按鈕(座標:370,10)
  mouse_btn.size(300, 100); //設定按鈕(大小300<100)
  mouse_btn.style('background-color', 'black'); //設定按鈕(背景:黑)
  mouse_btn.style('font-size', '40px'); //設定按鈕(文字大小40)
  mouse_btn.style('color', 'white'); //設定按鈕(文字顏色黃色)
  mouse_btn.mousePressed(mouse_btn_pressed) //設定按鈕(music_btn_pressed)

  Speech_btn = createButton("語音辨識(跳舞/不要跳)") //設定按鈕(語音辨識(跳舞/不要跳))
  Speech_btn.position(720,10) //設定按鈕(座標:740,10)
  Speech_btn.size(300, 100); //設定按鈕(大小300,100)
  Speech_btn.style('background-color', 'black'); //設定按鈕(背景:黑)
  Speech_btn.style('font-size', '28px'); //設定按鈕(文字大小28)
  Speech_btn.style('color', 'yellow'); //設定按鈕(文字顏色黃色)
  Speech_btn.mousePressed(Speech_btn_pressed)//設定按鈕(Speech_btn_pressed)



  for(var i=0;i<face_num;i++){ //設定迴圈，讓臉變多
    face_size[i] = random(100,300) //亂數臉的大小100~300
    face_x[i] = random(100,width) //臉亂數100~寬
    face_y[i] = random(200,height) //臉亂數200~高
    clr[i] = colors[int(random(0,colors.length))] //取亂數從0到顏色長度
  } 
}

function music_btn_pressed(){ //開始音樂
    song.stop()//音樂停止
    song.play()//音樂播放
    songIsplay = true//如果音樂撥放為真
    amp=new p5.Amplitude()//放音樂
    music_btn.style('background-color', '#4465A2');//設定按鈕顏色 
    mouse_btn.style('background-color', 'red');//設定按鈕顏色 
    Speech_btn.style('background-color', 'black');//設定按鈕顏色 
    
}

function mouse_btn_pressed(){ //暫停
  song.pause()//音樂暫停
  songIsplay = false//如果音樂撥放為否
  music_btn.style('background-color', '#456F33');//設定按鈕顏色 
  mouse_btn.style('background-color', '#a8dadc');//設定按鈕顏色 
  Speech_btn.style('background-color', '#953C7D');//設定按鈕顏色 
}


function Speech_btn_pressed(){ //語音說話
  music_btn.style('background-color', '#953C7D');//設定按鈕顏色 
  mouse_btn.style('background-color', '#456F33');//設定按鈕顏色 
  Speech_btn.style('background-color', '#a8dadc');//設定按鈕顏色 
  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("#67DC36"); //綠色背景
  textSize(40) //設文字大小40
  text("X:"+mouseX+"  Y:"+mouseY,50,50) //文字在50,50的位置顯示X、Y軸座標
  for(var j=0;j<face_num;j++){ //設定迴圈，讓臉變多
    push()  
     
      var f_s = face_size[j] //宣告f_s為face_size[j]
      translate(face_x[j],face_y[j]) //把(0,0)座標原點移到視窗的中間
      fill("#C7B438") //上臉色#C7B438
      noStroke() //不描邊
    
       for(var j=0;j<face_num;j++){
   push() 
   var f_s = face_size[j]
   translate(face_x[j],face_y[j])

   noStroke()
   fill("#d9ad89")
   
   ellipse(0,0,f_s)//臉
   
   fill(255)
   stroke(0)
   ellipse(f_s/6,-f_s/20,f_s/6.6)//左眼睛
   ellipse(-f_s/6,-f_s/20,f_s/6.6)//右眼睛

   fill(0)
   ellipse(f_s/6+map(mouseX,0,width,-f_s/60,f_s/30),-f_s/20+map(mouseY,0,height,-f_s/60,f_s/30),f_s/10)//左眼珠
   ellipse(-f_s/6+map(mouseX,0,width,-f_s/60,f_s/30),-f_s/20+map(mouseY,0,height,-f_s/60,f_s/30),f_s/10)//右眼珠
  
   fill("#0a0900")
   noStroke()
   beginShape()//左邊頭髮
      curveVertex(f_s/5,-f_s/1.5)
      curveVertex(f_s/5,-f_s/1.5)
      curveVertex(-f_s/3.75,-f_s/1.8)
      curveVertex(-f_s/2,-f_s/5)
      curveVertex(-f_s/1.875,f_s/2.1)
      curveVertex(-f_s/7.5,f_s/2.1)
      curveVertex(-f_s/3.1,f_s/3.3)
      curveVertex(-f_s/2.7,-f_s/10)
      curveVertex(-f_s/6.6,-f_s/4.2)
      curveVertex(f_s/20,-f_s/2)
      curveVertex(f_s/30,-f_s/2)

   endShape()

   beginShape()//右邊頭髮
   curveVertex(0,-f_s/1.8)
   curveVertex(0,-f_s/1.8)
   curveVertex(f_s/3.75,-f_s/1.8)
   curveVertex(f_s/2,-f_s/5)
  curveVertex(f_s/1.875,f_s/2.1)
  curveVertex(f_s/4.5,f_s/2.1)
   curveVertex(f_s/3.1,f_s/3.3)
   curveVertex(f_s/2.7,-f_s/10)
   curveVertex(-f_s/30,-f_s/2.5)
   curveVertex(-f_s/30,-f_s/2.5)

   endShape()

   fill("#595352") 
   beginShape();//左邊眉毛
      curveVertex(-f_s/3.75,-f_s/6.3)
      curveVertex(-f_s/3.75,-f_s/6.3)
      curveVertex(-f_s/10,-f_s/5.6)
      curveVertex(-f_s/13,-f_s/5.7)
      curveVertex(-f_s/12,-f_s/7.1)
      curveVertex(-f_s/12,-f_s/7.1)
   endShape()

   fill("#595352") 
   beginShape();//右邊眉毛
      curveVertex(f_s/3.75,-f_s/6.3)
      curveVertex(f_s/3.75,-f_s/6.3)
      curveVertex(f_s/10,-f_s/5.6)
      curveVertex(f_s/13,-f_s/5.7)
      curveVertex(f_s/12,-f_s/7.1)
      curveVertex(f_s/12,-f_s/7.1)
   endShape()
   
  fill("#d9ad89")
  ellipse(-f_s/2.7,0,f_s/7.5)//左耳
  ellipse(f_s/2.7,0,f_s/7.5)//右耳

  noFill()
  stroke("#582f0e")
  curve(f_s/6.6,f_s/20,f_s/2.7,f_s/20,f_s/2.6,-f_s/30,f_s/7.5,-f_s/20)//右耳渦
  curve(-f_s/6.6,f_s/20,-f_s/2.7,f_s/20,-f_s/2.6,-f_s/30,-f_s/7.5,-f_s/20)//左耳渦

  
  fill("#FFBB77")//鼻子
  line(f_s/150,f_s/20,-f_s/60,f_s/7.5) 
  line(f_s/30,f_s/7.5,-f_s/60,f_s/7.5) 


  if(mouseIsPressed)//如果按下滑鼠會
    {
      fill("#FF0000")
      noStroke()
      arc(0,f_s/6,f_s/7,f_s/6.6,0,90)//嘴巴
    }
    else//否則
    {
      fill("	#FF0000")
      noStroke()
      arc(0,f_s/4,f_s/5,f_s/6.6,0,180)//嘴巴弧度 上 arc弧度，全嘴唇，pi角度
    }

    if(mouseIsPressed)//如果按下滑鼠會
    {
      fill("#d9ad89")
      noStroke()
      ellipse(f_s/2.7,0,f_s/7.5)//右耳
      ellipse(-f_s/2.7,0,f_s/7.5)//左耳
      stroke("#582f0e");
      curve(f_s/6.6,f_s/20,f_s/2.7,f_s/20,f_s/2.6,-f_s/30,f_s/7.5,-f_s/20);//右耳渦
      curve(-f_s/6.6,f_s/20,-f_s/2.7,f_s/20,-f_s/2.6,-f_s/30,-f_s/7.5,-f_s/20);//左耳渦
    }
    else//否則
    {
      fill("#d9ad89")
      noStroke()
      ellipse(f_s/2.7,0,f_s/5)//右耳
      ellipse(-f_s/2.7,0,f_s/5)//左耳
      stroke("#582f0e");
      // strokeWeight(2)
      // curve(f_s/6.6,f_s/20,f_s/2.7,f_s/20,f_s/2.6,-f_s/30,f_s/7.5,-f_s/20);//右耳渦
      // curve(-f_s/6.6,f_s/20,-f_s/2.7,f_s/20,-f_s/2.6,-f_s/30,-f_s/7.5,-f_s/20);//左耳渦
      
      if(!songIsplay){
        fill("#d9ad89")
        noStroke()
        ellipse(f_s/2.7,0,f_s/7.5)//右耳
        ellipse(-f_s/2.7,0,f_s/7.5)//左耳
        stroke("#582f0e");
        curve(f_s/6.6,f_s/20,f_s/2.7,f_s/20,f_s/2.6,-f_s/30,f_s/7.5,-f_s/20);//右耳渦
        curve(-f_s/6.6,f_s/20,-f_s/2.7,f_s/20,-f_s/2.6,-f_s/30,-f_s/7.5,-f_s/20);//左耳渦
         //沒有播放
      }
      else{
      vol = amp.getLevel() //取得聲音值(值為0~1之間)
      // console.log(vol)//顯示網頁中console 數字
      fill("#d9ad89")
      noStroke()
      ellipse(f_s/2.7,0,f_s/5)//右耳
      ellipse(-110,0,f_s/2.7,0,f_s/5)//左耳
      noFill();
      // curve(f_s/6.6,f_s/20,f_s/2.7,f_s/20,f_s/2.6,-f_s/30,f_s/7.5,-f_s/10);//右耳渦
      // curve(-f_s/6.6,f_s/20,-f_s/2.7,f_s/20,-f_s/2.6,-f_s/30,-f_s/7.5,-f_s/10);//左耳渦
    }
    noFill()
    pop()
    }
    }
  }




```

## 物件跳動

設定一個函數畫物件

範例說明

```javascript=
function drawFlower(clr){
push()
	fill(255,211,33)
	ellipse(0, 0, 50);		//目前此圓，仍以圓心為座標點
	ellipseMode(CORNER)   // 設定以左上角為座標點上的座標
	fill(255,90,61)
	![](https://i.imgur.com/uxDOOHD.png)
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()
}

```

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


### 你的程式碼

```javascript=
```javascript=
// var face_x,face_y,face_size
var face_x = [] //新增臉x軸的變數
var face_y = [] //新增臉y軸的變數
var face_size = [] //新增臉大小的變數
var face_num = 7 //新增臉數量的變數並設為7


var song //宣告變數song
var songIsplay=false //宣告變數songIsplay=false
var amp //宣告變數amp
var vol=0 //宣告變數vol=0
var m_x,m_y //宣告變數m_x,m_y
var music_btn,mouse_btn,Speech_btn //宣告變數music_btn,mouse_btn,Speech_btn
var mosueIsplay=true //宣告變數mosueIsplay=true
var myRec = new p5.SpeechRec(); //宣告變數myRec = new p5.SpeechRec();
var result //宣告變數result
var clr=[] //宣告變數clr=[]
function preload(){ //設定存入歌曲"Bruno Mars - Locked Out Of Heaven (Official Video)MV.mp3
  song = loadSound("Bruno Mars - Locked Out Of Heaven (Official Video)MV.mp3");
}


var colors = "79b473-70a37f-41658a-414073-4c3957".split("-").map(a=>"#"+a)//輸入5個顏色，並設為變數

function setup() {
  createCanvas(windowWidth, windowHeight); //設定畫布大小為視窗寬高
  angleMode(DEGREES) 
  

  music_btn = createButton("播音樂") //設定按鈕(播音樂)
  music_btn.position(10,10) //設定按鈕(位置10,10)
  music_btn.size(300, 100); //設定按鈕(大小300,100)
  music_btn.style('background-color', 'black'); //設定按鈕(背景:黑)
  music_btn.style('font-size', '40px'); //設定按鈕(文字大小40)
  music_btn.style('color', 'yellow'); //設定按鈕(文字顏色黃色)
  music_btn.mousePressed(music_btn_pressed) //設定按鈕(music_btn_pressed)


  mouse_btn = createButton("暫停音樂")//設定按鈕(暫停音樂)
  mouse_btn.position(370,10)//設定按鈕(座標:370,10)
  mouse_btn.size(300, 100); //設定按鈕(大小300<100)
  mouse_btn.style('background-color', 'black'); //設定按鈕(背景:黑)
  mouse_btn.style('font-size', '40px'); //設定按鈕(文字大小40)
  mouse_btn.style('color', 'white'); //設定按鈕(文字顏色黃色)
  mouse_btn.mousePressed(mouse_btn_pressed) //設定按鈕(music_btn_pressed)

  Speech_btn = createButton("語音辨識(跳舞/不要跳)") //設定按鈕(語音辨識(跳舞/不要跳))
  Speech_btn.position(720,10) //設定按鈕(座標:740,10)
  Speech_btn.size(300, 100); //設定按鈕(大小300,100)
  Speech_btn.style('background-color', 'black'); //設定按鈕(背景:黑)
  Speech_btn.style('font-size', '28px'); //設定按鈕(文字大小28)
  Speech_btn.style('color', 'yellow'); //設定按鈕(文字顏色黃色)
  Speech_btn.mousePressed(Speech_btn_pressed)//設定按鈕(Speech_btn_pressed)



  for(var i=0;i<face_num;i++){ //設定迴圈，讓臉變多
    face_size[i] = random(100,300) //亂數臉的大小100~300
    face_x[i] = random(100,width) //臉亂數100~寬
    face_y[i] = random(200,height) //臉亂數200~高
    clr[i] = colors[int(random(0,colors.length))] //取亂數從0到顏色長度
  } 
}

function music_btn_pressed(){ //開始音樂
    song.stop()//音樂停止
    song.play()//音樂播放
    songIsplay = true//如果音樂撥放為真
    amp=new p5.Amplitude()//放音樂
    music_btn.style('background-color', '#4465A2');//設定按鈕顏色 
    mouse_btn.style('background-color', 'red');//設定按鈕顏色 
    Speech_btn.style('background-color', 'black');//設定按鈕顏色 
    
}

function mouse_btn_pressed(){ //暫停
  song.pause()//音樂暫停
  songIsplay = false//如果音樂撥放為否
  music_btn.style('background-color', '#456F33');//設定按鈕顏色 
  mouse_btn.style('background-color', '#a8dadc');//設定按鈕顏色 
  Speech_btn.style('background-color', '#953C7D');//設定按鈕顏色 
}


function Speech_btn_pressed(){ //語音說話
  music_btn.style('background-color', '#953C7D');//設定按鈕顏色 
  mouse_btn.style('background-color', '#456F33');//設定按鈕顏色 
  Speech_btn.style('background-color', '#a8dadc');//設定按鈕顏色 
  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(#67DC36); //綠色背景
  textSize(40) //設文字大小40
  text("X:"+mouseX+"  Y:"+mouseY,50,50) //文字在50,50的位置顯示X、Y軸座標
  for(var j=0;j<face_num;j++){ //設定迴圈，讓臉變多
    push()  
     
      var f_s = face_size[j] //宣告f_s為face_size[j]
      translate(face_x[j],face_y[j]) //把(0,0)座標原點移到視窗的中間
      fill('#C7B438') //上臉色#C7B438
      noStroke() //不描邊
    
       for(var j=0;j<face_num;j++){
   push() 
   var f_s = face_size[j]
   translate(face_x[j],face_y[j])

   noStroke()
   fill("#d9ad89")
   
   ellipse(0,0,f_s)//臉
   
   fill(255)
   stroke(0)
   ellipse(f_s/6,-f_s/20,f_s/6.6)//左眼睛
   ellipse(-f_s/6,-f_s/20,f_s/6.6)//右眼睛

   fill(0)
   ellipse(f_s/6+map(mouseX,0,width,-f_s/60,f_s/30),-f_s/20+map(mouseY,0,height,-f_s/60,f_s/30),f_s/10)//左眼珠
   ellipse(-f_s/6+map(mouseX,0,width,-f_s/60,f_s/30),-f_s/20+map(mouseY,0,height,-f_s/60,f_s/30),f_s/10)//右眼珠
  
   fill("#0a0900")
   noStroke()
   beginShape()//左邊頭髮
      curveVertex(f_s/5,-f_s/1.5)
      curveVertex(f_s/5,-f_s/1.5)
      curveVertex(-f_s/3.75,-f_s/1.8)
      curveVertex(-f_s/2,-f_s/5)
      curveVertex(-f_s/1.875,f_s/2.1)
      curveVertex(-f_s/7.5,f_s/2.1)
      curveVertex(-f_s/3.1,f_s/3.3)
      curveVertex(-f_s/2.7,-f_s/10)
      curveVertex(-f_s/6.6,-f_s/4.2)
      curveVertex(f_s/20,-f_s/2)
      curveVertex(f_s/30,-f_s/2)

   endShape()

   beginShape()//右邊頭髮
   curveVertex(0,-f_s/1.8)
   curveVertex(0,-f_s/1.8)
   curveVertex(f_s/3.75,-f_s/1.8)
   curveVertex(f_s/2,-f_s/5)
  curveVertex(f_s/1.875,f_s/2.1)
  curveVertex(f_s/4.5,f_s/2.1)
   curveVertex(f_s/3.1,f_s/3.3)
   curveVertex(f_s/2.7,-f_s/10)
   curveVertex(-f_s/30,-f_s/2.5)
   curveVertex(-f_s/30,-f_s/2.5)

   endShape()

   fill("#595352") 
   beginShape();//左邊眉毛
      curveVertex(-f_s/3.75,-f_s/6.3)
      curveVertex(-f_s/3.75,-f_s/6.3)
      curveVertex(-f_s/10,-f_s/5.6)
      curveVertex(-f_s/13,-f_s/5.7)
      curveVertex(-f_s/12,-f_s/7.1)
      curveVertex(-f_s/12,-f_s/7.1)
   endShape()

   fill("#595352") 
   beginShape();//右邊眉毛
      curveVertex(f_s/3.75,-f_s/6.3)
      curveVertex(f_s/3.75,-f_s/6.3)
      curveVertex(f_s/10,-f_s/5.6)
      curveVertex(f_s/13,-f_s/5.7)
      curveVertex(f_s/12,-f_s/7.1)
      curveVertex(f_s/12,-f_s/7.1)
   endShape()
   
  fill("#d9ad89")
  ellipse(-f_s/2.7,0,f_s/7.5)//左耳
  ellipse(f_s/2.7,0,f_s/7.5)//右耳

  noFill()
  stroke("#582f0e")
  curve(f_s/6.6,f_s/20,f_s/2.7,f_s/20,f_s/2.6,-f_s/30,f_s/7.5,-f_s/20)//右耳渦
  curve(-f_s/6.6,f_s/20,-f_s/2.7,f_s/20,-f_s/2.6,-f_s/30,-f_s/7.5,-f_s/20)//左耳渦

  
  fill("#FFBB77")//鼻子
  line(f_s/150,f_s/20,-f_s/60,f_s/7.5) 
  line(f_s/30,f_s/7.5,-f_s/60,f_s/7.5) 


  if(mouseIsPressed)//如果按下滑鼠會
    {
      fill("#FF0000")
      noStroke()
      arc(0,f_s/6,f_s/7,f_s/6.6,0,90)//嘴巴
    }
    else//否則
    {
      fill("	#FF0000")
      noStroke()
      arc(0,f_s/4,f_s/5,f_s/6.6,0,180)//嘴巴弧度 上 arc弧度，全嘴唇，pi角度
    }

    if(mouseIsPressed)//如果按下滑鼠會
    {
      fill("#d9ad89")
      noStroke()
      ellipse(f_s/2.7,0,f_s/7.5)//右耳
      ellipse(-f_s/2.7,0,f_s/7.5)//左耳
      stroke("#582f0e");
      curve(f_s/6.6,f_s/20,f_s/2.7,f_s/20,f_s/2.6,-f_s/30,f_s/7.5,-f_s/20);//右耳渦
      curve(-f_s/6.6,f_s/20,-f_s/2.7,f_s/20,-f_s/2.6,-f_s/30,-f_s/7.5,-f_s/20);//左耳渦
    }
    else//否則
    {
      fill("#d9ad89")
      noStroke()
      ellipse(f_s/2.7,0,f_s/5)//右耳
      ellipse(-f_s/2.7,0,f_s/5)//左耳
      stroke("#582f0e");
      // strokeWeight(2)
      // curve(f_s/6.6,f_s/20,f_s/2.7,f_s/20,f_s/2.6,-f_s/30,f_s/7.5,-f_s/20);//右耳渦
      // curve(-f_s/6.6,f_s/20,-f_s/2.7,f_s/20,-f_s/2.6,-f_s/30,-f_s/7.5,-f_s/20);//左耳渦
      
      if(!songIsplay){
        fill("#d9ad89")
        noStroke()
        ellipse(f_s/2.7,0,f_s/7.5)//右耳
        ellipse(-f_s/2.7,0,f_s/7.5)//左耳
        stroke("#582f0e");
        curve(f_s/6.6,f_s/20,f_s/2.7,f_s/20,f_s/2.6,-f_s/30,f_s/7.5,-f_s/20);//右耳渦
        curve(-f_s/6.6,f_s/20,-f_s/2.7,f_s/20,-f_s/2.6,-f_s/30,-f_s/7.5,-f_s/20);//左耳渦
         //沒有播放
      }
      else{
      vol = amp.getLevel() //取得聲音值(值為0~1之間)
      // console.log(vol)//顯示網頁中console 數字
      fill("#d9ad89")
      noStroke()
      ellipse(f_s/2.7,0,f_s/5)//右耳
      ellipse(-110,0,f_s/2.7,0,f_s/5)//左耳
      noFill();
      // curve(f_s/6.6,f_s/20,f_s/2.7,f_s/20,f_s/2.6,-f_s/30,f_s/7.5,-f_s/10);//右耳渦
      // curve(-f_s/6.6,f_s/20,-f_s/2.7,f_s/20,-f_s/2.6,-f_s/30,-f_s/7.5,-f_s/10);//左耳渦
    }
    noFill()
    pop()
    }
    }
  }


```

---



## 音樂跳動


### 音樂的播放程式碼

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

#### 範例說明

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

  }
```

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

### 你的程式碼

```javascript=
// var face_x,face_y,face_size
var face_x = [] 
var face_y = []
var face_size = []
var face_num = 7

// var song
// var songIsplay=false //設定此變數為'假'(false)，收到按下滑鼠把變數改為"真"(true)
// var amp
// var vol
// function preload(){
//   song = loadSound("Bruno Mars - Locked Out Of Heaven (Official Video)MV.mp3");
// }


var song
var songIsplay=false
var amp
var vol=0
var m_x,m_y
var music_btn,mouse_btn,Speech_btn
var mosueIsplay=true
var myRec = new p5.SpeechRec();
var result
var clr=[]
function preload(){
  song = loadSound("Bruno Mars - Locked Out Of Heaven (Official Video)MV.mp3");
}


var colors = "79b473-70a37f-41658a-414073-4c3957".split("-").map(a=>"#"+a)

function setup() {
  createCanvas(windowWidth, windowHeight);
  angleMode(DEGREES)
  // face_size = 400
  // face_x = width/2
  // face_y = height/2

  music_btn = createButton("播音樂") //設定按鈕(播音樂)
  music_btn.position(10,10) //設定按鈕(位置10,10)
  music_btn.size(300, 100); //設定按鈕(大小300,100)
  music_btn.style('background-color', 'black'); //設定按鈕(背景:黑)
  music_btn.style('font-size', '40px'); //設定按鈕(文字大小40)
  music_btn.style('color', 'yellow'); //設定按鈕(文字顏色黃色)
  music_btn.mousePressed(music_btn_pressed) //設定按鈕(music_btn_pressed)


  mouse_btn = createButton("暫停音樂")//設定按鈕(暫停音樂)
  mouse_btn.position(370,10)//設定按鈕(座標:370,10)
  mouse_btn.size(300, 100); //設定按鈕(大小300<100)
  mouse_btn.style('background-color', 'black'); //設定按鈕(背景:黑)
  mouse_btn.style('font-size', '40px'); //設定按鈕(文字大小40)
  mouse_btn.style('color', 'white'); //設定按鈕(文字顏色黃色)
  mouse_btn.mousePressed(mouse_btn_pressed) //設定按鈕(music_btn_pressed)

  Speech_btn = createButton("語音辨識(跳舞/不要跳)") //設定按鈕(語音辨識(跳舞/不要跳))
  Speech_btn.position(720,10) //設定按鈕(座標:740,10)
  Speech_btn.size(300, 100); //設定按鈕(大小300,100)
  Speech_btn.style('background-color', 'black'); //設定按鈕(背景:黑)
  Speech_btn.style('font-size', '28px'); //設定按鈕(文字大小28)
  Speech_btn.style('color', 'yellow'); //設定按鈕(文字顏色黃色)
  Speech_btn.mousePressed(Speech_btn_pressed)//設定按鈕(Speech_btn_pressed)

  // for(var i=0;i<face_num;i++){
  //   face_size[i] = 300  //臉的大小100~300
  //   face_x[i] = width/2
  //   face_y[i] = height/2
  // }

  for(var i=0;i<face_num;i++){
    face_size[i] = random(100,300)  //臉的大小100~400
    face_x[i] = random(100,width)
    face_y[i] = random(200,height)
    clr[i] = colors[int(random(0,colors.length))]
  }
}

function music_btn_pressed(){ //開始音樂
    song.stop()//音樂停止
    song.play()//音樂播放
    songIsplay = true//如果音樂撥放為真
    amp=new p5.Amplitude()//放音樂
    music_btn.style('background-color', '#4465A2');//設定按鈕顏色 
    mouse_btn.style('background-color', 'red');//設定按鈕顏色 
    Speech_btn.style('background-color', 'black');//設定按鈕顏色 
    
}

function mouse_btn_pressed(){ //暫停
  song.pause()//音樂暫停
  songIsplay = false//如果音樂撥放為否
  music_btn.style('background-color', '#456F33');//設定按鈕顏色 
  mouse_btn.style('background-color', '#a8dadc');//設定按鈕顏色 
  Speech_btn.style('background-color', '#953C7D');//設定按鈕顏色 
}


function Speech_btn_pressed(){ //語音說話
  music_btn.style('background-color', '#953C7D');//設定按鈕顏色 
  mouse_btn.style('background-color', '#456F33');//設定按鈕顏色 
  Speech_btn.style('background-color', '#a8dadc');//設定按鈕顏色 
  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(#67DC36); //綠色背景
  textSize(40) //設文字大小40
  text("X:"+mouseX+"  Y:"+mouseY,50,50) //文字在50,50的位置顯示X、Y軸座標
  for(var j=0;j<face_num;j++){ //設定迴圈，讓臉變多
    push()  
     
      var f_s = face_size[j] //宣告f_s為face_size[j]
      translate(face_x[j],face_y[j]) //把(0,0)座標原點移到視窗的中間
      fill('#C7B438') //上臉色#C7B438
      noStroke() //不描邊
    
       for(var j=0;j<face_num;j++){
   push() 
   var f_s = face_size[j]
   translate(face_x[j],face_y[j])

   noStroke()
   fill("#d9ad89")
   
   ellipse(0,0,f_s)//臉
   
   fill(255)
   stroke(0)
   ellipse(f_s/6,-f_s/20,f_s/6.6)//左眼睛
   ellipse(-f_s/6,-f_s/20,f_s/6.6)//右眼睛

   fill(0)
   ellipse(f_s/6+map(mouseX,0,width,-f_s/60,f_s/30),-f_s/20+map(mouseY,0,height,-f_s/60,f_s/30),f_s/10)//左眼珠
   ellipse(-f_s/6+map(mouseX,0,width,-f_s/60,f_s/30),-f_s/20+map(mouseY,0,height,-f_s/60,f_s/30),f_s/10)//右眼珠
  
   fill("#0a0900")
   noStroke()
   beginShape()//左邊頭髮
      curveVertex(f_s/5,-f_s/1.5)
      curveVertex(f_s/5,-f_s/1.5)
      curveVertex(-f_s/3.75,-f_s/1.8)
      curveVertex(-f_s/2,-f_s/5)
      curveVertex(-f_s/1.875,f_s/2.1)
      curveVertex(-f_s/7.5,f_s/2.1)
      curveVertex(-f_s/3.1,f_s/3.3)
      curveVertex(-f_s/2.7,-f_s/10)
      curveVertex(-f_s/6.6,-f_s/4.2)
      curveVertex(f_s/20,-f_s/2)
      curveVertex(f_s/30,-f_s/2)

   endShape()

   beginShape()//右邊頭髮
   curveVertex(0,-f_s/1.8)
   curveVertex(0,-f_s/1.8)
   curveVertex(f_s/3.75,-f_s/1.8)
   curveVertex(f_s/2,-f_s/5)
  curveVertex(f_s/1.875,f_s/2.1)
  curveVertex(f_s/4.5,f_s/2.1)
   curveVertex(f_s/3.1,f_s/3.3)
   curveVertex(f_s/2.7,-f_s/10)
   curveVertex(-f_s/30,-f_s/2.5)
   curveVertex(-f_s/30,-f_s/2.5)

   endShape()

   fill("#595352") 
   beginShape();//左邊眉毛
      curveVertex(-f_s/3.75,-f_s/6.3)
      curveVertex(-f_s/3.75,-f_s/6.3)
      curveVertex(-f_s/10,-f_s/5.6)
      curveVertex(-f_s/13,-f_s/5.7)
      curveVertex(-f_s/12,-f_s/7.1)
      curveVertex(-f_s/12,-f_s/7.1)
   endShape()

   fill("#595352") 
   beginShape();//右邊眉毛
      curveVertex(f_s/3.75,-f_s/6.3)
      curveVertex(f_s/3.75,-f_s/6.3)
      curveVertex(f_s/10,-f_s/5.6)
      curveVertex(f_s/13,-f_s/5.7)
      curveVertex(f_s/12,-f_s/7.1)
      curveVertex(f_s/12,-f_s/7.1)
   endShape()
   
  fill("#d9ad89")
  ellipse(-f_s/2.7,0,f_s/7.5)//左耳
  ellipse(f_s/2.7,0,f_s/7.5)//右耳

  noFill()
  stroke("#582f0e")
  curve(f_s/6.6,f_s/20,f_s/2.7,f_s/20,f_s/2.6,-f_s/30,f_s/7.5,-f_s/20)//右耳渦
  curve(-f_s/6.6,f_s/20,-f_s/2.7,f_s/20,-f_s/2.6,-f_s/30,-f_s/7.5,-f_s/20)//左耳渦

  
  fill("#FFBB77")//鼻子
  line(f_s/150,f_s/20,-f_s/60,f_s/7.5) 
  line(f_s/30,f_s/7.5,-f_s/60,f_s/7.5) 


  if(mouseIsPressed)//如果按下滑鼠會
    {
      fill("#FF0000")
      noStroke()
      arc(0,f_s/6,f_s/7,f_s/6.6,0,90)//嘴巴
    }
    else//否則
    {
      fill("	#FF0000")
      noStroke()
      arc(0,f_s/4,f_s/5,f_s/6.6,0,180)//嘴巴弧度 上 arc弧度，全嘴唇，pi角度
    }

    if(mouseIsPressed)//如果按下滑鼠會
    {
      fill("#d9ad89")
      noStroke()
      ellipse(f_s/2.7,0,f_s/7.5)//右耳
      ellipse(-f_s/2.7,0,f_s/7.5)//左耳
      stroke("#582f0e");
      curve(f_s/6.6,f_s/20,f_s/2.7,f_s/20,f_s/2.6,-f_s/30,f_s/7.5,-f_s/20);//右耳渦
      curve(-f_s/6.6,f_s/20,-f_s/2.7,f_s/20,-f_s/2.6,-f_s/30,-f_s/7.5,-f_s/20);//左耳渦
    }
    else//否則
    {
      fill("#d9ad89")
      noStroke()
      ellipse(f_s/2.7,0,f_s/5)//右耳
      ellipse(-f_s/2.7,0,f_s/5)//左耳
      stroke("#582f0e");
      // strokeWeight(2)
      // curve(f_s/6.6,f_s/20,f_s/2.7,f_s/20,f_s/2.6,-f_s/30,f_s/7.5,-f_s/20);//右耳渦
      // curve(-f_s/6.6,f_s/20,-f_s/2.7,f_s/20,-f_s/2.6,-f_s/30,-f_s/7.5,-f_s/20);//左耳渦
      
      if(!songIsplay){
        fill("#d9ad89")
        noStroke()
        ellipse(f_s/2.7,0,f_s/7.5)//右耳
        ellipse(-f_s/2.7,0,f_s/7.5)//左耳
        stroke("#582f0e");
        curve(f_s/6.6,f_s/20,f_s/2.7,f_s/20,f_s/2.6,-f_s/30,f_s/7.5,-f_s/20);//右耳渦
        curve(-f_s/6.6,f_s/20,-f_s/2.7,f_s/20,-f_s/2.6,-f_s/30,-f_s/7.5,-f_s/20);//左耳渦
         //沒有播放
      }
      else{
      vol = amp.getLevel() //取得聲音值(值為0~1之間)
      // console.log(vol)//顯示網頁中console 數字
      fill("#d9ad89")
      noStroke()
      ellipse(f_s/2.7,0,f_s/5)//右耳
      ellipse(-110,0,f_s/2.7,0,f_s/5)//左耳
      noFill();
      // curve(f_s/6.6,f_s/20,f_s/2.7,f_s/20,f_s/2.6,-f_s/30,f_s/7.5,-f_s/10);//右耳渦
      // curve(-f_s/6.6,f_s/20,-f_s/2.7,f_s/20,-f_s/2.6,-f_s/30,-f_s/7.5,-f_s/10);//左耳渦
    }
    noFill()
    pop()
    }
    }
  }

  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

  }

//   function mousePressed()
// {
//   if(!songIsplay){
//     song.play()
//     songIsplay = true
//     amp=new p5.Amplitude()

//   }
//   else{
//     song.pause()
//     songIsplay = false

//   }
  
// }
  

```


## 語音辨識

需要有個p5.speech.js檔案

### 範例說明

```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
            }
		}
	}
```
![](https://i.imgur.com/0MGA9Un.png)


### 你的程式碼
```javascript=

// var face_x,face_y,face_size
var face_x = [] //新增臉x軸的變數
var face_y = [] //新增臉y軸的變數
var face_size = [] //新12臉大小的變數
var face_num = 7//新增臉數量的變數並設為7


var song //宣告變數song
var songIsplay=false //宣告變數songIsplay=false
var amp //宣告變數amp
var vol=0 //宣告變數vol=0
var m_x,m_y //宣告變數m_x,m_y
var music_btn,mouse_btn,Speech_btn //宣告變數music_btn,mouse_btn,Speech_btn
var mosueIsplay=true //宣告變數mosueIsplay=true
var myRec = new p5.SpeechRec(); //宣告變數myRec = new p5.SpeechRec();
var result //宣告變數result
var clr=[] //宣告變數clr=[]
function preload(){ //設定存入歌曲"Bruno Mars - Locked Out Of Heaven (Official Video)MV.mp3
  song = loadSound("Bruno Mars - Locked Out Of Heaven (Official Video)MV.mp3");
}


var colors = "79b473-70a37f-41658a-414073-4c3957".split("-").map(a=>"#"+a)//輸入5個顏色，並設為變數

function setup() {
  createCanvas(windowWidth, windowHeight); //設定畫布大小為視窗寬高
  angleMode(DEGREES) 
  

  music_btn = createButton("播音樂") //設定按鈕(播音樂)
  music_btn.position(10,10) //設定按鈕(位置10,10)
  music_btn.size(300, 100); //設定按鈕(大小300,100)
  music_btn.style('background-color', 'black'); //設定按鈕(背景:黑)
  music_btn.style('font-size', '40px'); //設定按鈕(文字大小40)
  music_btn.style('color', 'yellow'); //設定按鈕(文字顏色黃色)
  music_btn.mousePressed(music_btn_pressed) //設定按鈕(music_btn_pressed)


  mouse_btn = createButton("暫停音樂")//設定按鈕(暫停音樂)
  mouse_btn.position(370,10)//設定按鈕(座標:370,10)
  mouse_btn.size(300, 100); //設定按鈕(大小300<100)
  mouse_btn.style('background-color', 'black'); //設定按鈕(背景:黑)
  mouse_btn.style('font-size', '40px'); //設定按鈕(文字大小40)
  mouse_btn.style('color', 'white'); //設定按鈕(文字顏色黃色)
  mouse_btn.mousePressed(mouse_btn_pressed) //設定按鈕(music_btn_pressed)

  Speech_btn = createButton("語音辨識(跳舞/不要跳)") //設定按鈕(語音辨識(跳舞/不要跳))
  Speech_btn.position(720,10) //設定按鈕(座標:740,10)
  Speech_btn.size(300, 100); //設定按鈕(大小300,100)
  Speech_btn.style('background-color', 'black'); //設定按鈕(背景:黑)
  Speech_btn.style('font-size', '28px'); //設定按鈕(文字大小28)
  Speech_btn.style('color', 'yellow'); //設定按鈕(文字顏色黃色)
  Speech_btn.mousePressed(Speech_btn_pressed)//設定按鈕(Speech_btn_pressed)



  for(var i=0;i<face_num;i++){ //設定迴圈，讓臉變多
    face_size[i] = random(100,300) //亂數臉的大小100~300
    face_x[i] = random(100,width) //臉亂數100~寬
    face_y[i] = random(200,height) //臉亂數200~高
    clr[i] = colors[int(random(0,colors.length))] //取亂數從0到顏色長度
  } 
}

function music_btn_pressed(){ //開始音樂
    song.stop()//音樂停止
    song.play()//音樂播放
    songIsplay = true//如果音樂撥放為真
    amp=new p5.Amplitude()//放音樂
    music_btn.style('background-color', '#4465A2');//設定按鈕顏色 
    mouse_btn.style('background-color', 'red');//設定按鈕顏色 
    Speech_btn.style('background-color', 'black');//設定按鈕顏色 
    
}

function mouse_btn_pressed(){ //暫停
  song.pause()//音樂暫停
  songIsplay = false//如果音樂撥放為否
  music_btn.style('background-color', '#456F33');//設定按鈕顏色 
  mouse_btn.style('background-color', '#a8dadc');//設定按鈕顏色 
  Speech_btn.style('background-color', '#953C7D');//設定按鈕顏色 
}


function Speech_btn_pressed(){ //語音說話
  music_btn.style('background-color', '#953C7D');//設定按鈕顏色 
  mouse_btn.style('background-color', '#456F33');//設定按鈕顏色 
  Speech_btn.style('background-color', '#a8dadc');//設定按鈕顏色 
  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(#67DC36); //綠色背景
  textSize(40) //設文字大小40
  text("X:"+mouseX+"  Y:"+mouseY,50,50) //文字在50,50的位置顯示X、Y軸座標
  for(var j=0;j<face_num;j++){ //設定迴圈，讓臉變多
    push()  
     
      var f_s = face_size[j] //宣告f_s為face_size[j]
      translate(face_x[j],face_y[j]) //把(0,0)座標原點移到視窗的中間
      fill('#C7B438') //上臉色#C7B438
      noStroke() //不描邊
    
       for(var j=0;j<face_num;j++){
   push() 
   var f_s = face_size[j]
   translate(face_x[j],face_y[j])

   noStroke()
   fill("#d9ad89")
   
   ellipse(0,0,f_s)//臉
   
   fill(255)
   stroke(0)
   ellipse(f_s/6,-f_s/20,f_s/6.6)//左眼睛
   ellipse(-f_s/6,-f_s/20,f_s/6.6)//右眼睛

   fill(0)
   ellipse(f_s/6+map(mouseX,0,width,-f_s/60,f_s/30),-f_s/20+map(mouseY,0,height,-f_s/60,f_s/30),f_s/10)//左眼珠
   ellipse(-f_s/6+map(mouseX,0,width,-f_s/60,f_s/30),-f_s/20+map(mouseY,0,height,-f_s/60,f_s/30),f_s/10)//右眼珠
  
   fill("#0a0900")
   noStroke()
   beginShape()//左邊頭髮
      curveVertex(f_s/5,-f_s/1.5)
      curveVertex(f_s/5,-f_s/1.5)
      curveVertex(-f_s/3.75,-f_s/1.8)
      curveVertex(-f_s/2,-f_s/5)
      curveVertex(-f_s/1.875,f_s/2.1)
      curveVertex(-f_s/7.5,f_s/2.1)
      curveVertex(-f_s/3.1,f_s/3.3)
      curveVertex(-f_s/2.7,-f_s/10)
      curveVertex(-f_s/6.6,-f_s/4.2)
      curveVertex(f_s/20,-f_s/2)
      curveVertex(f_s/30,-f_s/2)

   endShape()

   beginShape()//右邊頭髮
   curveVertex(0,-f_s/1.8)
   curveVertex(0,-f_s/1.8)
   curveVertex(f_s/3.75,-f_s/1.8)
   curveVertex(f_s/2,-f_s/5)
  curveVertex(f_s/1.875,f_s/2.1)
  curveVertex(f_s/4.5,f_s/2.1)
   curveVertex(f_s/3.1,f_s/3.3)
   curveVertex(f_s/2.7,-f_s/10)
   curveVertex(-f_s/30,-f_s/2.5)
   curveVertex(-f_s/30,-f_s/2.5)

   endShape()

   fill("#595352") 
   beginShape();//左邊眉毛
      curveVertex(-f_s/3.75,-f_s/6.3)
      curveVertex(-f_s/3.75,-f_s/6.3)
      curveVertex(-f_s/10,-f_s/5.6)
      curveVertex(-f_s/13,-f_s/5.7)
      curveVertex(-f_s/12,-f_s/7.1)
      curveVertex(-f_s/12,-f_s/7.1)
   endShape()

   fill("#595352") 
   beginShape();//右邊眉毛
      curveVertex(f_s/3.75,-f_s/6.3)
      curveVertex(f_s/3.75,-f_s/6.3)
      curveVertex(f_s/10,-f_s/5.6)
      curveVertex(f_s/13,-f_s/5.7)
      curveVertex(f_s/12,-f_s/7.1)
      curveVertex(f_s/12,-f_s/7.1)
   endShape()
   
  fill("#d9ad89")
  ellipse(-f_s/2.7,0,f_s/7.5)//左耳
  ellipse(f_s/2.7,0,f_s/7.5)//右耳

  noFill()
  stroke("#582f0e")
  curve(f_s/6.6,f_s/20,f_s/2.7,f_s/20,f_s/2.6,-f_s/30,f_s/7.5,-f_s/20)//右耳渦
  curve(-f_s/6.6,f_s/20,-f_s/2.7,f_s/20,-f_s/2.6,-f_s/30,-f_s/7.5,-f_s/20)//左耳渦

  
  fill("#FFBB77")//鼻子
  line(f_s/150,f_s/20,-f_s/60,f_s/7.5) 
  line(f_s/30,f_s/7.5,-f_s/60,f_s/7.5) 


  if(mouseIsPressed)//如果按下滑鼠會
    {
      fill("#FF0000")
      noStroke()
      arc(0,f_s/6,f_s/7,f_s/6.6,0,90)//嘴巴
    }
    else//否則
    {
      fill("	#FF0000")
      noStroke()
      arc(0,f_s/4,f_s/5,f_s/6.6,0,180)//嘴巴弧度 上 arc弧度，全嘴唇，pi角度
    }

    if(mouseIsPressed)//如果按下滑鼠會
    {
      fill("#d9ad89")
      noStroke()
      ellipse(f_s/2.7,0,f_s/7.5)//右耳
      ellipse(-f_s/2.7,0,f_s/7.5)//左耳
      stroke("#582f0e");
      curve(f_s/6.6,f_s/20,f_s/2.7,f_s/20,f_s/2.6,-f_s/30,f_s/7.5,-f_s/20);//右耳渦
      curve(-f_s/6.6,f_s/20,-f_s/2.7,f_s/20,-f_s/2.6,-f_s/30,-f_s/7.5,-f_s/20);//左耳渦
    }
    else//否則
    {
      fill("#d9ad89")
      noStroke()
      ellipse(f_s/2.7,0,f_s/5)//右耳
      ellipse(-f_s/2.7,0,f_s/5)//左耳
      stroke("#582f0e");
      // strokeWeight(2)
      // curve(f_s/6.6,f_s/20,f_s/2.7,f_s/20,f_s/2.6,-f_s/30,f_s/7.5,-f_s/20);//右耳渦
 ![](https://i.imgur.com/kZqHw5T.png)
     // curve(-f_s/6.6,f_s/20,-f_s/2.7,f_s/20,-f_s/2.6,-f_s/30,-f_s/7.5,-f_s/20);//左耳渦
      
      if(!songIsplay){
        fill("#d9ad89")
        noStroke()
        ellipse(f_s/2.7,0,f_s/7.5)//右耳
        ellipse(-f_s/2.7,0,f_s/7.5)//左耳
        stroke("#582f0e");
        curve(f_s/6.6,f_s/20,f_s/2.7,f_s/20,f_s/2.6,-f_s/30,f_s/7.5,-f_s/20);//右耳渦
        curve(-f_s/6.6,f_s/20,-f_s/2.7,f_s/20,-f_s/2.6,-f_s/30,-f_s/7.5,-f_s/20);//左耳渦
         //沒有播放
      }
      else{
      vol = amp.getLevel() //取得聲音值(值為0~1之間)
      // console.log(vol)//顯示網頁中console 數字
      fill("#d9ad89")
      noStroke()
      ellipse(f_s/2.7,0,f_s/5)//右耳
      ellipse(-110,0,f_s/2.7,0,f_s/5)//左耳
      noFill();
      // curve(f_s/6.6,f_s/20,f_s/2.7,f_s/20,f_s/2.6,-f_s/30,f_s/7.5,-f_s/10);//右耳渦
      // curve(-f_s/6.6,f_s/20,-f_s/2.7,f_s/20,-f_s/2.6,-f_s/30,-f_s/7.5,-f_s/10);//左耳渦
    }
    noFill()
    pop()
    }
    }
  }




```

---

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




## 手指辨識

請查閱上課說明


```javascript=
var colors = "353535-c7b438-67dc36-d9d9d9-284b63".split("-").map(a=>"#"+a)
var colors_r = "227c9d-17c3b2-ffcb77-fef9ef-fe6d73".split("-").map(a=>"#"+a)
var clr,clr_r
//宣告陣列資料，記錄每一朵花的基本資料
var positionListX =[]  //所有花的X軸位置，List串列，array陣列
var positionListY =[]  //所有花的Y軸位置
var clrList=[]      //所有花瓣顏色
var clr_r_List = []  //所有花圓心顏色
var sizeList =[]  //所有花的大小

var face_x = [] //新增臉x軸的變數
var face_y = [] //新增臉y軸的變數
var face_size = [] //新增臉大小的變數
var face_num = 2 //新增臉數量的變數並設為2

//++++++++++手勢辨識_變數宣告區++++++++++++++++++++++++
let handpose;
let video;  //攝影機取得影像，放影像資料
let predictions = [];  //紀錄所有手勢21點所有資料
let pointerX, pointerY, pointerZ;
let pointerX8,pointerY8,pointerZ8,pointerX4,pointerY4,d 
let pointerX14,pointerY14,pointerX16,pointerY16  //用四個變數紀錄第14點(pointerX14,pointerY14)，16點的X，Y(pointerX16,pointerY16)
//++++++++++++++++++++++++++++++++++++++++++++++++++++

function setup() {
  createCanvas(windowWidth, windowHeight);
  for(var j=0;j<1;j++){  //從j=0開始(第1朵花).......j=9(第10朵花)
    //紀錄資料
    positionListX.push(random(width)) //把花X位置存入到positionListX list資料內
    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.4,1.5))
    //畫圖
    push() 
      translate(positionListX[j],positionListY[j]) //花的座標，原點移到視窗的中心點
      clr = clrList[j]
      clr_r = clr_r_List[j]
      drawFlower(clr,clr_r,sizeList[j]) 
		
		  for(var i=0;i<face_num;i++){ //設定迴圈，讓臉變多
        face_size[i] = 100  //臉的大小100~300
        face_x[i] = positionListX[j] //臉的x軸在視窗寬除以2
        face_y[i] = positionListY[j] //臉的x軸在視窗寬除以2
        
      }
		
    pop()
    }
	//+++++++++++++取得攝影機影像並連線手勢辨識+++++++++++++++++++++
	
		video = createCapture(VIDEO);  //取得攝影機的影像，影像的畫面存到video
		video.size(width, height);  //影像的大小為整個視窗大小

		handpose = ml5.handpose(video, modelReady);  //把video影像執行手辨識，辨識完畢會去執行modelReady function

  	// This sets up an event that fills the global variable "predictions"
  	// with an array every time new hand poses are detected
		handpose.on("predict", (results) => {  
    		predictions = results;   //手勢辨識後的結果放到predictions變數內
		}); 

  	// Hide the video element, and just show the canvas
		video.hide();  //隱藏video
		//+++++++++++++++++++++++++++++++++++++++++++++++++++++++	
}


function modelReady() {
  console.log("Model ready!");
}




function draw() {  //一秒進到function執行60次
  //攝影機反向
  translate(width, 0);
  scale(2, 1);
  //+++++++++
	background("#67DC36"); 
	
	image(video,0,0,width, height)
	
	d= dist(pointerX8,pointerY8,pointerX4,pointerY4) //算出大拇指與食指上端的距離
	
  for(var j=0;j<positionListY.length;j++){  //從j=0開始(第1朵花).......j=9(第10朵花)    
    //畫圖
    // push()  
    //   translate(positionListY[j],positionListX[j]) //花的座標，原點移到視窗的中心點
    //   rotate(frameCount/70)  //旋轉指令，每次進到draw()，framecount，每次進到draw()，frameCount就會+1
    //   clr = clrList[j]
    //   clr_r = clr_r_List[j]
    //   drawFlower(clr,clr_r,map(mouseX,0,width,sizeList[j],sizeList[j]+1)) 
    // pop()
		// rotate(frameCount/70)  //旋轉指令，每次進到draw()，framecount，每次進到draw()，frameCount就會+1
		r_Flower(clrList[j], clr_r_List[j],sizeList[j],positionListX[j],positionListY[j]) 
    }
  drawKeypoints();
}

function drawFlower(clr,clr_r,size=1){  //clr:花瓣顏色，clr_r:花圓心顏色，size:花大小
  
	for(var j=0;j<face_num;j++){
    var f_s = face_size[j] //宣告f_s為face_size[j]
        // translate(face_x[j],face_y[j]) //把(0,0)座標原點移到視窗的中間
        fill("#C7B438") //上臉色C7B438
        noStroke() //不描邊
	}
  push() 
   var f_s = face_size[j]
   translate(face_x[j],face_y[j])

   noStroke()
   fill("#d9ad89")
   
   ellipse(0,0,f_s)//臉
   
   fill(255)
   stroke(0)
   ellipse(f_s/6,-f_s/20,f_s/6.6)//左眼睛
   ellipse(-f_s/6,-f_s/20,f_s/6.6)//右眼睛

   fill(0)
   ellipse(f_s/6+map(mouseX,0,width,-f_s/60,f_s/30),-f_s/20+map(mouseY,0,height,-f_s/60,f_s/30),f_s/10)//左眼珠
   ellipse(-f_s/6+map(mouseX,0,width,-f_s/60,f_s/30),-f_s/20+map(mouseY,0,height,-f_s/60,f_s/30),f_s/10)//右眼珠
  
   fill("#0a0900")
   noStroke()
   beginShape()//左邊頭髮
      curveVertex(f_s/5,-f_s/1.5)
      curveVertex(f_s/5,-f_s/1.5)
      curveVertex(-f_s/3.75,-f_s/1.8)
      curveVertex(-f_s/2,-f_s/5)
      curveVertex(-f_s/1.875,f_s/2.1)
      curveVertex(-f_s/7.5,f_s/2.1)
      curveVertex(-f_s/3.1,f_s/3.3)
      curveVertex(-f_s/2.7,-f_s/10)
      curveVertex(-f_s/6.6,-f_s/4.2)
      curveVertex(f_s/20,-f_s/2)
      curveVertex(f_s/30,-f_s/2)

   endShape()

   beginShape()//右邊頭髮
   curveVertex(0,-f_s/1.8)
   curveVertex(0,-f_s/1.8)
   curveVertex(f_s/3.75,-f_s/1.8)
   curveVertex(f_s/2,-f_s/5)
  curveVertex(f_s/1.875,f_s/2.1)
  curveVertex(f_s/4.5,f_s/2.1)
   curveVertex(f_s/3.1,f_s/3.3)
   curveVertex(f_s/2.7,-f_s/10)
   curveVertex(-f_s/30,-f_s/2.5)
   curveVertex(-f_s/30,-f_s/2.5)

   endShape()

   fill("#595352") 
   beginShape();//左邊眉毛
      curveVertex(-f_s/3.75,-f_s/6.3)
      curveVertex(-f_s/3.75,-f_s/6.3)
      curveVertex(-f_s/10,-f_s/5.6)
      curveVertex(-f_s/13,-f_s/5.7)
      curveVertex(-f_s/12,-f_s/7.1)
      curveVertex(-f_s/12,-f_s/7.1)
   endShape()

   fill("#595352") 
   beginShape();//右邊眉毛
      curveVertex(f_s/3.75,-f_s/6.3)
      curveVertex(f_s/3.75,-f_s/6.3)
      curveVertex(f_s/10,-f_s/5.6)
      curveVertex(f_s/13,-f_s/5.7)
      curveVertex(f_s/12,-f_s/7.1)
      curveVertex(f_s/12,-f_s/7.1)
   endShape()
   
  fill("#d9ad89")
  ellipse(-f_s/2.7,0,f_s/7.5)//左耳
  ellipse(f_s/2.7,0,f_s/7.5)//右耳

  noFill()
  stroke("#582f0e")
  curve(f_s/6.6,f_s/20,f_s/2.7,f_s/20,f_s/2.6,-f_s/30,f_s/7.5,-f_s/20)//右耳渦
  curve(-f_s/6.6,f_s/20,-f_s/2.7,f_s/20,-f_s/2.6,-f_s/30,-f_s/7.5,-f_s/20)//左耳渦

  
  fill("#FFBB77")//鼻子
  line(f_s/150,f_s/20,-f_s/60,f_s/7.5) 
  line(f_s/30,f_s/7.5,-f_s/60,f_s/7.5) 


  if(mouseIsPressed)//如果按下滑鼠會
    {
      fill("#FF0000")
      noStroke()
      arc(0,f_s/6,f_s/7,f_s/6.6,0,90)//嘴巴
    }
    else//否則
    {
      fill("	#FF0000")
      noStroke()
      arc(0,f_s/4,f_s/5,f_s/6.6,0,180)//嘴巴弧度 上 arc弧度，全嘴唇，pi角度
    }

    if(mouseIsPressed)//如果按下滑鼠會
    {
      fill("#d9ad89")
      noStroke()
      ellipse(f_s/2.7,0,f_s/7.5)//右耳
      ellipse(-f_s/2.7,0,f_s/7.5)//左耳
      stroke("#582f0e");
      curve(f_s/6.6,f_s/20,f_s/2.7,f_s/20,f_s/2.6,-f_s/30,f_s/7.5,-f_s/20);//右耳渦
      curve(-f_s/6.6,f_s/20,-f_s/2.7,f_s/20,-f_s/2.6,-f_s/30,-f_s/7.5,-f_s/20);//左耳渦
    }
    else//否則
    {
      fill("#d9ad89")
      noStroke()
      ellipse(f_s/2.7,0,f_s/5)//右耳
      ellipse(-f_s/2.7,0,f_s/5)//左耳
      stroke("#582f0e");
      // strokeWeight(2)
      // curve(f_s/6.6,f_s/20,f_s/2.7,f_s/20,f_s/2.6,-f_s/30,f_s/7.5,-f_s/20);//右耳渦
      // curve(-f_s/6.6,f_s/20,-f_s/2.7,f_s/20,-f_s/2.6,-f_s/30,-f_s/7.5,-f_s/20);//左耳渦
      
      if(!songIsplay){
        fill("#d9ad89")
        noStroke()
        ellipse(f_s/2.7,0,f_s/7.5)//右耳
        ellipse(-f_s/2.7,0,f_s/7.5)//左耳
        stroke("#582f0e");
        curve(f_s/6.6,f_s/20,f_s/2.7,f_s/20,f_s/2.6,-f_s/30,f_s/7.5,-f_s/20);//右耳渦
        curve(-f_s/6.6,f_s/20,-f_s/2.7,f_s/20,-f_s/2.6,-f_s/30,-f_s/7.5,-f_s/20);//左耳渦
         //沒有播放
      }
      else{
      vol = amp.getLevel() //取得聲音值(值為0~1之間)
      // console.log(vol)//顯示網頁中console 數字
      fill("#d9ad89")
      noStroke()
      ellipse(f_s/2.7,0,f_s/5)//右耳
      ellipse(-110,0,f_s/2.7,0,f_s/5)//左耳
      noFill();
      // curve(f_s/6.6,f_s/20,f_s/2.7,f_s/20,f_s/2.6,-f_s/30,f_s/7.5,-f_s/10);//右耳渦
      // curve(-f_s/6.6,f_s/20,-f_s/2.7,f_s/20,-f_s/2.6,-f_s/30,-f_s/7.5,-f_s/10);//左耳渦
    }
    noFill()
    pop()
    }
    }
  }

function mousePressed(){
//紀錄資料
positionListX.push(mouseX) //把滑鼠按下的位置當作花X位置，存入到positionListX list資料內
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()
}

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];
      
      // noStroke();
    if (j == 8) {			 //食指的上端	
	pointerX8 = map(keypoint[0],0,640,0,width)  //j=8所以取得第8點的資訊，keypoint[0]代表x(食指座標)
	pointerY8 = map(keypoint[1],0,480,0,height)  //keypoint[1]代表y(食指座標)
    pointerZ8 = keypoint[2] //keypoint[2]代表z(食指座標)
    console.log(pointerZ8)
    if(pointerZ8<-40)
        {
          R_draw(pointerX8,pointerY8)
        }
				
	fill(0, 255, 0);
	ellipse(pointerX8, pointerY8, 30, 30);//畫食指圓圈
				
      } else
    if (j == 4) {  //  大拇指的上端
				
    pointerX4 = map(keypoint[0],0,640,0,width)
    pointerY4 = map(keypoint[1],0,480,0,height)
				// pointerZ = keypoint[2]
				// print(pointerZ)
	fill(255,0,0)
    ellipse(pointerX4, pointerY4, 30, 30);  //畫大拇指圓圈
		
      } else
      if (j == 14) { //無名指第三關節
        pointerX14 = keypoint[0];
        pointerY14 =  keypoint[1];
      } else
      if (j == 16) { //無名指上端
        pointerX16 = keypoint[0];
        pointerY16 =  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,600,F_size-0.2,F_size+0.6)) //花做放大縮小，無名指有彎曲
		}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-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()
}

```