# mh-adib/heart-particles architecture

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

- Interactive diagram: https://gitdiagram.com/mh-adib/heart-particles
- Repository: https://github.com/mh-adib/heart-particles

## Overview

This is a browser-based interactive particle-heart demo: it turns an image into animated particles and lets users adjust rendering parameters through a GUI. The demo script owns configuration, redraws, and heartbeat animation; the particle engine handles image setup, particle simulation, and rendering. The README is empty and index.html was not sampled, so page wiring and any additional capabilities are not inferred.

Main entry points: [`heart-particle.js`](https://github.com/mh-adib/heart-particles/blob/main/heart-particle.js) (Heart demo), [`ajax.js`](https://github.com/mh-adib/heart-particles/blob/main/ajax.js) (dat.GUI), [`next-particle.js`](https://github.com/mh-adib/heart-particles/blob/main/next-particle.js) (NextParticle engine), [`heart-particle.css`](https://github.com/mh-adib/heart-particles/blob/main/heart-particle.css) (GUI styles)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_demo["Demo behavior"]
  node_demo["Heart demo<br/>[heart-particle.js]"]
  node_settings["Particle settings<br/>[heart-particle.js]"]
  node_heartbeat["Heartbeat timer<br/>[heart-particle.js]"]
end

subgraph group_runtime["Particle runtime"]
  node_engine["NextParticle engine<br/>[next-particle.js]"]
  node_source_image["Heart image element"]
  node_rendering["Canvas / WebGL"]
end

subgraph group_controls["Settings UI"]
  node_gui["dat.GUI<br/>[ajax.js]"]
  node_gui_styles["GUI styles<br/>[heart-particle.css]"]
end

node_visitor(("Page visitor"))

node_visitor -->|"adjusts controls"| node_gui
node_demo -->|"creates instance"| node_engine
node_demo -->|"selects image"| node_source_image
node_demo -->|"creates controls"| node_gui
node_gui -->|"edits values"| node_settings
node_gui -->|"calls redraw"| node_demo
node_demo -->|"updates and starts"| node_engine
node_engine -->|"loads pixels"| node_source_image
node_engine -->|"draws particles"| node_rendering
node_heartbeat -->|"shifts origins"| node_engine
node_demo -->|"starts timer"| node_heartbeat
node_gui -.->|"uses styles"| node_gui_styles

click node_demo "https://github.com/mh-adib/heart-particles/blob/main/heart-particle.js"
click node_settings "https://github.com/mh-adib/heart-particles/blob/main/heart-particle.js"
click node_heartbeat "https://github.com/mh-adib/heart-particles/blob/main/heart-particle.js"
click node_engine "https://github.com/mh-adib/heart-particles/blob/main/next-particle.js"
click node_gui "https://github.com/mh-adib/heart-particles/blob/main/ajax.js"
click node_gui_styles "https://github.com/mh-adib/heart-particles/blob/main/heart-particle.css"

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_demo,node_settings,node_heartbeat toneBlue
class node_engine,node_source_image,node_rendering toneAmber
class node_gui,node_gui_styles toneMint
class node_visitor toneIndigo
```

## Components

### Demo behavior

- [Heart demo](https://github.com/mh-adib/heart-particles/blob/main/heart-particle.js): `heart-particle.js`
- [Particle settings](https://github.com/mh-adib/heart-particles/blob/main/heart-particle.js): `heart-particle.js`
- [Heartbeat timer](https://github.com/mh-adib/heart-particles/blob/main/heart-particle.js): `heart-particle.js`

### Particle runtime

- [NextParticle engine](https://github.com/mh-adib/heart-particles/blob/main/next-particle.js): `next-particle.js`
- **Heart image element**
- **Canvas / WebGL**

### Settings UI

- [dat.GUI](https://github.com/mh-adib/heart-particles/blob/main/ajax.js): `ajax.js`
- [GUI styles](https://github.com/mh-adib/heart-particles/blob/main/heart-particle.css): `heart-particle.css`

### Other components

- **Page visitor**

## Connections

- Page visitor → dat.GUI: adjusts controls
- Heart demo → NextParticle engine: creates instance
- Heart demo → Heart image element: selects image
- Heart demo → dat.GUI: creates controls
- dat.GUI → Particle settings: edits values
- dat.GUI → Heart demo: calls redraw
- Heart demo → NextParticle engine: updates and starts
- NextParticle engine → Heart image element: loads pixels
- NextParticle engine → Canvas / WebGL: draws particles
- Heartbeat timer → NextParticle engine: shifts origins
- Heart demo → Heartbeat timer: starts timer
- dat.GUI → GUI styles: uses styles