EL PERRO
Live Show Interactive System • Control Center
🎭 System Overview
El Perro is a comprehensive live event technology platform designed for "El Perro x hora" performances. It creates an immersive, interactive experience by integrating audience participation, real-time visualization, automated show control, and contactless ticketing.
Design Philosophy: Distributed components run on audience phones, staff devices, and servers. The system is resilient with offline capabilities, real-time communication via WebSocket/OSC, and accessible web-based interfaces requiring no app installation.
🚀 Live Modules
Ticket System
Optical ticket validation using binary protocol transmitted via screen flashes. 52-bit transmission with inverted center square alignment and multi-phase confidence scoring.
React • TypeScript • Web Crypto API • Canvas
Crowd Synth
MIDI-controlled drone synthesizer distributed across audience smartphones. Chord-based voice assignment with Web Audio synthesis, reverb, delay, and vibrato effects.
Node.js • WebSocket • Web Audio API • React
Clap Counter
ESP32-based applause counter with OSC integration for Resolume. Dual mic input, room noise calibration, web UI with iOS design, and loudness-reactive countdown speed.
Arduino C++ (ESP32) • OSC Protocol
Playlist Voting
Collaborative song voting system with timed rounds. Real-time vote aggregation, audio spectrum visualizer, and n8n webhook integration for seamless data collection.
React • TypeScript • Web Audio API • n8n
ASCII Poster
Procedural ASCII art poster generation from live audio waveforms. Ring-based visualization with automatic date formatting, print export up to 600 DPI, and ESP32 audio recording.
Node.js (canvas) • React • ESP32 (AudioKit A1S)
Content Dump
User-uploaded photo/video collection interface. Multi-file upload (up to 20 files), XHR progress tracking, and mobile-optimized UI for memory capture.
React • TypeScript • n8n Webhooks
Memory Map
Crowd-sourced 3D venue memory map. Interactive Three.js visualization with glowing markers, click to view media, and real-time polling from Airtable database.
Three.js • Node.js • Airtable API
OBS-OSC Bridge
Bridges Resolume OSC messages to OBS scene switching. JSON config for column → scene mapping, hot-reload configuration, and ESP32 counter integration.
Node.js • OSC • OBS WebSocket API
📚 Documentation & Resources
🖥️ Server Information
Provider: Hostinger VPS (KVM 2)
OS: Ubuntu 24.04.2 LTS
IP: 168.231.114.193
Domain: automatica.digital
Services: Docker (Traefik, n8n), PM2 (WebSocket, Toolkit), systemd (ASCII Poster, Memory Map)