PopBeatz

TouchDesigner + React Audio-Visual System

TouchDesigner Disconnected

Setup Instructions

  1. Open TouchDesigner
  2. Run the setup script: exec(open('scripts/td_setup.py').read())
  3. The WebSocket server will start automatically on port 9999
  4. This page will connect automatically when the server is running

🎵 Particle Karaoke→

Interactive audio-reactive particle system with hand gesture control and karaoke lyrics

🎬 Video Analysis→

Real-time person segmentation and hand keypoint tracking for choreography analysis

Disconnected
Video Analysis + User Pose Tracking

Video Analysis

Aespa "Dirty Work" Segment (249-259s)
Bass Beat
0.00
Mid Beat
0.00
High Beat
0.00

Your Pose Input

Live Pose Tracking
Pose Detection
No pose detected

Real-time Effect Combination

Audio + Pose → TouchDesigner Effects
Beat-driven particles influenced by your pose movements

YouTube URL

Playback

Effects

Audio Parameters

1.0
1.0
1.0
Not connected - Start TouchDesigner WebSocket server

How to Use

1. Setup TouchDesigner

  • Open TouchDesigner
  • Navigate to your popbeatz folder
  • Run: exec(open('scripts/td_setup.py').read())
  • WebSocket server starts automatically

2. Process Videos

  • Paste YouTube URL in the input field
  • Click Download (uses yt-dlp)
  • Video/audio loads into TouchDesigner
  • Use controls to play and adjust effects

3. Effects & Audio

  • Toggle particles, glow, and trail effects
  • Adjust bass, mid, treble multipliers
  • All changes update TouchDesigner in real-time
  • 60fps pose tracking (when enabled)

4. Future Features

  • WebRTC/NDI streaming from TD to browser
  • MediaPipe pose tracking integration
  • Hand gesture controls from browser
  • Export processed videos