# P5.js 匯出成影片/圖片 教學
> P5.jS是一個用來進行creative coding創作的javascript套件，本文將以[該文](https://github.com/tetunori/p5MovRec)作為參考示範使用OpenProcessing這個主流的線上編輯器輸出影片。

## 匯出影片
---
### 方法一 使用內建功能錄影**

簡單快速，缺點為只能錄製不超過15秒的影片。

1. 點擊畫面右上角輸出圖式，並按「RECORD」。

2. 選擇品質、錄製時間後，按下錄製

### 方法二

1. 將Mode選擇為中間的HTML/CSS/JS

2. 匯入library

    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    
    在上面這行後面加入:

    <script src="https://tetunori.github.io/p5MovRec/dist/1.0.0/basic/p5MovRec.js"></script>```
3. 設定
    在function setup()中加入:

myP5MovRec = new P5MovRec();

    ![](https://hackmd.io/_uploads/HJ8W54EZa.png)

4. 設定開始錄影，結束錄影方式:
    範例外按下數字1鍵時開始錄影，按下2時結束錄影，如果需要更改按鍵的方式可    以去細查「keycode」。

function keyPressed() {
switch (keyCode) {
case 49: //1: Start record
myP5MovRec.startRec();
break;
case 50: //2: Stop record
myP5MovRec.stopRec();
break;
default:
break;
}
}

5. 使用線上工具，將webm檔轉為mp4檔




## 匯出圖片

function keyPressed(){
if(keyCode == 49){
save("hello.png")
}
}