冬ハッカソン17班「Flavorful Vision」~初心者が1週間でパフォーマンスをやり切る話

皆様、新年あけましておめでとうございます。紅白聞きながら通話作業してたら年越してました、o_ER4ことオイルフです。
どうやら2026年最初のブログらしいので改めて、今年もよろしくお願いいたします。

先日traPでは部内冬ハッカソンが実施されました。今回自分のチームは映像のライブパフォーマンスを行ったところ、無事技術賞をいただいたので、紹介していこうと思います。

作品紹介

ざっくりいうとリアルタイム生成(いわゆるジェネ系)、インタラクションを組み込んだ映像作品を作りました。いわゆるVJみたいなパフォーマンスを行っています。
以下は発表に用いた映像の一部です。
基本的にこれらの映像素材、リアルタイム生成による映像を私物のmidiコン(korg nanokontrol2)で切り替えながら、随時エフェクトをmidiコンのボタンや自作ハードウェアによって加えるような構成になっています。

構成は以下のようになっています。

プリレンダリングによる映像制作は(特に指示してないのに)大体Blenderで書き出されてて、introパートだけAviutlだったらしいです。
で、本来はVJのような運用をするために、サウンドについてもDJと同時にやりたかったのですが、機材持ってないし、さすがに1週間でDJやりながらTouch Designerでリアルタイムでの映像操作を行うのは無理があったので、サウンド担当のvPhosに事前に完成した曲を書き出してもらって、それをTouch Designerのプロジェクトファイルに読み込んで音声の同期、再生も行う、という構成にしました。

発表日ダイジェスト

0:00 オイルフ、大学近隣の宿で作業を始める。
2:00頃 vPhosが曲の埋まってなかった部分を何とか書いてくれたので現状確認をhelgevさんと行う。リズムの関係で新たにエフェクトが必要になることに気づく。
3:00頃 helgevさんがエフェクトを作ってくれた、ありがとうございます。
4:00頃 vPhosが曲を完成、悲しみのミキシングを行う。o_ER4、曲を聴きながらエフェクトの当てはめをどうするか試行錯誤する。
5:00頃風呂入ってないことに気づき、風呂入ったのち仮眠をとる。
7:00頃おなかが減ったので大学に向かう。大岡山付近のマクドナルドで朝食をとる。
9:00 発表用の会場である滝プラザが開場、プレゼンの資料を組みながら練習。
15:00頃自分の班の発表が回ってくる。なんか映像がうまく流れず、音声が再生されなくて焦る。
17:00頃 traPの配信用機材で確認する。その結果HueterのPCだと普通に音声再生できたのでo_ER4のPCが悪さしてそうなことが発覚する。
17:30 データをHueterのPCに移し替えて試遊会でパフォーマンスする。結構みんな曲に乗ってくれてうれしかった。

ピックアップする技術

Touch Designer

traPであんまり使われていないであろうツールです。一応wikiだとこういう紹介がなされています。

TouchDesigner is a node-based visual programming language for real-time interactive multimedia content.

要は複数のnodeをつなぎ合わせることで映像にいろいろエフェクトをかけたり流す映像を切り替えて再生することができます。
今回の企画のもととなったVJだと、特にジェネ系のVJのツールで用いられる機会が多かったりします。
実際先ほど載せた映像の一部のうち以下のほうはTouch DesignerでAudio の波形をフーリエ変換してスペクトラムにしたものをいい感じに表示しています。

また、Midiコンで制御するためのエフェクトは以下のようにComposite用のcomponent内にまとめています。

一例として実装したエフェクトの一部を紹介します。

これは映像を長方形に分割して改めてRGBを適用することで実装した8bit風にするエフェクトです。chiptuneを採用したくなった時に結構役に立ちました。問題はinstancingが雑なので元の形状から歪みが生じていることです。

色変換を行うエフェクトです。ほかにもモノクロにするやつ、過去のframeから計算するやつ、色収差を再現するエフェクトなども作成しています。結構曲の場面変化で便利だったと思います。

また、今回の開発はTouch Designerを触っていたのがo_ER4、helgev、Hueterの３人なのですが、Touch Designerは複数人で編集することが想定されておらず、ゲーム、webのようにgitで管理して即解決、というわけにいきません。
そこで今回は開発前にnodeの構成の大枠を決めておくとともに、特にTouch Designerに専念するo_ER4、helgevの間でのファイルのやり取りはTouch Designerのcomponentファイルであるtoxファイルでのやり取りに制限することで、コンフリクトが生じないようにしていました。
しかし、componentの入出力のOPが増加するほどnodeをつなぎこむ候補が増えて混乱する場面が多かったり、そもそもジェネと映像管理を同列に持ってくるべきではなかったりと、初心者がやった結果いろいろな弊害が起きてしまいました...。

nodeの大雑把な構成　projectのルートにはコンポーネントを配置することで可能な限り編集しなくて済むようにしている

Hardware

概要

使用した主な電子部品は秋月で買ったBNO055使用9軸センサーフュージョンモジュールキットとESP32-WROOM-32E開発ボードの二つです。BNO055でデバイスの加速度と姿勢を読み取り、それをESP32を経由し有線のSerial通信でTouchDesignerに伝達するというのが大まかな流れです。

プログラム

マイコン側で主に行ったことは座標変換です。BNO055で得られる情報はBNO055基準の座標系の値のため、TouchDesignerにわかりやすいように私たちのいるグローバル座標系へと加速度を変換していました。
BNO055では姿勢をオイラー角で取得できるため、そこから回転行列を生成し加速度ベクトルをかけることで座標変換を行いました。

ただ、調べているうちに回転の計算をするだけならクォータニオンを用いる方が楽かもと気づきました。まあ、気づくの遅かったので変更するのが間に合わなかったのですが...
これは単純に僕の知識不足ですね。
ref : Quaternionによる3次元の回転変換　等

TouchDesignerとのSerial通信に関しては、はじめはセンサを動かした際の応答が遅く、0.4秒ほど遅れてエフェクトがかかるという状態でした。しかし、Serial通信の通信速度を上げたらこの問題はすぐ解決しました。私が使っていたPlatformIOという開発環境においては通信速度が9600でないとうまく表示されたいためこの値を用いていましたが、TouchDesigner側で設定する通信速度が同じであれば9600以上でも認識するとわかったため最終的に115200としました。

参考までに使用したプログラムの全体を載せておきます
github Hueter57/h25w_17_esp32

機械・回路

手に装着デバイスということだったので、有線ではなくマイコン同士やPCへ直接無線でつなげないかと思ったことはありましたが、事前調査が間に合わず、確実に出来る有線接続で作製をしました。

回路に関して、BNO055とともに入っていたマニュアルではマイコンと直接つないでいいとありましたが、それだと値がうまく読み取れない時がありました。これはSDA、SCLピンでプルアップ抵抗を挟むことで解決しました。私の場合だとSDA、SCLのどちらにも10kΩでプルアップすることでうまくいきましたが、基板の個体差があるようなので使う際はいくつかの抵抗値を試してみるといいです。
あとマニュアルでは電源を5Vで取ってますが3.3Vでないと動きませんでした。
マニュアルとは...

外側の作成に関して、使用用途を考えると激しく動かしても吹っ飛ばずにしっかり固定できるように、と考えた結果一部を手で握るようにする方が安全かという考えに至りました。そこでぼんやりと思い浮かんだのが戦隊シリーズや仮面ライダーの変身アイテムにこのようなものあったような...と思い探したら、よさそうなものを発見。キョウリュウゴールドの変身アイテム。ということで形はほぼそれをパクりました。

ちなみに設計ミスにより給電・通信用のUSBの口と外側の穴の位置を間違えたため、わざわざあけてある穴を使わないという結果に。そのせいで元々つけようとした本体の蓋を取りけられないことに、まあ、これはご愛敬ということで...

Sound

特に大した技術は使ってないですが、o_ER4に書けって言われたので少し書きます。

基本情報

BPMは160、KeyはFm→Gm、ジャンルはFull Flavorです。
使用したDAWはFl Studioです。

0:00~0:06

リファレンスはSakuzyo - Destr0yer (feat. Nikki Simmons)です。

謎の声は「System Booting……Completed. Let's Start.」っていってるのですが、Resonatorのかけ過ぎで何言ってるかわかんないです。雰囲気出てるのでヨシ！

0:06~0:18

無意識に参考にしてそうだったのはAlkome - Mind Disorderです。とはいってもありがちな始まり方なのでこれ！って感じのリファレンスはないかもしれない。

やっぱド派手に始めたいよなあという気持ちで作りました。

0:18~0:30

普通にビルドアップしてるだけなので、特に書くことがない……。
ですが、これからの展開を挟んでるのは面白くできたなと思います。~~音量調整終わり散らかしてるけど。~~

0:30~0:54

普通のTranceのビルドアップです。特に書くことがない2。
溜めてる感じがあって、好きです。

0:54~1:18

Hi-tech Full Onです。リファレンスは一応Mameyudoufu - SOBOKですが、あんまり似ていません、真似できない！自分自身音作りが得意でないのと好み的な問題で、最近の複雑なやつではなくて、Ultra Hitech 04に近いニュアンスで作りました。それはそれとしてあんまり上手くはないかな……。

後半のリズム崩すの好きです。

1:18~1:24

繋ぎで困ったから無理やり入れた感じ。手抜き感あるかも。

1:24~1:48

Kawaii感じのFuture Bass → Jersey Club。王道ですね。なんか典型的なKawaii Future Bass!って感じで作ってるので、明確なリファレンスはない気がする……。

traPでボーカルチョップ使う人少ないので、このチュートリアルでも見て増えてほしいな〜の気持ちがあります。こっちのチュートリアルもアリだと思います、私はあんまりやらないですが……。

1:48~2:15

DnB & Colour DnBです。リファレンスはRareno - Misson Controlです。例によって例のごとくそんなに似てないです。

Cyberpunkで使われるようなBassを主軸に、ところどころKYMOGRAPHのEnchant Serum Presets 1,2を用いてます。
このツイートを見て買うのを決めました：
https://x.com/Kagetora0610/status/2002199416472821787?s=20
Hitechパートにはほぼ使ってません。（なんで）
やっぱPresetには頼ったほうがいいですね、巨人の肩に乗りましょう！

ColourパートにはBFのセールで15ドルだったChromaを使いました。もうちょっとColourの音は練習したいなと感じました。vPhosの次回作にご期待ください。

2:15~2:27

今回で一番の手抜きパート。極端に音数少ない方がVJ的に面白いのでは？みたいな気持ちになったと言い訳しておきます。

2:27~2:39

マジで普通のビルドアップです。Dropで使うシンセをPluckにするの好き。

2:39~2:51

普通のTrance……というよりはHyper Tranceにしたかった。（なってるかは不明。）まああまり変わらないという説があります。

自画自賛すると、かなり出来が良いと思ってます。EchoBoy Jr.配布ありがとう。

2:51~2:54

Pixel系のエフェクトかけたいよねって話だったので、無理やりChiptuneを入れました。

出来はいいけどもうちょっと音に乗ってたいな〜って気持ちがあります。私がクラブの客だったら少しキレる。

2:54~3:03

Hardstyleに近いなにかです。全音上に転調もしました。実は転調は人生初。

Free Euphoric Hardstyle Kick by K3ntoを使ってます。このサンプルの最低音がD#だったのでそれに合わせて泣く泣く転調しました。曲全体のKeyを変えろよという異論は受け付けません。かなりの突貫工事だったので、クオリティは低いです。ちゃんとHardstyle作れるようになりたいよ〜。

3:03~

自称Speedcoreのヤケクソです。終わらせ方はAiobahn +81 feat. KOTOKO - INTERNET YAMEROに近そう。

Kick作る能力がないのでHardstyleのKickを流用してます。やめましょう。

おまけ

予定ではDubstepやPsytranceを入れたり、もっと硬派なDnBを入れるつもりでしたが、時間がないので消えました。技術的制約さえなければBPM変えてもおもしろそうだったなと思いました。（おそらく時間足りないですが……。）

メンバー紹介&コメント

てことでメンバーの紹介です。

o_ER4

オイルフです。この企画の発起人です。Touch Designerのエフェクト製作、ジェネ部分の一部の制作、全体構成の設計、当日のパフォーマンス、諸々の意思決定などを担当しました。
部内のハッカソンでリーダーをするのは実は初めてで、特にtraPであまり手がついてないことをやろうと初めから決めてて、で普段BlenderをはじめとするCGだったりshader触ってて最近VJに興味があった、ということでどんなツール使えばいいんだろうな～といろいろ調べていたらTouch Designerに出会い、そして外部のイベントに首突っ込んでると、Arduino経由で自作コントローラーの出力をTouch Desigerにかけてる人がいて面白そうだったのでやることにした、という感じです。
基本的に細かい部分はかなりメンバーにぶん投げてたのでマネジメントをちゃんとやってはいなかったですが、そのおかげでAudio reactiveやジェネの勉強、エフェクト自作に時間をかけることができたんじゃないかと思います。
個人的にはPrimitiveなmesh、instanceでも結構見せ方工夫すれば割と中毒性のあるモーションを演出できることが分かったのが最大の収穫だったと思います。
一方で設計をかなり失敗したのが反省点ですね...。
正直この企画を考えてた時点で多分ある程度実装出来たら賞はもらえるやろと思ってた節があって、その元でちゃんと当日ぎりっぎり試遊会で動いたことに安堵しています。
こんなよくわからない企画のためにスカウトに快く応じてくださったメンバーの皆様、改めてありがとうございます！！

helgev

helgevです。TouchDesignerをこねくり回してました。
センサとの繋ぎ込みとか全体のアーキテクチャは:@o_ER4:が整えてくれたので、僕はエフェクト作ったりジオメトリをこねくり回したり、3Dで数学を利用してジェネやったりしました。
TouchDesignerは初めてだったんですが、Gemini駆動進捗しようとして8割ぐらいの確率で出るハルシネーションと闘いながらドキュメントとにらめっこしていました。(TouchDesignerのPython、ややこしくないですか、、、？)

Hueter

デバイス作製、TouchDesignerへの接続を担当したHueterです。今まではゲーム制作やWebのバックエンドなどプログラマーとしてハッカソンに参加していましたが、今回は全く違う分野での参加となりました。もともと兼サー先で1人での電子工作をしており、リーダーのo_ER4がエフェクト用の入力機器を作れる人がいたらうれしいと人を探していたので軽い気持ちで参加してみたというところです。
ハッカソンという短い期間でデバイスを作製するということと、初めて触るTouchDesignerに少し苦しめられましたが、今までよりは比較的のびのびと製作を楽しめた気がします。まだまだやってみたかったことは浮かんでいましたがそれは今後の趣味製作に生かそうと思います。
基本一人で作業していたため、発表時に全体を見た際は映像と曲の完成度にとても驚かされました。班員には感謝の気持ちでいっぱいです。

vPhos

作曲担当のvPhosです。元々音ゲー曲のような展開の多い曲が好きで、やることを聞いたときからどれだけいっぱい詰め込もうか考え込んでました。実際に色々詰め込んだ曲を作ることができたのでとても良かったです。
本番映像も非常に素晴らしく、作ってよかったなと感じました。メンバーの皆さんには頭が上がりません！ありがとうございました！

hijoushiki

映像担当のhijoushikiです。元々は今年のハッカソンは参加を見送るつもりでいたのですが、参加締め切り手前でオイルフにスカウトされ急遽参戦することになりました。ここ最近のハッカソンは全部リーダーをやっていただけに、平社員としての参戦は久しぶりで結構新鮮でしたね。
今回はとにかく要求された映像を作って納品することに徹していました。これまでのハッカソンが激務だっただけに、今回は結構リラックスして映像制作ができて良かったです。その映像もそこそこのものが作れたんじゃないかなぁ。お疲れ様でした。

Charararu

映像担当のCharararuです。気がついたらおつよい先輩ばかりのグループに放り込まれていて、内心ついていけるかとっても不安でした…。タスクとしては映像を作るだけだったのでなんとかなってよかったです。
制作では普段使い慣れているblenderを使用したのですが、特にシェーダーや苦手なジオメトリノードについて、今回さらに大きく成長することができたと感じています！VJ分野はまだ触れ始めたばかりだったので、どちらかといえば映像のアイデア出しに苦戦しました(笑)。
最終日に成果物を見た時は、完成度の高さにものすごく感動したのを覚えています！二週間、お疲れ様でした。そして、ありがとうございました！

さいごに

冬ハッカソンで個人的に「あまりtraPでやられていない技術的、演出的要素を加える」ことはやってみたかったので今回リアルタイムパフォーマンスという形で実施できてよかったです。僕(含むメンバーの半数強)は学部三年で来年から研究室に配属される関係で、少なくとも自分はどうしても来年から集団での開発機会を今ほど担保するのは難しくなってしまいますが、それでもこのような短期的な開発のイベントに出て面白そうなネタを追求することは大学卒業、もしくはそれ以降も続けていきたいです。
ここまで記事をご覧いただき、ありがとうございました！！！