# 2. 程式框架 - p5.js 開發入門(學生版)
在這個單元中，我們將會介紹基礎的 p5.js 語法以及線上編輯器 openprocessing 的操作介面，接著做出一個動態筆刷的小練習，最後會提到一些查詢資源的方式以及如何在本機上執行 p5.js 的檔案。
---
* Processing 介紹
* Processing： https://processing.org/overview/
* Processing 的文件： https://processing.org/reference/
---
* p5.js 介紹
* Lauren Lee McCarthy：https://lauren-mccarthy.com/p5-js
* p5.js 官網： https://p5js.org/
* p5.js 文件： https://p5js.org/reference/
---
* 其他相關的工具介紹：
* https://creativecoding.in/resources/
* 哲宇老師的 Open Processing 帳號： https://www.openprocessing.org/user/139364/#sketches
* 創好帳號後，請記得追蹤課程專用帳號：https://www.openprocessing.org/user/231105
---
[註冊網址](https://www.openprocessing.org)
---
設定的email會回收到確認信
---
- 工具的歷史淵源
- processing https://processing.org/ -> js版本
- Processing 官網 https://processing.org/overview/
- https://processing.org/reference/
- https://p5js.org/
- https://p5js.org/reference/
- p5.js 官網 https://p5js.org/
- https://lauren-mccarthy.com/p5-js
- p5.js 參考手冊 https://p5js.org/reference/
---
- 編輯程式碼環境
- [Open Processing 註冊](https://openprocessing.org/signin)
- [p5 editor 平台](https://editor.p5js.org/)
---
## 範例練習
這是今天筆刷練習的成品，我們將會學到如何創建一個新的畫布、修改顏色、加上簡單的判斷式後做出互動的畫筆。
---
### 筆刷練習
沒有程式經驗的同學也不用擔心，可以先跟著一起做，感受ㄧ下用程式繪圖的樂趣。中間的許多細節在後續的章節中都會陸續提到，也可以自己看看 文件 ，說不定就能迎刃而解，進而享受解決問題的過程喔 😃
---
產生一個隨著游標走動的方塊
---
```javascript=
function setup() {
createCanvas(windowWidth, windowHeight);//給我一個一張大小跟視窗大小一樣的畫布
//createCanvas(100,100);//給我寬100,高100的視窗畫布
background(100);//背景顏色，只有一個數字值，0是黑色，255是白色
//background(231,108,247);//rbg設定背景為（231,108,247）
//background("#9999cc");
}
function draw() {
fill(255,0,0)
//ellipse(mouseX, mouseY, 40);//畫圓
rect(mouseX, mouseY,-40);//畫方框，以游標為方框左上角
fill(mouseX%256, mouseY%256,0)
rect(mouseX-20, mouseY-20,40);//畫方框，以游標為方框中心
}
```
---
讓畫的方塊消失，只剩一個，隨著滑鼠移動
---
```javascript=
```
---
只會顯示一個球，背景顯示透明
---
```javascript=function setup() {
createCanvas(720 , 720)
background(0);
}
//var t=0
function draw() { //每秒鐘匯進來執行60次（預設），每一次都會從頭執行到尾
//background(100);
//print(mouseIsPressed)//當mouseIsPressed為真（true）代表使用者按下滑鼠。為假(false)未按滑鼠按鈕
//noStroke()//產生圖形沒有框線
//stroke(255,0,0)//設定框線顏色,RGB
//strokeWeight(10)//框線的粗細，10代表粗細
if(mouseIsPressed)
{ //如果條件成立（true）,代表按下滑鼠，進來此處執行程式碼
noStroke() //產生圖形沒有框線
fill(mouseX %256,mouseY%256,0);
ellipse(mouseX,mouseY,40);
}
else
{ //如果條件不成立(false),沒有按下滑鼠，進來執行程式碼
stroke(255,0,0)//設定框線顏色，RGB
strokeWeight(2)//2代表框線粗細
fill(255,255,0);//顯示黃色
rect(mouseX-20,mouseY-20,40);//產生正方形
}
}
```
---
改變圓圈框限顏色與粗細，framecount:在draw執行過幾次
可以利用此變數，讓越後面的圓變得不一樣的顏色
---
```javascript=
```
---
---
隨著游標移動的顏色變化，按下滑鼠按鈕會顯示圓圈
---
```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)
- 參考別人的創作跟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() 有什麼不一樣，個別執行的時機跟作用是什麼？
* 要如何改變畫布的大小呢？
* background() 裡面可以使用哪些參數，試著從文件中找找看
---
### 課後問題(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 %}
---
Sign in with Wallet
Connect another wallet