# erball-m/canvas-cockroach architecture

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

- Interactive diagram: https://gitdiagram.com/erball-m/canvas-cockroach
- Repository: https://github.com/erball-m/canvas-cockroach

## Overview

This is a small browser-based canvas animation: the user starts the scene, which renders a large animated cockroach alongside randomly sized, moving cockroaches and plays audio. The sampled source supports the animation and rendering flow; the README provides no further capability details, and the HTML wiring was not sampled.

Main entry points: [`main.js`](https://github.com/erball-m/canvas-cockroach/blob/main/main.js) (Scene startup), [`classes/RandomCockroach.js`](https://github.com/erball-m/canvas-cockroach/blob/main/classes/RandomCockroach.js) (Random cockroaches), [`classes/Canvas.js`](https://github.com/erball-m/canvas-cockroach/blob/main/classes/Canvas.js) (Canvas setup), [`classes/MainCockroach.js`](https://github.com/erball-m/canvas-cockroach/blob/main/classes/MainCockroach.js) (Main cockroach)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App orchestration"]
  node_main["Scene startup<br/>[main.js]"]
  node_page["Page markup<br/>[index.html]"]
end

subgraph group_render["Canvas rendering"]
  node_canvas["Canvas setup<br/>[Canvas.js]"]
end

subgraph group_entities["Cockroach animation"]
  node_main_roach["Main cockroach<br/>[MainCockroach.js]"]
  node_random_roach["Random cockroaches<br/>[RandomCockroach.js]"]
  node_roach["Base animation<br/>[Cockroach.js]"]
end

subgraph group_resources["Assets and utilities"]
  node_range["Random range"]
  node_list["Random choice<br/>[getRandomInList.js]"]
  node_sprite["Cockroach sprite"]
  node_audio["Background audio<br/>[aroundTheWorld.mp3]"]
end

node_user(("User"))
node_browser_canvas["Browser canvas API"]
node_audio_element["Browser audio element"]

node_user -->|"starts scene"| node_main
node_main -->|"creates"| node_canvas
node_main -->|"creates"| node_main_roach
node_main -->|"creates"| node_random_roach
node_main -->|"loads"| node_sprite
node_main -->|"initializes"| node_canvas
node_main -->|"clears"| node_canvas
node_main -->|"updates"| node_main_roach
node_main -->|"updates"| node_random_roach
node_main -->|"plays"| node_audio_element
node_page -->|"loads"| node_main
node_canvas -->|"creates context"| node_browser_canvas
node_roach -->|"draws frames"| node_browser_canvas
node_main_roach -->|"extends"| node_roach
node_random_roach -->|"extends"| node_roach
node_random_roach -->|"chooses values"| node_range
node_random_roach -->|"chooses options"| node_list
node_audio_element -.->|"plays asset"| node_audio

click node_main "https://github.com/erball-m/canvas-cockroach/blob/main/main.js"
click node_page "https://github.com/erball-m/canvas-cockroach/blob/main/index.html"
click node_canvas "https://github.com/erball-m/canvas-cockroach/blob/main/classes/Canvas.js"
click node_main_roach "https://github.com/erball-m/canvas-cockroach/blob/main/classes/MainCockroach.js"
click node_random_roach "https://github.com/erball-m/canvas-cockroach/blob/main/classes/RandomCockroach.js"
click node_roach "https://github.com/erball-m/canvas-cockroach/blob/main/classes/Cockroach.js"
click node_range "https://github.com/erball-m/canvas-cockroach/blob/main/utils/getRandomInRange.js"
click node_list "https://github.com/erball-m/canvas-cockroach/blob/main/utils/getRandomInList.js"
click node_sprite "https://github.com/erball-m/canvas-cockroach/tree/main/images"
click node_audio "https://github.com/erball-m/canvas-cockroach/blob/main/sounds/aroundTheWorld.mp3"

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_main,node_page,node_user,node_browser_canvas,node_audio_element toneBlue
class node_canvas toneAmber
class node_main_roach,node_random_roach,node_roach toneMint
class node_range,node_list,node_sprite,node_audio toneRose
```

## Components

### App orchestration

- [Scene startup](https://github.com/erball-m/canvas-cockroach/blob/main/main.js): `main.js`
- [Page markup](https://github.com/erball-m/canvas-cockroach/blob/main/index.html): `index.html`

### Canvas rendering

- [Canvas setup](https://github.com/erball-m/canvas-cockroach/blob/main/classes/Canvas.js): `classes/Canvas.js`

### Cockroach animation

- [Main cockroach](https://github.com/erball-m/canvas-cockroach/blob/main/classes/MainCockroach.js): `classes/MainCockroach.js`
- [Random cockroaches](https://github.com/erball-m/canvas-cockroach/blob/main/classes/RandomCockroach.js): `classes/RandomCockroach.js`
- [Base animation](https://github.com/erball-m/canvas-cockroach/blob/main/classes/Cockroach.js): `classes/Cockroach.js`

### Assets and utilities

- [Random range](https://github.com/erball-m/canvas-cockroach/blob/main/utils/getRandomInRange.js): `utils/getRandomInRange.js`
- [Random choice](https://github.com/erball-m/canvas-cockroach/blob/main/utils/getRandomInList.js): `utils/getRandomInList.js`
- [Cockroach sprite](https://github.com/erball-m/canvas-cockroach/tree/main/images): `images`
- [Background audio](https://github.com/erball-m/canvas-cockroach/blob/main/sounds/aroundTheWorld.mp3): `sounds/aroundTheWorld.mp3`

### Other components

- **User**
- **Browser canvas API**
- **Browser audio element**

## Connections

- User → Scene startup: starts scene
- Scene startup → Canvas setup: creates
- Scene startup → Main cockroach: creates
- Scene startup → Random cockroaches: creates
- Scene startup → Cockroach sprite: loads
- Scene startup → Canvas setup: initializes
- Scene startup → Canvas setup: clears
- Scene startup → Main cockroach: updates
- Scene startup → Random cockroaches: updates
- Scene startup → Browser audio element: plays
- Page markup → Scene startup: loads
- Canvas setup → Browser canvas API: creates context
- Base animation → Browser canvas API: draws frames
- Main cockroach → Base animation: extends
- Random cockroaches → Base animation: extends
- Random cockroaches → Random range: chooses values
- Random cockroaches → Random choice: chooses options
- Browser audio element → Background audio: plays asset