# aleebiotec/interactive-particles-canvas-sketch architecture

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

- Interactive diagram: https://gitdiagram.com/aleebiotec/interactive-particles-canvas-sketch
- Repository: https://github.com/aleebiotec/interactive-particles-canvas-sketch

## Overview

This is a small creative-coding sketch: canvas-sketch starts an animated canvas, where concentric particle positions are initialized and then updated and drawn each frame. A mouse drag moves a shared cursor used by the particles’ repulsion; particles also return toward their original positions, with damping, size changes, and distance-based colors. The graph is based on the README and the single sampled source file; these responsibilities are implemented together in that file.

Main entry points: [`sketch-particles.js`](https://github.com/aleebiotec/interactive-particles-canvas-sketch/blob/main/sketch-particles.js) (Sketch setup)

## Diagram (Mermaid)

```mermaid
flowchart TD

node_user(("User"))
node_canvas_sketch["canvas-sketch runtime"]
node_setup["Sketch setup"]
node_particle_init["Circular layout"]
node_mouse_input["Mouse interaction"]
node_particle_motion["Particle motion"]
node_particle_render["Particle rendering"]
node_canvas["Canvas"]

node_canvas_sketch -->|"starts sketch"| node_setup
node_setup -->|"creates particles"| node_particle_init
node_setup -->|"registers handler"| node_mouse_input
node_user -->|"drags cursor"| node_mouse_input
node_mouse_input -->|"updates cursor"| node_particle_motion
node_setup -->|"calls update"| node_particle_motion
node_setup -->|"calls draw"| node_particle_render
node_particle_render -->|"draws particles"| node_canvas

click node_setup "https://github.com/aleebiotec/interactive-particles-canvas-sketch/blob/main/sketch-particles.js"
click node_particle_init "https://github.com/aleebiotec/interactive-particles-canvas-sketch/blob/main/sketch-particles.js"
click node_mouse_input "https://github.com/aleebiotec/interactive-particles-canvas-sketch/blob/main/sketch-particles.js"
click node_particle_motion "https://github.com/aleebiotec/interactive-particles-canvas-sketch/blob/main/sketch-particles.js"
click node_particle_render "https://github.com/aleebiotec/interactive-particles-canvas-sketch/blob/main/sketch-particles.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_user toneBlue
class node_canvas_sketch,node_canvas toneIndigo
class node_setup,node_particle_init,node_mouse_input,node_particle_motion,node_particle_render toneTeal
```

## Components

### Other components

- **User**
- **canvas-sketch runtime**
- [Sketch setup](https://github.com/aleebiotec/interactive-particles-canvas-sketch/blob/main/sketch-particles.js): `sketch-particles.js`
- [Circular layout](https://github.com/aleebiotec/interactive-particles-canvas-sketch/blob/main/sketch-particles.js): `sketch-particles.js`
- [Mouse interaction](https://github.com/aleebiotec/interactive-particles-canvas-sketch/blob/main/sketch-particles.js): `sketch-particles.js`
- [Particle motion](https://github.com/aleebiotec/interactive-particles-canvas-sketch/blob/main/sketch-particles.js): `sketch-particles.js`
- [Particle rendering](https://github.com/aleebiotec/interactive-particles-canvas-sketch/blob/main/sketch-particles.js): `sketch-particles.js`
- **Canvas**

## Connections

- canvas-sketch runtime → Sketch setup: starts sketch (evidence: `sketch-particles.js`)
- Sketch setup → Circular layout: creates particles (evidence: `sketch-particles.js`)
- Sketch setup → Mouse interaction: registers handler (evidence: `sketch-particles.js`)
- User → Mouse interaction: drags cursor (evidence: `README.md`)
- Mouse interaction → Particle motion: updates cursor (evidence: `sketch-particles.js`)
- Sketch setup → Particle motion: calls update (evidence: `sketch-particles.js`)
- Sketch setup → Particle rendering: calls draw (evidence: `sketch-particles.js`)
- Particle rendering → Canvas: draws particles (evidence: `sketch-particles.js`)