# 第 4 章 【 基礎繪製與色彩 】變數與資料－賦予可變與連續性

## 課前作品分享

| 作品 |||
| ----------------------------------------------------- | -------------------------------------------------- | ----------------------------------------------------- |
| [Peggy](https://openprocessing.org/sketch/1753917) | [Sonia](https://openprocessing.org/sketch/1773236) | [Kidult 1](https://openprocessing.org/sketch/1773745) |
| [Kidult 2](https://openprocessing.org/sketch/1769634) | [Coco](https://openprocessing.org/sketch/931142) | [Sandy 1](https://openprocessing.org/sketch/1773803) |
| [Sandy 2](https://openprocessing.org/sketch/881469) |[Sandy 3](https://openprocessing.org/sketch/887154)||

Sandy分享：前期沒想法也沒關係，就先照著課程做，後續有靈感再做延伸就好

## 補充資源
[ChatGPT](https://chat.openai.com/chat)

## 變數

### 為什麼需要變數
- 減少重複
- 暫存手邊需要的資料
- 做複查的運算時解構概念
- 留下上一刻的狀態
- 賦予數值與資料意義

### 變數是什麼

為了達到上述的目的，需要「變數」來儲存「資料」。
就像一個「抽屜(變數)」，每次用到「抽屜」時，程式就會自動到「抽屜」中看裡面的「東西(資料)」是什麼。

### 類型
- 數值
`var x = 50, y = 50`

- 字串
`var txt = "Hello"`

- boolean (true/false)
- true：`5==5`
- false：`5==10`

if (y>0) {
  x = -x
}

// 滑鼠有按為 true，沒按為 false
if (mouseIsPressed){
  fill('red')
} else {
  fill("#000000")
}

### 變數命名
不能跟 p5 指令一樣!!
可先至 p5.js 的 reference 查看來確認

### p5.js 的 系統變數
- mouseX / mouseY / pmouseX / pmouseY
- mouseIsPressed (true / false)
- keyPressed
- LEFT_ARROW
- RIGHT_ARROW
- UP_ARROW
- DOWN_ARROW
- SPACE

## 色彩
可以用顏色名稱，red、yellow 等(更多顏色可至 [CSS Colors](https://www.w3schools.com/cssref/css_colors.php) 查詢)，名稱要用單引號/雙引號包住。

## 吳哲宇老師
[範例](https://openprocessing.org/sketch/1604611)
[直播](https://www.youtube.com/watch?v=rnrn_mmIgYs)

### 參考來源
- [互動藝術程式創作入門 (Creative Coding)](https://hahow.in/courses/5d1ba52a0d5f3b0021dbb996/main?item=5e5c17dfc8bfb6002495affb)