iT邦幫忙

2024 iThome 鐵人賽

DAY 2
1
Modern Web

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

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

  • 分享至 

  • xImage
  •  

在 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 的長和寬分別設計為 windowWidthwindowHeight,這兩個變數在 p5.js 代表目前視窗的長跟寬,也就是說,創建剛好覆蓋整個視窗的 Canvas。

  • background(100);

將整個背景的底色設為 100(範圍為 0 ~ 255,0 為全黑,255 為全白)。

  • circle(mouseX, mouseY, 20);

在座標 (mouseX, mouseY) 的位置繪製一個直徑為 20 pixel 的圓形,mouseXmouseY 分別對應鼠標的 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

現在我們學到了:

  1. p5.js 兩個必要的 function,setup()draw()
  2. 使用 createCanvas 創建一個畫布(Canvas)
  3. 使用 background 刷新背景,並能夠設定透明度製造殘影
  4. 使用 circle 在畫布上繪製圓圈,並指定不同的位置製造視覺效果

那現在我們可以舉一反三,用這些最基礎的 function,搭配 https://p5js.org/reference/ 的其他圖案來進行最基本的創作了。

完成第一篇 p5.js 創作之後,就可以按右上角的 SAVE 鍵進行儲存,進入到作品的儲存介面。

Imgur

基本上只要在按下右上角的 SUBMIT 鍵,就能夠儲存你的作品了,至於儲存介面的一些細節,就留在下一篇慢慢解說了。


上一篇
[Day 01] 用 p5.js 實現生成式藝術
下一篇
[Day03] 展示你的 Open processing 作品
系列文
p5.js 的環形藝術30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Sunny.Cat
iT邦新手 3 級 ‧ 2024-10-04 02:18:18

原來可以這樣玩啊

很棒吧

我要留言

立即登入留言