Gaussian blur — computer vision in the browser

Gaussian blur smooths an image by averaging each pixel with its neighbours weighted by a bell curve — a fundamental computer-vision preprocessing step (denoising before edge detection or thresholding). OpenCV’s cv2.GaussianBlur takes a kernel size; bigger means smoother. Run it live and compare kernel sizes.

Gaussian blur — example output

Example code (Python / OpenCV)

import cv2
import numpy as np

# A noisy pattern to smooth
img = np.zeros((300, 400, 3), dtype=np.uint8)
for i in range(0, 400, 20):
    cv2.line(img, (i, 0), (i, 300), (0, 255, 0), 2)
cv2.circle(img, (200, 150), 80, (255, 0, 255), 3)
noise = np.random.randint(0, 60, img.shape, dtype=np.uint8)
img = cv2.add(img, noise)
cv2.imshow("original", img)

# Gaussian blur — a bigger kernel means stronger smoothing
cv2.imshow("blur 5x5", cv2.GaussianBlur(img, (5, 5), 0))
cv2.imshow("blur 15x15", cv2.GaussianBlur(img, (15, 15), 0))
print("Gaussian blur at two kernel sizes. Try (9, 9) or (21, 21).")

More computer-vision techniques →