Strudelにp5.jsを組み込むプロトタイプを作ってみた

2025/12/13

はじめに

この記事はProcessing Advent Calendar 2025 - Adventarの13日目の記事です。

昨日の記事はayatさんの記事です。日常の景色からインスピレーションを得て、どのように作品に昇華するのか、プロセスが書かれています。最初の写真から最後のアウトプットが生まれるのは一見驚きですが、順を追ってみていくとなるほどなぁと納得でした。アイデアの広げ方が参考になり、面白い記事です。ぜひご覧ください！

アイデアは日常の中にある - Continue(s)

この記事で書くこと

今回Strudelというライブコーディング環境に、p5.jsでのスケッチを描画するためのプロトタイプを作ってみた、という記事です。なぜやってみたいと思ったのか、どんなものをつくったのか、どんな過程でつくったのかについて書いていきます。

きっかけ

2024年10月、YCAMで開催された「YCAM Interlab Camp vol.5 ホモ・コーデンス—AI時代、人類はどう描くのか」にてハンズオンセッションを1つ担当させていただきました。このホモ・コーデンスの期間中に、同じくYCAMでライブコーディングイベント「Coding Discussion」が開催され、ここでライブ演奏を観ました。即興で生み出され、展開する圧巻の音楽と映像に自然と体が動く、楽しい時間でした。このライブが始まる前、たまたま近くにいらっしゃった出演者のHiroki Matsuiさんと観客エリアでお話しし、知り合います。

しばらくして2025年7月、Hiroki Matsuiさんが大田区のChannel for Rentでライブコーディング講座を開催されると知り、参加することにしました。ライブコーディングには以前から興味があったのですが、きっかけを掴めず実践する機会を逃していたので、嬉しいイベントでした。そこではライブコーディングで広く使われいる、Tidal Cyclesというライブコーディング環境を使った音楽制作を教えていただきました。基本から応用まで、初心者でも理解しやすく解説いただき、ちょっとしたパターンなら自分でも鳴らせるようになりました。丁寧に教えていただき、感謝です。

こうしてライブコーディングによる音楽演奏の一歩を踏み出したのですが、田所さんやmoistpeaceさんが実践されている、ビジュアルも音楽もまとめてライブ演奏することにもチャレンジしてみたいと思いました。ご覧になったことがない方のために、お二人のライブ演奏の動画をご紹介しておきます。

先ほどのライブコーディング講座でTidal Cyclesの他にStrudelというJavaScriptベースのライブコーディング環境があることを知りました。ブラウザですぐに試せて便利です。ちなみにTidal CyclesはHaskellというプログラミング言語をベースに作られています。音楽を演奏するだけでなく、Strudelには音の可視化に関する機能が充実していて、ビジュアルライブコーディングのためのツールであるHydraが組み込まれています。Strudelの中でHydraを使う方法は公式ドキュメントにまとまっています (https://strudel.cc/learn/hydra/) 。実際に触ってみて、Strudelで音楽を演奏するのと合わせて、ビジュアルもライブで演出するのにHydraはとてもいいマッチングだと感じました。

音楽を演奏しながら即興でビジュアルを変更するのは、Hydraが実用的と感じつつも、個人的にはビジュアル制作をする際にp5.jsに親しみが深いので、興味本位でStrudelとp5.jsを連携してみたいと思いました。どんな使用感になるのか気になり、まずは動くプロトタイプを作ってみようと思い立ち、実際に作ってみたものをこの記事にまとめたいと思います。

Strudelとp5.jsを組み合わせてビジュアルと音楽を両方演奏するプロトタイプを作ってみた

デモ動画

デモ演奏を撮ってみました。（もうちょっとかっこいい画と音が撮りたかった）

リポジトリ

strudelはかつてGitHubで開発されていましたが、現在はCodebergというGitリポジトリのホスティングサービスで共同開発されています。 https://codeberg.org/uzu/strudel

今回はこのリポジトリをフォークして、以下のブランチにコミットをプッシュしました。 https://codeberg.org/cabbage63/strudel/commit/3f1a33a34995b67551cfe451b2b84b24469df96f

以下のようにクローンして、開発サーバーを立ち上げれば試すことが可能です。

git clone https://codeberg.org/cabbage63/strudel.git
git checkout p5-integration
pnpm install
pnpm dev

使い方をClaude 4くんにまとめてもらいました。遊んでみたい方はこちらのドキュメントを見ながら動かしてみてください。 https://codeberg.org/cabbage63/strudel/src/commit/3f1a33a34995b67551cfe451b2b84b24469df96f/packages/p5-integration/docs/p5-integration-user-guide.ja.md

制作過程

先行事例の調査

Combining P5js with strudel · tidalcycles/strudel · Discussion #160 · GitHub

Strudelの旧リポジトリにあるこのIssueでは、p5.jsとstrudelを組み合わせて使いたいというリクエストが書かれています。それに対してメンテナーの方は、まだやったことがないと返答しつつも、「getDrawContextを使ってcanvas要素を取得できるよ」とヒントをくれています。今回のプロトタイプでは、strudelでデフォルトで持っているcanvas要素とは別にキャンバスを使って実装しましたが、参考になりました。

question: strudel + p5.js · tidalcycles/strudel · Discussion #376 · GitHub おなじくStrudelの旧リポジトリにあるDiscussionでも、p5.jsとstrudelを組み合わせて動かすにはどうしたらいいかが質問されています。先ほど同様、背景のcanvas要素ををgetDrawContextで取得して変更してみるのはどうかという提案のほか、onPaintメソッドという実験的なAPIを使って、音の発生イベントをもとに描画できるよというヒントが書かれていました。音のイベントをベースに描画するアイデアと、その実現可能性に、なんとかできるかもという気がしてきました。

色々他にも探してみましたが、実際に構築しているという情報は見つからず。作ってみることにします。

構想

上記のDiscussionにもあったように、Strudelから発される、音の発生を契機に描画するアプローチが扱いやすいかなと感じました。音の開始時刻と終了時刻をスケッチ側で受け取り描画時間を調整する、という風にできると音にハマった動きが作れそうです。onReceiveHapというイベントハンドラをスケッチに実装し、Strudel側からイベントを呼んでもらうことで連携することを想定しています。

実際に開発してみる

Strudelのコードをクローンしてきて、GitHub Copilotを使ってざっとリポジトリの内容を解説してもらいました。今回はとりあえず動くプロトタイプを手早く作ってみたかったので、かなりのボリュームのコードだったこともあり、完全に理解するのは一旦諦めました。安定性やメンテナンス性はさておき、スピード重視でGitHub CopilotでVibe Codingしていくことにしました。

まずは実現したいことを仕様としてまとめて、それをもとにAIにコードを書いていってもらいます。そのあとは動作確認と修正依頼、人力での手直しを何度も繰り返していきました。 AIの補助を受けながら作るものの、思ったように動かないこともしばしばで、それなりに苦労しました。まだAIを回すだけで開発しきるのは難しい…。正直なところ完全に理解できていない部分もあるのですが、一通り動くものができた時点で、明らかに余分なコードを削除するなどのリファクタリングをして開発を終了しました。

妥協したポイント

/* p5 */というコメントより上はstrudelのコードとして解釈し、それより下はp5.jsのスケッチとして解釈し、それぞれ別実行する作りとしました。せっかく同じエディタで開発するので、同じ変数を共有したりできると素敵だなと思い、試みましたが断念しました。調べてみたところ、Strudelはコードを実行する前にトランスパイラを噛ませており、例えば"bd sd bd sd"といった文字列をPatternというオブジェクトに変換する処理があるようでした。この実行環境でp5.jsのコードを実行しようとすると、console.log("hoge")を実行するにもエラーが起きてしまいます。その他にも、テンプレート文字列のバッククオートがエラーの原因など、そのまま扱いが難しい挙動がありました。なのでp5.jsのコードを意図するところだけこのトランスパイラをバイパスする処理が必要となるのかなと思います。

特にドキュメントなど、もう少し完成度をあげたかったポイントはあるのですが、Advent Calendarに間に合わせるため、諸々粗い状態で一旦プッシュしました。うまく動かないところがあるかもしれませんがご容赦ください！

おわりに

Strudelにp5.jsを統合して、同時に動かすためのプロトタイプをつくりました。なんとなくわかっていたような気がしますが、使ってみると、音楽を演奏しながらp5.jsでビジュアルのコードを書くのは忙しそうな感じでした。Hydraの使用感とと比べてAPIの粒度が細かく、画が出るまで時間がかかるので、ある程度雛形を仕込んでそれを変更するようなスタイルであれば運用できるかもしれないです。今年やってみたかったことが、年末にできてよかったです。

明日はchobishibaさんの記事です。お楽しみに！