How hssnadr/workshop-web-creadev works
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: main.js App entry · WindowContext.js Window context · Scenario3d.js 3D physics scene · Scene2D.js 2D canvas base
Components 18
App orchestration
- App entry
src/main.js - Page controls
src/main.js
Canvas scenarios
- 2D canvas base
src/js/canvas-2d/Scene2D.js - 2D drawing
src/js/canvas-2d/Shapes2D.js - Bouncing bubbles
src/js/scenarios/BouncingBubbles/SceneBouncingBubbles.js - 3D canvas base
src/js/canvas-3d-threejs/Scene3D.js - 3D physics scene
src/js/scenarios/Scenario3d/Scenario3d.js
Scene runtime
- Window context
src/js/WindowContext.js - Time events
src/js/utils/Time.js - Debug controls
src/js/utils/Debug.js - Canvas element
src/js/utils/window/DomElement.js
Device motion
- Orientation sensor
src/js/utils/device/DeviceOrientation.js - Acceleration sensor
src/js/utils/device/DeviceAcceleration.js
Other components
- Page visitor
- Creative page
src/index.html - Device sensors
- Matter physics
- Three.js renderer
Connections 32
- 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