Interactive installations thrive when the barrier to entry is low. To engage audiences effectively, we need robust methods for connecting personal mobile devices to large-scale generative visual environments.
MultiplayerServer_TD, an open-source template designed to turn standard mobile browsers into responsive controllers for TouchDesigner projects.
The Architecture: Simplified Networking
Building a reliable networking bridge between web clients and TouchDesigner often requires complex socket management. This template removes that overhead with a production-ready stack:
-
The Controller: Browser-based interface for mobile devices (no app installation required).
-
The Engine: Node.js/Express and Socket.io server to handle state synchronization and input batching.
-
The Display: Direct integration with TouchDesigner for real-time control of visual parameters.
Key Technical Features
-
Real-time Synchronization: Socket.io-based communication ensures minimal latency between input and output.
-
Persistence & Stats: Built-in SQLite support for tracking daily and all-time high scores.
-
Flexible Deployment: Includes Docker containerization for reliable on-site setup and deployment.
-
Modular API: REST endpoints for player management, session tracking, and image uploads.
This setup allows creators to shift their focus from the fragility of network connections to the aesthetics of the generative art itself. By using standardized web protocols, it ensures your installation is accessible and scalable for diverse environments.
Case Study: CNE Kiosk Station (Generative Multiplayer Architecture)
The system was deployed as a high-traffic kiosk station at the Canadian National Exhibition (CNE) in Toronto.
-
Physical-to-Digital Input Pipeline: The installation featured a physical scan station where participants created hand-drawn sketches. After scanning, users selected an alien class via the station interface. The system generated a unique QR code, allowing users to instantly gain real-time control of their character on the 7-meter LED wall.
-
Generative AI Asset Integration: Upon ingestion, an AI-driven backend processed the raw physical sketches, converting them into high-quality, 2.5D-ready game characters that maintained visual consistency with the project’s aesthetic.
-
Contextual Environment: These AI-generated characters were instantiated into a generative city environment, procedurally styled to reference iconic Toronto landmarks. The system acted as a real-time bridge, mapping mobile-based directional inputs to environmental parameters within the scene.
-
Performance & Metrics:
-
Scale: Over 7,000 unique asset generation cycles were processed throughout the event.
-
Concurrency: The Node.js/Express and Socket.io stack managed concurrent inputs across the exhibition duration without frame-rate degradation or synchronization drift.
-
Deployment: The entire engine was containerized via Docker to ensure 24/7 reliability in a public-facing, high-exposure environment.
-
Access & Documentation
The full repository, including deployment guides and the architecture overview, is available for community use and contribution
