# 第 2 章 【 基礎繪製與色彩 】程式框架 - p5.js 開發入門
> Date：2022/11/30
> 使用 open processing 平台
## 初始設定 setup()
- setup(){內容}
初始設定，**只會繪製一次**
```javascript=
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
}
```
## 不斷繪製 draw()
把想畫的程式碼放在這段中，放置在 draw 中的程式碼都會**不斷的繪製**疊加上去
```javascript=
function draw() {
// 你的程式碼
circle(mouseX, mouseY, 20);
}
```
## 畫布設定
createCanvas(寬, 高);
:arrow_right: 設定畫布 寬 高
## 基本圖案
- 圓形
```javascript=
// 是算與「圓心」的距離多少
circle(左側距離, 上面距離, 直徑);
circle(10, 10, 20);
```
- 橢圓
```javascript=
// 是算與「圓心」的距離多少
ellipse(左側距離, 上面距離, 寬, 高);
ellipse(10, 10, 20, 20);
```
## 填色
fill(顏色數值)
```javascript=
fill(100)
fill(255, 200, 0);
fill(100, 20) // 數值，透明度
```
## 背景色
background(顏色數值);
:arrow_right: 顏色類別：
- 單一數值 (100)
- RGB 數值 (255,200,0)
- 數值, 透明度 (100, 20)
- 色碼 ("#FFD48E")，要用引號包住
補充：
- [色碼 chrome 擴充套件](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=zh-TW)
- [Popular Color Palettes](https://www.color-hex.com/color-palettes/popular.php)
- [twitter 搜尋 #p5js 等相關標籤](https://twitter.com/hashtag/p5js)
- [The Coding Train](https://www.youtube.com/@TheCodingTrain)
background() 可以放在 setup() 或是 draw() 區域中
### 放在 setup()
成為最一開始的畫布底色
### 放在 draw()
單一顏色
:arrow_right: 不會有滑鼠軌跡
```javascript=
background(100);
```
顏色，設定透明度
:arrow_right: 有滑鼠軌跡，但是有被透明背景覆蓋(變黯淡)
```javascript=
background(100, 20);
```
## 變動數值
### 滑鼠左側和上面距離
要讓圖案某數值隨著滑鼠位置變化，使用 mouseX、mouseY
例如：讓橢圓的位置跟著滑鼠變動
```javascript=
ellipse(mouseX, mouseY, 50,50);
```
### frameCount 幀數
:arrow_right: 執行後總共畫了幾次
用 print() 來看目前frameCount 次數
```javascript=
print(frameCount);
```
## 框線
stroke(顏色數值)
strokeWeight(框線粗度)
```javascript
stroke(255, 204, 0);
strokeWeight(4);
```
## 偵測滑鼠行為
滑鼠有無被點按 :arrow_right: mouseIsPressed
```javascript=
if (mouseIsPressed){
fill(mouseX, mouseY, frameCount);
ellipse(mouseX, mouseY, 100, 100);
}
```
## 實際應用範例
```javascript=
function setup() {
createCanvas(500,500);
}
function draw() {
background(100, 2);
stroke(255, 0, 0);
strokeWeight(20);
fill(mouseX, mouseY, frameCount);
// print(frameCount);
ellipse(mouseX, mouseY, 100, 100);
}
```
## cheatSheet
## 快捷鍵
Mac：將 ctrl 代換成 ⌘ cmd 即可
| 功能 | 快捷鍵 |
|:---------------------- |:------------------------- |
| 關鍵字搜尋 | Ctrl + F |
| 多重選取關鍵字 | Ctrl + D |
| 往左 or 右移動一個單字 | Alt + 左右 |
| 往左 or 右刪除一個單字 | Alt + Delete / Backspace |
| 移動到句首 or 句尾 | Ctrl + 左右 |
| 往左 or 右刪除一整行 | Ctrl + Delete / Backspace |
| 增加 / 減少縮排 | Tab / Shift + Tab |
| 執行 Code | Ctrl + enter |
## VS Code plugin 擴充套件
- Live Server
Sign in with Wallet
Connect another wallet