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


## 步驟一

  //宣告三個變數

  var x = 50
  var y = 50
  var r = 100



  function setup() {
    createCanvas(windowWidth, windowHeight);
  //宣告一個向量數(一個物件ball，有兩個屬性(p,r)，p代表位置(x,y)，r代表球的直徑
    ball={
    p:{x:50,y:50},
    r:100,
    color: color(252,68,68),  //color函數為顏色設定值
    v:{x:3,y:2}
    }
  }




function draw() {
  background(220);
  fill(ball.color)
  ellipse(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，先產生一個圓

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

---
## 步驟二
## 步驟二

var colors = "ffd6ff-e7c6ff-c8b6ff-b8c0ff-bbd0ff".split("-").map(a=>"#"+a)
  //宣告三個變數

  var balls = []



  function setup() {
    createCanvas(windowWidth, windowHeight);
  //宣告一個向量數(一個物件ball，有兩個屬性(p,r)，p代表位置(x,y)，r代表球的直徑
   // ball={
    //p:{x:50,y:50},
   // r:100,
    //color: color(252,68,68),  //color函數為顏色設定值
    //v:{x:3,y:2}
   //}

    for(i=0;i<50;i=i+1){
      ball={
        p:{x:width/2,y:height/2},
        r:random(80,120),
        color: random(colors),
        v:{x:random(-2,2),y:random(-2,2)}
      }
      balls.push(ball)
    }
  }




function draw() {
  background(220);
  //fill(ball.color)
  //ellipse(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
  noStroke()

  for(j=0;j<balls.length;j=j+1){
    fill(balls[j].color)
    ellipse(balls[j].p.x,balls[j].p.y,balls[j].r)
    balls[j].p.x = balls[j].p.x + balls[j].v.x
    balls[j].p.y = balls[j].p.y + balls[j].v.y
 

  }

}

## 步驟三

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

var colors = "ffd6ff-e7c6ff-c8b6ff-b8c0ff-bbd0ff".split("-").map(a=>"#"+a)
var line_color = "0d1b2a-1b263b-415a77-778da9-e0e1dd".split("-").map(a=>"#"+a)
var balls = []
var ball
class ball_class{
  constructor(){
    this.p={x:width/2,y:height/2}
    this.r=random(80,120)
    this.color = random(colors)
    this.v={x:random(-2,2),y:random(-2,2)}
    this.line_color = random(this.line_color)
  }
  draw(){
    stroke(line_color)
    fill(this.color)
    ellipse(this.p.x,this.p.y,this.r)

  }
  update(){
    this.p.x = this.p.x + this.v.x
    this.p.y = this.p.y + this.v.y

  }
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  for(i=0;i<10;i=i+1){
    ball = new ball_class()
    balls.push(ball)
}
//print(balls)
}

function draw() {
  background(220);
  for(j=0;j<balls.length;j=j+1){
    ball = balls[j]
    ball.draw()
    ball.update()
  }
}

---
## 步驟四


var colors = "ffd6ff-e7c6ff-c8b6ff-b8c0ff-bbd0ff".split("-").map(a=>"#"+a)
var line_color = "0d1b2a-1b263b-415a77-778da9-e0e1dd".split("-").map(a=>"#"+a)
var balls = []
 var ball
 class ball_class{    //宣告一個ball_class物件
  constructor(){      //描述物件的初始值，只有設定的資料內容
    this.p = {x:width/2,y:height/2}
    this.r = random(50,120)
    this.color = random(colors)
    this.v = {x:random(-2,2),y:random(-2,2)}
    this.line_color = random(line.colors)
  }
  draw(){   //畫出物件的程式碼
    stroke(this.line_color)
    fill(this.color)
    ellipse(this.p.x,this.p.y,this.r)
    ellipse(this.p.x,this.p.y,this.r-50)
  }
  update(){  //物件移動更新後程式碼
    this.p.x = this.p.x + this.v.x  //x軸
    this.p.y = this.p.y + this.v.y  //y軸
  }
 }

 function setup() {
   createCanvas(windowWidth, windowHeight);
   for(i=0;i<10;i=i+1){
    ball = new ball_class()
    balls.push(ball)
   }
   //print(balls)
 }




function draw() {
 background(220);
 for(j=0;j<balls.length;j=j+1){
  ball = balls[j]
  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. 學生版_物件導向與向量(1) - Class 粒子系統與互動遊戲.md
目前顯示的是「11. 學生版_物件導向與向量(1) - Class 粒子系統與互動遊戲.md」。