本來就是為了設計給沒有任何程式基礎的使用族群，想當然爾 p5.js 一定要將整個環境的設置做到非常簡單，事實上他也真的做到了。最開始，他就提供了你一個非常簡易的環境，就是一個網頁的編輯器：
可以直接開始練習與實驗。
或是，你可以直接去<script> p5.js 的檔案，到 index.html 裡面。都是相當直覺簡單的操作。首先是index.html。
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
<style> body {padding: 0; margin: 0;} </style>
</html>
再來是script.js：
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220); // 每個 frame 都要重新把背景刷掉，0 - 255 是黑到白
fill(0); // 圖形填色設定，0 - 255 是黑到白
ellipse(50, 50, 50, 50); // 畫橢圓形，參數分別是 x 位置、y 位置、寬度與高度。
}
檔案結構也非常簡單：
web-audio-visual/
├── index.html
└── sketch.js
就像是 arduino 一樣（不知道也沒關係），程式碼最主要就分成兩個區塊：setup與draw。setup只會在開頭執行一次，像是常數參數設定、畫面大小、物件初始化等等。執行完畢之後就會進入draw的無限輪迴，直到永遠。也就是說，你只需要兩個檔案就可以開始在網頁上面畫圖，每個檔案的行數都不超過十行，簡直太容易！
既然這個系列是關於網頁的聲音與影像，我就要示範在這個 p5.js 的魔力底下，如何快速的進行一個音像的結合！首先，我們需要多引入一個p5.sound.js的 library，方法就是在index.html加入一行<script>即可：
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/addons/p5.sound.min.js"></script>
...
在script.js中，加入p5.AudioIn這個物件：
let mic;
function setup() {
// createCanvas(800, 500);
createCanvas(windowWidth, windowHeight);
xpos = width * 0.5;
ypos = height * 0.5;
mic = new p5.AudioIn();
mic.start();
}
function draw() {
background(40);
const vol = mic.getLevel();
const radius = map(vol, 0, 0.05, 100, 300);
noStroke();
fill(200, 190, 190);
ellipse(xpos, ypos, radius, radius);
}
結果就像是下面這樣啦！
哇，這好無聊。我猜有人會有這樣的反應。不過 p5.js 的威力當然不只如此。講再多都沒用，我覺得最快的方式就是給出一些好玩的 projects，實際想想他到底如何創造實際的效果。講到範例與教學，一定要提世上最可愛的老師 Daniel Shiffman，他在 youtube 上面的幾個頻道應該是世界上最快樂學習寫程式的天堂。雖然我也可以像之前一樣用我寫的東西來進行 demo，但是想想覺得他真的太可愛了，不介紹心裡過不去。而且他的 example 真的都很棒！
哈哈哈，許多人都指稱為這個遊戲是最早的人造生命。p5.js 讓你簡單的也可以在網頁上製造自己的版本。下面就是 Daniel Shiffman 本人親自教導的影片！
這個也是相當驚人！雖然 p5.js 架構非常簡單，可是卻可以讓你做到電影場景的特效？超棒的小專案！是 Daniel Shiffman 邀情 Emily Xie到節目上進行的分享！
網頁中的世界，我們聽慣了那些黑暗的、恐怖的大公司陰謀與資料戰爭。偶爾中的偶爾，或許需要一些單純的快樂的 coding，才能解救我們迷失在偌大網路世界裡面的靈魂吧？
講完了 p5.js 這個有趣的小玩具之後，就要來看看我自己的之前做的玩具 Beact！
先來玩玩看吧，最近有有了新的改版喔！
關於作者
Vibert Thio
致力於將對於技術的深度研究轉化為新型態藝術創作的能量，並思考技術的拓展/侷限與其對於藝術論述/呈現的影響。專長為數位藝術創作、音像程式設計、互動設計，喜愛即時運算的臨場感與不可預測。
iThome鐵人賽
看影片追技術