博報堂テクノロジーズ Advent Calendar 2025

Code as Creative Instrument: Strudel + Hydraではじめるライブコーディング

Last updated at 2025-12-16Posted at 2025-12-16

前日の記事では、生成 AI の普及によって最適化と均質化の波がきていることと、それに抗う 創造性 への志向の高まりについて触れつつ、今こそp5.js や GLSL などのクリエイティブコーディングが「自分の手で試行錯誤する感覚」を取り戻すために大事なのではないか、という記事を書かせてもらいました。

今日はその続きとして、クリエイティブなコーディングの意図を汲んで「手触りのある即興の場」を「音」と「映像」をコードでいじくり回せる ライブコーディング の世界を、プログラミング環境である Strudel と Hydra を通じて紹介していきたいと思います。

ライブコーディングとは

ライブコーディングは、ざっくりいうと「コードを書くこと自体をパフォーマンスにしてしまう」文化を指します。エディタにコードを書いている様子をモニタやプロジェクタで映しながら、音や映像をリアルタイムに変化させていきます。多くのライブコーディング環境では、編集したコードは即座に音や映像に反映され、ライブ中にどんどん書き換えていくことで、リズムや雰囲気に合わせたビジュアルの演出をしていきます。生成AIにありがちな「一発でそれっぽい完成物が返ってくる」世界とは異なり、ライブコーディングの醍醐味は「 リアルタイムのコーディングがもたらす音・映像の構築プロセス、偶然性 」にあります。

(Strudel を使ったパフォーマンス例: "Switch Angel"より)

実際にライブコーディングを行うイベント例としては、アルゴリズム性のサウンドを主体としたライブコミュニティであるAlgorave、「ジェネ系(VJ)」という文脈のオーディオビジュアルイベントであるdraw();などが知られています。

こうしたシーンで長年愛用され、パフォーマンスの中核を担ってきたのが、TidalCycles（Haskell製）や Sonic Pi（Rubyベース）といった「王道」のツールたちです。

これらは非常に表現力が高く、現在でもライブコーディングの代名詞的な存在ですが、実は「これから始めよう」とする初心者にとっては、少し高いハードルがありました。

それが、「環境構築」の壁です。

従来、これらのツールを動かすためには、PCに専用のプログラミング言語環境を入れたり、SuperCollider といったサウンドエンジン（音を合成するソフト）を別途インストールして連携させたりと、準備がかなり重厚でした。「コードで音を出してみたい」というモチベーションがあっても、細かなコマンド操作やエラー対応に追われ、肝心の演奏にたどり着く前に挫折してしまう……そんなケースも少なくなかったのです。

そこで近年、この流れを大きく変える存在として登場したのが、今回紹介する Strudel などの「ブラウザベース」の環境です。

Strudel : ブラウザで動く音楽ライブコーディング環境

Strudel（ストゥルーデル）¹は、ブラウザ上で動作するライブコーディング環境です。

最大のポイントは、先ほど紹介したライブコーディングの王道ツール 「TidalCycles」を、JavaScript ベースで忠実に再現（移植）している という点です。
TidalCycles が持つ「時間を周期（サイクル）で捉えてパターンを記述する」という独特かつ強力な思想や記法（"Mini Notation"と呼びます）をそのまま受け継ぎ、それを現代的な Web Audio API の技術で動かしています。

つまり、これまでは重厚な環境構築が必要だった「本格的なパターンコーディング」を、Chrome などのブラウザを開くだけで、誰でもすぐに体験できる形へと進化させたツールと言えます。

Strudel の主な特徴

完全ブラウザ完結： インストールや環境設定は一切不要。URLにアクセスするだけです。
TidalCycles の記法を継承： リズムや音程の複雑なパターンを、非常に短いコードで直感的に記述できます。
即時実行： コードを書き換えて Ctrl + Enter を押せば、音が途切れることなくスムーズに変化します。
豊富な音源と拡張性： 内蔵シンセやドラムサンプルですぐに音が鳴らせるほか、Web MIDI を使って外部機材を鳴らすことも可能です。
「URLで曲をシェア」： これが Web ならではの強みです。書いたコードがそのまま URL になるため、SNS などで自分の演奏を簡単に共有・再生してもらえます。

前回の記事で紹介した p5.js や GLSL が「コードで視覚パターンを描く」ものだとしたら、Strudel は「同じような手軽さで、コードで聴覚パターン（リズムやメロディ）を構築する」ためのツール、とイメージするとわかりやすいでしょう。

まずは触ってみる：Strudel の基本

起動して音を出すまで

ブラウザで https://strudel.cc/ を開く
右側にエディタ、左側にコンソール的なエリアがあるはずです
サンプルをロードするか、エディタにコードを書いて再生ボタンを押します

最もシンプルな例はこんな感じです。

s("bd sd bd sd")

s は「使うサンプルの名前（sound）」を並べる関数
"bd sd bd sd" は「バスドラ → スネア → バスドラ → スネア」という 4 つのステップ

再生すると、「ドン・タン・ドン・タン」というシンプルな 4 拍ループが鳴ります。

もう少しだけ複雑にしてみます。

s("bd*2 sd [bd bd sd]")

ここでは、

bd*2 : バスドラを 2 回鳴らす
[bd bd sd] : 3 つのイベントを 1 拍の中に詰め込む

このように、パターンを文字列で書くだけで、かなりいろいろなリズムバリエーションを作ることができるのです。

様々なパターンを作ろう

Strudel の面白いところは、「音を一個ずつ並べる」というよりも「ルールとパターンを組み合わせて遊ぶ」ところにあります。

例えば、

s("bd sd").fast(2)

.fast(2) でパターン全体のスピードを 2 倍にします

s("bd sd").slow(2)

.slow(2) で半分の速度にします

さらに、条件付きでサンプルを入れ替えるようなトランスフォームも書けます。

s("bd sd bd sd")
  .every(4, x => x.s("cp"))

every(4, ...) : 4 回に 1 回、パターンに変形を加える
x.s("cp") : そのときだけスネアをクラップに変える、のようなイメージ

ここまで来ると、もう「音符を手で打ち込む」というより、アルゴリズムでパターンを変形させ続ける感覚になってきます。AI が「一気に完成品を生成する」なら、Strudel は「ルールを少しずつ書き換えながら、変化を観察する」ツール、という対比ができます。

クリエイティブコーディングとの接続

前回の記事では p5.js や GLSL を使って、画面上で形や色をパターンとして扱う話をしました。

p5.js：キャンバス上のドローイングをループで変化させる
GLSL：シェーダでピクセル単位のパターン生成を行う

Strudel は、まさにそのパターンを音を通じて表現しています。

たとえば、こんな感じで対応させて考えるとイメージしやすいかもしれません。

p5.jsで：frameCount や sin を使って形をゆらす
Strudelで：fast, slow, ランダム系関数を使ってリズムをゆらす
GLSLで：座標や時間を使って模様を作る
Strudelで：ビート数や小節数を意識しながらパターンを変調する

そして、次に紹介するビジュアルライブコーディングの Hydra を足すと、「音」と「映像」の両方がパターンとしてつながっていきます。

前日の記事で扱っていた「画面上のかたちや色のパターン」を、そのままライブコーディングの文脈に持ち込むイメージです。

Hydra : ブラウザで動くビジュアルライブコーディング

ここまで「音のパターン」としての Strudel を見てきましたが、前日の記事で扱ったような「かたち・色・動き」といった 視覚パターン を取り入れるケースもあります。

Strudel同様、ブラウザベースで動くビジュアルライブコーディング環境の一つが、Hydra です。

アナログシンセのように、映像を「配線」するHydra の面白いところは、コードを書いているのに、まるで「昔のアナログビデオ機材をケーブルで繋いでいる」ような感覚で映像を作れる点です。
osc()（発振）や rotate()（回転）といった関数をドット . で数珠つなぎ（チェーン）にしていく記述スタイルは、映像信号を次々と加工して出力するモジュラーシンセの思想そのもの。これを WebGL (GLSL) の力でブラウザ上に再現しています。

Hydra の主な特徴

JavaScript ベースの親しみやすい文法： 基本は JS の構文ですが、関数を繋げていくだけで複雑なシェーダー（描画プログラム）が裏側で生成されるため、難しい数学の知識がなくても直感的に扱えます。
「フィードバック」による極彩色の表現： カメラ入力や前のフレームの映像を、次のフレームに混ぜ合わせる「フィードバック」表現が非常に得意です。これ一発で、サイケデリックで有機的な映像がすぐに作れます。
エディタと映像の一体化： コードを書く画面自体が背景の映像として重なって表示される UI が特徴的。演奏している様子（コード）と結果（映像）が完全に融合しています。
Strudel との相性も抜群： ブラウザのマイク入力を受け取れるので、Strudel で鳴らしている音に反応して映像を歪ませる、といった連携も簡単に実現できます。

p5.js や GLSL との違いは？
もし p5.js や素朴な GLSL に触れたことがあるなら、Hydra は 「それらをライブパフォーマンス（即興演奏）に特化させた環境」 とイメージすると分かりやすいでしょう。
「一から座標計算して絵を描く」というよりは、「映像信号を混ぜて、歪ませて、出力する」という VJ的な思考に特化したツールと言えます。

例えばこんなコードで、画面いっぱいに動くパターンを作れます：

osc(10, 0.1, 0.8)
  .kaleid(5)
  .color(1.0, 0.3, 0.8)
  .rotate(0.1, 0.02)
  .out()

この5行、シンプルですが Hydra の面白さがギュッと詰まっています。
やっていることは具体的にこんな感じです。

osc() で映像ソースを作り、
.kaleid() で万華鏡のように変形させ、
.color() や .rotate() で色や動きを加え、
最後に .out() で画面に出力する。

こうやって見ていくと、先ほど「アナログ機材の配線みたい」と言った意味が、よりリアルに感じられるのではないでしょうか？

難しい数学の公式を組み立てるというよりは、「ソース（素材）に対して、どんなエフェクト（効果）を繋いでいくか？」 を考え、メソッドをドット . で数珠つなぎにしていく。まさに、エフェクターやモジュールをケーブルで次々と繋いでいくような感覚でコーディングできるのが、Hydra 最大の魅力です。

Strudel + Hydra = アルゴリズミックな音と映像のコラボレーション

もともと Hydra は単体のツールとして提供されていますが、最近の Strudel では、この Hydra を そのまま Strudel の中で動かせる ようになっていて、ここがかなり画期的なポイントであると思っています。わざわざ別タブで Hydra を開いたり、オーディオルーティングを工夫したりしなくても、ひとつのエディタの中で「音」と「映像」の両方をライブコーディングできます。

`initHydra` で Hydra を有効化してみよう

Strudel のエディタの一番上に、次の 1 行を書きます。

await initHydra()

これだけで Hydra が初期化され、同じエディタ内で先ほどのような Hydra のコードを書けるようになります。

await initHydra()

// 映像パターン
osc(10, 0.1, 0.8)
  .kaleid(5)
  .color(1.0, 0.3, 0.8)
  .rotate(0.1, 0.02)
  .out()

// 音のパターン
s("bd sd bd sd")

ひとつの画面で「音」と「映像」が同時に動くので、ライブコーディングの入口としてもかなりとっつきやすくなります。

パターンを映像側にも渡す：`H` 関数

strudel には、Hydra 向けにパターンを受け渡すための特別な関数も用意されています。

await initHydra()

let pattern = "3 4 5 [6 7]*2"

// 映像パターン
shape(H(pattern)).out()

// 音のパターン
n(pattern).scale("A:minor").piano()

こうすると、「3, 4, 5, 6, 7...」という抽象的な数字の並びを、

映像側では図形パターンとして、音側ではメロディのパターンとして共有できます。

音に反応させる：detectAudio & feedStrudel

さらに没入感を高めたい場合は、音の信号そのものを使って映像を歪ませることも可能です。initHydra にオプションを渡すことで、高度な連携が実現します。

detectAudio: true
Strudel のオーディオ出力を Hydra 側で分析（FFT）できるようになります。キックが鳴った瞬間に画面を明滅させたり、低音の強さで図形を大きくしたりといった演出に使います。
feedStrudel
Strudel の標準ビジュアライザ（ピアノロールのような描画）を、Hydra の「入力素材」として受け取れます。楽譜そのものがグニャグニャに歪んで背景になる、といったメタな表現が可能です。

// 例：音声を分析できるように初期化
await initHydra({ detectAudio: true })

「ビートが激しくなると映像もカオスになる」「静かなパートでは映像もシンプルになる」。そんな、音と映像が有機的に絡み合うパフォーマンスを、たった一つのブラウザタブで実現できるのです。

まとめ：ライブコーディングを通じて「プロセス」を演奏する

最後に、なぜ今、あえてコードで音や映像を奏でるのか？という話で締めくくりたいと思います。

昨今の技術進化により、言葉で指示するだけで、完成された音楽や美しい映像を一瞬で生成できるようになりました。しかし、ライブコーディングが目指しているのは「完成品を得ること」だけではありません。

「構造を自分の手で組み上げ、リアルタイムに変化させること」。
このプロセスそのものを楽しむ点にこそ、最大の醍醐味があります。

Strudel： リズムや音色の定義を書き換え、その瞬間にビートが変化する快感
Hydra： 映像信号の流れ（配線）を繋ぎ変え、予期せぬノイズや色彩が生まれる驚き

どちらも、完成品をただ受け取るのではなく、「なぜその音になるのか？」「どうすれば映像が歪むのか？」という内部構造（ロジック）に直接触れながらパフォーマンスをします。

前日の記事で、「AI は出力後に選別する 事後評価的 な表現、クリエイティブコーディングは出力前に構造を組む 事前構築的 な表現」という話をしました。
Strudel + Hydra でのライブコーディングは、まさにこの「事前構築」をリアルタイムに行う行為です。ブラックボックスになりがちなデジタル表現の中身を、自分の手で解き明かしながら、その構造自体を揺さぶって遊ぶ。かつては重厚な環境構築が必要だったその体験が、今はブラウザを開くだけで、世界中の誰でもすぐに始められるようになったのが、近年のライブコーディングの進化ともいえます。

コードを書くエディタは、単なる作業画面ではなく、ピアノの鍵盤やギターの弦と同じ「楽器」になるのです。

ぜひ皆さんも、Strudel と Hydra という「新しい楽器」を手に取って、ロジックを演奏する楽しさを体験してみてください。ライブコーディング仲間が増えると嬉しいです…！

🎄おまけ🎄

最後に、クリスマスをテーマにひと作品！

リンク先の"Play"ボタンでコードが再生されます。音量にご注意！

（ピアノロールを縦に流して雪に見立てたつもりですが、聴いてもらった社員の感想からは「ノーツの流れ方が某音ゲーっぽい」との声も…）


await initHydra()

solid([128/255,73/255,47/255].smooth() .fast(0.2),[0,99/255,56/255].smooth().fast(0.2),[0,0,105/255].smooth().fast(0.2),1)
  .blend(o1)
  .out(o0)

shape([4,5,6].fast(0.1).smooth(1),0.000001,[0.2,0.7].smooth(1))
  .color(218/255,182/255,5/255)
  .scrollX(()=>Math.sin(time*0.27))
  .scrollY(()=>Math.sin(time*0.27))
  .modulateKaleid(shape(4,0.1,1))
  .modulateScale(osc(40,0,1).kaleid(8))
  .repeat(2,4)
  .out(o1)

setcpm(130/8)

$main : n(irand(28).sub(7).seg(14)).scale("g:major")
  .s("vibraphone_soft")
  .room(0.6)
  .delay(0.2)
  .lpf(500)
  .color("white")
  .pianoroll({vertical :true})

$bass : note("0")
  .scale("g:major")
  .transpose(-24)
  .s("sine")
  .lpf(200)
  .gain(0.8)

もともとはオーストリアを中心とした地域の伝統的な菓子の名前だそうです。https://ja.wikipedia.org/wiki/%E3%82%B7%E3%83%A5%E3%83%88%E3%82%A5%E3%83%AB%E3%83%BC%E3%83%87%E3%83%AB ↩

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up