Live Coding 影像實作 [hydra]

by Chappie ｜ Live Coding 研究推廣計畫  (2023)

開始之前

【自學步驟】

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

2. 理解基礎運作邏輯。

• 從上到下，從左到右。

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

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

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

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

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

• Blend：圖層疊合、混和，以及色彩運算。

• Modulate：訊號調變，以一圖形影響另一圖形的色彩或動態。

• 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軸)，這裡可以改成scale(1,9/16)
.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 比例
invert //反轉
luma  // luminance ( threshold , tolerance )；threshold 高於某個亮度顯示原色； tolerance 允許誤差的範圍。
thresh // ( threshold , tolerance )；threshold 高於某個亮度顯示為白色； tolerance 允許誤差的範圍。
colorama //色光
posterize //色調分離

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

shape(4, [0, 0.1, 0.2, 0.3, 0.2, 0.1].fast(2).smooth(0.5) , 0.2)
.rotate(0, 0.1) //旋轉(偏移, 轉速)
.color(1, 0, 0) // 顏色(R, G, B, A)
.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

// #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 來源。（Render 中文翻成什麼）

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

// #2 減法 //

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

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

src(o0).sub( src(o1), 0.9).out(o2) //減法，兩張圖完全覆蓋，後面參數調整覆蓋程度

render()

// #3 乘法與色差 //

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

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

src(o0).mult(src(o1)).out(o2) // AB相乘(multipy) ，通常拿來上色

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) //圖形B越白的地方越透明

render()

【練習六：影像回授、混和圖層】

// #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：回授同時放大

src(o0).rotate(0.002).out(o0) //STEP3：回授同時旋轉

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

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

src(o0).scale(1.005, 1.005, 1.005)
.blend(
shape(99, [0.2,0.3].fast(5) ).scale(1, 9/16).color(1, 1, 0)
 , 0.03) // 結尾參數表示混和的程度
.out()

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

src(o0).scale(-0.95, 1.25).rotate(1, 0.15)
.blend(
shape(3, 0.04, 0.5).rotate(1, -0.1)
.mult(osc(10, 0.15).color(2.8, 1.2, 0.8))
)
.diff(
shape(3, 0.01, 0.11)
.mult(noise(14).rotate(1, -0.2), 0.8)
)
.out(o0)

// 範例參考來源：https://www.instagram.com/p/CVYAu1WvujG

實際操作 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) // 音訊平滑

src(o0).scale(1.001,1.02,1.001)
.blend(
shape(999,()=>a.fft[3]+0.2,.01).scale(1,9/16)
.mult(osc(5,0.3,1).hue(()=>a.fft[1]))
.add(shape(999,()=>a.fft[3]+.01).scale(1,9/16),()=>a.fft[0]*.8)
  .scrollX([0.35,-0.35].fast(0.3).smooth())
    .scrollY([0.25,-0.25].fast(0.8).smooth())
  ,.035)
.out()

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

// fft = Fast Fourier Transform 傅立葉轉換，把類比訊號（聲音）轉變成數位訊號（數字）的一種技術。

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

【雜亂的補充】

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

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

#3 本機運作有時無法完成，可能因為缺少安裝 Node.js

【個人演出的小撇步】（僅供參考）

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

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

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

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

shape(4) //場景一 

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

  .out()