---
# System prepended metadata

title: 2. 程式框架 - p5.js 開發入門(學生版_協作版)

---


---
tags: 程式設計
---
# 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)

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



---

設定的email會回收到確認信

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

---

- 工具的歷史淵源
    - 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/)


---


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


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



---

### 筆刷練習

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


---


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

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


---


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

function draw() { //每秒進入含數執行60次
    // background(220);
    // circle(mouseX,mouseY,30)
    fill(225,0,0) //充滿255(R)，0(B)顏色
    rect(mouseX,mouseY,100,50) //劃一個方框，寬為100，高為50
}





```


---

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


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



---


```javascript=
function setup() { //環境設定•只有執行一次
   createCanvas(windowWidth,windowHeight);//產生一個畫布，寬為整個視窗寬度
   background(100） //產生背景顏色，背景顏色為灰階為100（只有一個數字）
//background (255,0,0) //產生背景顏色，背景顏色RGB為R為255，GB都為0
}           
           
function draw() { //每秒進入函數執行60次
   background (100) ;
   fill（255,0,0） //充滿255(R)、0(G)、0（Ｂ)願色
// rect (mouseX,mouseY, 100,50） /畫一個方框，寬為100，高為50
   ellipse (mouseX, mouseY,100,50)
}
```


---



只會顯示一個球

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


---


```javascript=
function setup(){ //環境設定，只有執行一次
   createCanvas(windowwidth,windowHeight)；//產生一個畫布，寬為整個視窗寬度
   background (100） //產生背景顏色，背景顏色為灰階為100(只有一個數字）
//background (255,0,0） //產生背景顏色，背景顏色為RGB為R為255，GB都為0
function draw(){ //每秒進人函數執行60次
// background (100);
   fi11（255,0,0） //充滿255(R)，0(G),0(B)顏色
// rect (mousex, mouseY ,100,50） //劃一個方框，寬為100，高為50
   el1ipse (mouseX,mouseY,100） //劃一個圓，座標 (mouseX, mouseY），直徑為100
}
```



---

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



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



---



```javascript= 
function setup() { //環境設定，只有執何
   createCanvas (windowwidth,windowHeight)；//產生一個畫布，寬為整個視窗寬度
   background(100）//產生背景顏色，背景顏色為灰階為100（只有一個數宇）
   background（255,0,0）//產生背景頭色，肯景頭色為RGB為R為255，GB都為0
}

function draw(){ //每秒進入面數執行60次
   background (100) ;
   fill (255,0,0)//充滿255(R)， 0(G),0（B)頭色
//rect (mouseX, mouseY, 100,50） //劃一個方框，寬為100，高為50
   stroke (255). //框線顏色
   strokeWeight (20)//框線的粗細
   ellipse (mouseX,mouseY, 100） //劃一個圓，座標(mouseＸ,mouseY)，直徑為100
}
```



---

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

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

---

```javascript=



function setup() {      //初始設定畫面所包含的指令
	createCanvas(windowWidth, windowHeight); //給我一張跟視窗大小一樣的畫布
	//createCanvas(100, 100); //給我寬為100，高為100的視窗畫布
	background(100); //背景顏色，只有一個數字值，0為背景黑色，255為背景白色
	//background(231,108,247); //RGB設定背景為(231,108,247)
	//background("#9999CC");
	
}
var t=0;
function draw() {   //每秒鐘會進來執行60次(預設)，每一次都會從頭執行到尾
	
	//print(mouseIsPressed) //當mouseIsPressed為真(true) 代表使用者按下滑鼠。為假(false)未按滑鼠按鈕
	if(mouseIsPressed) 
	{   //如果條件成立(true)，代表按下滑鼠，進來此處執行程式碼
		fill(mouseX %256, mouseY%256,0);
		ellipse(mouseX, mouseY, 40);
		
	}
	else
	{  //如果條件不成立(false)，沒有按下滑鼠，進來此處執行程式碼
		fill(255, 255,0); //顯示黃色
		rect(mouseX-20, mouseY-20, 40);  //產生正方形		
	}
	
	
	
}









```

---


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


---

### 基本函式

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


---
2. 程式框架 - p5.js 開發入門(學生版_協作版).md
目前顯示的是「2. 程式框架 - p5.js 開發入門(學生版_協作版).md」。