# medhag-svg/be-the-catalyst architecture

> Architecture diagram of the GitHub repository medhag-svg/be-the-catalyst, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/medhag-svg/be-the-catalyst
- Repository: https://github.com/medhag-svg/be-the-catalyst

## Overview

Between Bodies — Living Portal is a Kinect-driven interactive projection, with a mouse-operated browser demo. Visitors collect floating atoms, combine collections into recipes, and see and hear reactions; the installation relays Kinect tracking to the visual experience locally. The README documents the distinct experience stages and browser learning features. The sampled bridge, relay, and host code supports the main transport and display links; unsampled app sections are represented only where README capabilities provide evidence.

Main entry points: [`experience/app.js`](https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/app.js) (Reaction Effects), [`experience/index.html`](https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/index.html) (Web Experience), [`bridge/KinectBridge.cs`](https://github.com/medhag-svg/be-the-catalyst/blob/main/bridge/KinectBridge.cs) (Body Bridge), [`server.js`](https://github.com/medhag-svg/be-the-catalyst/blob/main/server.js) (Local Relay)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_capture["Tracking and Relay"]
  node_bridge["Body Bridge<br/>[KinectBridge.cs]"]
  node_relay["Local Relay<br/>[server.js]"]
end

subgraph group_experience["Interactive Experience"]
  node_tracking["Body Tracking<br/>[app.js]"]
  node_attract["Atom Field<br/>[app.js]"]
  node_collect["Atom Collection<br/>[app.js]"]
  node_combine["Recipe Matching<br/>[app.js]"]
  node_react["Reaction Effects<br/>[app.js]"]
  node_release["Atom Release<br/>[app.js]"]
  node_reset["Visitor Reset<br/>[app.js]"]
  node_renderer["Projection Renderer<br/>[app.js]"]
  node_calibration["Portal Calibration<br/>[app.js]"]
end

subgraph group_content["Learning and Sound"]
  node_discovery["Discovery Cards<br/>[app.js]"]
  node_lessons["Reaction Lessons<br/>[learning.js]"]
  node_sound["Generative Sound<br/>[app.js]"]
end

subgraph group_display["Projection Display"]
  node_browser["Web Experience<br/>[index.html]"]
  node_host["Projector Host<br/>[MainWindow.xaml.cs]"]
end

node_visitor(("Visitor"))
node_operator(("Operator"))
node_kinect["Kinect v2"]
node_projector["Projector Display"]

node_kinect -->|"supplies frames"| node_bridge
node_bridge -->|"posts tracking"| node_relay
node_relay -->|"streams events"| node_browser
node_browser -->|"loads experience"| node_tracking
node_visitor -->|"provides gestures"| node_tracking
node_tracking -->|"updates bodies"| node_attract
node_attract -->|"offers atoms"| node_collect
node_collect -->|"holds atoms"| node_combine
node_combine -->|"matches recipe"| node_react
node_react -->|"returns atoms"| node_release
node_release -->|"restores atoms"| node_attract
node_tracking -->|"detects departures"| node_reset
node_reset -->|"restarts field"| node_attract
node_tracking -->|"supplies motion"| node_renderer
node_attract -->|"draws atoms"| node_renderer
node_react -->|"draws effects"| node_renderer
node_operator -->|"aligns field"| node_calibration
node_calibration -->|"adjusts projection"| node_renderer
node_react -->|"opens lesson"| node_discovery
node_discovery -->|"reads content"| node_lessons
node_react -->|"triggers tones"| node_sound
node_browser -->|"loaded by"| node_host
node_host -->|"displays full-screen"| node_projector
node_visitor -.->|"uses mouse demo"| node_browser

click node_bridge "https://github.com/medhag-svg/be-the-catalyst/blob/main/bridge/KinectBridge.cs"
click node_relay "https://github.com/medhag-svg/be-the-catalyst/blob/main/server.js"
click node_tracking "https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/app.js"
click node_attract "https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/app.js"
click node_collect "https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/app.js"
click node_combine "https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/app.js"
click node_react "https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/app.js"
click node_release "https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/app.js"
click node_reset "https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/app.js"
click node_renderer "https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/app.js"
click node_calibration "https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/app.js"
click node_discovery "https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/app.js"
click node_lessons "https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/learning.js"
click node_sound "https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/app.js"
click node_browser "https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/index.html"
click node_host "https://github.com/medhag-svg/be-the-catalyst/blob/main/host/MainWindow.xaml.cs"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_bridge,node_relay toneBlue
class node_tracking,node_attract,node_collect,node_combine,node_react,node_release,node_reset,node_renderer,node_calibration toneAmber
class node_discovery,node_lessons,node_sound toneMint
class node_browser,node_host toneRose
class node_visitor,node_operator,node_kinect,node_projector toneIndigo
```

## Components

### Tracking and Relay

- [Body Bridge](https://github.com/medhag-svg/be-the-catalyst/blob/main/bridge/KinectBridge.cs): `bridge/KinectBridge.cs`
- [Local Relay](https://github.com/medhag-svg/be-the-catalyst/blob/main/server.js): `server.js`

### Interactive Experience

- [Body Tracking](https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/app.js): `experience/app.js`
- [Atom Field](https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/app.js): `experience/app.js`
- [Atom Collection](https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/app.js): `experience/app.js`
- [Recipe Matching](https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/app.js): `experience/app.js`
- [Reaction Effects](https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/app.js): `experience/app.js`
- [Atom Release](https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/app.js): `experience/app.js`
- [Visitor Reset](https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/app.js): `experience/app.js`
- [Projection Renderer](https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/app.js): `experience/app.js`
- [Portal Calibration](https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/app.js): `experience/app.js`

### Learning and Sound

- [Discovery Cards](https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/app.js): `experience/app.js`
- [Reaction Lessons](https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/learning.js): `experience/learning.js`
- [Generative Sound](https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/app.js): `experience/app.js`

### Projection Display

- [Web Experience](https://github.com/medhag-svg/be-the-catalyst/blob/main/experience/index.html): `experience/index.html`
- [Projector Host](https://github.com/medhag-svg/be-the-catalyst/blob/main/host/MainWindow.xaml.cs): `host/MainWindow.xaml.cs`

### Other components

- **Visitor**
- **Operator**
- **Kinect v2**
- **Projector Display**

## Connections

- Kinect v2 → Body Bridge: supplies frames
- Body Bridge → Local Relay: posts tracking
- Local Relay → Web Experience: streams events
- Web Experience → Body Tracking: loads experience
- Visitor → Body Tracking: provides gestures
- Body Tracking → Atom Field: updates bodies
- Atom Field → Atom Collection: offers atoms
- Atom Collection → Recipe Matching: holds atoms
- Recipe Matching → Reaction Effects: matches recipe
- Reaction Effects → Atom Release: returns atoms
- Atom Release → Atom Field: restores atoms
- Body Tracking → Visitor Reset: detects departures
- Visitor Reset → Atom Field: restarts field
- Body Tracking → Projection Renderer: supplies motion
- Atom Field → Projection Renderer: draws atoms
- Reaction Effects → Projection Renderer: draws effects
- Operator → Portal Calibration: aligns field
- Portal Calibration → Projection Renderer: adjusts projection
- Reaction Effects → Discovery Cards: opens lesson
- Discovery Cards → Reaction Lessons: reads content
- Reaction Effects → Generative Sound: triggers tones
- Web Experience → Projector Host: loaded by
- Projector Host → Projector Display: displays full-screen
- Visitor → Web Experience: uses mouse demo