An interactive, educational web app that simulates how Computed Tomography (CT) works. Entirely frontend — no backend required. Deploy anywhere that serves static files.
- Object Editor — Draw custom phantoms or load presets (Shepp-Logan, circles)
- Forward Projection — Watch parallel-beam X-rays scan your object in real-time
- Sinogram Visualization — Explore the Radon transform with grayscale/heatmap colormaps
- Image Reconstruction — Compare Backprojection vs Filtered Backprojection (FBP) with Ram-Lak filter
- Noise Simulation — Add Gaussian noise to see its effect on reconstruction
- Limited-Angle Artifacts — Restrict scanning range to demonstrate angular aliasing
- Animated Buildup — Watch reconstruction emerge angle-by-angle
No build step required. Just serve the files:
# Python
python3 -m http.server 8080
# Node.js
npx serve .Then open http://localhost:8080.
- Push this folder to a GitHub repository
- Go to Settings → Pages
- Set source to Deploy from a branch
- Select
mainbranch,/ (root)folder - Click Save
Your app will be live at https://<username>.github.io/<repo>/.
├── index.html # Object editor + scanner page
├── sinogram.html # Sinogram visualization page
├── reconstruction.html # Reconstruction comparison page
├── css/
│ └── style.css # Complete design system
├── js/
│ ├── storage.js # localStorage persistence
│ ├── ui.js # Shared UI components
│ ├── projection.js # Radon transform (forward projection)
│ └── reconstruction.js # Backprojection & FBP with FFT
└── README.md
- Radon Transform: Discrete parallel-beam with bilinear interpolation
- FFT: Cooley-Tukey in-place implementation (pure JS, no dependencies)
- Ram-Lak Filter: Ramp filter applied in frequency domain for FBP
- Noise: Box-Muller transform for Gaussian noise generation
- Data Sharing: Pages communicate via
localStoragekeyct_scan_data
MIT