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

# 第三作業_409000618陳昱廷

## 作業要求

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

---



## 產生按鈕

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

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_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()
    }
    }
  }

## 物件跳動

設定一個函數畫物件

範例說明

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()
}


### 你的程式碼

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

#### 範例說明

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

}

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

### 你的程式碼

// 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檔案

### 範例說明

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

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


### 你的程式碼

// 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);//右耳渦
// 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)




## 手指辨識

請查閱上課說明

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()
}