# kdklv/bibimbap architecture

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

- Interactive diagram: https://gitdiagram.com/kdklv/bibimbap
- Repository: https://github.com/kdklv/bibimbap

## Overview

This repository is a collection of browser-based interactive art experiences, including a small p5.js drawing studio. The visitor-facing workflow is to open an experience and interact with its canvas; the p5 studio additionally lets the visitor choose a brush, then draw to produce an animated or generative composition. The sampled brush code shows that sketches build shared HUD controls, while the loader selects and loads sketches. Most standalone experience implementations were not sampled, so their internal behavior and wiring are left unspecified.

Main entry points: [`p5/shared/loader.js`](https://github.com/kdklv/bibimbap/blob/main/p5/shared/loader.js) (Brush Loader), [`p5/shared/hud.js`](https://github.com/kdklv/bibimbap/blob/main/p5/shared/hud.js) (Brush HUD), [`p5/index.html`](https://github.com/kdklv/bibimbap/blob/main/p5/index.html) (Brush Studio), [`p5/brushes/score/sketch.js`](https://github.com/kdklv/bibimbap/blob/main/p5/brushes/score/sketch.js) (Score Brush)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Experience Site"]
  node_home["Experience Index<br/>[index.html]"]
  node_cilia["Cilia<br/>[index.html]"]
  node_hanenbow["Hanenbow<br/>[index.html]"]
  node_irid["Irid<br/>[index.html]"]
  node_lanterns["Lanterns<br/>[index.html]"]
  node_luminaria["Luminaria<br/>[index.html]"]
  node_nanocarp["Nanocarp<br/>[index.html]"]
  node_slosh["Slosh<br/>[index.html]"]
  node_tracy["Tracy<br/>[index.html]"]
end

subgraph group_brushes["Drawing Studio"]
  node_studio["Brush Studio<br/>[index.html]"]
  node_loader["Brush Loader<br/>[loader.js]"]
  node_score["Score Brush<br/>[sketch.js]"]
  node_schematic["Schematic Brush<br/>[sketch.js]"]
  node_balloon["Balloon Brush<br/>[sketch.js]"]
  node_hud["Brush HUD<br/>[hud.js]"]
end

subgraph group_shared["Shared Utilities"]
  node_audio["Audio Helpers<br/>[audio.js]"]
  node_pointer["Pointer Helpers<br/>[pointer.js]"]
  node_theme["Shared Theme<br/>[theme.css]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_visitor -->|"opens"| node_cilia
node_visitor -->|"opens"| node_hanenbow
node_visitor -->|"opens"| node_irid
node_visitor -->|"opens"| node_lanterns
node_visitor -->|"opens"| node_luminaria
node_visitor -->|"opens"| node_nanocarp
node_visitor -->|"opens"| node_slosh
node_visitor -->|"opens"| node_tracy
node_visitor -->|"opens"| node_studio
node_studio -->|"loads"| node_loader
node_loader -->|"loads selected"| node_score
node_loader -->|"loads selected"| node_schematic
node_loader -->|"loads selected"| node_balloon
node_score -->|"builds HUD"| node_hud
node_schematic -->|"builds HUD"| node_hud
node_balloon -->|"builds HUD"| node_hud

click node_home "https://github.com/kdklv/bibimbap/blob/main/index.html"
click node_cilia "https://github.com/kdklv/bibimbap/blob/main/cilia/index.html"
click node_hanenbow "https://github.com/kdklv/bibimbap/blob/main/hanenbow/index.html"
click node_irid "https://github.com/kdklv/bibimbap/blob/main/irid/index.html"
click node_lanterns "https://github.com/kdklv/bibimbap/blob/main/lanterns/index.html"
click node_luminaria "https://github.com/kdklv/bibimbap/blob/main/luminaria/index.html"
click node_nanocarp "https://github.com/kdklv/bibimbap/blob/main/nanocarp/index.html"
click node_slosh "https://github.com/kdklv/bibimbap/blob/main/slosh/index.html"
click node_tracy "https://github.com/kdklv/bibimbap/blob/main/tracy/index.html"
click node_studio "https://github.com/kdklv/bibimbap/blob/main/p5/index.html"
click node_loader "https://github.com/kdklv/bibimbap/blob/main/p5/shared/loader.js"
click node_score "https://github.com/kdklv/bibimbap/blob/main/p5/brushes/score/sketch.js"
click node_schematic "https://github.com/kdklv/bibimbap/blob/main/p5/brushes/schematic/sketch.js"
click node_balloon "https://github.com/kdklv/bibimbap/blob/main/p5/brushes/balloon/sketch.js"
click node_hud "https://github.com/kdklv/bibimbap/blob/main/p5/shared/hud.js"
click node_audio "https://github.com/kdklv/bibimbap/blob/main/shared/audio.js"
click node_pointer "https://github.com/kdklv/bibimbap/blob/main/shared/pointer.js"
click node_theme "https://github.com/kdklv/bibimbap/blob/main/shared/theme.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_home,node_cilia,node_hanenbow,node_irid,node_lanterns,node_luminaria,node_nanocarp,node_slosh,node_tracy toneBlue
class node_studio,node_loader,node_score,node_schematic,node_balloon,node_hud toneAmber
class node_audio,node_pointer,node_theme toneMint
class node_visitor toneIndigo
```

## Components

### Experience Site

- [Experience Index](https://github.com/kdklv/bibimbap/blob/main/index.html): `index.html`
- [Cilia](https://github.com/kdklv/bibimbap/blob/main/cilia/index.html): `cilia/index.html`
- [Hanenbow](https://github.com/kdklv/bibimbap/blob/main/hanenbow/index.html): `hanenbow/index.html`
- [Irid](https://github.com/kdklv/bibimbap/blob/main/irid/index.html): `irid/index.html`
- [Lanterns](https://github.com/kdklv/bibimbap/blob/main/lanterns/index.html): `lanterns/index.html`
- [Luminaria](https://github.com/kdklv/bibimbap/blob/main/luminaria/index.html): `luminaria/index.html`
- [Nanocarp](https://github.com/kdklv/bibimbap/blob/main/nanocarp/index.html): `nanocarp/index.html`
- [Slosh](https://github.com/kdklv/bibimbap/blob/main/slosh/index.html): `slosh/index.html`
- [Tracy](https://github.com/kdklv/bibimbap/blob/main/tracy/index.html): `tracy/index.html`

### Drawing Studio

- [Brush Studio](https://github.com/kdklv/bibimbap/blob/main/p5/index.html): `p5/index.html`
- [Brush Loader](https://github.com/kdklv/bibimbap/blob/main/p5/shared/loader.js): `p5/shared/loader.js`
- [Score Brush](https://github.com/kdklv/bibimbap/blob/main/p5/brushes/score/sketch.js): `p5/brushes/score/sketch.js`
- [Schematic Brush](https://github.com/kdklv/bibimbap/blob/main/p5/brushes/schematic/sketch.js): `p5/brushes/schematic/sketch.js`
- [Balloon Brush](https://github.com/kdklv/bibimbap/blob/main/p5/brushes/balloon/sketch.js): `p5/brushes/balloon/sketch.js`
- [Brush HUD](https://github.com/kdklv/bibimbap/blob/main/p5/shared/hud.js): `p5/shared/hud.js`

### Shared Utilities

- [Audio Helpers](https://github.com/kdklv/bibimbap/blob/main/shared/audio.js): `shared/audio.js`
- [Pointer Helpers](https://github.com/kdklv/bibimbap/blob/main/shared/pointer.js): `shared/pointer.js`
- [Shared Theme](https://github.com/kdklv/bibimbap/blob/main/shared/theme.css): `shared/theme.css`

### Other components

- **Visitor**

## Connections

- Visitor → Experience Index: opens
- Visitor → Cilia: opens
- Visitor → Hanenbow: opens
- Visitor → Irid: opens
- Visitor → Lanterns: opens
- Visitor → Luminaria: opens
- Visitor → Nanocarp: opens
- Visitor → Slosh: opens
- Visitor → Tracy: opens
- Visitor → Brush Studio: opens
- Brush Studio → Brush Loader: loads
- Brush Loader → Score Brush: loads selected
- Brush Loader → Schematic Brush: loads selected
- Brush Loader → Balloon Brush: loads selected
- Score Brush → Brush HUD: builds HUD
- Schematic Brush → Brush HUD: builds HUD
- Balloon Brush → Brush HUD: builds HUD