iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 26
1
Modern Web

aesthEtic,CYBERの audio / VISUAL,網頁中的聲音與影像研究系列 第 26

§d26§ 詩化源代碼!模擬駭客任務場景?p5.js 的可愛與實作!

0. 今日工事

  • p5.js 基本操作
    • 檔案結構
    • API 太容易
    • Audio Visual 卡哇依!
  • 超屌範例
    • Conway's Game of Life
    • Matrix Digital Rain

1. p5.js 環境設定

本來就是為了設計給沒有任何程式基礎的使用族群,想當然爾 p5.js 一定要將整個環境的設置做到非常簡單,事實上他也真的做到了。最開始,他就提供了你一個非常簡易的環境,就是一個網頁的編輯器:

https://ithelp.ithome.com.tw/upload/images/20180114/20107828Jh2pm0JJvo.png

可以直接開始練習與實驗。

1.1 檔案結構

或是,你可以直接去<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

1.2 API 太容易

就像是 arduino 一樣(不知道也沒關係),程式碼最主要就分成兩個區塊:setupdrawsetup只會在開頭執行一次,像是常數參數設定、畫面大小、物件初始化等等。執行完畢之後就會進入draw的無限輪迴,直到永遠。也就是說,你只需要兩個檔案就可以開始在網頁上面畫圖,每個檔案的行數都不超過十行,簡直太容易!

1.3 Audio Visual 卡哇依!

既然這個系列是關於網頁的聲音與影像,我就要示範在這個 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);
}

結果就像是下面這樣啦!

demo

2. 超屌範例

哇,這好無聊。我猜有人會有這樣的反應。不過 p5.js 的威力當然不只如此。講再多都沒用,我覺得最快的方式就是給出一些好玩的 projects,實際想想他到底如何創造實際的效果。講到範例與教學,一定要提世上最可愛的老師 Daniel Shiffman,他在 youtube 上面的幾個頻道應該是世界上最快樂學習寫程式的天堂。雖然我也可以像之前一樣用我寫的東西來進行 demo,但是想想覺得他真的太可愛了,不介紹心裡過不去。而且他的 example 真的都很棒!

https://ithelp.ithome.com.tw/upload/images/20180114/20107828k67qc9AWrj.png

2.1 Conway's Game of Life

哈哈哈,許多人都指稱為這個遊戲是最早的人造生命。p5.js 讓你簡單的也可以在網頁上製造自己的版本。下面就是 Daniel Shiffman 本人親自教導的影片!

https://ithelp.ithome.com.tw/upload/images/20180114/20107828wdk3Iq340r.png

2.2 Matrix Digital Rain

這個也是相當驚人!雖然 p5.js 架構非常簡單,可是卻可以讓你做到電影場景的特效?超棒的小專案!是 Daniel Shiffman 邀情 Emily Xie到節目上進行的分享!

https://ithelp.ithome.com.tw/upload/images/20180114/20107828kh595LH9Fm.jpg

3. 請愛CYBER の audio / VISUAL

網頁中的世界,我們聽慣了那些黑暗的、恐怖的大公司陰謀與資料戰爭。偶爾中的偶爾,或許需要一些單純的快樂的 coding,才能解救我們迷失在偌大網路世界裡面的靈魂吧?
講完了 p5.js 這個有趣的小玩具之後,就要來看看我自己的之前做的玩具 Beact!

beact

先來玩玩看吧,最近有有了新的改版喔!

關於作者

Vibert Thio

致力於將對於技術的深度研究轉化為新型態藝術創作的能量,並思考技術的拓展/侷限與其對於藝術論述/呈現的影響。專長為數位藝術創作、音像程式設計、互動設計,喜愛即時運算的臨場感與不可預測。


上一篇
§d25§ 詩化源代碼!Coding 為何 Creative?p5.js 的誕生與辯證!
下一篇
§d27§ BEACT!Bro∑ser如夢幻境!一秒成為網頁 DJ!
系列文
aesthEtic,CYBERの audio / VISUAL,網頁中的聲音與影像研究30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言