---
# System prepended metadata

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

---

# 第 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` 

```javascript=
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)

