# ceacodesnclass-rgb/chizzuu-cyber-frame-camera architecture

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

- Interactive diagram: https://gitdiagram.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera
- Repository: https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera

## Overview

#### Purpose and entry points
This is a browser-only experimental webcam camera that applies cyber-glitch rendering exclusively inside a hand-defined frame. The document entry point is `index.html`; application behavior is driven by `app.js` and presentation by `style.css`.

#### UI and camera surface
`index.html` defines the camera experience, controls, and canvas/video surfaces. `style.css` provides the visual layout and cyber-themed presentation. The app uses the browser’s WebRTC camera API, so it must run from HTTPS or localhost.

Paths: `index.html`, `style.css`

#### Hand-landmark detection
`app.js` initializes MediaPipe Tasks Vision and consumes live video frames to identify index-finger and thumb tip landmarks from two hands. Those four landmarks form the interactive frame boundary; effects are inactive or reduced when a valid two-hand frame cannot be constructed.

Path: `app.js`

#### Frame geometry boundary
The application converts detected landmark coordinates into a four-point polygon in canvas space. This polygon is the primary rendering boundary: Canvas clipping ensures the original camera feed remains visible outside the hand frame while effect layers are constrained inside it.

Path: `app.js`

#### Cyber effect render pipeline
For each animation frame, the app draws camera imagery and layered cyber treatments: color grading, cyan/magenta RGB separation, scanlines, moving scanner beam, noise blocks, horizontal glitch strips, tracking border, and initial frame-acquisition flash. Canvas 2D is the compositor and per-frame renderer.

Path: `app.js`

#### Capture/export flow
A camera-control action captures the composed canvas—not merely the raw webcam video—and exports the current result as a PNG download. This makes the detected polygon and all active visual effects part of the saved image.

Paths: `index.html`, `app.js`

#### Assets and external dependencies
The only repository media asset is a signature image used by the UI/rendered composition. Runtime dependencies are browser-provided Canvas API and `getUserMedia`, plus MediaPipe Tasks Vision loaded by the client; there is no backend, database, or persistent service in this repository.

Paths: `assets/chizzuu-signature.png`, `app.js`

Main entry points: [`index.html`](https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera/blob/main/index.html) (Camera UI & controls), [`app.js`](https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera/blob/main/app.js) (Application controller), [`style.css`](https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera/blob/main/style.css) (Cyber presentation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browser["Browser App"]
  node_html["Camera UI &amp; controls<br/>HTML entry point<br/>[index.html]"]
  node_styles["Cyber presentation<br/>CSS<br/>[style.css]"]
  node_app["Application controller<br/>browser JavaScript<br/>[app.js]"]
  node_camera(("Webcam stream<br/>getUserMedia"))
  node_video["Video surface<br/>HTML video<br/>[index.html]"]
  node_png["PNG download<br/>browser export<br/>[app.js]"]
end

subgraph group_vision["Hand Tracking"]
  node_mediapipe{{"MediaPipe Tasks Vision<br/>client dependency<br/>[app.js]"}}
  node_landmarks["Four hand landmarks<br/>live landmark data<br/>[app.js]"]
end

subgraph group_render["Canvas Rendering"]
  node_polygon["Hand-frame polygon<br/>canvas geometry<br/>[app.js]"]
  node_canvas["Composition canvas<br/>Canvas 2D<br/>[index.html]"]
  node_base_render["Camera image render<br/>render stage<br/>[app.js]"]
  node_effects["Cyber effect layers<br/>render stage<br/>[app.js]"]
  node_signature["Signature image<br/>media asset"]
end

node_html -->|"loads"| node_styles
node_html -->|"runs"| node_app
node_html -->|"defines"| node_video
node_html -->|"defines"| node_canvas
node_app -->|"requests"| node_camera
node_camera -->|"streams to"| node_video
node_app -->|"initializes"| node_mediapipe
node_video -->|"supplies frames"| node_mediapipe
node_mediapipe -->|"produces"| node_landmarks
node_landmarks -->|"constructs"| node_polygon
node_video -->|"provides imagery"| node_base_render
node_base_render -->|"draws"| node_canvas
node_polygon -->|"clips"| node_effects
node_effects -->|"composites"| node_canvas
node_signature -->|"renders in"| node_effects
node_app -->|"animates"| node_effects
node_canvas -->|"captures as"| node_png
node_html -->|"capture action"| node_png

click node_html "https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera/blob/main/index.html"
click node_styles "https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera/blob/main/style.css"
click node_app "https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera/blob/main/app.js"
click node_mediapipe "https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera/blob/main/app.js"
click node_landmarks "https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera/blob/main/app.js"
click node_polygon "https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera/blob/main/app.js"
click node_video "https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera/blob/main/index.html"
click node_canvas "https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera/blob/main/index.html"
click node_base_render "https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera/blob/main/app.js"
click node_effects "https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera/blob/main/app.js"
click node_png "https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera/blob/main/app.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_html,node_styles,node_app,node_camera,node_video,node_png toneBlue
class node_mediapipe,node_landmarks toneAmber
class node_polygon,node_canvas,node_base_render,node_effects,node_signature toneMint
```

## Components

### Browser App

- [Camera UI & controls](https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera/blob/main/index.html): HTML entry point · Defines video, canvas, and capture controls. · `index.html`
- [Cyber presentation](https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera/blob/main/style.css): CSS · `style.css`
- [Application controller](https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera/blob/main/app.js): browser JavaScript · Coordinates camera, landmarks, rendering, and capture. · `app.js`
- **Webcam stream**: getUserMedia · Requires HTTPS or localhost.
- [Video surface](https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera/blob/main/index.html): HTML video · `index.html`
- [PNG download](https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera/blob/main/app.js): browser export · Exports the composed canvas. · `app.js`

### Hand Tracking

- [MediaPipe Tasks Vision](https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera/blob/main/app.js): client dependency · Detects index-finger and thumb tips from two hands. · `app.js`
- [Four hand landmarks](https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera/blob/main/app.js): live landmark data · `app.js`

### Canvas Rendering

- [Hand-frame polygon](https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera/blob/main/app.js): canvas geometry · Four-point clipping boundary in canvas space. · `app.js`
- [Composition canvas](https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera/blob/main/index.html): Canvas 2D · Per-frame compositor and export source. · `index.html`
- [Camera image render](https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera/blob/main/app.js): render stage · Keeps original camera feed visible outside the polygon. · `app.js`
- [Cyber effect layers](https://github.com/ceacodesnclass-rgb/chizzuu-cyber-frame-camera/blob/main/app.js): render stage · Grade, RGB split, scanlines, beam, noise, glitch, border, and flash. · `app.js`
- **Signature image**: media asset

## Connections

- Camera UI & controls → Cyber presentation: loads
- Camera UI & controls → Application controller: runs
- Camera UI & controls → Video surface: defines
- Camera UI & controls → Composition canvas: defines
- Application controller → Webcam stream: requests
- Webcam stream → Video surface: streams to
- Application controller → MediaPipe Tasks Vision: initializes
- Video surface → MediaPipe Tasks Vision: supplies frames
- MediaPipe Tasks Vision → Four hand landmarks: produces
- Four hand landmarks → Hand-frame polygon: constructs
- Video surface → Camera image render: provides imagery
- Camera image render → Composition canvas: draws
- Hand-frame polygon → Cyber effect layers: clips
- Cyber effect layers → Composition canvas: composites
- Signature image → Cyber effect layers: renders in
- Application controller → Cyber effect layers: animates
- Composition canvas → PNG download: captures as
- Camera UI & controls → PNG download: capture action