An educational web application that helps users understand digital image processing (DIP) convolution operations through interactive, step-by-step visualization. Users can watch kernels slide across images pixel-by-pixel, see values change in real-time, and deeply understand how operations like Sobel edge detection actually work.
- Sample Images: Curated set of sample images for demonstration
- User Upload: Accept any browser-decodable format (PNG, JPG, WebP, etc.)
- Max Resolution: 1024×1024 pixels
- Color Handling: Automatically convert color images to grayscale
- Sobel Filter
- Gx (horizontal edge detection)
- Gy (vertical edge detection)
- Magnitude (combined edge strength)
- Toggleable views between Gx, Gy, and magnitude
- Gaussian Blur (3×3)
- Sharpen (3×3)
- User-editable 3×3 matrix
- Live input of kernel values
- Experiment freely with any values
User-configurable with the following options:
- Zero Padding (default) - treat out-of-bounds as 0
- Mirror - reflect pixels at boundary
- Clamp - repeat edge pixels
Users can toggle between two view modes:
- Original image on left
- Processed image on right
- Both zoom/pan in sync
- Shows transformation progressively as convolution computes
- Pixels that have been processed show their filtered values in their true positions
- Unprocessed pixels show original values
- Example: If raster scan is 35% complete, the top-left 35% of the image (in raster order) shows filtered results, the remaining 65% shows the original
- A visible boundary/highlight indicates the current processing position
- Continuous zoom: Mouse scroll wheel for smooth zoom in/out
- Preset levels: Quick-jump buttons (e.g., 1×, 4×, 16×, 64×)
- Pixelated view: When zoomed in sufficiently, individual pixels become visible as discrete squares with thin borders (Photoshop-style)
- On-screen kernel display: Show the current kernel matrix with its values
- Sliding window highlight: Visual border/overlay showing the 3×3 region currently being processed
- Follow mode: Camera automatically tracks and zooms into the sliding window as it progresses
When enabled:
- Green flash: Pixel value increased from convolution
- Red flash: Pixel value decreased from convolution
- No flash: Value unchanged
- Play/Pause button: Toggle automatic progression
- Speed slider: Range from 1 pixel/second (slowest) to instant (fastest)
- Step buttons: Move forward/backward one pixel at a time
- Timeline scrubber: Drag to jump to any point in the raster scan
- Auto-play (default): Convolution progresses automatically at selected speed
- Manual stepping: User controls each step with forward/back buttons
- Follow mode: When enabled, viewport tracks the current convolution position
Standard raster scan: left-to-right, top-to-bottom
- Auto-tracks the current convolution pixel: As the convolution progresses, the calculation breakdown updates in real-time to show the pixel currently being processed
- Click any pixel to pin inspection to that pixel (shows its calculation even when convolution moves on)
- Calculation breakdown shows:
- The 3×3 neighborhood values from the source image
- The kernel weights
- Element-wise multiplication results
- Final sum/output value
- Displayed in the bottom bar alongside playback controls (no scrolling required):
- Calculation grids (neighborhood, kernel, products) occupy the left side of the bottom bar
- Timeline scrubber and playback buttons occupy the right side
- Compact layout that fits without scrolling at standard desktop resolutions
- Click-drag to pan the image
- Scroll to zoom (continuous)
- Zoom presets for quick navigation
- Operation tooltips: Brief explanations of what each kernel/filter does
- Kernel descriptions: What Sobel detects, why Gaussian blurs, etc.
- Shown contextually, not intrusive
- Download button: Save the processed image
- Format: PNG (preserves quality)
- Framework: React
- Rendering: Three.js (enables future 3D visualizations)
- Processing: Client-side only (no backend)
- State: Stateless (no accounts, no persistence)
- Primary: Desktop browsers (Chrome, Firefox, Safari, Edge)
- Secondary: Mobile browsers (functional but not optimized)
- Responsive layout that degrades gracefully on smaller screens
- Efficient rendering for 1024×1024 images
- Smooth 60fps zoom/pan interactions
- Web Workers for convolution computation (non-blocking UI)
┌─────────────────────────────────────────────────────────────┐
│ Header: KernelScope [?] Help │
├─────────────┬───────────────────────────────────────────────┤
│ │ │
│ Controls │ Main Canvas │
│ Panel │ │
│ │ ┌─────────────────────────────────┐ │
│ - Image │ │ │ │
│ Select │ │ │ │
│ │ │ Image View │ │
│ - Kernel │ │ (side-by-side or single) │ │
│ Select │ │ │ │
│ │ │ │ │
│ - Kernel │ └─────────────────────────────────┘ │
│ Matrix │ │
│ Display ├───────────────────────────────────────────────┤
│ │ Pixel Calculation │ Playback │
│ - Edge │ ┌───┐ ┌───┐ ┌───┐ │ ▶ ⏸ ◀▐ ▐▶ ⏮ ⏭ │
│ Handling │ │N×N│×│K×K│ = │P×P│ │ [====|====] │
│ │ └───┘ └───┘ └───┘ │ Speed: ███ 1x/s │
│ - Options │ (x,y) orig→out Σ=val │ pos / total │
│ □ Color │ │ │
│ flash │ (auto-tracks current │ │
│ □ Follow │ pixel during playback) │ │
│ mode │ │ │
│ │ │ │
│ [Download] │ │ │
│ │ │ │
└─────────────┴──────────────────────────┴────────────────────┘
- RGB channel support (process each channel separately)
- Larger kernel sizes (5×5, 7×7)
- Kernel presets library (save/load custom kernels)
- Shareable URLs with encoded state
- Morphological operations
The goal of these features is to create genuine "I never thought of it this way" moments — bridging intuition about individual pixels to the mathematical and conceptual foundations of image processing and computer vision.
Render pixel brightness as terrain height using Three.js. A flat image becomes a landscape: edges become cliffs, blurs become gentle slopes, noise becomes jagged spikes. Sobel edge detection becomes intuitive — you're finding steep terrain. Toggle between flat and 3D view of original and processed image.
Place a single white pixel on a black canvas, apply any kernel, show the result. The output is the kernel — this is the definition of impulse response. Add a dedicated button: "What does this kernel see?" Immediately clarifies that a kernel is a stamp of what it responds to in a point of light.
For Sobel kernels, compute atan2(Gy, Gx) and display as a color-wheel overlay on the image. Each pixel colored by the direction its edge faces (not just magnitude). Bridges the gap between Sobel as a filter and Sobel as a step in the Canny pipeline.
Show the 2D FFT of the source image and the frequency response of the current kernel side by side. A Gaussian blur visually cuts off high frequencies. Sharpen boosts them. Noise lives in high frequencies. The "why does blur remove noise?" question answers itself visually.
For separable kernels (Gaussian, Sobel), animate the decomposition into two 1D passes — first horizontal sweep, then vertical — arriving at the same result as the 2D convolution. Show the computational difference: O(n·k²) vs O(n·2k). Makes the concept of separability tangible.
Apply two kernels sequentially and show that the result equals applying a single combined kernel (their convolution). Visualize both the two-pass and one-pass versions side by side. Foundational for understanding how deep learning layers compose.
Display the pixel value histogram updating in real time as convolution progresses. Watch Gaussian blur compress the distribution toward the mean. Watch Sobel create a bimodal distribution. Watch sharpen push values toward extremes.
Let users draw a custom kernel by sketching on a mini canvas (e.g., a cross, a circle, a diagonal line). The drawn pattern becomes the kernel values. Demonstrates that a kernel shaped like a feature responds strongly to that feature — the intuition behind template matching and CNN filters.
Enhance pixel inspection: when clicking an output pixel, animate the 9 neighborhood values flying in, multiplying by kernel weights one at a time with visual arrows, then accumulating into the sum. A frame-by-frame animation of the math, not just a static grid.
Walk through Canny edge detection as a guided multi-step tour: Gaussian blur → Sobel magnitude → non-maximum suppression → double thresholding → hysteresis. Each step is its own visualization with before/after view. Shows a complete classical computer vision pipeline built from the primitives already in the app.
Ship a small set of kernels extracted from a real trained CNN (e.g., AlexNet layer 1 filters). Let users apply them and observe what patterns they detect. Bridges hand-crafted filters to learned filters — the conceptual leap from classical CV to deep learning.
A user with no prior DIP knowledge should be able to:
- Load an image
- Apply a Sobel filter
- Watch the convolution happen step-by-step
- Understand why edges appear where they do by inspecting individual pixel calculations
- Experiment with custom kernels and see immediate results