---
# System prepended metadata

title: 期中報告--程式設計

---




# 期中報告--程式設計


### 作業目標
畫一個自畫像，隨著滑鼠游標移動中

按一下可以跳動，跟自由落體一樣的往下跳


---
### 流程圖
![](https://i.imgur.com/rnzZfid.png)

---
### 功能
人像追蹤鼠標
滑鼠點擊後將人像開始自由落體，人像超出畫面時回到(0,0)重新開始
再次點擊回到追蹤鼠標模式

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

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

var count=0
var mx=0
var my=0
var v_x=3
var v_y=3

function draw()
{
	if(count==0)
	{
			background(255);
			strokeWeight(5)
			fill(255, 230, 187);
			ellipse(mouseX, mouseY, 300, 350);//臉
			
			strokeWeight(1)
			fill(38,24,0)
			rect(mouseX-10,mouseY-105,100,5)//頭髮
			fill(38,24,0)
			rect(mouseX-20,mouseY-110,120,5)//頭髮
			fill(38,24,0)
			rect(mouseX-30,mouseY-115,140,5)//頭髮
			fill(38,24,0)
			rect(mouseX-40,mouseY-120,150,5)//頭髮
			fill(38,24,0)
			rect(mouseX-55,mouseY-125,160,5)//頭髮
			fill(38,24,0)
			rect(mouseX-100,mouseY-130,200,5)//頭髮
			fill(38,24,0)
			rect(mouseX-95,mouseY-135,190,5)//頭髮
			fill(38,24,0)
			rect(mouseX-90,mouseY-140,180,5)//頭髮
			fill(38,24,0)
			rect(mouseX-85,mouseY-145,170,5)//頭髮
			fill(38,24,0)
			rect(mouseX-80,mouseY-150,160,5)//頭髮
			fill(38,24,0)
			rect(mouseX-75,mouseY-155,150,5)//頭髮
			fill(38,24,0)
			rect(mouseX-65,mouseY-160,130,5)//頭髮
			fill(38,24,0)
			rect(mouseX-55,mouseY-165,110,5)//頭髮
			fill(38,24,0)
			rect(mouseX-45,mouseY-170,90,5)//頭髮
			fill(38,24,0)
			rect(mouseX-25,mouseY-175,50,5)//頭髮
		
			fill(64,40,0)
			rect(mouseX-80,mouseY-60,40,10)//眉毛
			fill(64,40,0)
			rect(mouseX+30,mouseY-60,40,10)//眉毛
		
			fill(242, 242, 242);
			ellipse(mouseX-60,mouseY-20,30, 30);//眼
			fill(242, 242, 242);
			ellipse(mouseX+50,mouseY-20, 30, 30);//眼
			fill(0, 0, 0);
			ellipse(mouseX-60,mouseY-20, 10+random(-5,5), 10+random(-5,5));//眼球
			fill(0, 0, 0);
			ellipse(mouseX+50,mouseY-20, 10+random(-5,5), 10+random(-5,5));//眼球
		
			fill(0,0,0)
			rect(mouseX-25,mouseY+90,50, 5)//嘴巴
			fill(0,0,0)
			rect(mouseX-30,mouseY+85,5, 5)//嘴巴
			fill(0,0,0)
			rect(mouseX-35,mouseY+80,5, 5)//嘴巴
			fill(0,0,0)
			rect(mouseX-40,mouseY+75,5, 5)//嘴巴
		
			fill(0,0,0)
			rect(mouseX+25,mouseY+85,5, 5)//嘴巴
			fill(0,0,0)
			rect(mouseX+30,mouseY+80,5,5 )//嘴巴
			fill(0,0,0)
			rect(mouseX+35,mouseY+75,5, 5)//嘴巴

	}
	else
	{
		background(255);
		strokeWeight(5)
			fill(255, 230, 187);
			ellipse(mx,my, 300, 350);
			
			strokeWeight(1)
			fill(38,24,0)
			rect(mx-10,my-105,100,5)
			fill(38,24,0)
			rect(mx-20,my-110,120,5)
			fill(38,24,0)
			rect(mx-30,my-115,140,5)
			fill(38,24,0)
			rect(mx-40,my-120,150,5)
			fill(38,24,0)
			rect(mx-55,my-125,160,5)
			fill(38,24,0)
			rect(mx-100,my-130,200,5)
			fill(38,24,0)
			rect(mx-95,my-135,190,5)
			fill(38,24,0)
			rect(mx-90,my-140,180,5)
			fill(38,24,0)
			rect(mx-85,my-145,170,5)
			fill(38,24,0)
			rect(mx-80,my-150,160,5)
			fill(38,24,0)
			rect(mx-75,my-155,150,5)
			fill(38,24,0)
			rect(mx-65,my-160,130,5)
			fill(38,24,0)
			rect(mx-55,my-165,110,5)
			fill(38,24,0)
			rect(mx-45,my-170,90,5)
			fill(38,24,0)
			rect(mx-25,my-175,50,5)
		
			fill(64,40,0)
			rect(mx-80,my-60,40,10)
			fill(64,40,0)
			rect(mx+30,my-60,40,10)
		
			fill(242, 242, 242);
			ellipse(mx-60,my-20,30, 30);
			fill(242, 242, 242);
			ellipse(mx+50,my-20, 30, 30);
			fill(0, 0, 0);
			ellipse(mx-60,my-20, 10+random(-5,5), 10+random(-5,5));// eye ball
			fill(0, 0, 0);
			ellipse(mx+50,my-20, 10+random(-5,5), 10+random(-5,5));// eye ball
		
			fill(0,0,0)
			rect(mx-25,my+90,50, 5)
			fill(0,0,0)
			rect(mx-30,my+85,5, 5)
			fill(0,0,0)
			rect(mx-35,my+80,5, 5)
			fill(0,0,0)
			rect(mx-40,my+75,5, 5)
		
			fill(0,0,0)
			rect(mx+25,my+85,5, 5)
			fill(0,0,0)
			rect(mx+30,my+80,5,5 )
			fill(0,0,0)
			rect(mx+35,my+75,5, 5)
		
		mx= mx+v_x
		my= my+v_y
		v_y=v_y+0.6
		if(my>height-160)
	{
		v_y =-v_y*0.8
	 my=height-160
	}
	if(mx>width)
	{
		mx=50
		my=50
	}
	}
}

function mousePressed()
{
  count++          
    if (count>1)
		{ 
      count=0      
 	 }	
}
```