NORTHWESTERN UNIVERSITY IN QATAR
Multi-PC Interactive Video Wall
HOME
ROLELead Engineer (Sole Developer)
DATEApril 2019 Launch
STACKopenFrameworks, GLSL shaders, TUIO, UDP/TCP synchronization
Executive Summary
As part of the Arab Identities exhibition at Northwestern University in Qatar, one of the two installations I developed was a large-scale interactive touch wall designed to showcase a curated library of film clips. The installation presented a living mosaic of video thumbnails across 24 displays, behaving as a single continuous interactive surface.
Visitors could browse film content through a responsive “thumbnail field” interface—selecting clips, flipping cards for contextual information, and triggering full playback. The wall was unified visually by a synchronized atmospheric smoke animation rendered across all displays using an adapted GPU shader, which I configured and extended for time-synced multi-machine playback.
This was one of my first major multi-PC wall systems, requiring real-time synchronization, distributed rendering, and large-format touch interaction across multiple machines.
Visitors could browse film content through a responsive “thumbnail field” interface—selecting clips, flipping cards for contextual information, and triggering full playback. The wall was unified visually by a synchronized atmospheric smoke animation rendered across all displays using an adapted GPU shader, which I configured and extended for time-synced multi-machine playback.
This was one of my first major multi-PC wall systems, requiring real-time synchronization, distributed rendering, and large-format touch interaction across multiple machines.
Exhibit Concept (Context)
The exhibition explored how film has shaped perceptions of Arab identity over time—ranging from early Western portrayals of “exotic Arabia” to modern documentaries and contemporary personal narratives.
The wall served as the main browsing interface for this archive: a visual field of film stills that encouraged exploration, discovery, and comparison.
The wall served as the main browsing interface for this archive: a visual field of film stills that encouraged exploration, discovery, and comparison.
System Architecture Overview
The installation operated as a single interactive canvas spanning 24 displays:
- 4 synchronized PCs
- Each PC drove a 2×3 display block (6 screens)
- A single large-format touch overlay covered the entire wall
Key Engineering Challenges Solved
1. Multi-PC Visual Synchronization (24 Displays)
The wall needed to feel like one cohesive surface rather than four separate systems. I implemented synchronized rendering behavior across PCs, including:
- time-synced shader animation
- shared thumbnail motion behavior
2. Distributed Touch Input Routing
Because the touch overlay fed input into only one machine, I built a system to:
- ingest raw TUIO touches
- transform them into wall-relative coordinates
- route touch events to the correct PC based on screen region
- broadcast events using UDP/TCP as needed
3. Organic Thumbnail Layout + Collision System
The UI required dozens of thumbnails to feel alive and organic—while still preventing overlaps and maintaining readable spacing.
To solve this, I built a custom positioning algorithm:
Thumbnails also responded to user motion by pushing and displacing nearby elements, giving the interface a physical, reactive quality.
To solve this, I built a custom positioning algorithm:
- started from a grid of valid “safe zones”
- randomized positions for variation
- iteratively resolved collisions by pushing thumbnails back toward valid zones
- added safeguards to prevent excessive iteration and runaway layout loops
Thumbnails also responded to user motion by pushing and displacing nearby elements, giving the interface a physical, reactive quality.
4. Real-Time Multilingual Typography and Layout System (OpenFrameworks)
The exhibit required dynamic text rendering across multiple languages, fonts, and display formats, including right-to-left scripts and styled inline emphasis. Off-the-shelf text systems were insufficient for the combination of performance, layout control, and visual consistency required across the distributed display wall.
I built a custom multi-font text layout engine in OpenFrameworks that supports:
For RTL languages such as Arabic, text is pre-processed through a character mapping layer before layout, allowing integration with the same rendering pipeline while maintaining correct visual structure.
This system enabled consistent typography across heterogeneous display hardware while maintaining real-time performance, even with frequent content updates and multi-language content swapping.
I built a custom multi-font text layout engine in OpenFrameworks that supports:
- Inline font switching (e.g., bold/italic spans within a single string)
- Per-span color and styling control
- Word-level line breaking with width-aware wrapping
- Multi-column text flow with configurable margins and column heights
- RTL/LTR rendering support hooks for language direction handling
For RTL languages such as Arabic, text is pre-processed through a character mapping layer before layout, allowing integration with the same rendering pipeline while maintaining correct visual structure.
This system enabled consistent typography across heterogeneous display hardware while maintaining real-time performance, even with frequent content updates and multi-language content swapping.
Outcome
The final installation delivered a high-impact centerpiece for the exhibit:
- visually cohesive across 24 screens
- responsive touch interaction across the entire wall
- stable multi-PC synchronization
- an interface that encouraged exploration through motion, density, and visual rhythm
Skills Demonstrated
- large-scale interactive wall development
- multi-PC distributed architecture (real-time rendering, interaction, UDP/TCP networking)
- GLSL shader-based atmospheric animation
- custom collision-avoidance / layout algorithms for dynamic UI systems
- custom multilingual text layout and typography engine (word-level layout, RTL/LTR support)