# medhag-svg/morphe architecture

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

- Interactive diagram: https://gitdiagram.com/medhag-svg/morphe
- Repository: https://github.com/medhag-svg/morphe

## Overview

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`](https://github.com/medhag-svg/morphe/blob/main/app.js) (Canvas rendering), [`index.html`](https://github.com/medhag-svg/morphe/blob/main/index.html) (Page and controls), [`style.css`](https://github.com/medhag-svg/morphe/blob/main/style.css) (Visual system)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Experience"]
  node_page["Page and controls<br/>[index.html]"]
  node_styles["Visual system<br/>[style.css]"]
  node_controls["Interaction handlers<br/>[app.js]"]
end

subgraph group_audio["Audio and modes"]
  node_mic["Microphone input<br/>[app.js]"]
  node_audioctx["Web Audio setup<br/>[app.js]"]
  node_analysis["Signal analysis<br/>[app.js]"]
  node_soundreading["Sound character<br/>[app.js]"]
  node_mode["Plate mode selection<br/>[app.js]"]
end

subgraph group_visual["Pattern rendering"]
  node_particles["Particle simulation<br/>[app.js]"]
  node_field["Nodal field<br/>[app.js]"]
  node_render["Canvas rendering<br/>[app.js]"]
end

subgraph group_output["Capture and sharing"]
  node_export["Image capture<br/>[app.js]"]
  node_share["Share or download<br/>[app.js]"]
end

node_visitor(("Visitor"))
node_browsermic["Browser microphone API"]
node_webaudio["Web Audio API"]
node_browserfile["Browser file and share APIs"]

node_visitor -->|"uses"| node_page
node_page -->|"provides controls"| node_controls
node_controls -->|"starts or resets"| node_mic
node_mic -->|"requests audio"| node_browsermic
node_mic -->|"creates stream source"| node_audioctx
node_audioctx -->|"creates analyser"| node_webaudio
node_analysis -->|"reads audio buffers"| node_webaudio
node_analysis -->|"selects mode"| node_mode
node_analysis -->|"derives sound profile"| node_soundreading
node_render -->|"reads active audio"| node_analysis
node_render -->|"steps particles"| node_particles
node_particles -->|"samples field"| node_field
node_render -->|"draws nodal regions"| node_field
node_render -->|"updates display"| node_page
node_page -->|"styled by"| node_styles
node_controls -->|"captures pattern"| node_export
node_controls -->|"shares or saves"| node_share
node_share -->|"creates image"| node_export
node_share -->|"uses share or download"| node_browserfile

click node_page "https://github.com/medhag-svg/morphe/blob/main/index.html"
click node_styles "https://github.com/medhag-svg/morphe/blob/main/style.css"
click node_controls "https://github.com/medhag-svg/morphe/blob/main/app.js"
click node_mic "https://github.com/medhag-svg/morphe/blob/main/app.js"
click node_audioctx "https://github.com/medhag-svg/morphe/blob/main/app.js"
click node_analysis "https://github.com/medhag-svg/morphe/blob/main/app.js"
click node_soundreading "https://github.com/medhag-svg/morphe/blob/main/app.js"
click node_mode "https://github.com/medhag-svg/morphe/blob/main/app.js"
click node_particles "https://github.com/medhag-svg/morphe/blob/main/app.js"
click node_field "https://github.com/medhag-svg/morphe/blob/main/app.js"
click node_render "https://github.com/medhag-svg/morphe/blob/main/app.js"
click node_export "https://github.com/medhag-svg/morphe/blob/main/app.js"
click node_share "https://github.com/medhag-svg/morphe/blob/main/app.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_page,node_styles,node_controls,node_browsermic,node_browserfile toneBlue
class node_mic,node_audioctx,node_analysis,node_soundreading,node_mode toneAmber
class node_particles,node_field,node_render,node_webaudio toneMint
class node_export,node_share toneRose
class node_visitor toneIndigo
```

## Components

### Experience

- [Page and controls](https://github.com/medhag-svg/morphe/blob/main/index.html): `index.html`
- [Visual system](https://github.com/medhag-svg/morphe/blob/main/style.css): `style.css`
- [Interaction handlers](https://github.com/medhag-svg/morphe/blob/main/app.js): `app.js`

### Audio and modes

- [Microphone input](https://github.com/medhag-svg/morphe/blob/main/app.js): `app.js`
- [Web Audio setup](https://github.com/medhag-svg/morphe/blob/main/app.js): `app.js`
- [Signal analysis](https://github.com/medhag-svg/morphe/blob/main/app.js): `app.js`
- [Sound character](https://github.com/medhag-svg/morphe/blob/main/app.js): `app.js`
- [Plate mode selection](https://github.com/medhag-svg/morphe/blob/main/app.js): `app.js`

### Pattern rendering

- [Particle simulation](https://github.com/medhag-svg/morphe/blob/main/app.js): `app.js`
- [Nodal field](https://github.com/medhag-svg/morphe/blob/main/app.js): `app.js`
- [Canvas rendering](https://github.com/medhag-svg/morphe/blob/main/app.js): `app.js`

### Capture and sharing

- [Image capture](https://github.com/medhag-svg/morphe/blob/main/app.js): `app.js`
- [Share or download](https://github.com/medhag-svg/morphe/blob/main/app.js): `app.js`

### Other components

- **Visitor**
- **Browser microphone API**
- **Web Audio API**
- **Browser file and share APIs**

## Connections

- 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