技術 D13_Audio聲音操作(麥克風)

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

技術 D12_Audio聲音操作(聲音檔)

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

技術 D11_文字與字型操作

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

技術 D10_Graphics圖層操作

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

技術 D09_Video元件的YouTube影片操作

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

技術 D08_Video元件的Capture操作

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

技術 D07_Video元件的基本操作

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

技術 D06_Canvas的全螢幕，儲存，上傳

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

技術 D05_Canvas的圖像畫素

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

技術 D04_Canvas的圖像核心

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

技術 D03_Canvas畫布的密技

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

技術 D02_基本繪圖指令

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

技術 D01_準備好需要的工具

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

技術 拿 ml5 來練習 p5.js (二)

介紹 首先介紹什麼是 p5.js，p5.js 是基於 Processing 在瀏覽器中提供友善的畫布 (canvas) 使用介面。(https://creati...