iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

P5.js 學習之路 系列

生成式藝術的step1 ,如何從圖像視覺學習演算法

鐵人鍊成 | 共 30 篇文章 | 10 人訂閱 訂閱系列文 RSS系列文 團隊週六 Podcast 團
DAY 11

Day11 - 實作範例 - 用p5.js製作第一個pattern

今天我們要來小總結一下有提過的函數,並且來試試看組合變化,我們已經用過幾何形狀、定位系統、顏色函數與隨機模式,納今天我們就來試試看產出一個小波普藝術吧 題目 下...

2022-09-26 ‧ 由 misvamda 分享
DAY 12

Day12 - 實作範例 - 用p5.js製作第一個pattern - 2

昨天我們講到了利用迴圈製作有規則的波普小作品,今天我們要來加入隨機值操作看看,用昨天的程式來稍微改造一下 首先設定的部分我想大家應該都沒有什麼問題,把noS...

2022-09-27 ‧ 由 misvamda 分享
DAY 13

Day13 - preload - 文字變化

今天我們要講到文字變化了,耶~~~~ p5.js彈性非常大,揉合度也很高,可以把圖檔字形通通都丟進去做變化,load文字的方式非常非常簡單 需要加載字形的話,首...

2022-09-28 ‧ 由 misvamda 分享
DAY 14

Day14 - preload - 圖像引用與定位

上篇有稍微講到preload引入字體的方法,這邊會繼續深入引入檔案的部分,在進行繪圖的時候有時候也會使用到已經製作好的圖檔,而圖檔的引入方式是什麼呢?又有哪些函...

2022-09-29 ‧ 由 misvamda 分享
DAY 15

Day15 - 建立多個畫布

會遇到一些情況在創作時會想要把作品分層,什麼意思呢?就是指說我們要開多張畫布,而畫布會像div dom元素一樣,都是結點,既然是節點就可以疊加,可以覆蓋,甚至可...

2022-09-30 ‧ 由 misvamda 分享
DAY 16

Day16 - p5.js線段的操作與不規則形狀

這篇要跟大家介紹製作不規則形狀,其實這篇應該跟在幾何後面的,同樣都是圖形的繪製,只是幾何圖性算是有規則的圖案,而不規則形狀可以說是你想到的都有,800邊形,要圓...

2022-10-01 ‧ 由 misvamda 分享
DAY 17

Day17 - 進階色彩設定 blendMode()

要進入進階色彩模式了,不知道大家有沒有想過,像photoshop或者light room那些修圖軟體中可以套用的一些率竟效果p5.js有沒有提供呢?畢竟如果沒有...

2022-10-02 ‧ 由 misvamda 分享
DAY 18

Day18 - 進階色彩設定 lerpColor()以及 filter

lerpColor()以及 filter都是在繪圖的時候可以做為調色或者增添視覺美感可用的方法,我覺得與blendMode()類似都屬於調整色彩,針對像素去做變...

2022-10-03 ‧ 由 misvamda 分享
DAY 19

Day19 - p5.js 中的漸層 - 1

漸層在設定上很麻煩,要有座標定位、範圍、顏色等,但使用上效果很好,而且可以在同一個圖形中設定一個以上的漸層,變成多重染色的感覺,所以還是滿常被使用在canvas...

2022-10-04 ‧ 由 misvamda 分享
DAY 20

Day20 - p5.js 中的漸層 - 2

今天要跟大家分享錐形漸層的畫法,以及把這些落落長的漸層程式碼包裝成好用、可複用fuction 漸層製作 - 錐形漸層 除了上次講到的線性漸層與圓形漸層,還有一種...

2022-10-05 ‧ 由 misvamda 分享