## 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
}
}
//=========================================//
}