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


---


加上一些屬性內容

## 如果要產生多個圓，就會顯得很複雜的程式碼

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

---

### 利用class，先產生一個圓

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

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

---
宣告一個陣列balls=[]

var colors = "e574bc-ea84c9-ef94d5-f9b4ed-eabaf6-dabfff-c4c7ff-adcfff-96d7ff-7fdeff".split("-").map(a=>"#"+a)
class Ball{
	constructor(){//預設值
		this.r=random(150)
		this.p={x:random(width),y:random(height)}
		this.v={x:random(-1,1),y:random(-1,1)}
		this.color=random(colors)
	}
	
	}

var ball
var balls=[]
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	for(var i=0;i<60;i++){
	ball=new Ball//產生一個新的ball元件
	balls.push(ball)
}
}

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

---
## 可以傳參數

## 如果沒有傳值過去，可設定預設值

---
## 改變大小


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

繪製與動作
繪製

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

---
### 實際運作的程式碼

---
## 針對陣列，for的另外一種寫法
也可以把

for(var i=0;i<balls.length;i++){

改為

for(let ball of balls){

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

---

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

---
## 加入摩擦力

		this.v.x*=0.99
		this.v.y*=0.99

---

var colors = "e574bc-ea84c9-ef94d5-f9b4ed-eabaf6-dabfff-c4c7ff-adcfff-96d7ff-7fdeff".split("-").map(a=>"#"+a)
class Ball{  //用class宣告ball //大量相同元件須以不同的數值產出時可用
	constructor(args){ //預設值 //args為取參數值
		this.r = args.r || random(150) //random(50,200) //用= //args.可以接收下面的參數
// 	//||代表預設值，如果後面沒有參數值的話
		this.p = args.p || {x:random(width),y:random(height)}
		this.a = args.a || 0 //給予加速度數值(自由落體) 
		this.v = {x:random(-1,1),y:random(-1,1)}
		this.color = random(colors)
	}
	draw(){ //繪製
		push()
			translate(this.p.x,this.p.y)
			fill(this.color)
			ellipse(0,0, this.r);
			//繪製腳色
			fill(255)
			arc(0,0,this.r/2,this.r/2,0,PI)
			//眼珠
			fill(0)
			arc(0,0,this.r/3,this.r/3,0,PI)
		pop()
	}
	update(){ //移動與動作
		this.p.x = this.p.x + this.v.x  //x增加速率
		this.p.y = this.p.y + this.v.y
		this.v.x = this.v.x + this.a.x 
		this.v.y = this.v.y + this.a.y //每次數值會越大
		this.v.y*=0.999 // 摩擦力
		this.v.x*=0.999
		if(this.p.y>height){
			this.v.y = -abs(this.v.y)
		}
	}
}
 

var ball
var balls = []
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	for(var i=0;i<40;i++){
		ball = new Ball({
		p:{x:width/2,y:height/2},
		a:{x:0,y:0.3} //向下掉落 //也就是y每次增加0.3
		}) // 產生一個新的Ball class元件 ({})給予參數值
 		balls.push(ball)
	}
}

function draw() {
	background(100);
	//for(var i =0;i<balls.length;i++){
		//let ball = balls[i]
	for(let ball of balls){ //從陣列裡一個一個取出來，節省執行回圈再取資料
		ball.draw() //讓class的draw參數抓下來執行
		ball.update() //讓class的update參數抓下來執行
	}
}

---
對於物件畫面的重畫

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