---
tags: 程式設計,第十一章,物件導向與向量 - Class 粒子系統與互動遊戲，學生版,互動藝術程式創作入門,Creative Coding
---
# 11. 學生版_物件導向與向量(1) - Class 粒子系統與互動遊戲
```javascript=
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
ball={
p:{x:50,y:50},
v:{x:0,y:1},
r=100,
color: color(252,68,68)
}
}
function draw() {
fill(ball.color)
ellipse(ball.p.x, ball.p.y, ball.r);
ball.p.x
}
```
---
加上一些屬性內容
```javascript=
```
## 如果要產生多個圓，就會顯得很複雜的程式碼
* 為什麼要用類別(Class)來生成物件呢？
* 可以大量快速建立同類型的物件
* 把常常針對物件執行的函式綁訂在方法上面，簡化程式碼，例如圖形的繪製與更新
* 建立類型的方法
- Class語法
- new class 建立物件
- constructor 初始化
- this
- args 參數
- method 自訂函數
- update / draw
---
### 利用class，先產生一個圓
```javascript=
```
---
宣告一個陣列balls=[]
```javascript=
```
---
## 可以傳參數
```javascript=
```
## 如果沒有傳值過去，可設定預設值
```javascript=
var colors = "d64045-e9fff9-9ed8db-467599-1d3354".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<200;i++){
ball = new Ball
balls.push(ball)
}
}
function draw() {
background(100);
for(var i =0;i<balls.length;i++){
let ball = balls[i]
fill(ball.color)
ellipse(ball.p.x, ball.p.y, ball.r);
//ball.p.x = ball.p.x+ ball.v.x
ball.p.x += ball.v.x
//ball.p.y = ball.p.y+ ball.v.y
ball.p.y += ball.v.y
}
}
```
---
## 改變大小
```javascript=
```
---
## 初始值設定後，設定他的一些動作
繪製與動作
繪製
```javascript=
```
---
### 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=
```
---
對於物件畫面的重畫
```javascript=
```
11. 學生版_物件導向與向量(1) - Class 粒子系統與互動遊戲.md
目前顯示的是「11. 學生版_物件導向與向量(1) - Class 粒子系統與互動遊戲.md」。
Sign in with Wallet
Connect another wallet