iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

從新開始學習p5.js畫出一片天 系列

p5.js是一個提供創作者可以在網頁上進行數位圖像創作的javascript套件,期望在這個密集的30天中,分享自己在使用p5.js的心得與發現。目前有鑑於NFT的熱門,使用p5.js完成的圖像,進而變成NFT市場上的交易項目,漸漸變成一個趨勢。p5.js從基本的繪圖指令到網頁媒體素材的處理,以及經由邏輯,演算法所產生的衍生圖像,更是令人不斷地想要從中發掘更多圖像的可能性。一起進入在畫布中Coding的日子吧。

鐵人鍊成 | 共 40 篇文章 | 10 人訂閱 訂閱系列文 RSS系列文
DAY 11

D11_文字與字型操作

文字與字型操作 今天來整理一下在p5.js中,有關字型的操作主要分為字體的載入,設定,大小,對齊,長度,換行的功能 載入字型檔與字型設定 第1種利用 loadF...

2022-09-25 ‧ 由 jasonlee2357 分享
DAY 12

D12_Audio聲音操作(聲音檔)

Audio聲音操作(聲音檔) 今天來整理在p5.js的sound物件及DOM的audio元件的操作方式首先使用p5.js的方式建立 audio 元件, 產生的物...

2022-09-26 ‧ 由 jasonlee2357 分享
DAY 13

D13_Audio聲音操作(麥克風)

Audio聲音操作(麥克風) 今天來整理Audio的音源輸入的操作 使用 p5.sound library 之 p5.AudioIn 套件 p5.js的聲音的部...

2022-09-27 ‧ 由 jasonlee2357 分享
DAY 14

D14_Audio音訊數值處理(振幅,頻域)

Audio音訊數值操作(頻域) 今天要來整理音訊來源的相關數值的操作,其中音訊來源包括音樂檔及麥克風,LineIn等。 頻域分析 從麥克風讀取音頻數據 使用 f...

2022-09-28 ‧ 由 jasonlee2357 分享
DAY 15

D15_MultiCanvas 多個Canvas的操作

MultiCanvas 多個Canvas的操作 今天來整理在一個網頁中 顯示多個canvas的方法在p5.js中,一般預設的模式是 Global Mode,在此...

2022-09-29 ‧ 由 jasonlee2357 分享
DAY 16

D16_MultiGraphics 多個Graphic的操作

MultiGraphics 多個Graphic的操作 今天來整理多個Graphic的操作方法之前提到可以用多個instance p5的方法,今天來試試用Grap...

2022-09-30 ‧ 由 jasonlee2357 分享
DAY 17

D17_檔案操作_TXT、CSV、HTML檔

檔案操作 今天來整理在p5.js如何載入檔案到網頁中。檔案的類型有 html, csv, json, xls, txt, php等使用 loadStrings(...

2022-10-01 ‧ 由 jasonlee2357 分享
DAY 18

D18_檔案操作(JSON檔)

檔案操作(JSON檔) 今天來整理下載JSON格式的檔案資料到網頁中 使用 loadJSON(path) 來載入JSON資料來源為 政府資料開放平台「臺北市停車...

2022-10-02 ‧ 由 jasonlee2357 分享
DAY 19

D19_陣列資料操作[基本概念,資料排序]

陣列資料操作[基本概念,資料排序] 今天來整理一下陣列的各種操作技巧 陣列的基本操作let arr = [1, 2, 3, 4]; 陣列本身像是一個存放資料的容...

2022-10-03 ‧ 由 jasonlee2357 分享
DAY 20

D20_陣列資料操作[資料逐筆處理,搜尋,篩選,轉換]

陣列資料操作[資料逐筆處理,搜尋,篩選,轉換] 今天來整理陣列的元素操作 基本的迴圈模式開始 const arr = [1, 2, 3, 4, 5, 6, 7]...

2022-10-04 ‧ 由 jasonlee2357 分享