Live Coding やってみた

Transcript

1. Live Coding やってみた (React Three Fiber - custom shader のお話) JAWS-UG浜松 + Hamamatsu.js 202504
2. 自己紹介 YM053/ miyama_053 浜松の製造会社でソフトウェアエンジニア C++ / Python /TypeScript など触っています。
3. Live Coding
4. Live Coding - リアルタイムでプログラムを記述しながら 音楽やビジュアルエフェクトを演出するパフォーマンスです。 - 書いたコードが即座に音楽や映像として反映される。 プログラムがステージ上で「見える」のが特徴。 - 演者が即興でコードを書き(演奏)、 観客が踊るというパフォーマンスが繰り広げられる。 (Algorave（Algorithm + Rave)と呼ばれている。)
5. コーディング のインプロヴィゼーション - Live Coding はしばしば「ジャズ」に例えられる。 (演奏の計画 (chord 進行) はある程度あっても、実際の流れはその場のノリで決まる) - その場の雰囲気、他の演奏者、オーディエンスの反応に応じて 演奏 (コーディング)する。 失敗も魅力の一つ。 - 他者との即興セッションも可能。 - コードは変化し続ける。"完成"はない。
6. モチベーション - 年末の Unagi Py の懇親会で Live Coding の話が盛り上がったため。 - 別件で、昨年あたりから少し Three.js を触っていて、 Live Coding で使えそうだなと思ったため。
7. Live Coding で 使われるツール 以下がメジャーなツールらしい。 - Tidal Cycles (Haskell) - Sonic Pi (Ruby) - FoxDot (Python)
8. 各種イベント https://www.youtube.com/watch?v=jLmD0oJkqOk&list=RDjLmD0oJkqOk&start_radio=1 https://www.youtube.com/watch?v=7qfCeIgtllY https://www.youtube.com/watch?v=Tjf-NJNfOP4
9. 今日はコイツ ついてご紹介。 今回、　 音楽演奏: FoxDot (Python) 映像演出: React Three Fiber (Typescript) をトライしてみた。 今日は FoxDot ついては省略。 (また別の機会 (Unagi.Py) などで。）
10. FoxDot (LiveCoding (演奏)) SuperCollider (音源 (Synth)) システム構成 Web Browser (Three React Fiber) (映像演出) OSC (Open Sound Control) WebMIDI MIDI pythonのプログラムに応じて メッセージ送信 音声に応じて メッセージ送信
11. React Three Fiber
12. React Three Fiber https://r3f.docs.pmnd.rs/getting-started/introduction https://github.com/pmndrs/react-three-fiber Three.js と React を統合するためのライブラリ (Three.js は 3D graphics を browser 上で描画するための JavaScript Library)
13. const Box = (props: ThreeElements['mesh']) => { const meshRef = useRef<THREE.Mesh>(null!) const [hovered, setHover] = useState(false) const [active, setActive] = useState(false) useFrame((state, delta) => { return (meshRef.current.rotation.x += delta) }) return ( <mesh {...props} ref={meshRef} scale={active ? 3 : 1.5} onClick={(event) => setActive(!active)} onPointerOver={(event) => setHover(true)} onPointerOut={(event) => setHover(false)}> <boxGeometry args={[1, 1, 1]} /> <meshStandardMaterial color={hovered ? 'hotpink' : '#2f74c0'} /> </mesh> ) }
14. シェーダー組み込み - React Three Fiber (Three.js) では、 カスタムの shader (GLSL) を組み込むことが可能。 - Javascript だけでは難しいアニメーション制御可能。 - GPU 上で演算が可能。 (大量の particle を使った effect などが実現できる。)
15. 組み込み方法 - (Three.js で用意されている 既存の material に) default で 組み込まれている shader の一部を書き換えて使用する。 - 完全にカスタムな shader を作成することも可能。 * 初回 render の時に WebGL -> GPU driver に渡って、 compile (GPU driver) -> GPU に転送 されているっぽい? (Three.js manual を見た感じ。)
16. const RippleMaterial = shaderMaterial ( { uTime: 0, uOpacity: 0, }, // Vertex Shader ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, // Fragment Shader ` varying vec2 vUv; uniform float uTime; uniform float uOpacity; void main() { vec2 center = vec2(0.5, 0.5); float dist = distance(vUv, center); float rippleRadius = mod(uTime * 0.4, 1.0); float thickness = 0.02; float ripple = smoothstep(thickness, 0.0, abs(dist - rippleRadius)); float fade = smoothstep(0.7, 0.0, dist); vec3 innerColor = vec3(0.2, 0.4, 1.0); vec3 midColor = vec3(0.6, 0.3, 0.9); vec3 outerColor = vec3(1.0);
17. デモ
18. まとめ - Live Coding 実際やってみると面白いけど、結構ムズイ。 (セッションできるまで、まだ道のりは長そうだな。。。) - マシンスペック要求される。 - React Three Fiber (Three.js) 結構遊べる。 (もう少しシェーダー(GLSL)を勉強してみよう。)
19. ご清聴ありがとうございました。