---
# System prepended metadata

title: 2. 程式框架 - p5.js 開發入門(作業繳交版)

---

# 2. 程式框架 - p5.js 開發入門(作業繳交版)



## 範例練習
這是今天筆刷練習的成品，我們將會學到如何創建一個新的畫布、修改顏色、加上簡單的判斷式後做出互動的畫筆。


![](https://i.imgur.com/KFen9kO.gif)



---

### 筆刷練習

沒有程式經驗的同學也不用擔心，可以先跟著一起做，感受ㄧ下用程式繪圖的樂趣。中間的許多細節在後續的章節中都會陸續提到，也可以自己看看 文件 ，說不定就能迎刃而解，進而享受解決問題的過程喔 😃


---


### 產生一個隨著游標走動的方塊

![](https://i.imgur.com/nWBVZaC.gif)


---


```javfunction setup() {//環境設定
  createCanvas(windowWidth, windowHeight);//產生一個畫布,寬為整個視窗寬度
  background(100)//產生背景,背景顏色為灰階為200(只有一個數字)
  //background(255,0,0)//產生背景顏色,背景顏色為RGB為R為255,GB都為0
}

function draw() {//每秒進入函數執行60次,
 // background(220);
 // circle(mouseX,mouseY,30)
 FILL(255,0,0)//充滿顏色
 rect(mouseX,mouseY,100,50)//劃一格方框,寬為100<高為50
}

ascript=






```


---

### 讓畫的方塊消失，只剩一個，隨著滑鼠移動


![](https://i.imgur.com/NsVYCKx.gif)



---


```javfunction setup() {//環境設定
  createCanvas(windowWidth, windowHeight);//產生一個畫布,寬為整個視窗寬度
  background(255,255,0)//產生背景,背景顏色為灰階為200(只有一個數字)
  //background(255,0,0)//產生背景顏色,背景顏色為RGB為R為255,GB都為0
}

function draw() {//每秒進入函數執行60次,
  background(100);
 fill(255,0,0)//充滿顏色
 rect(mouseX,mouseY,100,50)//劃一格方框,寬為100<高為50
}

ascript=


```


---



### 只會顯示一個球，背景顯示透明

![](https://i.imgur.com/ojKBxHj.gif)


---


```javafunction setup() {//環境設定
  createCanvas(windowWidth, windowHeight);//產生一個畫布,寬為整個視窗寬度
  background(255,255,0)//產生背景,背景顏色為灰階為200(只有一個數字)
  //background(255,0,0)//產生背景顏色,背景顏色為RGB為R為255,GB都為0
}

function draw() {//每秒進入函數執行60次,
  //background(100);
 fill(255,0,0)//充滿顏色
 rect(mouseX,mouseY,100,50)//劃一格方框,寬為100<高為50
}

script=

```






---

### 改變圓圈框限顏色與粗細，framecount:在draw執行過幾次
可以利用此變數，讓越後面的圓變得不一樣的顏色

![](https://i.imgur.com/0Ku6jOY.gif)



---

```javascfunction setup() {//環境設定
  createCanvas(windowWidth, windowHeight);//產生一個畫布,寬為整個視窗寬度
  background(255,255,0)//產生背景,背景顏色為灰階為200(只有一個數字)
  //background(255,0,0)//產生背景顏色,背景顏色為RGB為R為255,GB都為0
}

function draw() {//每秒進入函數執行60次,
  background(100);
 fill(255,0,0)//充滿顏色
 //rect(mouseX,mouseY,100,50)
 stroke(255)//框限顏色
 strokeWeight(20)
 
 ellipse(mouseX,mouseY,50,50)//劃一個圓,座標
}

ript=

```

---






---

### 隨著游標移動的顏色變化，按下滑鼠按鈕會顯示圓圈

![](https://i.imgur.com/vv4lFAD.gif)

---

```javascript=

```

---


## 語法回顧
* 老師：不用硬背，忘記的話可以去搜尋文件，玩玩看範例


---

### 基本函式

* 函式 - 能夠執行特定目的或功能的程式碼。偷偷說，其實短短語法背後藏有一大包程式碼，但先別在意 
* setup() 與 draw()：可理解為「建立繪圖器」及「繪製」。是用 p5 繪圖必備的兩個函式


---

* createCanvas()：創建畫布。可以設定長寬
* background()：設定背景顏色
* rect()：繪製矩形
* ellipse()：繪製橢形（寬高一樣時就是圓形）
* stroke()：設定邊框顏色


---

* strokeWeight()：設定邊框粗細
* fill()：設定圖形填色
* print()：把數值打印在 console 中



---

### p5.js 內建變數
####  變數 - 存有某些數值的神秘空間，叫它的名字就可取得內存的數來做點事
* mouseIsPressed：儲存著滑鼠點擊的狀態（點擊時存著 true ; 無點擊時則是 false）
* frameCount：儲存當下的畫面禎數（從渲染開始計算）



---


#### 程式的流程控制方法 - 關鍵字 if

 if 這個關鍵字可以用來告訴電腦不同的狀況該怎麼做不同的事 
 
 

---

if 的基本語法結構 


```
if(滿足這邊的條件 → 這邊吃到 true)
  {
    這邊會有些程式碼     // 做這些程式指令 //
  }
else
  {
    這邊也會有些程式碼   // 若不滿足條件，則做這邊的程式指令 //
  }
```


---


範例網址：https://www.openprocessing.org/sketch/858014



---

- 我的第一個程式
    - createCanvas
    - windowWidth
    - windowHeight


---

- p5的程式結構
    - setup()
    - draw()
    - frameRate


---

- 一些程式基礎
    - 什麼是註解 //
    - Debug - print("...")
    - 如何尋找相關資料或解問題


---

- 備忘錄 (cheatsheet)

![](https://i.imgur.com/bHSXWW8.png)


- 參考別人的創作跟Fork



---


- 快速鍵
    - Ctrl + F 搜尋單字
    - Ctrl + D  利用滑鼠選擇搜尋單字的所有內容，做單字變更
    - Alt + 左右 可以選取一個完整單字的選取
    - Alt + Delete / Backspace 可以一個完整單字的刪除
    - Command + 左右  選擇游標所在後面全部
    - Command + Delete / Backspace 刪除游標所在後面全部自
    - Tab / Shift + Tab
    - command+enter 執行 Code


---

p5的 Codepen Template (更新版)連結: https://codepen.io/frank890417/pen/LYGQoZy 可以在本機執行的打包檔案
[在這邊](https://drive.google.com/file/d/1yALWLlNrV9QLwn1g5JsfAfZ256iiH2r-/view?usp)


---

### 課後問題(1)
* setup() 與 draw() 有什麼不一樣，個別執行的時機跟作用是什麼？

ans:setup是一開始就在執行的程式初始化,並且只執行一次,draw是接再setup之後會無限更新並無限執行的

* 要如何改變畫布的大小呢？

ans:更改setup數值

* background() 裡面可以使用哪些參數，試著從文件中找找看

ans:describe()



---

### 課後問題(2)

* 希望有按下滑鼠的時候，才根據滑鼠的位置改變顏色要怎麼做到呢？
* 如果我想要改變先前軌跡變淡的速度，要怎麼做呢？
* 從 openprocessing, pinterest, 或是 codepen 之類的平台找幾個覺得有趣的作品，並試著分析ㄧ下他是怎麼做的吧🤩


---

## 其他範例

* [brush (OpenProcessing)](https://www.openprocessing.org/sketch/704595)
* [Frozen brush (OpenProcessing)](https://www.openprocessing.org/sketch/705194)
* [Tapering Circles Brush (OpenProcessing)](https://www.openprocessing.org/sketch/649468)
* [Rotary Brush (OpenProcessing)](https://www.openprocessing.org/sketch/595598)
* [Generative Brushes (OpenProcessing)](https://www.openprocessing.org/sketch/107816/)
* [Interactive Automatic Generative Art with Studio Artist](https://www.youtube.com/watch?v=bFAlPKIlDh4)



---

課程素材僅供教學，不提供其他商業用途




---




- 本機環境設定 - VSCode 
    - 下載範例模板包
        - https://p5js.org/get-started/
        - https://codepen.io/p5js/pen/wreBKy
    - 加入好用的插件 live server
    - 開啟dst資料夾裡面的index.html
        - 在 script.js裡面寫程式
    - 設定sublime快速鍵 安裝
        - https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings




---





{%youtube bFAlPKIlDh4 %}


---