---
# System prepended metadata

title: 期中作業二

---

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

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

# 第二個作業_學生版

---


## 步驟1: 隨意畫一張圖

![](https://hackmd.io/_uploads/BysImr-Qj.png)

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

### 程式碼

```javascript=
function setup() {
    createCanvas(windowWidth, windowHeight);
    angleMode(DEGREES)
  }
  function draw() {
  background("#DFE9FF"); //一開始的背景顏色 
  textSize(50)
  text("X:"+mouseX+"  Y:"+mouseY,50,50)
	translate(width/2,height/2)
	//開始畫圖案
	fill("#F56861")	
  rect(-70, 50, 140, 80, 50);//上衣
	rect(-100,-100,200,150,200); //帽子
	ellipse(-30,-150,30,100); //帽子耳朵
	ellipse(30,-150,30,100); //帽子耳朵	
	fill(255)
	ellipse(-30,-130,10,80); //帽子耳朵
	ellipse(30,-130,10,80); //帽子耳朵	
	fill("#FFDEAD") 
	rect(-70, 120, 140, 80, 10);//裙子		
	fill(255)
	rect(-40,230,30,50)//襪子
	rect(10,230,30,50)//襪子	
	fill("#FFE8DC") //膚色
	rect(-40,200,30,50)//腳	
	rect(10,200,30,50)//腳		
	ellipse(-80,150,65); //右手
	ellipse(80,150,65); //左手
	ellipse(-70,125,20,70); //手指
	ellipse(90,125,20,70); //手指
	ellipse(-90,125,20,70); //手指
	ellipse(70,125,20,70); //手指
	fill("#8C635F")
	ellipse(-25,280,45,25)//鞋子
  ellipse(25,280,45,25)//鞋子	
	fill(0)
  fill(255)
	ellipse(0,100,10,10,-7); //鈕扣
	ellipse(0,150,10,10,-7); //鈕扣
	fill(50); //頭部
	noStroke();
	ellipse(0, -40, 180, 170); //頭髮
  arc(0,-15,250,40,180,0)//髮尾
	rect(-80,-100,160,30) //角
	ellipseMode(CENTER); //耳朵
	strokeWeight(2);
	fill("#FFE8DC");
	ellipse(-77,-10, 25, 40); //耳朵
	ellipse(78,-13, 25, 40); //耳朵
	noStroke();
	fill("#FFE8DC");//臉
	ellipse(0,-20, 159, 167); 
	fill(0);//眼珠
	stroke(0);
	ellipse(-30,-20, 10, 20); //眼睛
	ellipse(30,-20, 10, 20); //眼睛
	fill(50);	
	noStroke();	
	rect(-45,-92,5,53,1)//瀏海
	rect(-25,-103,5,63,1)//瀏海	
  rect(-4,-105,5,65,1)//瀏海
	rect(35,-95,5,55,1)//瀏海	
	rect(15,-105,5,65,1)//瀏海	
	fill("#ffddd2")
	noFill();
	fill("#FF8286")
	strokeWeight(1.5);
		noStroke()
	ellipse(1, 12, 80, 15, 4) //嘴巴
	fill("#FCFAF9")
	rect(-22,4,50,5) //牙齒
	fill("#FF417E")
	ellipse(45,0,20,10) //腮紅
	ellipse(-40,0,20,10) //腮紅 
	}


```


---

## 步驟2: 產生大小不同的相同的圖

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

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

### 程式碼

```javascript=
var face_size=[]
var place_x=[]
var place_y=[]
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)
    }
  }
  function draw() {
    background("#DFE9FF"); //一開始的背景顏色 
    textSize(50)
    text("X:"+mouseX+"  Y:"+mouseY,50,50)
    for(var j=0;j<5;j++)
    {
    push()
    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]); //帽子耳朵	
	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]); //手指
	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()		
			
	}
	}


```

---

## 步驟3: 產生隨著滑鼠移動的眼睛

![](https://hackmd.io/_uploads/rk5sfS-Xj.gif)

---

### 程式碼
![](https://i.imgur.com/IYyIVse.gif)


```javascript=
function setup() {
    createCanvas(windowWidth, windowHeight);
    angleMode(DEGREES)
  }
  function draw() {
  background("#DFE9FF"); //一開始的背景顏色 
  textSize(50)
  text("X:"+mouseX+"  Y:"+mouseY,50,50)
	translate(width/2,height/2)
	//開始畫圖案
	fill("#F56861")	
  rect(-70, 50, 140, 80, 50);//上衣
	rect(-100,-100,200,150,200); //帽子
	ellipse(-30,-150,30,100); //帽子耳朵
	ellipse(30,-150,30,100); //帽子耳朵	
	fill(255)
	ellipse(-30,-130,10,80); //帽子耳朵
	ellipse(30,-130,10,80); //帽子耳朵	
	fill("#FFDEAD") 
	rect(-70, 120, 140, 80, 10);//裙子		
	fill(255)
	rect(-40,230,30,50)//襪子
	rect(10,230,30,50)//襪子	
	fill("#FFE8DC") //膚色
	rect(-40,200,30,50)//腳	
	rect(10,200,30,50)//腳		
	ellipse(-80,150,65); //右手
	ellipse(80,150,65); //左手
	ellipse(-70,125,20,70); //手指
	ellipse(90,125,20,70); //手指
	ellipse(-90,125,20,70); //手指
	ellipse(70,125,20,70); //手指
	fill("#8C635F")
	ellipse(-25,280,45,25)//鞋子
  ellipse(25,280,45,25)//鞋子	
	fill(0)
  fill(255)
	ellipse(0+mouseX/200,100+mouseY/200,10,10,-7); //鈕扣
	ellipse(0+mouseX/200,150+mouseY/200,10,10,-7); //鈕扣
	fill(50); //頭部
	noStroke();
	ellipse(0, -40, 180, 170); //頭髮
  arc(0,-15,250,40,180,0)//髮尾
	rect(-80,-100,160,30) //角
	ellipseMode(CENTER); //耳朵
	strokeWeight(2);
	fill("#FFE8DC");
	ellipse(-77,-10, 25, 40); //耳朵
	ellipse(78,-13, 25, 40); //耳朵
	noStroke();
	fill("#FFE8DC");//臉
	ellipse(0,-20, 159, 167); 
	fill(0);//眼珠
	stroke(0);
	ellipse(-30+mouseX/200,-20+mouseY/200, 10, 20); //眼睛
	ellipse(30+mouseX/200,-20+mouseY/200, 10, 20); //眼睛
	fill(50);	
	noStroke();	
	rect(-45,-92,5,53,1)//瀏海
	rect(-25,-103,5,63,1)//瀏海	
  rect(-4,-105,5,65,1)//瀏海
	rect(35,-95,5,55,1)//瀏海	
	rect(15,-105,5,65,1)//瀏海	
	fill("#ffddd2")
	noFill();
	fill("#FF8286")
	strokeWeight(1.5);
		noStroke()
	ellipse(1, 12, 80, 15, 4) //嘴巴
	fill("#FCFAF9")
	rect(-22,4,50,5) //牙齒
	fill("#FF417E")
	ellipse(45,0,20,10) //腮紅
	ellipse(-40,0,20,10) //腮紅 
	}




```

---

## 步驟4: 產生不同顏色的圖

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

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

### 程式碼

```javascript=

function setup() {
    createCanvas(windowWidth, windowHeight);
    angleMode(DEGREES)
  }
  function draw() {
  background("#DFE9FF"); //一開始的背景顏色 
  textSize(50)
  text("X:"+mouseX+"  Y:"+mouseY,50,50)
	translate(width/2,height/2)
	//開始畫圖案
	fill("#F56861")	
  rect(-70, 50, 140, 80, 50);//上衣
	rect(-100,-100,200,150,200); //帽子
	ellipse(-30,-150,30,100); //帽子耳朵
	ellipse(30,-150,30,100); //帽子耳朵	
	fill(255)
	ellipse(-30,-130,10,80); //帽子耳朵
	ellipse(30,-130,10,80); //帽子耳朵	
	fill("#FFDEAD") 
	rect(-70, 120, 140, 80, 10);//裙子		
	fill(255)
	rect(-40,230,30,50)//襪子
	rect(10,230,30,50)//襪子	
	fill("#FFE8DC") //膚色
	rect(-40,200,30,50)//腳	
	rect(10,200,30,50)//腳		
		noStroke();
	ellipse(-80,150,65); //右手
	ellipse(80,150,65); //左手
	ellipse(-70,125,20,70); //手指
	ellipse(90,125,20,70); //手指
	ellipse(-90,125,20,70); //手指
	ellipse(70,125,20,70); //手指
	fill("#8C635F")
	ellipse(-25,280,45,25)//鞋子
  ellipse(25,280,45,25)//鞋子	
	fill(0)
  fill(255)
	ellipse(0+mouseX/200,100+mouseY/200,10,10,-7); //鈕扣
	ellipse(0+mouseX/200,150+mouseY/200,10,10,-7); //鈕扣
	fill(50); //頭部
	noStroke();
	ellipse(0, -40, 180, 170); //頭髮
  arc(0,-15,250,40,180,0)//髮尾
	rect(-80,-100,160,30) //角
	ellipseMode(CENTER); //耳朵
	strokeWeight(2);
	fill("#FFE8DC");
	ellipse(-77,-10, 25, 40); //耳朵
	ellipse(78,-13, 25, 40); //耳朵
	noStroke();
	fill("#FFE8DC");//臉
	ellipse(0,-20, 159, 167); 
	fill(0);//眼珠
	stroke(0);
	ellipse(-30+mouseX/200,-20+mouseY/200, 10, 20); //眼睛
	ellipse(30+mouseX/200,-20+mouseY/200, 10, 20); //眼睛
	fill(50);	
	noStroke();	
	rect(-45,-92,5,53,1)//瀏海
	rect(-25,-103,5,63,1)//瀏海	
  rect(-4,-105,5,65,1)//瀏海
	rect(35,-95,5,55,1)//瀏海	
	rect(15,-105,5,65,1)//瀏海	
	fill("#ffddd2")
	noFill();
	fill("#FF8286")
	strokeWeight(1.5);
		noStroke()
	ellipse(1, 12, 80, 15, 4) //嘴巴
	fill("#FCFAF9")
	rect(-22,4,50,5) //牙齒
	fill("#FF417E")
	ellipse(45,0,20,10) //腮紅
	ellipse(-40,0,20,10) //腮紅
		strokeWeight(8)
		stroke(mouseX%256,mouseY%256,100)
		
	}




```

---

## 步驟5: 按下滑鼠，折起耳朵和拿紅蘿蔔

![](https://hackmd.io/_uploads/r1RoKr-mo.gif)


---

### 程式碼
![](https://i.imgur.com/G65v9Wp.gif)


```javascript=
var face_size=[]
var place_x=[]
var place_y=[]
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)
    }
  }
  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(mouseIsPressed){
	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{
	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://hackmd.io/_uploads/rkNWynb7o.gif)

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



```javascript=
var face_size=[]
var place_x=[]
var place_y=[]
var song
var songIsplay=false
var amp
var vol
function preload(){
  song = loadSound("O Come All Ye Faithful - DJ Williams.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)
    }
  }
  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(mouseIsPressed){
	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{
	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]) //腮紅 
	if(!songIsplay){
    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])//鞋子	 //沒有播放
  }
  else{
    if(!songIsplay){
      fill("#BD11D9")
      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])//鞋子	
  }
    vol = amp.getLevel() //取得聲音值(值為0~1之間)
    // console.log(vol) //網頁中console數字
    fill("#BD11D9")
    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])//鞋子	
  }
  
}

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

    }
    else{
      song.pause()
      songIsplay = false

    }
    
  }




```