# bearwolf/gameboy-camera-filter architecture

> Architecture diagram of the GitHub repository bearwolf/gameboy-camera-filter, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/bearwolf/gameboy-camera-filter
- Repository: https://github.com/bearwolf/gameboy-camera-filter

## Overview

This is a browser-based Game Boy Camera-style webcam filter intended for live preview or OBS Browser Source. The workflow acquires webcam video, crops and scales frames, applies brightness-adjusted Bayer dithering and a selected palette, optionally blends prior frames for ghosting, then renders the result to a canvas. URL parameters initialize the filter and UI controls update those parameters. The available source shows these responsibilities combined in script.js; the README documents OBS use, settings, palettes, FPS, and ghosting.

Main entry points: [`script.js`](https://github.com/bearwolf/gameboy-camera-filter/blob/main/script.js) (URL settings)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_capture["Camera capture"]
  node_capture["Webcam acquisition<br/>[script.js]"]
end

subgraph group_filter["Image processing"]
  node_frame["Frame crop and scale<br/>[script.js]"]
  node_dither["Dither and palette<br/>[script.js]"]
  node_ghosting["Ghosting blend<br/>[script.js]"]
end

subgraph group_controls["Settings and controls"]
  node_url["URL settings<br/>[script.js]"]
  node_ui["Filter controls<br/>[script.js]"]
end

subgraph group_output["Preview output"]
  node_canvas["Canvas preview<br/>[script.js]"]
end

node_viewer(("Viewer / OBS"))
node_webcam(("Webcam"))

node_webcam -->|"provides video"| node_capture
node_capture -->|"starts rendering"| node_frame
node_frame -->|"passes image data"| node_dither
node_dither -->|"passes processed frame"| node_ghosting
node_ghosting -->|"writes frame"| node_canvas
node_url -->|"sets filter options"| node_dither
node_url -->|"sets resolution"| node_frame
node_url -->|"sets blend amount"| node_ghosting
node_ui -->|"updates parameters"| node_url
node_canvas -.->|"renders preview"| node_viewer

click node_capture "https://github.com/bearwolf/gameboy-camera-filter/blob/main/script.js"
click node_frame "https://github.com/bearwolf/gameboy-camera-filter/blob/main/script.js"
click node_dither "https://github.com/bearwolf/gameboy-camera-filter/blob/main/script.js"
click node_ghosting "https://github.com/bearwolf/gameboy-camera-filter/blob/main/script.js"
click node_url "https://github.com/bearwolf/gameboy-camera-filter/blob/main/script.js"
click node_ui "https://github.com/bearwolf/gameboy-camera-filter/blob/main/script.js"
click node_canvas "https://github.com/bearwolf/gameboy-camera-filter/blob/main/script.js"

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_capture,node_viewer toneBlue
class node_frame,node_dither,node_ghosting toneAmber
class node_url,node_ui toneMint
class node_canvas toneRose
class node_webcam toneIndigo
```

## Components

### Camera capture

- [Webcam acquisition](https://github.com/bearwolf/gameboy-camera-filter/blob/main/script.js): `script.js`

### Image processing

- [Frame crop and scale](https://github.com/bearwolf/gameboy-camera-filter/blob/main/script.js): `script.js`
- [Dither and palette](https://github.com/bearwolf/gameboy-camera-filter/blob/main/script.js): `script.js`
- [Ghosting blend](https://github.com/bearwolf/gameboy-camera-filter/blob/main/script.js): `script.js`

### Settings and controls

- [URL settings](https://github.com/bearwolf/gameboy-camera-filter/blob/main/script.js): `script.js`
- [Filter controls](https://github.com/bearwolf/gameboy-camera-filter/blob/main/script.js): `script.js`

### Preview output

- [Canvas preview](https://github.com/bearwolf/gameboy-camera-filter/blob/main/script.js): `script.js`

### Other components

- **Viewer / OBS**
- **Webcam**

## Connections

- Webcam → Webcam acquisition: provides video (evidence: `script.js`)
- Webcam acquisition → Frame crop and scale: starts rendering (evidence: `script.js`)
- Frame crop and scale → Dither and palette: passes image data (evidence: `script.js`)
- Dither and palette → Ghosting blend: passes processed frame (evidence: `script.js`)
- Ghosting blend → Canvas preview: writes frame (evidence: `script.js`)
- URL settings → Dither and palette: sets filter options (evidence: `script.js`)
- URL settings → Frame crop and scale: sets resolution (evidence: `script.js`)
- URL settings → Ghosting blend: sets blend amount (evidence: `script.js`)
- Filter controls → URL settings: updates parameters (evidence: `script.js`)
- Canvas preview → Viewer / OBS: renders preview (evidence: `README.md`)