How erball-m/canvas-cockroach works
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 Scene startup · RandomCockroach.js Random cockroaches · Canvas.js Canvas setup · MainCockroach.js Main cockroach
Components 13
App orchestration
- Scene startup
main.js - Page markup
index.html
Canvas rendering
- Canvas setup
classes/Canvas.js
Cockroach animation
- Main cockroach
classes/MainCockroach.js - Random cockroaches
classes/RandomCockroach.js - Base animation
classes/Cockroach.js
Assets and utilities
- Random range
utils/getRandomInRange.js - Random choice
utils/getRandomInList.js - Cockroach sprite
images - Background audio
sounds/aroundTheWorld.mp3
Other components
- User
- Browser canvas API
- Browser audio element
Connections 18
- 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