---
# System prepended metadata

title: 2021-11-28 程式設計期中報告

---


---
tags: 程式設計,期中作業
---

# 2021-11-28 程式設計期中報告
#### 教科一A 許軒豪 410730013

---

## 程式介紹

### 大綱
* 畫出 臉、眼睛、鏡框 跟著移動
* 利用 ARC 寫出嘴巴笑容上揚
* 使用 var 宣告自由落體的變動數值
* 利用 if(mouseIsPressed) 做出變化

---

## 第一段

### 畫出臉、左右眼睛和耳朵並跟滑鼠移動

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



---


```javascript=
function draw() {
  background(255);
  noStroke();
  var r1=mouseX  //定義
  var r2=mouseY  //定義
	var Color_R= r1/2+30  //定義
	var Color_G= r1/2+50+r2  //定義
	var Color_B= r1/2+10  //定義
 
	 fill(Color_R, Color_G, Color_B)
   noStroke();
	 ellipse(mouseX - 120, mouseY - 170, 150, 150);
		
	 fill(128,42,42)
   noStroke();
	 ellipse(mouseX - 120, mouseY - 170, 100, 100);
		
	 fill(255)
   noStroke();
	 ellipse(mouseX + 120, mouseY - 170, 150, 150);
		
	 fill(128,42,42)
   noStroke();
	 ellipse(mouseX + 120, mouseY - 170, 100, 100);
    
  // ------  臉部(黃色)  ------ //
   fill(255, 225, 0);
   ellipse(mouseX, mouseY, 400, 400);

  // ------  眼睛左邊  ------ //
   fill(0)
   noStroke();
   ellipse(mouseX - 80, mouseY - 60, 100, 100);

  // ------  眼睛右邊  ------ //
   fill(0)
   noStroke();
   ellipse(mouseX + 80, mouseY - 60, 100, 100);
```



---

### 把眼睛加上超大眼白

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

---


```javascript=
function draw() {
    
    background(100);  //背景覆蓋
    noFill();  //請勿填滿
    stroke(255)  //邊框白色
    strokeWeight(50);  //邊框粗細
    ellipse(mouseX - 80, mouseY - 60, 130, 130);  //繪製兩個圓
    ellipse(mouseX + 80, mouseY - 60, 130, 130);  //繪製兩個圓
    
}
```

---

### 畫出微笑曲線

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


---


```javascript=
function draw() {
    
  // ------  微笑  ------ //
   stroke(0);
   strokeWeight(8);
   noFill();
   arc(x, y, 300, 300, 0.25, PI - 0.25) //300 曲度, 0.25剛剛好放成正的
    
}
```


---

### 整個臉都組合起來跟著滑鼠移動

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

---


```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(255);
}

function draw() {
	background(255);
	
	var r1=mouseX  //定義
  var r2=mouseY  //定義
	var Color_R= r1/2+30  //定義
	var Color_G= r1/2+50+r2  //定義
	var Color_B= r1/2+10  //定義
	
	fill(Color_R, Color_G, Color_B)
   noStroke();
	 ellipse(mouseX - 120, mouseY - 170, 150, 150);
		
	 fill(128,42,42)
   noStroke();
	 ellipse(mouseX - 120, mouseY - 170, 100, 100);
		
	 fill(255)
   noStroke();
	 ellipse(mouseX + 120, mouseY - 170, 150, 150);
		
	 fill(128,42,42)
   noStroke();
	 ellipse(mouseX + 120, mouseY - 170, 100, 100);
		
  // ------  臉部  ------ //
   fill(255, 225, 0);
   ellipse(mouseX, mouseY, 400, 400);

	 
		
  // ------  眼睛左邊  ------ //
   	fill(0)
  	noStroke();
   	ellipse(mouseX - 80, mouseY - 60, 100, 100);

		
  // ------  眼睛右邊  ------ //
   	fill(0)
  	noStroke();
   	ellipse(mouseX + 80, mouseY - 60, 100, 100);

		
  // ------  超大眼白  ------ //
    noFill();
    stroke(255)
    strokeWeight(50);
    ellipse(mouseX - 80, mouseY - 60, 130, 130);
    ellipse(mouseX + 80, mouseY - 60, 130, 130);
	
			
  // ------  微笑  ------ //
    stroke(0);
    strokeWeight(8);
    noFill();
    arc(mouseX, mouseY, 300, 300, 0.25, PI - 0.25) //曲度width/2+   height/2
}
```

---

## 第二段

### 做出自由落體先 var 宣告


---


```javascript=
 // ------  宣 告  ------ //
    var x =100 // X座標
    var y =100 // X座標
    var v_x =3 // 往右的速度
    var v_y =3 // 往下的速度
```



---

### 將程式碼內的坐標都更換為x, y, v_x, v_y

---


```javascript=
  // ------  臉部  ------ //
   fill(255, 225, 0);
   ellipse(x, y, 400, 400);
	
	
  // ------  眼睛左邊  ------ //
   fill(0)
   noStroke();
   ellipse(x - 80, y - 60, 50, 50);

	
  // ------  眼睛右邊  ------ //
   fill(0)
   noStroke();
   ellipse(x + 80, y - 60, 50, 50);

	
  // ------  超大眼白  ------ //
   noFill();
   stroke(255)
   strokeWeight(50);
   ellipse(x - 80, y - 60, 130, 130);
   ellipse(x + 80, y - 60, 130, 130);

	
  // ------  微笑  ------ //
   stroke(0);
   strokeWeight(8);
   noFill();
   arc(x, y, 300, 300, 0.25, PI - 0.25) //300 曲度, 0.25剛剛好放成正的

    x=x+v_x //每次執行都加回去，x=100
    y=y+v_y
    v_y=v_y+0.2
    if(y>=height){
    v_y=-v_y*0.8
```



---

### 滑鼠移動跟著移動，長按滑鼠自由落體
![](https://i.imgur.com/QDKrOPY.gif)


---


```javascript=
if(mouseIsPressed){ //滑鼠點擊
	  
  // ------  臉部  ------ //
   fill(255, 225, 0);
   ellipse(x, y, 400, 400);
	
	
  // ------  眼睛左邊  ------ //
   fill(0)
   noStroke();
   ellipse(x - 80, y - 60, 50, 50);

	
  // ------  眼睛右邊  ------ //
   fill(0)
   noStroke();
   ellipse(x + 80, y - 60, 50, 50);

	
  // ------  超大眼白  ------ //
   noFill();
   stroke(255)
   strokeWeight(50);
   ellipse(x - 80, y - 60, 130, 130);
   ellipse(x + 80, y - 60, 130, 130);

	
  // ------  微笑  ------ //
   stroke(0);
   strokeWeight(8);
   noFill();
   arc(x, y, 300, 300, 0.25, PI - 0.25) //300 曲度, 0.25剛剛好放成正的

  x=x+v_x
	y=y+v_y
	v_y=v_y+0.2
	if(y>=height){
	v_y=-v_y*0.8
  
 }
 }
	
	else

	{
  var r1=mouseX  //定義
  var r2=mouseY  //定義
	var Color_R= r1/2+30  //定義
	var Color_G= r1/2+50+r2  //定義
	var Color_B= r1/2+10  //定義
 
	 fill(Color_R, Color_G, Color_B)
   noStroke();
	 ellipse(mouseX - 120, mouseY - 170, 150, 150);
		
	 fill(128,42,42)
   noStroke();
	 ellipse(mouseX - 120, mouseY - 170, 100, 100);
		
	 fill(255)
   noStroke();
	 ellipse(mouseX + 120, mouseY - 170, 150, 150);
		
	 fill(128,42,42)
   noStroke();
	 ellipse(mouseX + 120, mouseY - 170, 100, 100);
		
  // ------  臉部  ------ //
   fill(255, 225, 0);
   ellipse(mouseX, mouseY, 400, 400);

	 
		
  // ------  眼睛左邊  ------ //
   	fill(0)
  	noStroke();
   	ellipse(mouseX - 80, mouseY - 60, 100, 100);

		
  // ------  眼睛右邊  ------ //
   	fill(0)
  	noStroke();
   	ellipse(mouseX + 80, mouseY - 60, 100, 100);

		
  // ------  超大眼白  ------ //
    noFill();
    stroke(255)
    strokeWeight(50);
    ellipse(mouseX - 80, mouseY - 60, 130, 130);
    ellipse(mouseX + 80, mouseY - 60, 130, 130);

		
  // ------  微笑  ------ //
    stroke(0);
    strokeWeight(8);
    noFill();
    arc(mouseX, mouseY, 300, 300, 0.25, PI - 0.25) //曲度width/2+   height/2
}
 }
```



---

### 加上座標顯示、姓名
![](https://i.imgur.com/odJFhoR.gif)

---


```javascript=
 	// 我是座標顯示
	fill(0)
  background(50,90,50);
	stroke(255)
  strokeWeight(10);
	textSize(40)
	text("X:"+int(mouseX)+"Y:"+int(mouseY),50,50)
	
	// 我是name顯示
	stroke(255)
  strokeWeight(5);
	textSize(20)
	text("410730013 許軒豪",1690,40)
	
	// 我是name顯示
	noStroke();
	textSize(200)
	text("TKUET",width/2,height/2)
```



---
### 完整程式碼
```javascript=
function setup() {
 createCanvas(windowWidth, windowHeight);
 background(255);
 }

 // [ 宣 告 ] //
 var x =100 // X座標
 var y =100 // X座標
 var v_x =3 // 往右的速度
 var v_y =3 // 往下的速度

function draw() {
	background(50,90,50);
 	noStroke();
	
 	// 我是座標顯示
	fill(0)
  background(50,90,50);
	stroke(255)
  strokeWeight(10);
	textSize(40)
	text("X:"+int(mouseX)+"Y:"+int(mouseY),50,50)
	
	// 我是name顯示
	stroke(255)
  strokeWeight(5);
	textSize(20)
	text("410730013 許軒豪",1690,40)
	
	// 我是name顯示
	noStroke();
	textSize(200)
	text("TKUET",width/2,height/2)
	
if(mouseIsPressed){ //滑鼠點擊
	  
  // ------  臉部  ------ //
   fill(255, 225, 0);
   ellipse(x, y, 400, 400);
	
	
  // ------  眼睛左邊  ------ //
   fill(0)
   noStroke();
   ellipse(x - 80, y - 60, 50, 50);

	
  // ------  眼睛右邊  ------ //
   fill(0)
   noStroke();
   ellipse(x + 80, y - 60, 50, 50);

	
  // ------  超大眼白  ------ //
   noFill();
   stroke(255)
   strokeWeight(50);
   ellipse(x - 80, y - 60, 130, 130);
   ellipse(x + 80, y - 60, 130, 130);

	
  // ------  微笑  ------ //
   stroke(0);
   strokeWeight(8);
   noFill();
   arc(x, y, 300, 300, 0.25, PI - 0.25) //300 曲度, 0.25剛剛好放成正的

  x=x+v_x
	y=y+v_y
	v_y=v_y+0.2
	if(y>=height){
	v_y=-v_y*0.8
  
 }
 }
	
	else

	{
  var r1=mouseX  //定義
  var r2=mouseY  //定義
	var Color_R= r1/2+30  //定義
	var Color_G= r1/2+50+r2  //定義
	var Color_B= r1/2+10  //定義
 
	 fill(Color_R, Color_G, Color_B)
   noStroke();
	 ellipse(mouseX - 120, mouseY - 170, 150, 150);
		
	 fill(128,42,42)
   noStroke();
	 ellipse(mouseX - 120, mouseY - 170, 100, 100);
		
	 fill(255)
   noStroke();
	 ellipse(mouseX + 120, mouseY - 170, 150, 150);
		
	 fill(128,42,42)
   noStroke();
	 ellipse(mouseX + 120, mouseY - 170, 100, 100);
		
  // ------  臉部  ------ //
   fill(255, 225, 0);
   ellipse(mouseX, mouseY, 400, 400);

	 
		
  // ------  眼睛左邊  ------ //
   	fill(0)
  	noStroke();
   	ellipse(mouseX - 80, mouseY - 60, 100, 100);

		
  // ------  眼睛右邊  ------ //
   	fill(0)
  	noStroke();
   	ellipse(mouseX + 80, mouseY - 60, 100, 100);

		
  // ------  超大眼白  ------ //
    noFill();
    stroke(255)
    strokeWeight(50);
    ellipse(mouseX - 80, mouseY - 60, 130, 130);
    ellipse(mouseX + 80, mouseY - 60, 130, 130);

		
  // ------  微笑  ------ //
    stroke(0);
    strokeWeight(8);
    noFill();
    arc(mouseX, mouseY, 300, 300, 0.25, PI - 0.25) //曲度width/2+   height/2
}
 }
```