← CS 4343 course demos
2D Convolution Demo (JS)
Dark mode
Input image
Choose a sample image:
Bell
Lenna
Use checkerboard
Or upload your own image…
Your image is processed locally in your browser.
Save Output (PNG)…
Convert to grayscale for input
Tip: Both sample images are included with this demo.
Presets
(choose a preset)
Preset: N/A
Kernel
Kernel (matrix literal or gaussian(k)/box(k)/identity(k))
[[0,0,0],[0,1,0],[0,0,0]]
Examples:
[[0,-1,0],[-1,5,-1],[0,-1,0]]
gaussian(5)
box(3)
identity(7)
Kernel: N/A
Hyperparameters
Stride
Dilation
Padding type
pixels
same
valid
Pixels
Pad mode
zeros
reflect
replicate
circular
Notes:
same
behaves like “zero-pad to keep size” (stride must be 1).
valid
means no padding.
Dilation spaces kernel elements without adding weights.
Actions
Apply Convolution
Focus in Viewport
Tip: mousewheel to zoom, drag to pan. Padding: pixels | same | valid.
Input
Wheel = zoom · Drag = pan
Output
Wheel = zoom · Drag = pan