一個本職是後端工程師的我竟然開始寫 p5.js 系列文，其中的緣由是我終於發現，利用程式做視覺相關藝術是我相當熱愛的事情。
之前本來就有一些接觸該領域的機緣，有在大學入學前暑假嘗試學習過 GLSL，在大學藝術季用 puredata 實作聲光藝術，後來大三的專題曾經想入門電腦音樂，還有出社會後有一段時間沈迷於 python 的數學動畫函式庫 manim，但不知道是我本身不具美感、學習主題過於困難還是我本身學習方式有問題，我好像只是略懂皮毛，不曾真正在這領域有什麼自己的成果。
一直到近半年，經濟狀況穩定了，自我探索也到一定地步，我才真的認識到這是我很喜歡的事情，我喜歡關於數形結合的各種應用，摺紙數學、動力雕塑、機關盒設計或是程式藝術，比起其他應用在工作上的程式技術，我覺得這些領域更能自由的展現自我。
所以我開始想嘗試，在下班之後，作為人生長期的志業去學習鑽研這方面技術，更希望有一天可以靠程式藝術來賺更多的錢錢，和更多自由的時間來持續精進。
之前和別人聊過我在程式藝術方面的興趣，有的人覺得這些作品非常好看，有的人不以為然，有人覺得高深莫測，但更多時候他們都會問這些東西會賺錢嗎？會像做遊戲設計那樣燒肝嗎？
其實我也覺得要談到賺錢，這些領域冷門一些，在找到正確方法之前可能很困難，但至少我很喜歡。有一個動畫叫做葬送的芙莉蓮，裡面的主角最喜歡的魔法是對戰鬥一點幫助都沒有的花田魔法，我總想著我也找到了屬於自己的花田魔法，在程式藝術領域，程式真的就像是魔法一樣。
回到我想寫 p5.js 系列文的目的，雖然才剛開始認真學半年多一點，但我還是認真的梳理了我在創作時所做的思考並寫出來，希望作為人生一個醒目的標誌，代表我真的找到了非常熱愛的事情，也希望能讓更多人體會到數形結合的程式藝術之美。
正文開始！
生成式藝術就是用程式來自動生成視覺圖像藝術，隨著前端技術、顯卡支援、AI 繪圖等等技術越來越蓬勃發展，現代的開發工具已經可以讓我們用很簡單的程式實現華麗的視覺藝術，本系列教學我會整理自身學習 p5.js 的經驗，讓大家能夠簡單入門生成式藝術。
p5.js 是一個專門用來進行程式繪圖、在螢幕上實現各種動態視覺藝術的 javascript 框架，不管是程式設計師、藝術家甚至是一般人，都能用 p5.js 撰寫簡單的程式邏輯，在網頁上實現各種視覺效果：
function setup() {
createCanvas(windowWidth, windowHeight);
background(200);
}
function draw() {
background(200, 5);
rectMode(RADIUS);
noFill();
translate(width / 2, height / 2);
rotate(frameCount/200);
rect(0, 0, 39, 39);
rotate(-frameCount/200*2);
rect(0, 0, 56, 56);
rotate(frameCount/200*2);
rect(0, 0, 80, 80);
}
看看只需要幾行的 code 就能做出如此炫砲的效果。
而且現在 p5.js 的網路學習資源非常的發達，使用和學習 p5.js 的人一定都會在 open processing 這個網站進行創作與分享作品，你可以在上面學習與臨摹許多大師的作品：
你可以直接在 open proccessing 的 discover 頁面看到許多優秀的作品，很多作品讓你無法想像這麼絢麗的視覺效果竟然是由程式，也就是明確的邏輯構建出來的。
這是台灣生成式藝術家吳哲宇的作品頁面，對 p5.js 有興趣的人一定或多或少聽過他的名字，因為其在藝術創作與這方面的推廣教育都非常的活躍，他的作品常用許多不規則線條和水墨樣式設計交織出複雜美感，我很喜歡。
Zaron Chen 的作品在某方面更讓我驚艷，他用了許多 glsl 的技巧進行像素層面的繪製（glsl 的基礎技巧在系列文後期也會帶到），而且好像還用了自己開發的 library，導致我想學都還學不來XD，看好久都看不懂。
偷把我的作品頁面帶進來，爛死XD
不過就算作品還很菜，至少程式還算平易近人，稍微有程式基礎的，發現只要各種迴圈和函數套一套，也能做出像我這樣稍稍能看的作品，給一些要入門的人一點信心，也算一種貢獻。
以下還有許多學習 p5.js 會用到的推薦資源，讓大家少走一點彎路：
p5.js 官方文件 reference
https://p5js.org/reference/
互動程式創作台灣站（吳哲宇老師的官方網站）
https://creativecoding.in/category/tutorial/
The Book of Shaders（學 glsl 必讀的經典）
https://thebookofshaders.com/
另外在前面有提到，這系列的教學文，主要取自於我在創作進行的思考，所以不會著墨太多 p5.js 的基礎語法（除非在我的作品中有用到，或是充字數???），更多的是我怎麼組合語法、迴圈或是數學技巧來完成我的作品。
好處是有將近 40% 的篇幅是實戰演練單元，大部分是用這些技巧把我的作品重刻一遍XD，我幾乎是想手把手的講述我的整個思路過程，根本是把自己的想法裡裡外外掏光了，超累XD。
對本來就很熟悉程式的人可能覺得太囉唆，但我也是希望給那些真的剛入門的讀者覺得，哇！這東西真的超美，而且也學的起來。
另外除了 p5.js 框架本身的教學，還有 30% 的篇幅會用來講解 glsl 語言的程式創作，glsl 可以做出視覺上非常細緻的效果，且他可以寄生在 p5.js 框架上來運作，在生成式藝術領域，這根本就是神的語言XD，所以就算非常困難我也是硬把他拉來我的教學文來講解。
最後來講講為什麼系列文名稱叫做 p5.js 的環形藝術，因為我酷愛用 p5.js 實作環狀的視覺藝術，所以在實戰演練單元，很多都是圍繞在圓與環之間的視覺創作，因為各種樣式環繞成圓，很容易就會有自生而出的美感。
以下為接下來 30 天我預計講解的教學內容：
iThome鐵人賽
看影片追技術