來畫個圖吧 - P5.js 入門

p5 demo

圖片來源:我畫的

# Intro

嗨嗨!大家最近還好嗎?

(久違的文章)

前陣子真的忙爆了 QQ,轉換新工作、接了一個小案子,最近小弟終於有點時間,可以回歸 Error Baker 了,先跟大家還有其他持續在寫文章的夥伴說聲 Sorry!我回來了!

這次要跟大家聊聊的是:大家敲碗已久的(並沒有) P5.js ,顧名思義,.js 結尾的是一個 JavaScript 的 package ,他可以用來使用在藝術創作上,或許你可能聽過 D3.js 之類的 package,但兩者的差別在於:D3.js 是資料導向的、P5.js 是藝術導向的,雖然都算是視覺化的部分,但其實差別還是蠻大的,像是:D3 的資料大多是有意義的、P5 大多是隨機的亂數,對於新手來說,這樣理解會好懂一點(?)

如果說論實用性,筆者絕對推薦去學 D3.js ,有的公司面試時還會加分,因為可以製作很多的圖表、圓餅圖 ... 等,P5.js 的話真的就是學來藝術創作的(修身養性?),如果想稍為了解看看的話,還是可以看一下這一篇,這一篇算是稍為介紹一下 P5.js 是做什麼的,沒興趣的話也沒關係,那麼還有興趣的朋朋們,讓我們開始吧!

# TL;DR

成為工程師時,學到的新潮用語 Too Long; Don't Read

先來看一下成品 ~

project demo

可以猜猜筆者畫在什麼,文末公布答案。

登勒!就一個樸實無華的小畫家,就是先讓大家看個畫面比較有感覺,對絕不是想玩 電話遊戲 (?

在實作之前,筆者要大家先想一下,如果用 HTML/CSS/JS 的話大家會怎麼實作?(先想想就好不用真的做出來)

DEMO / code 連結

# Init

首先要講的是畫布,一張圖最重要的就是畫布了,有了畫布就可以讓藝術家在上面盡情的發揮創意。

但在生成畫布之前,要先註冊一個 OpenProcessing 的帳號,這一個 Open source 的平台,可以免費註冊,就可以繼續我們的旅程了~

openProcessing

OpenProcessing 的官網就是潮(但就是慢了點?)

開完新的專案後,畫面應該會長得跟我一樣,操作蠻人性化的(跟其他 Adxxx 的產品來說),但筆者還是稍為講解一下:

  1. 頁面正中間的三角形按鈕,按下去就開始執行你的 code 了
  2. </> 應該不用我說了吧 XD 就是回到 code 的地方
  3. 右上角的 Save 就是存儲唷(專業中翻英?)
  4. 右側是一些設定,基本上不用去動

OpenProcessing

非常人性化的介面,小巧而強大

首先什麼都不用做,就開一個 project 就好了,什麼?這樣就可以開始畫畫了嗎?對喔!沒錯,就是這麼輕鬆!

# Create

接著在畫布上發揮你的創意吧!

先什麼都不用動就按下 "三角行的執行按鈕" 吧!

OpenProcessing

你已經進入 P5.js 的絕對領域了!

可以先稍為玩一下,體驗一下 P5.js 的威力,到這邊已經離我們的最終成果不遠了(蛤?你說你什麼都還沒做啊!)

先別急,code 這不是來了嗎?
筆者花了點時候加了註解(翻譯,英文真的非常非常難

// 只會在初始化的時候執行一次
function setup() {
// 初始化畫布
createCanvas(windowWidth, windowHeight);
// 背景:只有一個數值 (0 ~ 255) 黑 ~ 白
background(200);
}

// 每個 "frame" 都執行
function draw() {
// 當滑鼠按下的時候才畫
if (mouseIsPressed) {
// 要畫的顏色:(0, 0, 0) ~ (255, 255, 255) => 黑色 ~ 白色
fill(0, 0, 0);
// 畫線,上一個 previous (pmouseX, pmouseY) 到現在滑鼠位置(mouseX, mouseY)
line(mouseX, mouseY, pmouseX, pmouseY);
}
}

接著你就可以像是小畫家的方式再上面畫畫了,可以看到有很多的功能,例如:line 這個 function 的用法,每次都要去查文件才會用,因為真多東西啦。

也可以參閱 P5.js 的文件

畫點點、畫線、畫正方形,你想要畫的,基本上文件都會有。

剩下的就是你的超能力了!

# Summary

今天我們學到了 P5.js 可以讓我們用短短幾行 code 就可以完成偉大的創作。

帶大家稍為玩一下簡單的小畫家,雖然不是什麼很大的 project,但是試想:「如果不用 P5.js ,只使用原生的 HTML/CSS/JavaScript 去寫出一個小畫家,需要多少行的 code ?」但這邊 P5.js 都幫我們把 粗重 的工作都包好了,讓藝術家們可以專心的創作,當然這還只是 P5.js 的一小部分而已,如果你也有興趣,還可以試試更多的 生成式藝術,試試看在 P5.js 裡加入迴圈吧!

像是這樣:

p5 project demo

好像突然跳太多了,有人敲碗的話再分享怎麼做好了 XD

登勒!我們下回見!

# References

最上圖的答案是:胡立(虎力) 你猜對了嗎?

免責聲名

以上均為筆者自身經驗,難免小有主觀意見,供讀者們參考,也歡迎分享經驗交流。
如果有錯誤的地方還請大大們指正,筆者會立刻修改,再次感謝大家!

Creative Commons License

本著作係採用 創用 CC 姓名標示 4.0 國際授權條款 授權。您可以在 benben.me 找到我。

This work is licensed under a Creative Commons Attribution 4.0 International License. You can find me at benben.me


關於作者

我是 Benben,喜歡理性的冷知識、感性的人事物。會想要寫這個部落格是因為,我認為能夠持續的自我成長是一個很重要的能力,其實跟是不是工程師的關係不大,只是剛好他們更需要這個能力。

分享文章