# pangyongsheng/pixel-math-wasm architecture

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

- Interactive diagram: https://gitdiagram.com/pangyongsheng/pixel-math-wasm
- Repository: https://github.com/pangyongsheng/pixel-math-wasm

## Overview

Pixel Math WASM is a browser-based collection of image-processing, mathematics, machine-learning, and graphics demos, with Rust algorithms exposed through WebAssembly and a Vue interface. The intended workflow is to choose a demo, provide or adjust inputs, run an algorithm, and view the result; fractal demos also render and interact directly on Canvas. The README documents the browser/WASM relationship, while sampled source confirms Rust module exports and the Vue app entry point. Individual page-to-algorithm calls are not shown in the sampled source, so those links are not expanded.

Main entry points: [`src/lib.rs`](https://github.com/pangyongsheng/pixel-math-wasm/blob/main/src/lib.rs) (Rust WASM API), [`web/src/App.vue`](https://github.com/pangyongsheng/pixel-math-wasm/blob/main/web/src/App.vue) (Vue app), [`web/src/views`](https://github.com/pangyongsheng/pixel-math-wasm/tree/main/web/src/views) (Demo pages), [`web/src/views/fractal`](https://github.com/pangyongsheng/pixel-math-wasm/tree/main/web/src/views/fractal) (Fractal views)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Vue interface"]
  node_app["Vue app<br/>[App.vue]"]
  node_views["Demo pages"]
  node_fractal_view["Fractal views"]
end

subgraph group_wasm["WASM algorithms"]
  node_wasm_api["Rust WASM API<br/>[lib.rs]"]
  node_pixel_ops["Pixel filters"]
  node_convolution["Convolution effects"]
  node_transforms["Geometric transforms"]
  node_fractals["Fractal algorithms"]
  node_linear["Linear algebra"]
  node_probability["Probability tools"]
  node_frequency["Frequency tools"]
  node_intelligence["Image intelligence"]
  node_synthesis["Simulation synthesis"]
end

subgraph group_visual["Canvas graphics"]
  node_canvas["Canvas rendering<br/>[FractalCanvas.vue]"]
end

node_user(("Demo user"))

node_user -->|"opens demos"| node_app
node_app -->|"presents pages"| node_views
node_views -->|"runs algorithms"| node_wasm_api
node_wasm_api -->|"exports"| node_pixel_ops
node_wasm_api -->|"exports"| node_convolution
node_wasm_api -->|"exports"| node_transforms
node_wasm_api -->|"exports"| node_fractals
node_wasm_api -->|"exports"| node_linear
node_wasm_api -->|"exports"| node_probability
node_wasm_api -->|"exports"| node_frequency
node_wasm_api -->|"exports"| node_intelligence
node_wasm_api -->|"exports"| node_synthesis
node_fractal_view -->|"renders on"| node_canvas
node_user -->|"interacts with"| node_fractal_view

click node_app "https://github.com/pangyongsheng/pixel-math-wasm/blob/main/web/src/App.vue"
click node_views "https://github.com/pangyongsheng/pixel-math-wasm/tree/main/web/src/views"
click node_fractal_view "https://github.com/pangyongsheng/pixel-math-wasm/tree/main/web/src/views/fractal"
click node_wasm_api "https://github.com/pangyongsheng/pixel-math-wasm/blob/main/src/lib.rs"
click node_pixel_ops "https://github.com/pangyongsheng/pixel-math-wasm/tree/main/src/image"
click node_convolution "https://github.com/pangyongsheng/pixel-math-wasm/tree/main/src/convolve"
click node_transforms "https://github.com/pangyongsheng/pixel-math-wasm/tree/main/src/transform"
click node_fractals "https://github.com/pangyongsheng/pixel-math-wasm/tree/main/src/fractal"
click node_linear "https://github.com/pangyongsheng/pixel-math-wasm/tree/main/src/linear"
click node_probability "https://github.com/pangyongsheng/pixel-math-wasm/tree/main/src/probability"
click node_frequency "https://github.com/pangyongsheng/pixel-math-wasm/tree/main/src/frequency"
click node_intelligence "https://github.com/pangyongsheng/pixel-math-wasm/tree/main/src/intelligence"
click node_synthesis "https://github.com/pangyongsheng/pixel-math-wasm/tree/main/src/synthesis"
click node_canvas "https://github.com/pangyongsheng/pixel-math-wasm/blob/main/web/src/views/fractal/FractalCanvas.vue"

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_views,node_fractal_view,node_user toneBlue
class node_wasm_api,node_pixel_ops,node_convolution,node_transforms,node_fractals,node_linear,node_probability,node_frequency,node_intelligence,node_synthesis toneAmber
class node_canvas toneMint
```

## Components

### Vue interface

- [Vue app](https://github.com/pangyongsheng/pixel-math-wasm/blob/main/web/src/App.vue): `web/src/App.vue`
- [Demo pages](https://github.com/pangyongsheng/pixel-math-wasm/tree/main/web/src/views): `web/src/views`
- [Fractal views](https://github.com/pangyongsheng/pixel-math-wasm/tree/main/web/src/views/fractal): `web/src/views/fractal`

### WASM algorithms

- [Rust WASM API](https://github.com/pangyongsheng/pixel-math-wasm/blob/main/src/lib.rs): `src/lib.rs`
- [Pixel filters](https://github.com/pangyongsheng/pixel-math-wasm/tree/main/src/image): `src/image`
- [Convolution effects](https://github.com/pangyongsheng/pixel-math-wasm/tree/main/src/convolve): `src/convolve`
- [Geometric transforms](https://github.com/pangyongsheng/pixel-math-wasm/tree/main/src/transform): `src/transform`
- [Fractal algorithms](https://github.com/pangyongsheng/pixel-math-wasm/tree/main/src/fractal): `src/fractal`
- [Linear algebra](https://github.com/pangyongsheng/pixel-math-wasm/tree/main/src/linear): `src/linear`
- [Probability tools](https://github.com/pangyongsheng/pixel-math-wasm/tree/main/src/probability): `src/probability`
- [Frequency tools](https://github.com/pangyongsheng/pixel-math-wasm/tree/main/src/frequency): `src/frequency`
- [Image intelligence](https://github.com/pangyongsheng/pixel-math-wasm/tree/main/src/intelligence): `src/intelligence`
- [Simulation synthesis](https://github.com/pangyongsheng/pixel-math-wasm/tree/main/src/synthesis): `src/synthesis`

### Canvas graphics

- [Canvas rendering](https://github.com/pangyongsheng/pixel-math-wasm/blob/main/web/src/views/fractal/FractalCanvas.vue): `web/src/views/fractal/FractalCanvas.vue`

### Other components

- **Demo user**

## Connections

- Demo user → Vue app: opens demos
- Vue app → Demo pages: presents pages
- Demo pages → Rust WASM API: runs algorithms
- Rust WASM API → Pixel filters: exports
- Rust WASM API → Convolution effects: exports
- Rust WASM API → Geometric transforms: exports
- Rust WASM API → Fractal algorithms: exports
- Rust WASM API → Linear algebra: exports
- Rust WASM API → Probability tools: exports
- Rust WASM API → Frequency tools: exports
- Rust WASM API → Image intelligence: exports
- Rust WASM API → Simulation synthesis: exports
- Fractal views → Canvas rendering: renders on
- Demo user → Fractal views: interacts with