Interactive Digital Image Processing Simulator for Education
ImageVisLab is a visual educational tool that helps students understand digital image processing algorithms through real-time visualization. Watch formulas come to life as you apply filters to images!
| Filter | Formula | Description |
|---|---|---|
| Negative | s = L - 1 - r |
Inverts intensity values |
| Gamma | s = c * r^y |
Power-law transformation |
| Logarithmic | s = c * log(1 + r) |
Expands dark tones |
| Quantization | s = floor(r/k) * k |
Reduces gray levels |
| Subsampling | Block averaging | Reduces spatial resolution |
| Equalization | CDF transformation | Enhances contrast |
| Filter | Kernel | Description |
|---|---|---|
| Box Blur | Mean kernel | Simple smoothing |
| Gaussian Blur | Gaussian kernel | Weighted smoothing (sigma adjustable) |
| Sharpen | Laplacian + original | Enhances edges |
| Laplacian | Nabla^2 f | Edge detection |
| Filter | Formula | Description |
|---|---|---|
| Binarization | s = r >= T ? 255 : 0 |
Converts to black & white |
| Erosion | A - B |
Shrinks white regions |
| Dilation | A + B |
Expands white regions |
| Opening | (A - B) + B |
Removes small white noise |
| Closing | (A + B) - B |
Fills small black holes |
| Filter | Formula | Description |
|---|---|---|
| Sobel X | Gx kernel |
Detects vertical edges |
| Sobel Y | Gy kernel |
Detects horizontal edges |
| Sobel Magnitude | √(Gx² + Gy²) |
Combined edge strength |
| Median | median(N) |
Removes salt-and-pepper noise |
| Filter | Formula | Description |
|---|---|---|
| Grayscale | 0.299R + 0.587G + 0.114B |
Luminance conversion |
| Sepia | Matrix transform | Vintage brownish tone |
| Swap RGB | R→G→B→R |
Rotates color channels |
| Filter | Formula | Description |
|---|---|---|
| FFT Spectrum | F(u,v) = Σf·e^(-j2π...) |
Visualizes frequency components |
- Pixel Inspector - RGB/Hex values with visual bars
- Magnifier - 11x11 neighborhood with color-coded zones
- Distance Metrics - D4 (Manhattan), D8 (Chebyshev), DE (Euclidean)
- Histogram - Real-time comparison (Original vs Processed)
- Status Bar - Real-time statistics (μ mean, σ std dev, H entropy)
- Formula Panel - Live LaTeX rendering with variable tracking
- Animation Mode - Scanline/Pixel-by-pixel filter visualization
- Zoom/Pan - Mouse wheel zoom, Alt+drag pan
- Undo/Redo - Ctrl+Z / Ctrl+Y
- Error Boundaries - Graceful error handling
- Loading Skeleton - Visual feedback during image loading
- Processing Indicator - Shows when applying slow filters
- Sample Images - Quick test with gradient/checkerboard/noise
- Node.js 18+
- npm or yarn
# Clone repository
git clone https://github.com/medeirosdev/ImageVisLab.git
cd ImageVisLab
# Install dependencies
npm install
# Start dev server
npm run devOpen http://localhost:5173 in your browser.
- Click Load button in sidebar
- Select any image (JPEG, PNG, WebP, etc.)
- Or use Sample Images for quick testing
- Expand a category (Point Operations, Spatial, Morphology)
- Click on a filter name
- Adjust parameters with sliders
- View the formula in the right panel
- Hover over the image
- View pixel info in the Inspector tab
- See neighborhood colors in the magnifier
- Check distance metrics (D4, D8, DE)
- Click the Histogram tab
- Compare original (hollow) vs processed (filled)
- Observe how transformations affect distribution
- Click Play in the Formula Panel
- Choose mode: Scanline or Pixel-by-pixel
- Adjust speed with slider
- Watch the filter being applied progressively
| Key | Action |
|---|---|
Space (hold) |
View original image |
Ctrl+Z |
Undo |
Ctrl+Y |
Redo |
Alt+Drag |
Pan image |
Mouse Wheel |
Zoom in/out |
Negative Transform
s = (L - 1) - r
Where L = 256 for 8-bit images.
Power-Law (Gamma)
s = c * r^gamma
gamma < 1: Brightens dark regionsgamma > 1: Darkens bright regions
Logarithmic
s = c * log(1 + r)
Expands dynamic range of dark pixels.
Histogram Equalization
s_k = (L-1) * Sum(p_r(r_j)) for j = 0 to k
Maps intensities using cumulative distribution function.
g(x,y) = Sum Sum f(x+i, y+j) * h(i,j)
Where h is the kernel/mask.
- Erosion:
A - B = { z | B_z subset A } - Dilation:
A + B = { z | B_z intersect A != empty } - Opening:
A o B = (A - B) + B - Closing:
A . B = (A + B) - B
src/
├── components/
│ ├── ErrorBoundary/ # Error handling
│ ├── FormulaPanel/ # LaTeX formula display
│ ├── Histogram/ # Bar chart visualization
│ ├── ImageCanvas/ # Main canvas with zoom/pan
│ ├── LaTeXFormula/ # KaTeX wrapper
│ ├── LoadingSkeleton/ # Loading states
│ ├── PixelInspector/ # Magnifier + RGB info
│ ├── Sidebar/ # Filter controls
│ └── StatusBar/ # Image statistics display
├── hooks/
│ └── useHistory.ts # Undo/Redo logic
├── utils/
│ ├── imageFilters.ts # Point operations
│ ├── convolution.ts # Spatial filters
│ ├── morphology.ts # Binary operations
│ ├── edgeDetection.ts # Sobel operators
│ ├── colorFilters.ts # Color transformations
│ ├── fft.ts # Fourier Transform
│ └── imageStatistics.ts # Mean, variance, entropy
├── workers/
│ └── imageWorker.ts # Background processing
├── types/
│ └── index.ts # TypeScript definitions
├── App.tsx # Main application
└── index.css # Design system
- Sprint 1: MVP with point operations
- Sprint 2: Histogram + Distance metrics
- Sprint 3: Convolution engine
- Sprint 4: Morphological operations
- Sprint 5: Edge detection (Sobel) + Color filters
- Sprint 6: FFT Spectrum + Image Statistics
- UX: Zoom/Pan, Undo/Redo, Sample images, Status Bar
- Reliability: Error boundaries, Loading states, Web Worker
- React 18 - UI framework
- TypeScript 5 - Type safety
- Vite 6 - Build tool
- KaTeX - LaTeX rendering
- CSS Variables - Design tokens
- Digital Image Processing - Gonzalez & Woods (4th Edition)
- Computer Vision: Algorithms and Applications - Szeliski
MIT License - See LICENSE for details.
ImageVisLab Contributors
Made with care for PDI students