# felixmelanson/astrocyte_anim architecture

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

- Interactive diagram: https://gitdiagram.com/felixmelanson/astrocyte_anim
- Repository: https://github.com/felixmelanson/astrocyte_anim

## Overview

astrocyte_anim is a browser-based animated walkthrough of Liddelow et al.’s methods and Fig. 1a results. The viewer advances through tissue, cell dissociation and immunopanning, culture, the microglia-to-astrocyte-to-RGC relay, and the qPCR/Fig. 1a readout; users can pause, scrub, replay, and change theme. Scene files implement the scientific stages, while the app schedules and renders steps and the core provides drawing primitives. Relationships among scene stages are based on the README’s description; unsampled scene internals are not assumed to call one another.

Main entry points: [`js/app.js`](https://github.com/felixmelanson/astrocyte_anim/blob/main/js/app.js) (Step playback), [`js/scenes/scene4.js`](https://github.com/felixmelanson/astrocyte_anim/blob/main/js/scenes/scene4.js) (Conditioned-medium relay), [`js/scenes/scene2.js`](https://github.com/felixmelanson/astrocyte_anim/blob/main/js/scenes/scene2.js) (Dissociation and panning), [`js/scenes/scene3.js`](https://github.com/felixmelanson/astrocyte_anim/blob/main/js/scenes/scene3.js) (Culture stage)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_viewer["Viewer and playback"]
  node_app["Step playback<br/>[app.js]"]
  node_controls["Playback controls<br/>[controls.js]"]
end

subgraph group_methods["Methods animation"]
  node_tissue["Tissue walkthrough<br/>[scene1.js]"]
  node_panning["Dissociation and panning<br/>[scene2.js]"]
  node_culture["Culture stage<br/>[scene3.js]"]
  node_relay["Conditioned-medium relay<br/>[scene4.js]"]
  node_actors["Scene actors<br/>[actors.js]"]
end

subgraph group_readout["Readout animation"]
  node_qpcr["qPCR and Fig. 1a<br/>[scene5.js]"]
  node_fig1a["Figure readout<br/>[fig1a.js]"]
end

subgraph group_runtime["Drawing runtime"]
  node_assets["Visual assets<br/>[assets.js]"]
  node_cells["Cell drawing<br/>[cell.js]"]
  node_hardware["Lab equipment drawing<br/>[hardware.js]"]
  node_core["Drawing primitives"]
end

node_viewer_user(("Viewer"))

node_viewer_user -->|"operates"| node_controls
node_controls -->|"controls playback"| node_app
node_app -->|"runs steps"| node_tissue
node_app -->|"runs steps"| node_panning
node_app -->|"runs steps"| node_culture
node_app -->|"runs steps"| node_relay
node_app -->|"runs steps"| node_qpcr
node_tissue -->|"follows in methods"| node_panning
node_panning -->|"follows in methods"| node_culture
node_culture -->|"follows in methods"| node_relay
node_relay -->|"leads to readout"| node_qpcr
node_qpcr -->|"draws prior relay"| node_relay

click node_app "https://github.com/felixmelanson/astrocyte_anim/blob/main/js/app.js"
click node_controls "https://github.com/felixmelanson/astrocyte_anim/blob/main/js/controls.js"
click node_tissue "https://github.com/felixmelanson/astrocyte_anim/blob/main/js/scenes/scene1.js"
click node_panning "https://github.com/felixmelanson/astrocyte_anim/blob/main/js/scenes/scene2.js"
click node_culture "https://github.com/felixmelanson/astrocyte_anim/blob/main/js/scenes/scene3.js"
click node_relay "https://github.com/felixmelanson/astrocyte_anim/blob/main/js/scenes/scene4.js"
click node_actors "https://github.com/felixmelanson/astrocyte_anim/blob/main/js/scenes/actors.js"
click node_qpcr "https://github.com/felixmelanson/astrocyte_anim/blob/main/js/scenes/scene5.js"
click node_fig1a "https://github.com/felixmelanson/astrocyte_anim/blob/main/js/scenes/fig1a.js"
click node_assets "https://github.com/felixmelanson/astrocyte_anim/blob/main/js/core/assets.js"
click node_cells "https://github.com/felixmelanson/astrocyte_anim/blob/main/js/core/cell.js"
click node_hardware "https://github.com/felixmelanson/astrocyte_anim/blob/main/js/core/hardware.js"
click node_core "https://github.com/felixmelanson/astrocyte_anim/tree/main/js/core"

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_app,node_controls,node_viewer_user toneBlue
class node_tissue,node_panning,node_culture,node_relay,node_actors toneAmber
class node_qpcr,node_fig1a toneMint
class node_assets,node_cells,node_hardware,node_core toneRose
```

## Components

### Viewer and playback

- [Step playback](https://github.com/felixmelanson/astrocyte_anim/blob/main/js/app.js): `js/app.js`
- [Playback controls](https://github.com/felixmelanson/astrocyte_anim/blob/main/js/controls.js): `js/controls.js`

### Methods animation

- [Tissue walkthrough](https://github.com/felixmelanson/astrocyte_anim/blob/main/js/scenes/scene1.js): `js/scenes/scene1.js`
- [Dissociation and panning](https://github.com/felixmelanson/astrocyte_anim/blob/main/js/scenes/scene2.js): `js/scenes/scene2.js`
- [Culture stage](https://github.com/felixmelanson/astrocyte_anim/blob/main/js/scenes/scene3.js): `js/scenes/scene3.js`
- [Conditioned-medium relay](https://github.com/felixmelanson/astrocyte_anim/blob/main/js/scenes/scene4.js): `js/scenes/scene4.js`
- [Scene actors](https://github.com/felixmelanson/astrocyte_anim/blob/main/js/scenes/actors.js): `js/scenes/actors.js`

### Readout animation

- [qPCR and Fig. 1a](https://github.com/felixmelanson/astrocyte_anim/blob/main/js/scenes/scene5.js): `js/scenes/scene5.js`
- [Figure readout](https://github.com/felixmelanson/astrocyte_anim/blob/main/js/scenes/fig1a.js): `js/scenes/fig1a.js`

### Drawing runtime

- [Visual assets](https://github.com/felixmelanson/astrocyte_anim/blob/main/js/core/assets.js): `js/core/assets.js`
- [Cell drawing](https://github.com/felixmelanson/astrocyte_anim/blob/main/js/core/cell.js): `js/core/cell.js`
- [Lab equipment drawing](https://github.com/felixmelanson/astrocyte_anim/blob/main/js/core/hardware.js): `js/core/hardware.js`
- [Drawing primitives](https://github.com/felixmelanson/astrocyte_anim/tree/main/js/core): `js/core`

### Other components

- **Viewer**

## Connections

- Viewer → Playback controls: operates (evidence: `js/controls.js`)
- Playback controls → Step playback: controls playback (evidence: `js/controls.js`)
- Step playback → Tissue walkthrough: runs steps (evidence: `README.md`)
- Step playback → Dissociation and panning: runs steps (evidence: `README.md`)
- Step playback → Culture stage: runs steps (evidence: `README.md`)
- Step playback → Conditioned-medium relay: runs steps (evidence: `README.md`)
- Step playback → qPCR and Fig. 1a: runs steps (evidence: `README.md`)
- Tissue walkthrough → Dissociation and panning: follows in methods (evidence: `README.md`)
- Dissociation and panning → Culture stage: follows in methods (evidence: `README.md`)
- Culture stage → Conditioned-medium relay: follows in methods (evidence: `README.md`)
- Conditioned-medium relay → qPCR and Fig. 1a: leads to readout (evidence: `README.md`)
- qPCR and Fig. 1a → Conditioned-medium relay: draws prior relay (evidence: `js/scenes/scene5.js`)