# syahdanfx/retrolens architecture

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

- Interactive diagram: https://gitdiagram.com/syahdanfx/retrolens
- Repository: https://github.com/syahdanfx/retrolens

## Overview

RetroLens is a real-time webcam effects app controlled by hand gestures and keyboard input. Its main workflow captures a frame, detects hands, interprets gestures to control filters and 2D/3D mode, then renders the selected effect inside a hand-defined portal and displays the result. The README also documents filter navigation and screenshots. The source excerpt is partial, so some control details come from the README; all implemented components shown share the single source file.

Main entry points: [`Retrolens.py`](https://github.com/syahdanfx/retrolens/blob/main/Retrolens.py) (Portal processor)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_capture["Capture and controls"]
  node_webcam["Webcam"]
  node_app["Application loop<br/>[Retrolens.py]"]
  node_config["Pipeline config<br/>[Retrolens.py]"]
end

subgraph group_vision["Hand vision"]
  node_processor["Portal processor<br/>[Retrolens.py]"]
  node_mediapipe["MediaPipe Hands"]
  node_geometry["Hand geometry<br/>[Retrolens.py]"]
  node_gestures["Gesture controls<br/>[Retrolens.py]"]
end

subgraph group_render["Portal rendering"]
  node_filterstate["Filter and mode state<br/>[Retrolens.py]"]
  node_portal["Portal renderer<br/>[Retrolens.py]"]
  node_filterbank["Filter bank<br/>[Retrolens.py]"]
end

subgraph group_output["Display and capture"]
  node_display["Preview window<br/>[Retrolens.py]"]
  node_screenshots[("Screenshot files")]
end

node_user(("User"))

node_user -->|"keys"| node_app
node_user -->|"hand gestures"| node_processor
node_webcam -->|"video frames"| node_app
node_app -->|"creates"| node_config
node_app -->|"processes frames"| node_processor
node_app -->|"shows output"| node_display
node_app -->|"writes captures"| node_screenshots
node_processor -->|"detects hands"| node_mediapipe
node_processor -->|"uses landmarks"| node_geometry
node_processor -->|"interprets gestures"| node_gestures
node_gestures -->|"changes selection"| node_filterstate
node_processor -->|"reads mode and filter"| node_filterstate
node_processor -->|"renders portal"| node_portal
node_portal -->|"applies effect"| node_filterbank

click node_app "https://github.com/syahdanfx/retrolens/blob/main/Retrolens.py"
click node_config "https://github.com/syahdanfx/retrolens/blob/main/Retrolens.py"
click node_processor "https://github.com/syahdanfx/retrolens/blob/main/Retrolens.py"
click node_geometry "https://github.com/syahdanfx/retrolens/blob/main/Retrolens.py"
click node_gestures "https://github.com/syahdanfx/retrolens/blob/main/Retrolens.py"
click node_filterstate "https://github.com/syahdanfx/retrolens/blob/main/Retrolens.py"
click node_portal "https://github.com/syahdanfx/retrolens/blob/main/Retrolens.py"
click node_filterbank "https://github.com/syahdanfx/retrolens/blob/main/Retrolens.py"
click node_display "https://github.com/syahdanfx/retrolens/blob/main/Retrolens.py"

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_webcam,node_app,node_config,node_user toneBlue
class node_processor,node_mediapipe,node_geometry,node_gestures toneAmber
class node_filterstate,node_portal,node_filterbank toneMint
class node_display,node_screenshots toneRose
```

## Components

### Capture and controls

- **Webcam**
- [Application loop](https://github.com/syahdanfx/retrolens/blob/main/Retrolens.py): `Retrolens.py`
- [Pipeline config](https://github.com/syahdanfx/retrolens/blob/main/Retrolens.py): `Retrolens.py`

### Hand vision

- [Portal processor](https://github.com/syahdanfx/retrolens/blob/main/Retrolens.py): `Retrolens.py`
- **MediaPipe Hands**
- [Hand geometry](https://github.com/syahdanfx/retrolens/blob/main/Retrolens.py): `Retrolens.py`
- [Gesture controls](https://github.com/syahdanfx/retrolens/blob/main/Retrolens.py): `Retrolens.py`

### Portal rendering

- [Filter and mode state](https://github.com/syahdanfx/retrolens/blob/main/Retrolens.py): `Retrolens.py`
- [Portal renderer](https://github.com/syahdanfx/retrolens/blob/main/Retrolens.py): `Retrolens.py`
- [Filter bank](https://github.com/syahdanfx/retrolens/blob/main/Retrolens.py): `Retrolens.py`

### Display and capture

- [Preview window](https://github.com/syahdanfx/retrolens/blob/main/Retrolens.py): `Retrolens.py`
- **Screenshot files**

### Other components

- **User**

## Connections

- User → Application loop: keys
- User → Portal processor: hand gestures
- Webcam → Application loop: video frames
- Application loop → Pipeline config: creates
- Application loop → Portal processor: processes frames
- Application loop → Preview window: shows output
- Application loop → Screenshot files: writes captures
- Portal processor → MediaPipe Hands: detects hands
- Portal processor → Hand geometry: uses landmarks
- Portal processor → Gesture controls: interprets gestures
- Gesture controls → Filter and mode state: changes selection
- Portal processor → Filter and mode state: reads mode and filter
- Portal processor → Portal renderer: renders portal
- Portal renderer → Filter bank: applies effect