p5.js是一個提供創作者可以在網頁上進行數位圖像創作的javascript套件,期望在這個密集的30天中,分享自己在使用p5.js的心得與發現。目前有鑑於NFT的熱門,使用p5.js完成的圖像,進而變成NFT市場上的交易項目,漸漸變成一個趨勢。p5.js從基本的繪圖指令到網頁媒體素材的處理,以及經由邏輯,演算法所產生的衍生圖像,更是令人不斷地想要從中發掘更多圖像的可能性。一起進入在畫布中Coding的日子吧。
文字與字型操作 今天來整理一下在p5.js中,有關字型的操作主要分為字體的載入,設定,大小,對齊,長度,換行的功能 載入字型檔與字型設定 第1種利用 loadF...
Audio聲音操作(聲音檔) 今天來整理在p5.js的sound物件及DOM的audio元件的操作方式首先使用p5.js的方式建立 audio 元件, 產生的物...
Audio聲音操作(麥克風) 今天來整理Audio的音源輸入的操作 使用 p5.sound library 之 p5.AudioIn 套件 p5.js的聲音的部...
Audio音訊數值操作(頻域) 今天要來整理音訊來源的相關數值的操作,其中音訊來源包括音樂檔及麥克風,LineIn等。 頻域分析 從麥克風讀取音頻數據 使用 f...
MultiCanvas 多個Canvas的操作 今天來整理在一個網頁中 顯示多個canvas的方法在p5.js中,一般預設的模式是 Global Mode,在此...
MultiGraphics 多個Graphic的操作 今天來整理多個Graphic的操作方法之前提到可以用多個instance p5的方法,今天來試試用Grap...
檔案操作 今天來整理在p5.js如何載入檔案到網頁中。檔案的類型有 html, csv, json, xls, txt, php等使用 loadStrings(...
檔案操作(JSON檔) 今天來整理下載JSON格式的檔案資料到網頁中 使用 loadJSON(path) 來載入JSON資料來源為 政府資料開放平台「臺北市停車...
陣列資料操作[基本概念,資料排序] 今天來整理一下陣列的各種操作技巧 陣列的基本操作let arr = [1, 2, 3, 4]; 陣列本身像是一個存放資料的容...
陣列資料操作[資料逐筆處理,搜尋,篩選,轉換] 今天來整理陣列的元素操作 基本的迴圈模式開始 const arr = [1, 2, 3, 4, 5, 6, 7]...