---
tage:程式設計上課作品(A班)
---
# 期中作業二
410738024王靖涵
---
---
tags: 程式設計教材庫,範例版,互動藝術程式創作入門,Creative Coding
---
# 第二個作業_學生版
---
## 步驟1: 隨意畫一張圖
---
### 程式碼
```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: 產生大小不同的相同的圖
---
### 程式碼
```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: 產生隨著滑鼠移動的眼睛
---
### 程式碼
```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: 產生不同顏色的圖
---
### 程式碼
```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: 按下滑鼠，折起耳朵和拿紅蘿蔔
---
### 程式碼
```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()
}
}
```
---
## 搭配聲音
```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
}
}
```
Sign in with Wallet
Connect another wallet