Bitwise operations & masking — computer vision in the browser

Bitwise operations (AND, OR, XOR, NOT) are how masks composite images in computer vision — keeping, dropping or combining regions pixel by pixel. This builds two shapes and combines them every way. Run it live and swap the operator to see how masks are put together.

Bitwise operations & masking — example output

Example code (Python / OpenCV)

"""
Bitwise operations & masking

Bitwise operations (AND, OR, XOR, NOT) are how masks composite images in computer vision — keeping, dropping or combining regions pixel by pixel. This builds two shapes and combines them every way. Run it live and swap the operator to see how masks are put together.
"""

import cv2
import numpy as np

# Two synthetic shapes to combine (white on black)
a = np.zeros((300, 300), np.uint8)
cv2.circle(a, (115, 150), 95, 255, -1)
b = np.zeros((300, 300), np.uint8)
cv2.rectangle(b, (120, 55), (270, 245), 255, -1)
cv2.imshow("A (circle)", a)
cv2.imshow("B (rect)", b)

# Bitwise ops are how masks composite — try swapping and/or/xor
cv2.imshow("AND", cv2.bitwise_and(a, b))
cv2.imshow("OR", cv2.bitwise_or(a, b))
cv2.imshow("XOR", cv2.bitwise_xor(a, b))
cv2.imshow("NOT A", cv2.bitwise_not(a))

More computer-vision techniques →