How medhag-svg/morphe works
Morphē is a static browser experience that turns live microphone sound into a changing Chladni plate pattern. The main workflow is to start the microphone, analyze sound, choose a resonant mode, animate particles, and save or share the result. The sampled app.js excerpt shows audio setup, analysis, mode selection, rendering, and export handlers; index.html and style.css responsibilities come from the README, and unsampled implementation details are not expanded.
Main entry points: app.js Canvas rendering · index.html Page and controls · style.css Visual system
Components 17
Experience
- Page and controls
index.html - Visual system
style.css - Interaction handlers
app.js
Audio and modes
- Microphone input
app.js - Web Audio setup
app.js - Signal analysis
app.js - Sound character
app.js - Plate mode selection
app.js
Pattern rendering
- Particle simulation
app.js - Nodal field
app.js - Canvas rendering
app.js
Capture and sharing
- Image capture
app.js - Share or download
app.js
Other components
- Visitor
- Browser microphone API
- Web Audio API
- Browser file and share APIs
Connections 19
- Visitor → Page and controls: uses
- Page and controls → Interaction handlers: provides controls
- Interaction handlers → Microphone input: starts or resets
- Microphone input → Browser microphone API: requests audio
- Microphone input → Web Audio setup: creates stream source
- Web Audio setup → Web Audio API: creates analyser
- Signal analysis → Web Audio API: reads audio buffers
- Signal analysis → Plate mode selection: selects mode
- Signal analysis → Sound character: derives sound profile
- Canvas rendering → Signal analysis: reads active audio
- Canvas rendering → Particle simulation: steps particles
- Particle simulation → Nodal field: samples field
- Canvas rendering → Nodal field: draws nodal regions
- Canvas rendering → Page and controls: updates display
- Page and controls → Visual system: styled by
- Interaction handlers → Image capture: captures pattern
- Interaction handlers → Share or download: shares or saves
- Share or download → Image capture: creates image
- Share or download → Browser file and share APIs: uses share or download