上次的課堂老師介紹了[《共振．若水》](https://akaswap.com/akaobj/6433)這件作品，其中簡單的提了一句「應該是用一個p5js內建的oscillator做的」，給了我啟發。因為我先前就有做聲音相關作品的想法，只是那時簡單地搜了一下發現p5.js難道沒有合成器、只能播放現成的音訊嗎？在老師點出了這個指引後，我便找到了，果真有[p5.Oscillator](https://p5js.org/reference/p5.sound/p5.Oscillator/)這個東西。

但是但是，我其實沒搞懂它，因為它在VS Code和Open Processing上都叫不出來，好像是內建於p5.js網頁的嗎？不太可能，畢竟只能在網頁上用怎麼用來做作品。只是我還沒找到怎麼在別的地方用它。

扯遠了。我用它做了個小作品。然後這個作品其實是拼裝車，沒什麼原創性。

首先是我找到的這個[2D Noise生成方式](https://editor.p5js.org/codingtrain/sketches/2_hBcOBrF)，用它來生成底圖：

![](ipfs://QmTmQHwpF69BGVNFgRY3BdTVt7WCf71USVFXbs18CA11DV)

加上在下列影片中學到的[get()](https://p5js.org/reference/p5/get/)的用法：

::embed-media[]{href="https://www.youtube.com/watch?v=a7qCVxq-dWE&t=792s"}

再加上oscillator。我的想法是在畫布上，將其色彩轉換成聲音。因此偷了[p5.Oscillator示範網頁中](https://p5js.org/reference/p5.sound/p5.Oscillator/)，不一樣的是改成透過偵測游標位置的像素的亮度，轉換成合成器發出的頻率。

最後再加一個畫蛇添足的部分（但我覺得有發展潛力）。我想將這些無序的頻率轉換成音階。

![擷取自維基百科](ipfs://QmPQo4ndH5ueLfBQL6DJ1E34DjPHWueAdc2f1UHYjS1Yek)

我選定的是C大調，頻率上限設定在1000，所以理論上它能演奏C大調中，C0\~B5的音。我將這些音高對應的數字列成一個由小到大的數列，比較當前由色彩亮度轉換出的頻率(作品中的freq)。若頻率在兩個音的區間，就將輸出的頻率(作品中的note)轉換成該音符的頻率。

[這是我的成品](https://editor.p5js.org/110101019/sketches/VE_FSdckR)。滑鼠游移在不同的像素上就會改變其即將演奏的音高，然後點擊左鍵演奏。

***

說實話做出來遠遠沒有想像中酷，但我覺得這個概念是有發展空間的，所以先實踐看看一個簡單版也無妨。不酷的原因可能有二：

1.沒有特別設定過的演奏本來就不酷。讓不會鋼琴的人彈鋼琴，是不會好聽的。

2.這點非常遺憾。也許讓滑鼠在移動的過程就讓音高不斷改變會更有趣吧？但是合成器似乎都有個（我也不知道原理是什麼的）通病，就是進行一些很即時的操作時會爆音，所以任它隨時改變音高，就會一直「ㄅㄧㄚˇㄅㄧㄚˇㄅㄧㄚˇ」。這個我不清楚有沒有解決之道。

如果要以此為基礎做出和諧的作品，這兩點是很大很大的問題。（然後我其實覺得不可能沒人做過這個東西……但還是自己做做看和想解決方法比較有趣）

以上！


我有個關於畫布與音訊連動的小想法。在了解到p5.Oscillator後，試著來玩玩看。

畫布與音訊的實驗

Written by

Editions

Share

Details

stay ahead with our newsletter