iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

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

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

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

D01_準備好需要的工具

工欲善其事,套件先準備 p5.js是一個以畫圖為出發點的套件工具,以processing的角度來看,p5.js是processing的javascript版本,...

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

D02_基本繪圖指令

繪圖基本參數 - 形狀,座標,大小,顏色 今天來總整理一下常用的繪圖指令在p5.js中,為了簡化程式的編寫,將繪圖功能,變成一個一個的指令 指令的語法,例如:畫...

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

D03_Canvas畫布的密技

Canvas 的 DOM與p5.js的連結 今天來了解一下,p5.js的createCanvas()所產生的canvas元件與網頁DOM之間的關係。 Canva...

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

D04_Canvas的圖像核心

Canvas的圖像內容與p5.js的圖像內容 今天來整理利用DOM的Canvas元件的getContext("2d")圖像核心(contex...

2022-09-18 ‧ 由 jasonlee2357 分享
DAY 5

D05_Canvas的圖像畫素

DOM的Canvas與p5.js的Canvas的畫素操作 今天來整理Canvas的畫素操作指令 DOM 關於pixel的操作 let can; let ctx;...

2022-09-19 ‧ 由 jasonlee2357 分享
DAY 6

D06_Canvas的全螢幕,儲存,上傳

Canvas的全螢幕,儲存,上傳 今天要來整理canvas的呈現方式,儲存,上傳,字串化格式的操作 p5.js 的DOM的selectors操作 select(...

2022-09-20 ‧ 由 jasonlee2357 分享
DAY 7

D07_Video元件的基本操作

Video元件的基本操作 今天來整理video元件的基本操作以及與Canvas的整合在p5.js中,可以使用 createVideo()來建立video元件其中...

2022-09-21 ‧ 由 jasonlee2357 分享
DAY 8

D08_Video元件的Capture操作

Video元件的Capture操作 今天來整理利用video開啟攝影機進行capture的影像輸入 先來看看p5.js的方式使用 createCapture(V...

2022-09-22 ‧ 由 jasonlee2357 分享
DAY 9

D09_Video元件的YouTube影片操作

使用YouTube Player API 今天來整理使用YouTube Player API建立video元件 let can; function setup(...

2022-09-23 ‧ 由 jasonlee2357 分享
DAY 10

D10_Graphics圖層操作

Graphics圖層操作 今天來整理在p5.js中圖層的操作。 在p5.js中圖層的概念可以用 p5.Graphics, createGraphics()來建立...

2022-09-24 ‧ 由 jasonlee2357 分享