Open proccessing 基本操作
在上一篇我們提到我們可以在 open processing 這個網站進行創作與分享作品，所以本篇教學就來講解如何在 open processing 上進行我們第一個創作。
進入 open processing 的主頁面，按下 Join 進行註冊：
資料填完，就可以直接登入了：
進來後的個人頁面長得像這樣，如果要開始第一個創作，就按下面的 Starting coding 紅字，或是頁面最右上角的 CREATE A SKETCH 紅色按鈕：
進去的時候就已經有一個預設的 p5.js script，可以看到網頁中間正上方有一個三角形播放鍵，按下去就可以播放這個 script 展現的視覺效果：
預設 script 產生的動畫，就是跟著使用者的滑鼠鼠標，根據幀數（預設每秒 60 幀）繪製直徑為 20 pixel 的圓圈，然後我們可以按重播鍵重新播放動畫或是按 ` 鍵回到 script 編輯界面：
<img src="https://i.imgur.com/uCfHgKN.png" alt="Imgur" />
如果覺得播放介面跟編輯界面來回往返太麻煩，也可以按下下圖圈起來的 icon，可以讓播放介面和編輯界面共同顯示：
<img src="https://i.imgur.com/pM3CDNq.png" alt="Imgur" />
長這樣：
<img src="https://i.imgur.com/C2GEvPq.png" alt="Imgur" />
右邊的操作介面現在還用不到，以後用到再說明，所以可以先按 X 把他關掉：
<img src="https://i.imgur.com/6obMRga.png" alt="Imgur" />
<h2>p5.js 基礎語法解說</h2>
接下來我們來講解這個預設 script 是怎麼運作的：
<pre><code>function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
}
function draw() {
circle(mouseX, mouseY, 20);
}</code></pre>
首先 p5.js 有兩個必須存在的 function：
function setup()
function draw()
setup() 用來初始化一開始的畫布（後期我們都會稱畫布為 Canvas），這個 function 只會執行一次，而 draw() 則會根據幀數的設定，比如說預設是每秒 60 幀，所以說 draw() 就會每秒執行 60 次，在這個 Canvas 上進行繪製。
在這個 script 我們在 setup() 和 draw() 裡面用了三個 function，分別為：
createCanvas(windowWidth, windowHeight);
創建一個 Canvas，這個 Canvas 的長和寬分別設計為 windowWidth 和 windowHeight，這兩個變數在 p5.js 代表目前視窗的長跟寬，也就是說，創建剛好覆蓋整個視窗的 Canvas。
background(100);
將整個背景的底色設為 100（範圍為 0 ~ 255，0 為全黑，255 為全白）。
circle(mouseX, mouseY, 20);
在座標 (mouseX, mouseY) 的位置繪製一個直徑為 20 pixel 的圓形，mouseX 和 mouseY 分別對應鼠標的 x 座標和 y 座標，也就是說在鼠標的位置繪製一個直徑為 20 pixel 的圓形。
這些函數的功能也可以從 <a href="https://p5js.org/reference/">https://p5js.org/reference/</a> 查到使用方法。
<h2>進行第一個創作</h2>
現在我們要修改預設的 script 來完成第一個 p5.js 創作。
首先我們希望之前 draw() 繪製的圓形圖案還留在背景上面，所以我們可以在每次的 draw() 都重新呼叫 background(100)。
<pre><code>function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
}
function draw() {
background(100);
circle(mouseX, mouseY, 20);
}</code></pre>
這樣每次在進行 draw() 繪製的時候，都會用底色 100 將整個背景重新刷新，這樣之前的圓形圖案就不會留在背景上了：
<img src="https://i.imgur.com/rIh7yc2.gif" alt="Imgur" />
那如果我希望之前的圓形軌跡不會直接刷掉，而是以漸弱的方式在背景上消失，所以我們若移動滑鼠，這個圓形圖案會出現殘影的效果：
<img src="https://i.imgur.com/GmUnB5w.gif" alt="Imgur" />
我們可以在 background 函數加入第二個參數來實現殘影效果：
<pre><code>function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
}
function draw() {
background(100, 100);
circle(mouseX, mouseY, 20);
}</code></pre>
background(color, alpha) 若接受兩個參數，第一個參數代表背景顏色，第二個參數代表透明度，若設置透明度，則每次呼叫 background(color, alpha)，並不會把之前的繪製結果全部覆蓋掉。
這個透明度 100，範圍從 0(完全透明) ~ 255(完全不透明)，這可以決定殘影淡化的速度，以及殘影是否完全消失。
然後我們可以嘗試繪製多個圓形，並且圍繞在滑鼠的周圍，讓這些圓形變成滑鼠的護花使者：
<pre><code>function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
}
function draw() {
background(100, 100);
circle(mouseX+100, mouseY, 20);
circle(mouseX-100, mouseY, 20);
circle(mouseX, mouseY+100, 20);
circle(mouseX, mouseY-100, 20);
}</code></pre>
以下是該程式生成的動畫：
<img src="https://i.imgur.com/KM09phR.gif" alt="Imgur" />
現在我們學到了：
- p5.js 兩個必要的 function，setup()
和draw()
- 使用 createCanvas
創建一個畫布(Canvas) - 使用 background
刷新背景，並能夠設定透明度製造殘影 - 使用 circle
在畫布上繪製圓圈，並指定不同的位置製造視覺效果
那現在我們可以舉一反三，用這些最基礎的 function，搭配 <a href="https://p5js.org/reference/">https://p5js.org/reference/</a> 的其他圖案來進行最基本的創作了。
完成第一篇 p5.js 創作之後，就可以按右上角的 SAVE 鍵進行儲存，進入到作品的儲存介面。
<img src="https://i.imgur.com/YtfeADh.png" alt="Imgur" />
基本上只要在按下右上角的 SUBMIT` 鍵，就能夠儲存你的作品了，至於儲存介面的一些細節，就留在下一篇慢慢解說了。