Web Simulation

  

 

 

 

Image Convolution — 2D Filtering & Frequency Domain

This simulation visualizes 2D convolution for image processing: a small kernel matrix slides across the image, and each output pixel is a weighted sum of the neighborhood. Convolution is the foundation of blur, sharpen, and edge-detection filters in computer vision.

Sections

The convolution formula

For an image I and kernel K of size m×m, the output at pixel (x, y) is:

O(x,y) = Σi,j I(x+i, y+j) · K(i, j)

Indices i, j run over the kernel (e.g. −1, 0, 1 for a 3×3 kernel). At the image borders we use Clamp, Zero padding, or Wrap to define out-of-bounds pixels.

Presets

Basic

  • Identity: Leaves the image unchanged (center weight 1, rest 0).
  • Blur (Box): Equal-weight averaging filter—simple low-pass.
  • Gaussian Blur: Weighted average with Gaussian falloff—the standard blur in CNNs and OpenCV.
  • Sharpen: Emphasizes high frequencies (center > 1, neighbors negative).
  • Emboss: Diagonal gradient for a raised/3-D effect.

Edge / Gradient (CNN) — these kernels resemble filters learned in the first layers of CNNs like AlexNet and VGG.

  • Edge Detect: Laplacian-style 8-connected high-pass (center 8, neighbors −1).
  • Laplacian: 4-connected second-order derivative (center −4, cardinal neighbors +1).
  • Sobel V / H: Weighted first-order gradient; separable, widely used in CNN pre-processing.
  • Prewitt V / H: Simpler (uniform weight) first-order gradient operator.
  • Scharr V / H: Optimized 3×3 gradient with better rotational symmetry than Sobel—default in OpenCV's cv2.Scharr.

Frequency domain

Convolution in the spatial domain equals multiplication in the frequency domain. A blur (low-pass) kernel has a compact spectrum (bright center); an edge (high-pass) kernel suppresses the center and keeps high frequencies. The tool shows the magnitude spectrum of the input and kernel by default (Show frequency domain (FFT) is checked).

Simulation

The interactive simulator is below. Use the controls to explore the concepts described above.

Kernel

Original (input)
Filtered (output)

Usage

  1. Open image: Use the file input to load your own image (PNG, JPEG, etc.). By default the tool loads a built-in image or a fallback pattern. The image is scaled to 350×350 on the canvas.
  2. Preset: Choose a kernel preset; the default is Sharpen. Options include Identity, Blur (Box), Gaussian Blur, Sharpen, Emboss, Edge Detect, Laplacian, Sobel/Prewitt/Scharr (Vertical/Horizontal). All presets scale to 3×3, 5×5, and 7×7.
  3. Dimension: Use the spinbox for 3×3, 5×5, or 7×7. The kernel grid regenerates and the selected preset is applied to the new size.
  4. Apply kernel: Click to run 2D convolution. The result appears in the right canvas. RGB channels are processed independently unless you select a single channel.
  5. Normalize: When checked, the kernel is scaled so its weights sum to 1 (keeps brightness similar for blur).
  6. Padding: Clamp (extend edge pixels), Zero (0 outside), or Wrap (periodic) for border handling.
  7. Channel: Apply to All (RGB), or Red / Green / Blue only to see per-channel effects.
  8. Frequency view: Show frequency domain (FFT) is on by default. It displays the magnitude spectrum of the input and kernel (log scale, low frequencies centered). Uncheck to hide the FFT panels.

Visualizations

  • Original (input): Source image at 350×350.
  • Filtered (output): Result of 2D convolution with the current kernel and options.
  • Input spectrum / Kernel spectrum: Shown when “Show frequency domain (FFT)” is checked (default). FFT magnitude, log scale; blur = bright center (low-pass), edge = dark center (high-pass).

Controls

  • Open image (file input): Load an image from your computer.
  • Preset (dropdown): Load a standard kernel; default is Sharpen.
  • Dimension (spinbox): 3, 5, or 7 for kernel size.
  • Kernel grid: Edit values manually; then click Apply kernel.
  • Normalize, Padding, Channel: Options for convolution and display.
  • Apply kernel: Run the convolution filter.
  • Show frequency domain (FFT): Checked by default; toggles the FFT spectrum canvases.

Limitations

  • Small fixed kernels. Only 3×3, 5×5, and 7×7 kernels are supported; large-radius or separable-then-combined filters and non-square kernels are not.
  • Linear, shift-invariant filtering only. Pure 2D convolution — no non-linear filters (median, bilateral), no learned multi-channel filters, and no stride/pooling as in a real CNN layer.
  • Independent RGB channels. Each color channel is convolved separately with the same kernel; there is no cross-channel mixing or color-space awareness (e.g. luminance-only edge detection).
  • Three border policies. Only Clamp, Zero, and Wrap padding; reflect/mirror padding and "valid" (shrink) output are not offered.
  • Display-scaled, 8-bit. Images are resized to 350×350 and processed in 8-bit per channel, so fine detail and high-dynamic-range effects are limited; output is clipped to 0–255.
  • FFT view is illustrative. The spectrum panels show log-magnitude only (no phase) and are meant to build intuition for the convolution theorem, not for quantitative spectral analysis.