iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

p5.js 的環形藝術 系列

本系列教學會介紹關於 p5.js 框架和 glsl 的一些基本技巧
加上一些環形視覺藝術創作的實際演練

本教學會包括一些數形結合方面的內容
希望讀者能藉由視覺上的美感對程式和數學產生更多興趣

鐵人鍊成 | 共 30 篇文章 | 3 人訂閱 訂閱系列文 RSS系列文
DAY 1

[Day 01] 用 p5.js 實現生成式藝術

一個本職是後端工程師的我竟然開始寫 p5.js 系列文,其中的緣由是我終於發現,利用程式做視覺相關藝術是我相當熱愛的事情。 之前本來就有一些接觸該領域的機緣,有...

2024-09-15 ‧ 由 shnovaj30101 分享
DAY 2

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

在 Open processing 進行第一個創作 tags: Generative Art by p5.js Open proccessing 基本操作 在上...

2024-09-16 ‧ 由 shnovaj30101 分享
DAY 3

[Day03] 展示你的 Open processing 作品

儲存你的創作 完成第一篇創作之後,我們可以按右上角的 SAVE 進行儲存,然後會進入到儲存介面,裡面有一些設定可以介紹: TITLE 你的作品標題。...

2024-09-17 ‧ 由 shnovaj30101 分享
DAY 4

[Day 04] p5.js 基礎教學(一) -- 座標與旋轉圖案

在第二篇文章我們完成了第一個作品,我們做出了分散在上下左右,能夠隨著滑鼠移動的四個圓圈。 現在我們希望在第二個作品做優化,讓這四個圓圈,還能繞著滑鼠做圓周運動,...

2024-09-18 ‧ 由 shnovaj30101 分享
DAY 5

[Day 05] p5.js 基礎教學(二) –– rotate 和 translate

上一篇文章 解釋了如何用數學的方法(旋轉矩陣)來操作圖案的座標達成圓周運動,但其實 p5.js 也有一些現成的函數 rotate、translate 來組合成類...

2024-09-19 ‧ 由 shnovaj30101 分享
DAY 6

[Day 06] p5.js 基礎教學(三) -- 繪製座標格線

今天我們要來比較前兩篇文章 p5.js 基礎教學(一) –– 座標與旋轉圖案 p5.js 基礎教學(二) –– rotate 和 translate...

2024-09-20 ‧ 由 shnovaj30101 分享
DAY 7

[Day 07] p5.js 實戰演練(一) –– 疊合公轉軸(一)

根據前三篇文章: p5.js 基礎教學(一) –– 座標與旋轉圖案p5.js 基礎教學(二) –– rotate 和 translatep5.js 基礎教學(三...

2024-09-21 ‧ 由 shnovaj30101 分享
DAY 8

[Day 08] p5.js 實戰演練(二) –– 疊合公轉軸(二)

在上一個單元 p5.js 實戰演練(一) –– 疊合公轉軸,我們探討了怎麼在原有的圓周運動再疊加一層公轉軸,並描繪出畫布中四個 circle 的運動軌跡。 現...

2024-09-22 ‧ 由 shnovaj30101 分享
DAY 9

[Day 09] p5.js 實戰演練(三) –– 疊合公轉軸(三)

我們繼續上一個單元 p5.js 實戰演練(二) –– 疊合公轉軸(二) 的實驗。 若仔細思索就會發現,當我們繪製完其中一個小公轉軸,只依靠 rotate(-ou...

2024-09-23 ‧ 由 shnovaj30101 分享
DAY 10

[Day 10] p5.js 基礎教學(四) –– push 與 pop 函數

根據上一篇教學 p5.js 實戰演練(三) –– 疊合公轉軸(三),我們成功的疊合了兩個公轉軸,並讓其中 16 個 circle 照著我們期待的方式轉動。 但是...

2024-09-24 ‧ 由 shnovaj30101 分享