Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
暴カワでビデオシンセサイザーを導入する技術
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Naoki Katahira
October 18, 2024
Technology
1.3k
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
暴カワでビデオシンセサイザーを導入する技術
ビジュアル演出概論 #001
https://peatix.com/event/4152074
Naoki Katahira
October 18, 2024
More Decks by Naoki Katahira
See All by Naoki Katahira
Hakodate in Real-Time CG: Building a GML Converter and Live Visual Performance
yuchi
1
100
SREが考えるハイブリッド開催の技術イベントのライブ配信における信頼性
yuchi
2
3.6k
The Naya Vol.5を開催するための映像技術
yuchi
2
120
How to Start RP2040
yuchi
0
1.7k
Other Decks in Technology
See All in Technology
【ゲームメーカーズスクランブル2026】『Shadowverse: Worlds Beyond』UIとアニメーションで実現する最高のユーザー体験を叶えるプロトタイピング
cygames
PRO
1
700
AI coding 整合正規方法
philipz
0
570
Meet AgentCore Identity Consent Portal
hironobuiga
2
120
【データ横丁主催】AI Agentがコンテキストを使って仕事をした後、何が残るのか― 組織の経験を次の判断に引き継ぐ「Agent Memory」
shisyu_gaku
2
260
PQC移行の今 -- IETF からみた現在地
satokan
4
650
1人アドミンな私はAWSアカウント申請をSlackで完結したい!
ysuzuki
0
100
React Nativeでの OTA Updateって、 どう説明する?
ichiki1023
0
110
顧客の成果創出とプロダクトの成長を 両立するためのFDE
sansantech
PRO
0
490
KanaAI
shreyas1009
0
120
企業の現実世界をグラフで写し取る
sansantech
PRO
0
200
データ品質を壊しながらSnowflakeのAIに分析させてみた
kawanago
0
300
BedrockとLambdaで作る リアルタイム進行型推理ゲーム
kawametho
0
110
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.3k
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
960
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Pragmatic Product Professional
lauravandoore
37
7.5k
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
56k
Embracing the Ebb and Flow
colly
88
5.2k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
850
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
20k
Stop Working from a Prison Cell
hatefulcrawdad
274
21k
HDC tutorial
michielstock
2
920
Building Applications with DynamoDB
mza
96
7.2k
Transcript
暴カワで ビデオシンセサイザーを 導入する技術 yuchi 2024/10/18 ビジュアル演出概論 #001
自己紹介 yuchi / Naoki Katahira ソフトウェアエンジニア(SRE) 主にECサイト構築サービスのインフラを見ている 趣味で様々なことをしている Link: yuchi.io
Twitter(現X): @F_YUUCHI
様々な趣味 • ハードウェア設計(自作キーボード等) • VJ • DJ • 配信(の機材)
VJ 配信DJイベント”The NAYA”を主催しているパイクサイスというチームでVJを やったりしている 個人宅の納屋にLEDテープを数百メートル施工し、業務用プロジェクターを入 れて演出を行っている
None
None
本題
暴カワでビデオシンセサイザーを導入した話 暴カワとは • 正式名:暴力的にカワイイ というイベント • 去年と今年はお台場で野外音楽フェスとして開催 • 昨年は4000人の来場者数 ビデオシンセサイザーとは
• 音に合わせて映像を出してくれる装置(ざっくり) • あまり機種は多くない
暴カワでビデオシンセサイザーを導入した話 • LanPageさんで使用したビデオシンセのプリセット作成をした • DJブースから gaburyuさんが操作をして映像を作っている ◦ ジェネ系VJをDJの人にやってもらった
暴カワでビデオシンセサイザーを導入した話 • 具体的には写真の青い背景の箇所に出ているオブジェクトの映像
https://x.com/YACAINDAHOUSE/status/1843241756093276351/
使用したビデオシンセサイザー Critter & Guitari社のEYESYという機種 • それぞれの映像モードを元に、音声入力、5つのノブ、1つのトリガーで映 像を作ることができる • 中身はRaspberry Pi
Compute Module 3(組み込み版ラズパイ) • 出す映像のカスタマイズが可能でオリジナルの映像モードを作成可能 https://www.critterandguitari.com/eyesy
https://www.youtube.com/watch?v=xIxchxVhVI0
使用したビデオシンセサイザー • Python2+pygameを使用してEYESYの映像生成機能が動いている • Pythonでオリジナルのモードを作成できる • マニュアルにも”5. EYESY のプログラミング ”として簡単な関数やAPIの
例が載っている ◦ https://umbrella-company.jp/manuals/critter_and_guitari_eyesy_manual.pdf https://www.critterandguitari.com/eyesy
ライブ使用しにくい問題点 • 問題点: HDMI出力がMASTERの1本しかない ◦ OSD(= On Screen Display)画面と呼ばれている機能でタイトル や、入力音量、現在の設定などを表示できる
◦ これらはMASTER出力に表示される • 音量ゲインが映像の動きと直結しているため、入力音量のメーターの確認 /調整が必須 →ライブ本番中に設定を確認しようとすると会場のLEDディスプレイにも出てし まう
https://www.critterandguitari.com/manual?m=EYESY_Manual
今回の演出は EYESYの映像の上にフレームを重ねる表現をすることに なった →OSD画面を隠すスペースができる!!!
None
None
None
結構はみ出てる
クロップする?
いいえ
OSD画面のカスタマイズ EYESYはモデル以外もシステムレベルでカスタマイズ可能&オープンソースで 公開されている https://github.com/critterandguitari/EYESY_OS • engines/python/osd.py にOSDの設定がpygameで書かれている ◦ すべてカスタマイズ可能
例:音量メーター # 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)
None
None
うまく隠れた
例:音量メーター # 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)
OSD画面のカスタマイズ もっとカスタマイズすれば、VUメーター以外を消したり、サイズを小さくしたり、 VUメーターのデザインも変えられる • 今回のように、上からフレームを被せない場合も、極力目立たないようなデザイン にカスタマイズ可能 ◦ 今回は開発時間の制約上座標を移動させるに留めました • かなりライブユースなビデオシンセにできる
今回作成したモードについて LanPage 3名それぞれのイメージカラーや新曲の歌詞から着想を得て、1か ら作成したり、既存モデルのカスタマイズを行ったりしました
まとめと感想 • 一癖あるビデオシンセだったが、カスタマイズによってライ ブで十分使えるレベルに出来ることが分かった • オープンソース & システムレベルでカスタマイズできるの は最高 •
ビデオシンセ(EYESY)を少しでもライブで使いたいと思った 人に参考になれば幸いです
ご清聴ありがとうございました