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