---
# System prepended metadata

title: Untitled

---

## 5/4
let points = [[1,10], [4,10], [4,11], [11,9], [10,8], [15,5], [16,4], [16,1], [16,-1], [15,-1], [11,1], [9,2], [7,1], [5,-1], [1,-1], [0,0], [3,1], [1,1], [-2,0], [-6,-2], [-9,-6], [-9,-7], [-7,-9], [-7,-11], [-8,-12], [-9,-11], [-11,-10], [-13,-11], [-15,-11], [-17,-12], [-17,-10], [-15,-7], [-12,-6], [-11,-6], [-10,-3], [-8,2], [-5,6], [-3,9], [-4,10], [-5,10], [-2,12], [1,11],[4,10]]; //利用串列設定點

var fill_colors = "f7cac9-fddbdb-d0e4f5-b3cee5".split("-").map(a=>"#"+a)
var line_colors = "9f86c0-be95c4-e0b1cb".split("-").map(a=>"#"+a)

class Obj{ // 宣告一個類別，針對畫
  constructor(args){ //預設值，基本資料(物件顏色、移動速度、大小)
    // this.p = args.p || {x: random(width), y: random(height)} //描述該物件初始位置
    this.p = args.p || createVector(random(width),random(height))
    // this.v = {x: random(-1,1), y: random(-1,1)} //描述該物件的移動速度
    this.v = createVector(random(-1,1),random(-1,1))
    this.size = random(4,8) //描述該物件的放大倍率
    this.color = random(fill_colors) //描述該物件的充滿顏色
    this.stroke = random(line_colors) //描述該物件的線條顏色
  }
  draw(){ //劃出單一物件形狀
   push() //執行push()後，依照設定，設定原點(0,0)位置
    translate(this.p.x, this.p.y) //以該物件位置為原點
    scale(this.v.x<0?-1:1,-1)
    fill(this.color)
    stroke(this.stroke)
    strokeWeight(2)
    beginShape()
    for(var k=0; k < points.length-1; k=k+1){
      // line(points[k][0]*this.size,points[k][1]*this.size,points[k+1][0]*this.size,points[k+1][1]*this.size)
      vertex(points[k][0]*this.size,points[k][1]*this.size) //只要設定一個點，當指令到endShape()。會把所有的點串接在一起
      // curveVertex(points[k][0]*this.size,points[k][1]*this.size) //畫線為圓弧"for(var k=0; k < points.length-1; k=k+1)"
    }
    endShape()
   pop() //執行pop()，遠點回到視窗左上角
  }
  update(){ //移動程式碼
    // this.p.x = this.p.x + this.v.x //x軸目前位置(this.p.x)加上移動速率(this.v.x)
    // this.p.y = this.p.y + this.v.y //y軸目前位置(this.p.y)加上移動速率(this.v.y)
    this.p.add(this.v) //設定好像亮後使用add，就可與上面兩行指令一樣的效果

    //知道滑鼠位置<建立一個滑鼠向量
    let mouseV = createVector(mouseX,mouseY) //把滑鼠的位置轉圜為一個向量值
    let delta =  mouseV.sub(this.p).limit(this.v.mag()*2) //sub計算出滑鼠所在位置向量(mouseV)到物件向量(this.p)
    this.p.add(delta)

    if(this.p.x<=0 || this.p.x>=width){ //x軸碰到左邊(<=0)，或是碰到右邊(>=0)
      this.v.x = -this.v.x //x速度方向改變
    }
    if(this.p.y<=0 || this.p.y>=height){ //y軸碰到上面(<=0)，或是碰到下面(>=0)
      this.v.y = -this.v.y //y速度方向改變
    }
  }
  isDOPHINInRanger(){ //功能 : 判斷滑鼠按下的位置是否在物件範圍內
    let d = dist(mouseX,mouseY,this.p.x,this.p.y)  //計算兩點之間距離，放到d變數內
    if(d<15*this.size){
      return true //滑鼠與物件的距離小於物件寬度，代表碰觸(回傳至true)
    }
    else{
      return false
    }
  }
}

var dophin //目前要處理的物件，暫時放在dolphin變數內
var dophins = [] //產生所有的物件
var score = 0
function setup() {
  createCanvas(windowWidth, windowHeight);
  for(var i=0; i<20; i=i+1){
    dophin = new Obj({}) //產生一個新的Obj class元件
    dophins.push(dophin) //把dophin物件放到dophins陣列內
  }
}

function draw() {
  background(255);
  // for(var j=0; j<dophins.length; j=j+1){
  //   dophin = dophins[j]
  //   dophin.draw()
  //   dophin.update()
  // }
  for(let dophin of dophins){
    dophin.draw()
    dophin.update()
  }
  textSize(30)
  text(score,50,50)
}

function mousePressed(){
//=================產生物件=================//
  // dophin = new Obj({
  //   p:{x:mouseX, y:mouseY}}) //產生一個新的Obj class元件
  // dophins.push(dophin) //把dophin物件放到dophins陣列內(丟到倉庫)
//=========================================//

//=================刪除物件=================//
for(let dophin of dophins){ //檢查每一物件
  if(dophin.isDOPHINInRanger()){
    dophins.splice(dophins.indexOf(dophin),1) //從倉庫dophins取出被滑鼠按到的物件編號(dophins.indexOf(dophin))，只取1個
    score = score + 1
  }
}
//=========================================//
}
