前言
覺得這個文章，花了太多時間在寫但有些設定好像應該 更把他分的更清楚而不是一直只丟範例出來解釋。
不過現在先推之後在後修改吧
目標
瞭解常見的資料類型
能夠載入外部資料
解析資料清理與轉換
將資料轉換為色彩、形狀與動態呈現
將變數與狀態存在暫存(local storage)中
課程重點
資料結構與 API
常見的資料形式：JSON 與 CSV

JSON
JSON(JavaScript Object Notation) 是什麼：JSON 是一種像是 JavaScript 物件格式的資料結構，在 JavaScript 中，有許多內建的方式可以直接對 JSON 格式的資料操作，因此在網路應用程式裡面，JSON 是種非常常用的資料格式。
JSON 的格式：JSON 的格式與 JavaScript 的物件類似，也可以是一個陣列，一般常見的 JSON 可能會長得像是這樣(ref:MDN-使用 JSON 資料)
{
"squadName" : "Super hero squad",
"homeTown" : "Metro City",
"formed" : 2016,
"secretBase" : "Super tower",
"active" : true,
"members" : [
{
"name" : "Molecule Man",
"age" : 29,
"secretIdentity" : "Dan Jukes",
"powers" : [
"Radiation resistance",
"Turning tiny",
"Radiation blast"
]
},
{
"name" : "Madame Uppercut",
"age" : 39,
"secretIdentity" : "Jane Wilson",
"powers" : [
"Million tonne punch",
"Damage resistance",
"Superhuman reflexes"
]
},
{
"name" : "Eternal Flame",
"age" : 1000000,
"secretIdentity" : "Unknown",
"powers" : [
"Immortality",
"Heat Immunity",
"Inferno",
"Teleportation",
"Interdimensional travel"
]
}
]
}
複製貼到線上編輯器 JSON Editor Online
延伸閱讀：MDN-使用 JSON 資料
JSON 的使用，在 p5 裡面有提供專門處理 JSON 的函式，只要使用 loadJSON() 讀取檔案之後，就可以用處理物件或是陣列的方式直接操作讀取的資料。
CSV
CSV(Comma-Separated Values) 是什麼：CSV 是單純用文字、逗號（,）與換行符號（\n）組成的資料格式，可以使用 excel 等文書工具編輯，一般打開之後都是以表格的形式呈現，因為格式簡單、解析容易，被廣泛運用在資料庫、資料表的傳輸上。
CSV 的格式：CSV 的第一行通常是欄位，之後的每一行都是一筆資料，欄位之間用,分開，一個 CSV 資料長的會像是這樣(ref: 維基百科－逗號分隔值)：
Year,Make,Model,Description,Price
1997,Ford,E350,"ac, abs, moon",3000.00
1999,Chevy,"Venture ""Extended Edition""","",4900.00
1999,Chevy,"Venture ""Extended Edition, Very Large""",,5000.00
1996,Jeep,Grand Cherokee,"MUST SELL!
air, moon roof, loaded",4799.00
資料整理
用文書工具(Number/Excel)整理資料集
匯出成 CSV 檔案
使用 CSVJSON 把 CSV 檔案轉換成 JSON 方便程式讀取使用
載入外部資料
課程中使用的資料：https://data.gov.tw/dataset/40267
在preload()裡面使用loadJSON()讀取上傳的 JSON 檔，或是讀取某個網址的資料。
preload(){
// 記得把要讀取的 JSON 檔案上傳到 OpenProcessing 的 Files 裡面
treeData = loadJSON("XXX_data.json")
}
把物件轉成陣列：Object.values()，方便後續去遞迴陣列裡面的資料
// 原本是物件包著物件
dataObj = {
1:{
keyA: value1A,
keyB: value1B,
...
},
2:{
keyA: value2A,
keyB: value2B,
...
},
...
}

// 轉換成陣列
dataArray = Object.values(dataObj)
[
{
keyA: value1A,
keyB: value1B,
...
},
{
keyA: value2A,
keyB: value2B,
...
}
]

資料的繪製
在印出資料前先標準化：let h = map(d.value,0,8000,0,height) // 8000 是所有資料的最大值。
增加繪製的樣式
drawingContext.shadowColor = color(0,30)
drawingContxt.shadowOffsetX = 20
drawingContxt.shadowOffsetY = 20
讓增長的動畫配合 easing function，可以參考：https://easings.net/
function easeOutQuart(x){
return 1 - pow(1 - x, 4);
}

// map 加上 true 以限制 map 的上限
animationProgress = easeOutQuart(map(frameCount,0,300,0,1,true))
rect(0,0,12*animationProgress,h)
結合控制與輸入互動
選擇樹種以及設定縮放大小
新增控制元件與選項
let selElement = createSelect()
selElement.option("針葉樹合計")
// 如果新增滑桿的作法也類似，使用
// let sliderElement = createSlider(0.2,1,resultScale, 0.001)
綁定更新選項的函式
selElement.changed(selectChanged)
function selectChanged(){
let selectedType = this.value()
storeItem("tree_type_select",selectedType)
print(selectedType)
useData= []
for(let d of treeData){
if (d.dname1==selectedType){
useData.push(d)
print(d)
}
}
}
陣列操作
filter()：把陣列中所有符合條件的資料，包在一個陣列中回傳
useData = treeData.filter(function(d){
return d.dname1==storedType
})
map()：將陣列中的每筆資料透過某個函式的運算之後，包在一個陣列中回傳
const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]
find() 回傳陣列中符合條件的第一筆資料
const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12
LocalStorage 儲存資料
一種可以把網頁應用程式的資料儲存在瀏覽器的功能
一般的儲存型態是字串，使用 p5 的函式可以存取參數、陣列或物件等格式
使用storeItem()/getItem() 存取瀏覽器的 localStorage，把資料儲存在用戶的瀏覽器之中
// 取得 localStorage 中某個欄位的資料
let storedType = getItem("tree_type_select") || "相思樹"

// 把資料儲存到 localStorage 中的某個欄位中（如果欄位不存在就新增欄位）
storeItem("tree_type_select",selectedType)
removeItem() 移除某個欄位與資料