2024 iThome 鐵人賽

DAY 2

Modern Web

p5.js 的環形藝術系列第 2 篇

[Day 02] 在 Open processing 進行第一個創作

16th鐵人賽

shnovaj30101

2024-09-16 08:54:31

376 瀏覽

分享至

在 Open processing 進行第一個創作

tags: `Generative Art by p5.js`

Open proccessing 基本操作

在上一篇我們提到我們可以在 open processing 這個網站進行創作與分享作品，所以本篇教學就來講解如何在 open processing 上進行我們第一個創作。

進入 open processing 的主頁面，按下 Join 進行註冊：

Imgur

資料填完，就可以直接登入了：

Imgur

進來後的個人頁面長得像這樣，如果要開始第一個創作，就按下面的 Starting coding 紅字，或是頁面最右上角的 CREATE A SKETCH 紅色按鈕：

Imgur

進去的時候就已經有一個預設的 p5.js script，可以看到網頁中間正上方有一個三角形播放鍵，按下去就可以播放這個 script 展現的視覺效果：

Imgur

預設 script 產生的動畫，就是跟著使用者的滑鼠鼠標，根據幀數（預設每秒 60 幀）繪製直徑為 20 pixel 的圓圈，然後我們可以按重播鍵重新播放動畫或是按 </> 鍵回到 script 編輯界面：

Imgur

如果覺得播放介面跟編輯界面來回往返太麻煩，也可以按下下圖圈起來的 icon，可以讓播放介面和編輯界面共同顯示：

Imgur

長這樣：

Imgur

右邊的操作介面現在還用不到，以後用到再說明，所以可以先按 X 把他關掉：

Imgur

p5.js 基礎語法解說

接下來我們來講解這個預設 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 將整個背景重新刷新，這樣之前的圓形圖案就不會留在背景上了：

Imgur

那如果我希望之前的圓形軌跡不會直接刷掉，而是以漸弱的方式在背景上消失，所以我們若移動滑鼠，這個圓形圖案會出現殘影的效果：

Imgur

我們可以在 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);
}

以下是該程式生成的動畫：

Imgur