# pedrogabe/gravity architecture

> Architecture diagram of the GitHub repository pedrogabe/gravity, 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/pedrogabe/gravity
- Repository: https://github.com/pedrogabe/gravity

## Overview

This is a small browser-based gravity sandbox: users create and launch circular bodies, adjust their properties and gravity, and watch the bodies interact on a canvas. The runtime is concentrated in two scripts; the graph separates input, simulation, and rendering responsibilities that share state. The README is empty, so capabilities and relationships are based on the shown source excerpts.

Main entry points: [`sketch.js`](https://github.com/pedrogabe/gravity/blob/main/sketch.js) (Body state), [`script.js`](https://github.com/pedrogabe/gravity/blob/main/script.js) (Settings controls)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_controls["Controls"]
  node_settings["Settings controls<br/>[script.js]"]
end

subgraph group_runtime["Simulation"]
  node_creation["Body creation<br/>[sketch.js]"]
  node_state["Body state<br/>[sketch.js]"]
  node_physics["Gravity physics<br/>[sketch.js]"]
  node_rendering["Canvas rendering<br/>[sketch.js]"]
end

node_user(("User"))
node_canvas["p5 canvas runtime"]

node_user -->|"adjusts settings"| node_settings
node_settings -->|"updates parameters"| node_state
node_user -->|"drags to launch"| node_creation
node_creation -->|"adds body"| node_state
node_state -->|"calculates attraction"| node_physics
node_physics -->|"updates velocity"| node_state
node_state -->|"draws bodies"| node_rendering
node_rendering -->|"renders frame"| node_canvas
node_creation -->|"checks canvas input"| node_canvas

click node_settings "https://github.com/pedrogabe/gravity/blob/main/script.js"
click node_creation "https://github.com/pedrogabe/gravity/blob/main/sketch.js"
click node_state "https://github.com/pedrogabe/gravity/blob/main/sketch.js"
click node_physics "https://github.com/pedrogabe/gravity/blob/main/sketch.js"
click node_rendering "https://github.com/pedrogabe/gravity/blob/main/sketch.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_settings,node_user toneBlue
class node_creation,node_state,node_physics,node_rendering toneAmber
class node_canvas toneIndigo
```

## Components

### Controls

- [Settings controls](https://github.com/pedrogabe/gravity/blob/main/script.js): `script.js`

### Simulation

- [Body creation](https://github.com/pedrogabe/gravity/blob/main/sketch.js): `sketch.js`
- [Body state](https://github.com/pedrogabe/gravity/blob/main/sketch.js): `sketch.js`
- [Gravity physics](https://github.com/pedrogabe/gravity/blob/main/sketch.js): `sketch.js`
- [Canvas rendering](https://github.com/pedrogabe/gravity/blob/main/sketch.js): `sketch.js`

### Other components

- **User**
- **p5 canvas runtime**

## Connections

- User → Settings controls: adjusts settings (evidence: `script.js`)
- Settings controls → Body state: updates parameters (evidence: `script.js`)
- User → Body creation: drags to launch (evidence: `sketch.js`)
- Body creation → Body state: adds body (evidence: `sketch.js`)
- Body state → Gravity physics: calculates attraction (evidence: `sketch.js`)
- Gravity physics → Body state: updates velocity (evidence: `sketch.js`)
- Body state → Canvas rendering: draws bodies (evidence: `sketch.js`)
- Canvas rendering → p5 canvas runtime: renders frame (evidence: `sketch.js`)
- Body creation → p5 canvas runtime: checks canvas input (evidence: `sketch.js`)