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

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


---

### 筆刷練習

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

---

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


---

  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=

---

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


---

  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=

---

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


---

  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執行過幾次
可以利用此變數，讓越後面的圓變得不一樣的顏色


---

  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=

---

---

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


---

---

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

---

### 基本函式

* 函式 - 能夠執行特定目的或功能的程式碼。偷偷說，其實短短語法背後藏有一大包程式碼，但先別在意
* 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() 有什麼不一樣，個別執行的時機跟作用是什麼？

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 %}

---