NORTHWESTERN UNIVERSITY IN QATAR
Multi-PC Interactive Video Wall
HOME
Wall Installation
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.

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.
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
Touch input was received by one PC via TUIO, then distributed to the other machines over the network to ensure the full wall responded as a unified interface.
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
A major visual feature was a smoke effect that moved across the full wall using a shader, with time offsets applied per machine so the animation flowed continuously across all screens.

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
This allowed each PC to behave as a “local renderer” for its display block while still participating in a global interaction model.

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:
  • 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
The result was a layout system that felt dynamic and playful, while remaining stable and performant under interaction.

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:
  • 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
The system parses text into styled spans, computes layout at the word level using font metrics, and builds structured line representations that are then rendered per frame. It also integrates with a centralized language controller that allows runtime switching of full text fields across languages without reconstructing UI state.

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
This project became a foundation for later multi-machine display systems I developed, especially around synchronization strategies, large-format input routing, and GPU-driven environmental effects.
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)