暴カワでビデオシンセサイザーを導入する技術

ビジュアル演出概論 #001
https://peatix.com/event/4152074

Transcript

1. 暴カワで ビデオシンセサイザーを 導入する技術 yuchi 2024/10/18 ビジュアル演出概論 #001
2. 自己紹介 yuchi / Naoki Katahira ソフトウェアエンジニア(SRE) 主にECサイト構築サービスのインフラを見ている 趣味で様々なことをしている Link: yuchi.io Twitter(現X): @F_YUUCHI
3. 様々な趣味 • ハードウェア設計(自作キーボード等) • VJ • DJ • 配信(の機材)
4. VJ 配信DJイベント”The NAYA”を主催しているパイクサイスというチームでVJを やったりしている 個人宅の納屋にLEDテープを数百メートル施工し、業務用プロジェクターを入 れて演出を行っている
7. 本題
8. 暴カワでビデオシンセサイザーを導入した話 暴カワとは • 正式名:暴力的にカワイイ というイベント • 去年と今年はお台場で野外音楽フェスとして開催 • 昨年は4000人の来場者数 ビデオシンセサイザーとは • 音に合わせて映像を出してくれる装置(ざっくり) • あまり機種は多くない
9. 暴カワでビデオシンセサイザーを導入した話 • LanPageさんで使用したビデオシンセのプリセット作成をした • DJブースから gaburyuさんが操作をして映像を作っている ◦ ジェネ系VJをDJの人にやってもらった
10. 暴カワでビデオシンセサイザーを導入した話 • 具体的には写真の青い背景の箇所に出ているオブジェクトの映像
11. https://x.com/YACAINDAHOUSE/status/1843241756093276351/
12. 使用したビデオシンセサイザー Critter & Guitari社のEYESYという機種 • それぞれの映像モードを元に、音声入力、5つのノブ、1つのトリガーで映 像を作ることができる • 中身はRaspberry Pi Compute Module 3(組み込み版ラズパイ) • 出す映像のカスタマイズが可能でオリジナルの映像モードを作成可能 https://www.critterandguitari.com/eyesy
13. https://www.youtube.com/watch?v=xIxchxVhVI0
14. 使用したビデオシンセサイザー • Python2+pygameを使用してEYESYの映像生成機能が動いている • Pythonでオリジナルのモードを作成できる • マニュアルにも”5. EYESY のプログラミング ”として簡単な関数やAPIの 例が載っている ◦ https://umbrella-company.jp/manuals/critter_and_guitari_eyesy_manual.pdf https://www.critterandguitari.com/eyesy
15. ライブ使用しにくい問題点 • 問題点: HDMI出力がMASTERの1本しかない ◦ OSD(= On Screen Display)画面と呼ばれている機能でタイトル や、入力音量、現在の設定などを表示できる ◦ これらはMASTER出力に表示される • 音量ゲインが映像の動きと直結しているため、入力音量のメーターの確認 /調整が必須 →ライブ本番中に設定を確認しようとすると会場のLEDディスプレイにも出てし まう
16. https://www.critterandguitari.com/manual?m=EYESY_Manual
17. 今回の演出は EYESYの映像の上にフレームを重ねる表現をすることに なった →OSD画面を隠すスペースができる！！！
21. 結構はみ出てる
22. クロップする？
23. いいえ
24. OSD画面のカスタマイズ EYESYはモデル以外もシステムレベルでカスタマイズ可能&オープンソースで 公開されている https://github.com/critterandguitari/EYESY_OS • engines/python/osd.py にOSDの設定がpygameで書かれている ◦ すべてカスタマイズ可能
25. 例:音量メーター # input level pygame.draw.rect(screen, etc.BLACK, (20, 205, 220, 30)) mode_str = " Input Level:" text = font.render(mode_str, True, etc.WHITE, etc.BLACK) text_rect = text.get_rect() text_rect.x = 20 text_rect.centery = 220 screen.blit(text, text_rect) draw_vu_480(screen, etc, 115, 210) 1行目で背景の黒い長方形の 描画処理が書かれている • pygame.draw.rect: pygame を使って長方形を描画 • etc.BLACK: 色は黒 • 20: 左(x:0)からx:20 • 205: 上(y:0)からy:205 • 220: 長方形の幅x(px) • 30: 長方形の高さy(px)
28. うまく隠れた
29. 例:音量メーター # input level pygame.draw.rect(screen, etc.BLACK, (400, 20, 220, 30)) mode_str = " Input Level:" text = font.render(mode_str, True, etc.WHITE, etc.BLACK) text_rect = text.get_rect() text_rect.x = 400 text_rect.centery = 35 screen.blit(text, text_rect) draw_vu_480(screen, etc, 490, 25) 素朴に座標をずらす • pygame.draw.rect: pygame を使って長方形を描画 • etc.BLACK: 色は黒 • 400: 左(x:0)からx:400 • 20: 上(y:0)からy:20 • 220: 長方形の幅x(px) • 30: 長方形の高さy(px)
30. OSD画面のカスタマイズ もっとカスタマイズすれば、VUメーター以外を消したり、サイズを小さくしたり、 VUメーターのデザインも変えられる • 今回のように、上からフレームを被せない場合も、極力目立たないようなデザイン にカスタマイズ可能 ◦ 今回は開発時間の制約上座標を移動させるに留めました • かなりライブユースなビデオシンセにできる
31. 今回作成したモードについて LanPage 3名それぞれのイメージカラーや新曲の歌詞から着想を得て、1か ら作成したり、既存モデルのカスタマイズを行ったりしました
32. まとめと感想 • 一癖あるビデオシンセだったが、カスタマイズによってライ ブで十分使えるレベルに出来ることが分かった • オープンソース & システムレベルでカスタマイズできるの は最高 • ビデオシンセ(EYESY)を少しでもライブで使いたいと思った 人に参考になれば幸いです
33. ご清聴ありがとうございました