# hssnadr/workshop-web-creadev architecture

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

- Interactive diagram: https://gitdiagram.com/hssnadr/workshop-web-creadev
- Repository: https://github.com/hssnadr/workshop-web-creadev

## Overview

This is a browser-based creative-web template: the page starts 2D and 3D canvas scenarios, then a shared animation loop updates them and moves bubbles between scenes when they cross boundaries. Motion input can influence scene behavior, and the scenes adapt to viewport changes. The graph follows wiring shown in the sampled entry point and scene sources; several utility implementations and the page markup were not sampled, so uncertain connections are omitted.

Main entry points: [`src/main.js`](https://github.com/hssnadr/workshop-web-creadev/blob/main/src/main.js) (App entry), [`src/js/WindowContext.js`](https://github.com/hssnadr/workshop-web-creadev/blob/main/src/js/WindowContext.js) (Window context), [`src/js/scenarios/Scenario3d/Scenario3d.js`](https://github.com/hssnadr/workshop-web-creadev/blob/main/src/js/scenarios/Scenario3d/Scenario3d.js) (3D physics scene), [`src/js/canvas-2d/Scene2D.js`](https://github.com/hssnadr/workshop-web-creadev/blob/main/src/js/canvas-2d/Scene2D.js) (2D canvas base)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App orchestration"]
  node_entry["App entry<br/>[main.js]"]
  node_controls["Page controls<br/>[main.js]"]
end

subgraph group_scenes["Canvas scenarios"]
  node_scene2d["2D canvas base<br/>[Scene2D.js]"]
  node_shapes["2D drawing<br/>[Shapes2D.js]"]
  node_bubbles["Bouncing bubbles"]
  node_scene3d["3D canvas base<br/>[Scene3D.js]"]
  node_scenario3d["3D physics scene<br/>[Scenario3d.js]"]
end

subgraph group_runtime["Scene runtime"]
  node_context["Window context<br/>[WindowContext.js]"]
  node_clock["Time events<br/>[Time.js]"]
  node_debug["Debug controls<br/>[Debug.js]"]
  node_dom["Canvas element<br/>[DomElement.js]"]
end

subgraph group_sensors["Device motion"]
  node_orientation["Orientation sensor"]
  node_acceleration["Acceleration sensor"]
end

node_visitor(("Page visitor"))
node_page["Creative page<br/>[index.html]"]
node_device(("Device sensors"))
node_physics["Matter physics"]
node_three["Three.js renderer"]

node_visitor -->|"opens"| node_page
node_page -->|"loads"| node_entry
node_visitor -->|"clicks"| node_controls
node_controls -->|"triggers"| node_entry
node_entry -->|"creates"| node_bubbles
node_entry -->|"creates"| node_scenario3d
node_entry -->|"creates"| node_context
node_entry -->|"subscribes"| node_clock
node_clock -->|"emits update"| node_entry
node_entry -->|"moves bubbles"| node_bubbles
node_entry -->|"moves bubbles"| node_scenario3d
node_bubbles -->|"extends"| node_scene2d
node_bubbles -->|"draws with"| node_shapes
node_scenario3d -->|"extends"| node_scene3d
node_scene2d -->|"registers scene"| node_context
node_scene3d -->|"registers scene"| node_context
node_context -->|"updates scenes"| node_clock
node_scene2d -->|"measures canvas"| node_dom
node_scene3d -->|"measures canvas"| node_dom
node_context -->|"creates"| node_debug
node_scene2d -->|"configures controls"| node_debug
node_scene3d -->|"configures controls"| node_debug
node_scene2d -->|"enables"| node_orientation
node_scenario3d -->|"enables"| node_acceleration
node_orientation -->|"reads motion"| node_device
node_acceleration -->|"reads motion"| node_device
node_orientation -->|"emits readings"| node_context
node_acceleration -->|"emits readings"| node_context
node_context -->|"dispatches readings"| node_bubbles
node_context -->|"dispatches readings"| node_scenario3d
node_scenario3d -->|"simulates bodies"| node_physics
node_scene3d -->|"renders scene"| node_three

click node_page "https://github.com/hssnadr/workshop-web-creadev/blob/main/src/index.html"
click node_entry "https://github.com/hssnadr/workshop-web-creadev/blob/main/src/main.js"
click node_controls "https://github.com/hssnadr/workshop-web-creadev/blob/main/src/main.js"
click node_context "https://github.com/hssnadr/workshop-web-creadev/blob/main/src/js/WindowContext.js"
click node_clock "https://github.com/hssnadr/workshop-web-creadev/blob/main/src/js/utils/Time.js"
click node_debug "https://github.com/hssnadr/workshop-web-creadev/blob/main/src/js/utils/Debug.js"
click node_scene2d "https://github.com/hssnadr/workshop-web-creadev/blob/main/src/js/canvas-2d/Scene2D.js"
click node_shapes "https://github.com/hssnadr/workshop-web-creadev/blob/main/src/js/canvas-2d/Shapes2D.js"
click node_bubbles "https://github.com/hssnadr/workshop-web-creadev/blob/main/src/js/scenarios/BouncingBubbles/SceneBouncingBubbles.js"
click node_scene3d "https://github.com/hssnadr/workshop-web-creadev/blob/main/src/js/canvas-3d-threejs/Scene3D.js"
click node_scenario3d "https://github.com/hssnadr/workshop-web-creadev/blob/main/src/js/scenarios/Scenario3d/Scenario3d.js"
click node_dom "https://github.com/hssnadr/workshop-web-creadev/blob/main/src/js/utils/window/DomElement.js"
click node_orientation "https://github.com/hssnadr/workshop-web-creadev/blob/main/src/js/utils/device/DeviceOrientation.js"
click node_acceleration "https://github.com/hssnadr/workshop-web-creadev/blob/main/src/js/utils/device/DeviceAcceleration.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_entry,node_controls toneBlue
class node_scene2d,node_shapes,node_bubbles,node_scene3d,node_scenario3d toneAmber
class node_context,node_clock,node_debug,node_dom toneMint
class node_orientation,node_acceleration toneRose
class node_visitor,node_device,node_physics,node_three toneIndigo
class node_page toneTeal
```

## Components

### App orchestration

- [App entry](https://github.com/hssnadr/workshop-web-creadev/blob/main/src/main.js): `src/main.js`
- [Page controls](https://github.com/hssnadr/workshop-web-creadev/blob/main/src/main.js): `src/main.js`

### Canvas scenarios

- [2D canvas base](https://github.com/hssnadr/workshop-web-creadev/blob/main/src/js/canvas-2d/Scene2D.js): `src/js/canvas-2d/Scene2D.js`
- [2D drawing](https://github.com/hssnadr/workshop-web-creadev/blob/main/src/js/canvas-2d/Shapes2D.js): `src/js/canvas-2d/Shapes2D.js`
- [Bouncing bubbles](https://github.com/hssnadr/workshop-web-creadev/blob/main/src/js/scenarios/BouncingBubbles/SceneBouncingBubbles.js): `src/js/scenarios/BouncingBubbles/SceneBouncingBubbles.js`
- [3D canvas base](https://github.com/hssnadr/workshop-web-creadev/blob/main/src/js/canvas-3d-threejs/Scene3D.js): `src/js/canvas-3d-threejs/Scene3D.js`
- [3D physics scene](https://github.com/hssnadr/workshop-web-creadev/blob/main/src/js/scenarios/Scenario3d/Scenario3d.js): `src/js/scenarios/Scenario3d/Scenario3d.js`

### Scene runtime

- [Window context](https://github.com/hssnadr/workshop-web-creadev/blob/main/src/js/WindowContext.js): `src/js/WindowContext.js`
- [Time events](https://github.com/hssnadr/workshop-web-creadev/blob/main/src/js/utils/Time.js): `src/js/utils/Time.js`
- [Debug controls](https://github.com/hssnadr/workshop-web-creadev/blob/main/src/js/utils/Debug.js): `src/js/utils/Debug.js`
- [Canvas element](https://github.com/hssnadr/workshop-web-creadev/blob/main/src/js/utils/window/DomElement.js): `src/js/utils/window/DomElement.js`

### Device motion

- [Orientation sensor](https://github.com/hssnadr/workshop-web-creadev/blob/main/src/js/utils/device/DeviceOrientation.js): `src/js/utils/device/DeviceOrientation.js`
- [Acceleration sensor](https://github.com/hssnadr/workshop-web-creadev/blob/main/src/js/utils/device/DeviceAcceleration.js): `src/js/utils/device/DeviceAcceleration.js`

### Other components

- **Page visitor**
- [Creative page](https://github.com/hssnadr/workshop-web-creadev/blob/main/src/index.html): `src/index.html`
- **Device sensors**
- **Matter physics**
- **Three.js renderer**

## Connections

- Page visitor → Creative page: opens
- Creative page → App entry: loads
- Page visitor → Page controls: clicks
- Page controls → App entry: triggers
- App entry → Bouncing bubbles: creates
- App entry → 3D physics scene: creates
- App entry → Window context: creates
- App entry → Time events: subscribes
- Time events → App entry: emits update
- App entry → Bouncing bubbles: moves bubbles
- App entry → 3D physics scene: moves bubbles
- Bouncing bubbles → 2D canvas base: extends
- Bouncing bubbles → 2D drawing: draws with
- 3D physics scene → 3D canvas base: extends
- 2D canvas base → Window context: registers scene
- 3D canvas base → Window context: registers scene
- Window context → Time events: updates scenes
- 2D canvas base → Canvas element: measures canvas
- 3D canvas base → Canvas element: measures canvas
- Window context → Debug controls: creates
- 2D canvas base → Debug controls: configures controls
- 3D canvas base → Debug controls: configures controls
- 2D canvas base → Orientation sensor: enables
- 3D physics scene → Acceleration sensor: enables
- Orientation sensor → Device sensors: reads motion
- Acceleration sensor → Device sensors: reads motion
- Orientation sensor → Window context: emits readings
- Acceleration sensor → Window context: emits readings
- Window context → Bouncing bubbles: dispatches readings
- Window context → 3D physics scene: dispatches readings
- 3D physics scene → Matter physics: simulates bodies
- 3D canvas base → Three.js renderer: renders scene