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


---


加上一些屬性內容

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，先產生一個圓

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
}

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

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
	}
}

---
## 可以傳參數

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

---
## 改變大小


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

繪製與動作
繪製

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的內容設定

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

---
## 針對陣列，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

---

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

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

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