系列文章
[Day 01] 用 p5.js 實現生成式藝術
一個本職是後端工程師的我竟然開始寫 p5.js 系列文，其中的緣由是我終於發現，利用程式做視覺相關藝術是我相當熱愛的事情。 之前本來就有一些接觸該領域的機緣，有...
[Day 02] 在 Open processing 進行第一個創作
在 Open processing 進行第一個創作 tags: Generative Art by p5.js Open proccessing 基本操作 在上...
[Day03] 展示你的 Open processing 作品
儲存你的創作 完成第一篇創作之後，我們可以按右上角的 SAVE 進行儲存，然後會進入到儲存介面，裡面有一些設定可以介紹： TITLE 你的作品標題。...
[Day 04] p5.js 基礎教學(一) -- 座標與旋轉圖案
在第二篇文章我們完成了第一個作品，我們做出了分散在上下左右，能夠隨著滑鼠移動的四個圓圈。 現在我們希望在第二個作品做優化，讓這四個圓圈，還能繞著滑鼠做圓周運動，...
[Day 05] p5.js 基礎教學(二) –– rotate 和 translate
上一篇文章 解釋了如何用數學的方法（旋轉矩陣）來操作圖案的座標達成圓周運動，但其實 p5.js 也有一些現成的函數 rotate、translate 來組合成類...
[Day 06] p5.js 基礎教學(三) -- 繪製座標格線
今天我們要來比較前兩篇文章 p5.js 基礎教學(一) –– 座標與旋轉圖案 p5.js 基礎教學(二) –– rotate 和 translate...
[Day 07] p5.js 實戰演練(一) –– 疊合公轉軸(一)
根據前三篇文章： p5.js 基礎教學(一) –– 座標與旋轉圖案p5.js 基礎教學(二) –– rotate 和 translatep5.js 基礎教學(三...
[Day 08] p5.js 實戰演練(二) –– 疊合公轉軸(二)
在上一個單元 p5.js 實戰演練(一) –– 疊合公轉軸，我們探討了怎麼在原有的圓周運動再疊加一層公轉軸，並描繪出畫布中四個 circle 的運動軌跡。 現...
[Day 09] p5.js 實戰演練(三) –– 疊合公轉軸(三)
我們繼續上一個單元 p5.js 實戰演練(二) –– 疊合公轉軸(二) 的實驗。 若仔細思索就會發現，當我們繪製完其中一個小公轉軸，只依靠 rotate(-ou...
[Day 10] p5.js 基礎教學(四) –– push 與 pop 函數
根據上一篇教學 p5.js 實戰演練(三) –– 疊合公轉軸(三)，我們成功的疊合了兩個公轉軸，並讓其中 16 個 circle 照著我們期待的方式轉動。 但是...