[hydra] 影像實作

by Chappie ｜ Live Coding 研究推廣計畫  （2023 發表 / 2025 更新）

開始之前

【自學步驟】

1. 認識 hydra 介面及操作，每個按鈕都按按看，熟悉每個區塊用途。

2. 理解基礎運作邏輯。

• 從上到下，從左到右。

• Happy Patching：以接線方式將功能串起；來源-功能-功能-功能-輸出結果。
  
  

3. 認識功能種類，可參照Hydra Functions。（補充：什麼是「功能 / 函式」？）

• Source：做為訊號源頭的基本圖形。

• Geometry：基本動態，如旋轉、位移、大小。

• Color：色彩、明暗、對比。

• Blend：圖層混和以及色彩運算。

• Modulate：訊號調變，例如以A圖形的顏色影響B圖形的動態。

• External Sources：外部來源，攝影機、螢幕擷取，置入影片、圖片。

• Synth Settings：整體設定，解析度、速度...等。

• Array：序列，可針對參數變化做細部調整。

• Audio：聲音訊號，導入聲音訊號、取代變數。

4. 了解括弧內參數「數量」、「意義」、「範圍」以及「預設值」。

• 針對程式碼案例，一次更動一組參數，調整成極大或極小。

• 觀察圖形改變，藉此了解參數的意義及數值範圍。

• 觀察參數在沒有寫入數值時的預設值(default)。ex- osc ( frequency = 60, sync = 0.1, offset )

5. 拿其他人的範例來修改參數、排列組合玩玩看。

【基本操作】（適用網頁瀏覽器 ）

alt + enter   執行目前游標區塊的程式碼 （Mac： option + enter）

ctrl + shift + enter   執行整個畫面的程式碼

ctrl + enter   執行單行的程式碼

ctrl + / 單行註解，或暫時不執行該行

/* (程式內容) */  多行註解，或暫時不執行該區塊

tab  縮排，整理程式碼

ctrl + shift + h  隱藏或顯示程式碼

hush()  停止執行

基本操作 PART 1

【練習一：產生一個「來源圖形」，熟悉參數】

osc( 10 , 0.5 , 0.7 ).out()   //(頻率, 速度, 色彩偏移)

shape( 4, 0.5, 0.2 ).out()

noise( 5, 0.5 ).out()

voronoi( 5 , 0.5 , 1 ).out()

solid( 0 , 0 , 0 ).out()

// 小補充 //

1. 語法基本架構由一個個「功能」組成，即為合成器上的一台台小機器，功能(參數, 參數, 參數)。 

2. 功能與功能中間用點 . 連結，可以想像成合成器上的連接兩台小機器的線。

3. 最後的out() 為輸出到顯示器的功能，放在程式最末端。

【練習二：改變顏色、大小、動態】

shape(4, 0.5)

.rotate(0, 0.1) //旋轉(偏移, 轉速)

.scale(1, 0.5) // 大小(整體, X軸, Y軸)

.color(1, 0, 0) // 顏色(R, G, B, A)

.repeat(2, 2) // 重複( X軸, Y軸)

.scrollX(0.5, 0) // X軸位移(偏移, 速度)

.out()

// 小補充 //

scale(1,9/16) = scale(1,9/16,1) // 把圖形調整成9:16 比例 

【練習三：使用中括號讓參數依序變化】

shape(4, [0.1, 0.2, 0.3], 0.1)

.rotate(0, 0.5) // 旋轉(偏移, 轉速)

.color(1, 0, 0) // 顏色(R, G, B, A)

.scale(1, 9/16) // 調整比例

.scrollX([-0.25, 0, 0.25].fast(2).smooth(0.5)) // 橫向位移

.out()

//  [] // 中括弧內數字以逗點隔開，依序變化
// fast() // 變化的速度
// smooth(0.5) // 漸變程度

基本操作 PART 2

【練習四：色彩運算】

// #1.1 加法 //

shape(4).color(1, 0, 0).out(o0) // 圖形A

shape(40).color(0, 1, 0).out(o1) // 圖形B

shape(4).color(1, 0, 0).add(shape(40).color(0, 1, 0)).out(o2) // 圖形A+B

render() //將暫存區顯示

// #1.2 加法 //
shape(99).scale(1, 0.55).color(1, 0, 0).scrollY(0.14) // 紅色圓形

  .add(shape(99).scale(1, 0.55).color(0, 1, 0).scrollX(-0.055)) // 綠色圓形

  .add(shape(99).scale(1, 0.55).color(0, 0, 1).scrollX(0.055)) // 藍色圓形

  .out()

※ 小補充 ※

(1) 顏色可以被運算，色光三原色。

(2) 影像暫存區(buffer)：hydra 程式碼尾端的 out(o0)，括弧內預設值為o0，也就是out 0 、第一個輸出的意思，內建共有o0, o1, o2, o3 四個影像暫存區。透過render() 來決定顯示哪一個影像輸出；相對應於out() 的功能還有 src() ，也就是source 來源。

(3) 這章節語法多了「層級」： 「被影響的功能組合」以括弧包起「帶來影響的功能」。

// #2 減法 //

shape(99, 0.8).color(1, 0.8, 0).scale(1, 0.5).out(o0) // 圖形A

shape(4).color(1,0,0).scale(1.2, 0.5).out(o1) // 圖形B

src(o0).sub( src(o1), 0.25).out(o2) // 兩張圖色彩相減，後方參數為兩圖層疊合程度

render()

// #3 乘法與差色 //

osc(10, 0, 1).out(o0) //振盪器

shape(4).out(o1) //白色方塊

src(o0).mult(src(o1)).out(o2) // AB 色彩相乘(multiply) 

src(o0).diff(src(o1)).out(o3) // AB 色彩相差(difference)

render()

【練習五：圖層疊合與遮罩】

// #1 圖層疊合

shape(4).color(0, 0,1).scrollX(.1).out(o0) //圖形A

shape(4).color(1, 0, 0, 0.5).out(o1) //圖形B，透過調整color的Alpha值改變透明度

src(o0).layer(src(o1)).out(o2) //B疊在A之上

render()

// #2 圖層疊合

shape(4).mult(osc()).out(o0) //圖形A

osc(5, -0.1, 1).out(o1) //圖形B

src(o0) .layer(src(o1).color(1, 1, 1, 0.5)).out(o2)  //B疊在A之上，調整Alpha值改變透明度

render()

// #3 遮罩

osc(20, 0.1, 1).out(o0) //圖形A

shape(99, 0.3, 0.5).scale(1, 0.5).out(o1) //圖形B

src(o0).mask(src(o1)).out(o2) 

render()

【練習六：feedback、混和圖層】

// #1 什麼是feedback？

shape(4, 0.3).mult(osc(100, 0.1, 0.5)).out(o0) //STEP1：影像送到out(o0)

src(o0).scale(1.005).out(o0) //STEP2：out(o0)送回src(o0)，變寬

src(o0).scale(1.005).rotate(0.002).out(o0) //STEP3：out(o0)送回src(o0)，變寬並旋轉

render(o0)

※ 將已經送至結果out() 的訊號，再次做為來源src() 送到起點，形成循環。

// #2 透過混和圖層將feedback效果做成光暈

src(o0).scale(1.05) //feedback後放大

.blend(

  shape(999, [0.2,0.3].fast(1).smooth(0.5),.1) // 基礎圖形

  .mult(osc(10,-0.5,1).kaleid(99)) //上色

  .scale(1, 9/16) //調整比例

  , 0.1) // 結尾參數表示混和的程度

.out()

【綜合練習2：製作動態光暈】

src(o0).scale(1.15).rotate(1, 0.1)

.blend(

shape(3, 0.3, 0.3)

   .scale(1,9/16)

.rotate(1, -0.5)

.mult(osc(10, 0.1,1))

)

 .out(o0)

實際操作 PART 3

【練習七：影像調變】

// #1 什麼是調變？modulate()

An analogy in the real world, would be looking through a texture glass window. modulate() does not change color or luminosity but shifts pixels by another texture; imagine looking through a bumpy glass window.

說明：https://hydra.ojack.xyz/docs/#/getting_started?id=g-modulate

>>> 利用圖形A的色彩去改變圖形B的形狀、動態。

// #2 案例：調變大小

osc(10, 0.1).out(o0)  // 圖形A

shape(4).out(o1)   // 圖形B

src(o1).modulateScale(src(o0)).out(o2) // 圖形A的黑白，影響圖形B的大小

render()

// #3 案例：調變Y座標位移

osc(1, 2).rotate(1.58).out(o0) // 圖形A

shape(60).scale(1, 9/16).scrollY(-0.2).out(o1) // 圖形B

src(o1).modulateScrollY(src(o0)).out(o2) // 圖形A的黑白，影響圖形B的Y座標位置

render()

【更多功能】

// #1 代數、時間、波形

shape(4,()=>Math.sin(time)*0.25+0.5).out() // 以正弦波代替參數

// 也可以試試以下

()=>Math.cos(time)

()=>Math.tan(time)

()=>Math.random(time)

shape(3, 0.3).rotate(()=>Math.PI/2).out() // 以圓周率來設定旋轉角度

// 小補充：很多javascript 的function 都可以使用，可以多多嘗試【參考】

// #2 導入攝影機

s0.initCam()

src(s0).invert().out(o0)

// 小補充：使用前請確認瀏覽器設定中的「攝影機來源」、「隱私權設定」

// #3 導入網路圖片

網路圖片來源

s0.initImage("圖片網址")

src(s0).out(o0)

// #4 擷取視窗 

s0.initScreen() //執行後會跳出視窗詢問要擷取哪一個視窗畫面

src(s0).out(o0) 

// 小補充：避免選取chrome 造成無限鏡像

// #5 導入聲音(1)

a.show() // 右下角顯示聲音輸入

a.setBins(4) // 頻譜分段

a.setSmooth(0.94) // 設定音訊數值平滑程度 

() => a.fft [0] // 代數取代參數；中括弧內數字代表使用頻譜分段中的第幾段

osc(10, 0, () => (a.fft[0]*4))  .out()

// #5 導入聲音(2)

a.show() // 右下角顯示麥克風聲音輸入

a.setBins(5) // 頻譜分段

a.setSmooth(0.5) // 音訊平滑

src(o0)

.scale(1, 0.95, 1.05).scrollY(0.025)

.rotate([0.05 , -0.05].fast(0.2).smooth())

.modulate(noise(2, 0.5),0.02)

.blend(

   shape(999,()=>a.fft[3]*0.25+0.25,.2).scale(1,9/16)

.color(0.5,0,0).hue(()=>a.fft[0]*2)

.diff(shape(999,()=>a.fft[3]*0.25+0.15,.2).scale(1,9/16))

.scrollY(-0.1)

,0.25)

.out(o0)

render(o0)

// 小補充：使用前請確認瀏覽器設定中的「麥克風來源」、「隱私權設定」

// fft = Fast Fourier Transform 傅立葉轉換，把類比訊號轉變成數位訊號。

// 原文說明：https://hydra.ojack.xyz/docs/#/additional_topics?id=audio-responsiveness

【雜亂的補充】

#1 運用虛擬通道播放本機電腦聲音驅動影像，Windows 用 Voicemeeter ，Mac 可用BlackHole。

#2 本機運作，可安裝 ATOM-HYDRA（ATOM 已停止更新，新一代 PULSAR 適用性尚不佳，等待新消息）

【演出的小撇步】

#1 整理程式碼分行，使用//註解功能 當作效果器或場景開關。

#2 使用暫存區存放不同場景。//out(o0)~out(o3)

#3 利用黑畫面做頭尾轉場：// .mult(solid(), ()=>mouse.x*0.0009) 

#4 利用混和圖層與滑鼠來切換場景：

shape(4) //場景一 

  .blend(shape(3) ,()=>mouse.x*0.0009) //運用滑鼠做為切換器

  .out()