iT邦幫忙

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

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

§d09§ 匠氣大爆發!旋鈕 の 贅澤!手工合成器打磨班(一)

0. 今日工事

  • 旋鈕 の 贅澤
  • 考古探勘:React 社群資源
  • 採納定案!改造計畫上綱!

https://ithelp.ithome.com.tw/upload/images/20171229/20107828Sw9EL5Ib8W.jpg

1. 旋鈕 の 贅澤

Tone.js 是一艘星際航母,開進了聲音宇宙的荒蕪境地。太空船的主控室塞滿了完備的 API,宇航員使用字母跟內核心引擎交談唱歌。生活在地球的音樂啊,我們還是傳統的喜歡滑順的旋鈕、推桿和吹彈的 pad,放歌沒有 midi controller 就放不下去。
為了接下來旅途順暢,耳朵高潮不中斷,打磨好的介面一定必不可少。
為何喜愛旋鈕?當空氣開始震動,機台上的旋鈕賦予我們定義這個能量的權力,肥厚的聲音經過 filter 清掉不乾淨的頻率,旋鈕就是吉他手手上的吉他,甚至連吉他上都有好多旋鈕啊!永遠記得,有顆合成器上的旋鈕,機械設計的摩擦係數與阻尼感恰到好處,差不多就飆了淚呢。

https://ithelp.ithome.com.tw/upload/images/20171229/20107828vhTQelGhhg.jpg

今天就用 React 來嗑一個旋鈕機,滿滿的旋鈕和按鈕、從 verse 按到 hook,從白天轉到黑夜轉他三天三夜!

2. 先找社群資源:react-canvas-knob

開工前當然先上網衝浪,看有沒有相似的專案設計可以參考。之前打環境工程的時候,就確立了 React 的基礎。加上之前養成的習慣,雖然 Component-Based 的 React 社群建立了許多好用的工具,但是因為視覺、互動、定期維護、當下情緒等多種原因,常常最後都變成自己 implement 的狀況。

https://ithelp.ithome.com.tw/upload/images/20171229/20107828vMBOJ0W2md.png

最先找到的就是 react-canvas-knob。他是 jQuery Knob 的 React 復刻版,那個美好的年代啊,當時大家都還追著 jQuery 的潮流奔東奔西呢。jQuery Knob 的 demo site 操作起來不太滑順但是不算難看。而我最後決定不採納 react-canvas-knob 最大的原因在於他是用 canvas-render,會導致我要客製相當麻煩。

3. 採納定案!改造計畫上綱!

又花時間尋找了一下,看到一個玩經典設計的網站,是與工業設計大師 Dieter Rams致敬的一個作品。他曾經提出十大準計準則,常常被當成是現在工設的某種潛在規則。

https://ithelp.ithome.com.tw/upload/images/20171229/20107828v4WORikWZ8.jpg

如下圖看到的,它有非常漂亮的旋鈕和介面。我打算直接把他的元件拿出來放到我的架構底下去改,來當成最基本的測試玩具旋鈕機。

https://ithelp.ithome.com.tw/upload/images/20171229/20107828cZ30keVTHc.png

David Bowie 曾經在一個訪問當中說過,玩合成器做音樂的時候,最有趣的部分就是把說明書丟掉,用最純粹的感覺去體驗聲音、旋鈕、按鍵之間的關係。沈浸在那樣的感覺當中就需要一個我自己都會忘記參數 mapping 的操作介面。所以結論就是,一個平面上面全部都是旋鈕,所有的聲音參數都可以隨便配置,就算忘記也沒關係那種。想要知道最後打磨的結果請看下一篇!

4. 請愛CYBERの audio / VISUAL

昨天脫稿就是因為搞這個架構,我需要多加入本來沒有的 SCSS 和 Tonal.js 等其他工具。但是又堅持把它 module 化,所以架構設定上又搞得暈頭轉向。明天再來談實作的困難與好玩的樂器製作。技術力不足,想像力補充!下篇繼續鎖定合成器打磨工作坊!

關於作者

Vibert Thio

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


上一篇
§d08§ 全頻率震動!派對音響工程!為何選 Tone.js 當作 Audio Framework?
下一篇
§d10§ 匠氣大爆發!旋鈕 の 贅澤!手工合成器打磨班(二)
系列文
aesthEtic,CYBERの audio / VISUAL,網頁中的聲音與影像研究30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言