---
# System prepended metadata

title: 11. 學生版_物件導向與向量(1) - Class 粒子系統與互動遊戲
tags: [程式設計, 第十一章, 互動藝術程式創作入門, Creative Coding, 物件導向與向量 - Class 粒子系統與互動遊戲，學生版]

---

---
tags: 程式設計,第十一章,物件導向與向量 - Class 粒子系統與互動遊戲，學生版,互動藝術程式創作入門,Creative Coding
---
# 11. 學生版_物件導向與向量(1) - Class 粒子系統與互動遊戲

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


```javascript=



```



---

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

加上一些屬性內容
```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
	ball={
		p:{x:50,y:50},
		v:{x:0,y:1},
		r:100,
		color:color(252,68,68)
	}
}

function draw() {
	background(0);
	fill(ball.color)
	circle(ball.p.x,ball.p.y,ball.r);
	ball.p.x=ball.p.x+ball.v.x
	ball.p.y=ball.p.y+ball.v.y
}
```
## 如果要產生多個圓，就會顯得很複雜的程式碼




* 為什麼要用類別(Class)來生成物件呢？
* 可以大量快速建立同類型的物件
* 把常常針對物件執行的函式綁訂在方法上面，簡化程式碼，例如圖形的繪製與更新
* 建立類型的方法
- Class語法
    - new class 建立物件
    - constructor 初始化
        - this
        - args 參數
    - method 自訂函數
        - update / draw

---



### 利用class，先產生一個圓
![](https://i.imgur.com/9UW8BWy.gif)

```javascript=
var colors = "6a0136-bfab25-b81365-026c7c-055864".split("-").map(a=>"#"+a)
class Ball{
	constructor(){
	  this.p={x:random(width),y:random(height)}
		this.v={x:random(-1,1),y:random(-1,1)}
		this.r=random(50,200)
		this.color=color(252,68,68)
	}
	
	
}

var ball
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
	ball=new Ball()
	// ball={
	// 	p:{x:50,y:50},
	// 	v:{x:0,y:1},
	// 	r:100,
	// 	color:color(252,68,68)
	// }
}

function draw() {
	background(0);
	fill(ball.color)
	circle(ball.p.x,ball.p.y,ball.r);
	ball.p.x=ball.p.x+ball.v.x
	ball.p.y=ball.p.y+ball.v.y
}
```


---
![](https://i.imgur.com/RTyLFb8.gif)
宣告一個陣列balls=[]

```javascript=
var colors = "6a0136-bfab25-b81365-026c7c-055864".split("-").map(a=>"#"+a)
class Ball{
	constructor(){
	  this.p={x:random(width),y:random(height)}
		this.v={x:random(-1,1),y:random(-1,1)}
		this.r=random(50,200)
		this.color=random(colors)
	}
}

var ball
var balls=[]
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
	for(var i=0;i<100;i++){
		ball=new Ball()
		balls.push(ball)
	}
}

function draw() {
	background(0);
	for(var i=0;i<balls.length;i++){
		ball=balls[i]
	fill(ball.color)
	circle(ball.p.x,ball.p.y,ball.r);
	ball.p.x=ball.p.x+ball.v.x
	ball.p.y=ball.p.y+ball.v.y
	}
}
```


---
## 可以傳參數
![](https://i.imgur.com/E0WwbWU.gif)

```javascript=



```


## 如果沒有傳值過去，可設定預設值
![](https://i.imgur.com/E0WwbWU.gif)


```javascript=



```
---
## 改變大小

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


```javascript=



```


---
## 初始值設定後，設定他的一些動作

繪製與動作
繪製
```javascript=
var colors = "6a0136-bfab25-b81365-026c7c-055864".split("-").map(a=>"#"+a)
class Ball{
	constructor(args){
		this.r= args.r || random(200)
		this.p= args.p || {x:random(width),y:random(height)}  
		this.v=args.v || {x:random(-2,2),y:random(-2,2)}
		this.color = random(colors)
	}	
	
	draw(){
		push()
			translate(this.p.x, this.p.y)
			fill(this.color)
			ellipse(0, 0 , this.r);
			ellipse(-this.r/2, -this.r/2 , this.r/2);
			ellipse(this.r/2, -this.r/2 , this.r/2);
			fill("#ffff00")
			ellipse(this.r/4, -this.r/4 , this.r/8);
			ellipse(-this.r/4, -this.r/4 , this.r/8);
			fill(255)
			// arc(0,0,this.r/2,this.r/2,0,PI)			
			ellipse(0, 0 , this.r/2);
			fill(0)
			// arc(0,0,this.r/3,this.r/2,0,PI)
			ellipse(0, 0 , this.r/3);
		pop()
	}
	
	update(){
		this.p.x=this.p.x+this.v.x
		this.p.y+=this.v.y
	}
}
var ball
var balls=[]
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	for(var i=0;i<10;i++){
		ball = new Ball({r:200,p:{x:width/2,y:height/2}})
		balls.push(ball)
	}	
}

function draw() {
	background(0);
	for(var i=0;i<balls.length;i++){
		let ball = balls[i];		
		ball.draw()		
		ball.update() 
	}
}
```


---
### class的內容設定

```javascript=


```

---
### 實際運作的程式碼
```javascript=



```


---
## 針對陣列，for的另外一種寫法
也可以把
```javascript=
for(var i=0;i<balls.length;i++){
```
改為
```javascript=
for(let ball of balls){
```

(另外，需要取消執行let ball = balls[i];)


---

```javascript=


```
## 設定跳動的球
* 加入加速度
```javascript=


```



---
## 加入摩擦力
```javascript=
		this.v.x*=0.99
		this.v.y*=0.99
```


---

```javascript=



```




---
對於物件畫面的重畫
![](https://i.imgur.com/cUCBkfx.gif)
```javascript=



```

11. 學生版_物件導向與 ... 粒子系統與互動遊戲.md
選擇開啟工具

目前顯示的是「11. 學生版_物件導向與向量(1) - Class 粒子系統與互動遊戲.md」。