打開線上編輯平台後，就會看到兩段預設開啟的程式碼，setup 和 draw，這兩段是最常使用的兩個函式

1. setup 只會被執行一次，用來設定執行動畫前的初始化流程
2. 在 setup 執行後，draw 這個程式就會不斷地被呼叫執行，canvas預設是每秒會自動跑 60 次

執行 60 次稱為幀率(fps)，像是一般高品質動畫或者電影基本上使用超過 24fps 就足夠流暢了，可以使用函式 frameRate 來設置每秒幀數。不過演算法的寫法撼動化的風格速度等等解會影響電腦效能，實際上可能不一定達的到24fps。

下圖為範例程式代碼

可以看到程式當中有

createCanvas(windowWidth, windowHeight);

這段程式是用來設定畫布寬高，預設都是與視窗同寬同高。

background(100);

是設定顏色的函數，background(100) 表示設置畫布背景為灰階 100，相當於 background(100, 100, 100)。
P5.js有相當多的顏色模式可以使用，這後續會逐一講到。

其他常用函式介紹

• frameCount()

  目前已顯示的fps數量，在 setup 中為 0，draw執行後為 1

• frameRate()

  用來設置每秒幀數

• print()

  用來把需查看的數據寫入瀏覽器的控制台

• noLoop()

  停止 p5.js 一直持續執行draw()中的程式

• width()

  當前canvas畫布的寬度，與windowWidth指向對象不同

• height()

  當前canvas畫布的高度，與windowHeight指向對象不同

以上是在一開始開發作品的時候，會常常使用到的函式，下一篇就會開始進入到創作動畫了~也謝謝大家今天的瀏覽喔