English interface, partly translated: navigation, lab, projects, series, about and contact are; the home page sections, the site search and the content itself (articles, tutorials, research) are still in French.

Interactive lab

Convolution and filters

Slide a 3 × 3 kernel over an image: blur, sharpen, edge detection. Edit the weights and follow the computation of one pixel, term by term.

Level
Beginner
Topics
Noyau · Sobel · CNN
Figure 1 — Input (synthetic image, 96 × 96). Click to choose the observed pixel; the orange frame is the 3 × 3 window.
Figure 2 — Signed output, shown as absolute value.

Computation of the observed pixel (28, 20)

Neighbourhood
0.90.920.90.90.890.920.920.910.94
Kernel
−101−202−101
Products
−0.90300.9−1.80401.831−0.9200.943
Sum = 0.0479
Image
Kernel

Kernel weights (editable)

Observed pixel
28
20

Convolution, the basic operation of vision

A convolution slides a small grid of weights, the kernel, over the whole image. At each position, the output value is the sum of products between the kernel weights and the pixels it covers:

S(x,y)=∑i=−11∑j=−11K(i,j)  I(x+i, y+j)S(x, y) = \sum_{i=-1}^{1} \sum_{j=-1}^{1} K(i, j)\; I(x + i,\, y + j)

Nothing else: nine multiplications and one addition per pixel. The whole effect comes from the choice of weights.

Reading a kernel

  • All-positive weights summing to 1: a weighted average. The image is smoothed (blur). Gaussian blur weighs the centre more and smooths without blocky artefacts.
  • Weights summing to 0, positive on one side and negative on the other: a difference. The output is zero on a flat area and strong where intensity changes: an edge detector. Horizontal Sobel responds to vertical edges, and vice versa.
  • Strong centre, negative neighbours: the image plus its own edges, hence a sharper image.

Try the test pattern: thin bars vanish under blur (high frequencies are attenuated), while Sobel only responds to their borders.

A convolutional neural network (CNN) applies exactly this operation, with one decisive difference: the kernel weights are not chosen, they are learned. The first layers of a CNN trained on images rediscover edge and texture detectors close to Sobel by themselves; later layers combine these responses into increasingly abstract patterns.

Two practical details, visible here:

  • borders: the kernel overhangs the image at its rim. This demo repeats the border pixel; a CNN often adds zeros (padding);
  • the "convolution" of deep learning libraries is a cross-correlation: the kernel is not flipped. That is also the case here. For a learned kernel, the distinction does not matter.

Other demos

  • Haar wavelets (DWT)

    Computer vision, Intermediate

    Decompose an image into LL, HL, LH and HH sub-bands over several levels, drop the small coefficients and measure what the reconstruction loses.

  • Pathfinding: BFS, DFS, Dijkstra, A*

    Algorithms, Beginner

    Four algorithms explore the same grid. Draw walls, add costly terrain and compare the visited cells and the cost of the path.

  • Gradient descent

    Artificial intelligence, Beginner

    Pick a function, a starting point and a learning rate, then watch the point walk downhill: convergence, oscillations, divergence, local minima.