第8章 互動系統與模擬

第8章 <<互動系統與模擬>>函數與物件互動 - 建構無法預測的小世界

Part 1
同學分享
Frank(https://hahow.in/courses/5d1ba52a0d5f3b0021dbb996/main?item=5e5c17dfc8bfb6002495affb)

Part 2
課程重點

單元一 章節介紹

單元二 function 函數的概念
為什麼要用函數?

• 函數可以把需要重複執行的行為打包，在需要使用的時候直接使用函數就不需要再一次一步一步的執行每個步驟了。
• 函數的結構

function nameOfFunction(param1, param2 …){ //裡面的參數 params 不是必要
…
// 要重複做的事情，這邊可以使用上面傳入的參數，如 param1,param2… 等
…
return dataToReturn // 要回傳的資料，非必要
`

• 函數的命名方式：跟變數一樣，用駝峰式命名。如果是要執行某個行為的話，第一個字會是動詞像是 drawFlower()。

• 傳入參數：如果函示在建立的時候可以傳入參數，那在使用的時候傳入當下不同的狀態，例如我要畫多個花，大小都不一樣，那只要改變 drawFlower(posX, posY, size) 裡面的 size 參數就好。

• 回傳資料：定義函數時可以選擇要不要回傳值，如果回傳的話可以使用 return 你要回傳的東西，附帶一提，不論有沒有實際回傳的東西，函數遇到 return 就會終止喔！

• 函數的使用：直接用函數名稱 nameOfFunction(param1, param2 …) 就會執行了，如果有回傳值的話也可以賦予到新的變數上面，像是如果函式長這樣：

function sayHi(yourName){
return 'Hi '+ yourName +'!';
}
// 那我們就可以透過變數把這個回傳的問候存起來
let message = sayHi('John')
print(message) // 會顯示 'Hi John !'

單元三 陣列的基礎與操作

• 為什麼要用陣列？ 使用陣列我們可以把相同類型的資料儲存起來，在需要用到的時候遍歷裡面的每個元素，也可以動態的增減，讓繪製多個類似圖形的效率大大提高。
• 陣列的結構：

let datas = [數值1,數值2,…]

• 取值的方法：
  datas[0] //[] 裡面指的是要取第 n 個值，要注意 JavaScript 是從0 開始計數，所以要取第一個項目的話，是datas[0]，而不是 datas[1] 喔

• 遍歷整個陣列的方式：用for each/for of/for loop

let datas = [d1,d2,d3…]
(let i =0;i<datas.length;){
let data = //第 i 個資料
}

• 操作陣列裡面的元素

let datas = [1,2,3,4,5]
datas[0] += 1 // 第 1 個元素加一
print(datas) // [2,2,3,4,5] 第 1 個元素變成 2 了！

• 陣列的操作：push() /pop() /Slice(x,n)

單元四 物件的基礎與操作

• 物件結構

let obj = {
property1: value1,
property2: value2,
…
}

像是

let flower = {
x: 300,
y: 200,
size: 2,
color: "#2499f2"
…
}

• 物件的取值：用物件名稱.屬性名稱 就可以拿到資料，像是 print(flower.size) // 2
• 物件的修改：直接賦予新的值，或是直接做計算。像是：flower.y += 1 或是 flower.size *= 0.99
• 物件內部的方法：把繪圖放到花的物件裡面

單元五 多物件與滑鼠的互動

• 結合物件、陣列與函式

let flowers = [] //先設定一個空的陣列來存放花朵的物件們
function setup(){
…
for(var i=0;i<100;i++){ // 用 push() 塞入 100 個花的物件
flowers.push(
generateRandomFlower(random(width),random(height))
// 這邊會收到 generateRandomFlower() 函式回傳的花朵物件
)
}
…
}

​​​​function generateRandomFlower(x,y){
​​​​    return {
​​​​                x: x,
​​​​                y: y,
​​​​                r: random(50,120),
​​​​                color: random(colors)
​​​​            }
​​​​}

• 物件之間的互動
  -用 for loop 遍歷陣列裡面的物件，再使用 dist() 判斷兩個物件的距離。

let bee = {
x = mouseX,
y = mouseY
}

for(let i =0; i<flowers.length; i++){
let flower = flowers[i] //宣告一個變數設定當下這個回圈裡面的花朵，方便接下來計算使用
if(dist(bee.x,bee.y, flower.x, flower.y) < 100){
// 開花
}else{
// 關花
}
}

-有多個蜜蜂物件也歹就補，做兩層迴圈就ok

for(let i =0; i<flowers.length; i++){
for(let j =0; j<bees.length; j++){
let flower = flowers[i]
let bee = bees[j]
let hasBee = false // 每個花都設定自己的變數，以免被已經經過的蜜蜂影響
if(dist(bee.x,bee.y, flower.x, flower.y) < 100){
hasBee = true
}
if(hasBee){
// 開花
}
}
}

參巧來源

• 互動藝術程式創作入門 (Creative Coding)