Strudelでは、音楽のライブコーディングにビジュアルエフェクトを追加できます。今回は、Strudelを用いてライブコーディングの演奏にビジュアルエフェクトを追加する方法を学びます。

いろいろなビジュアルエフェクト

ミニ・ノーテーションの強調表示

「二重引用符 “”」または「バッククォート “」を使用して記述すると、アクティブな部分が強調表示されます。

n("<0 2 1 3 2>*8")
.scale("<A1 D2>/4:minor:pentatonic")
.s("supersaw").lpf(300).lpenv("<4 3 2>*4")

色を変更したり、パターンを変更したりすることもできます。

n("<0 2 1 3 2>*8")
.scale("<A1 D2>/4:minor:pentatonic")
.s("supersaw").lpf(300).lpenv("<4 3 2>*4")
.color("cyan magenta")

グローバルビジュアルとインラインビジュアル

これ以降で紹介するビジュアルエフェクトは、すべて2つのバリエーションで提供されます。

• グローバルビジュアル (プレフィックスなし): は、ビジュアルをページの背景にレンダリングします。
• インラインビジュアル (接頭辞「_」を付ける): コード内でビジュアルがレンダリングされます。複数のビジュアルを使用できます。

グローバルビジュアル:

note("c a f e").color("gray").punchcard()

インラインビジュアル:

note("c a f e").color("gray")._punchcard()

punchcardとpianoroll

これら2つの関数はピアノロール形式のビジュアルをレンダリングします。2つの関数の唯一の違いは、 はpianorollパターンを直接レンダリングするのに対し、 はpunchcardその後に発生する変換も考慮に入れるという点です。

punchcard: 色が適用される

note("c a f e").color("white")
._punchcard()
.color("cyan")

pianoroll: 色が適用されない

note("c a f e").color("white")
._punchcard()
.color("cyan")

spiral (スパイラル)

スパイラルビジュアルを表示します。

note("c2 a2 eb2")
.euclid(5,8)
.s('sawtooth')
.lpenv(4).lpf(300)
._spiral({ steady: .96 })

Scope

同義語: tscope

オーディオ信号の時間領域のオシロスコープをレンダリングします。

s("sawtooth")._scope()

Pitchwheel

1オクターブ内の周波数を視覚化するためにピッチサークルをレンダリングします

n("0 .. 12").scale("C:chromatic")
.s("sawtooth")
.lpf(500)
._pitchwheel()

Spectrum

入力オーディオ信号のスペクトル アナライザーをレンダリングします。

n("<0 4 <2 3> 1>*3")
.off(1/8, add(n(5)))
.off(1/5, add(n(7)))
.scale("d3:minor:pentatonic")
.s('sine')
.dec(.3).room(.5)
._spectrum()

markcss

ハイライト表示されたイベントのCSSを上書きします。必ずシングルクォーテーションを使用してください。

note("c a f e")
.markcss('text-decoration:underline')

Hydra

Hydraは、ライブコーディングのためのビジュアルプログラミング環境です。Strudelでは、Hydraを使用して高度なビジュアルエフェクトを作成できます。

await initHydra()
osc(10, 0.9, 300)
.color(0.9, 0.7, 0.8)
.diff(
osc(45, 0.3, 100)
.color(0.9, 0.9, 0.9)
.rotate(0.18)
.pixelate(12)
.kaleid()
)
.scrollX(10)
.colorama()
.luma()
.repeatX(4)
.repeatY(4)
.modulate(
osc(1, -0.9, 300)
)
.scale(2)
.out()

note("[a,c,e,<a4 ab4 g4 gb4>,b4]/2")
.s("sawtooth").vib(2)
.lpf(600).lpa(2).lpenv(6)

H patterns

Hパターンを hydra への入力として使用できる特別な関数があります。

await initHydra()
let pattern = "3 4 5 [6 7]*2"
shape(H(pattern)).out(o0)
n(pattern).scale("A:minor").piano().room(1)

オーディオ検出

hydra オーディオ キャプチャを使用するには、構成パラメータinitHydraを指定して呼び出します。{detectAudio:true}

await initHydra({detectAudio:true})
let pattern = "<3 4 5 [6 7]*2>"
shape(H(pattern)).repeat()
.scrollY(
  ()=> a.fft[0]*.25
)
.add(src(o0).color(.71 ).scrollX(.005),.95)
.out(o0)
n(pattern).scale("A:minor").piano().room(1)

feedStrudel

このfeedStrudelオプションを使用すると、Strudelの視覚化をhydraで変換できます

await initHydra({feedStrudel:1})
//
src(s0).kaleid(H("<4 5 6>"))
.diff(osc(1,0.5,5))
.modulateScale(osc(2,-0.25,1))
.out()
//
$: s("bd*4,[hh:0:<.5 1>]*8,~ rim").bank("RolandTR909").speed(.9)
$: note("[<g1!3 <bb1 <f1 d1>>>]*3").s("sawtooth")
.room(.75).sometimes(add(note(12))).clip(.3)
.lpa(.05).lpenv(-4).lpf(2000).lpq(8).ftype('24db')
all(x=>x.fft(4).scope({pos:0,smear:.95}))