Convolution Playground | AI Playgrounds

Layer mode: Stride: Padding:

Input: Kernel preset:

Take absolute value Apply ReLU (clip ≥ 0)

🎯 Learn the filter

Input

Click and drag to draw.

The 32×32 image you feed in. Dark pixels = 1, white = 0.

3×3 kernel

Edit any cell → kernel becomes "custom"

Output (after convolution)

One feature-map response.

Inspect the final operation for an output cell. Colors are scaled across the map.

The 3×3 weights slid over every position. Use Tab and the arrow keys to move between cells.

⚖️ Learner vs. target weights

Learner

Target

Difference (learner − target)

Train to watch the learner weights move toward the target.

🛰️ Inspect & scan (hover math · sliding window · output size)

Hover any Output cell to see its 3×3 receptive field and the nine products (the sum stays hidden until you click). Or run the sliding window across the image. These tools work in single-conv mode.

position -

Hover an output cell to inspect it. (Single-conv mode.)

🔍 Sliding-window inspector

Click an output cell, or focus the output and use arrow keys; Enter/Space inspects it.

(click on the output canvas to inspect a cell)

🎨 Multi-channel demo (RGB → 1 output)

RGB image:

Each channel is convolved with your current kernel independently. The final output is the sum of the three channel outputs (just like a single 3×3×3 kernel in PyTorch).

RGB input

R channel

G channel

B channel

R out

G out

B out

Σ = output

🎯 Try these scenarios first

Pick a scenario, predict what should happen, then apply it and compare the result with your prediction.

Scenario 1: The identity filter preserves the image

Core question: What filter would copy each pixel without changing its neighbors?

Run and watch: Apply the identity kernel to the cross image and compare input with output.

Predict first: Predict which kernel cell must carry the full weight.

Explain afterward: Explain why a center weight of one and all other weights of zero copies the image.

Scenario 2: The Sobel x-direction filter detects vertical edges

Core question: Why does measuring horizontal brightness change reveal vertical boundaries?

Run and watch: Apply the Sobel x-direction filter and inspect where the output becomes bright or dark.

Predict first: Predict which part of the cross will produce the strongest response.

Explain afterward: Connect the left-to-right brightness change to the vertical edge orientation.

Scenario 3: The Sobel y-direction filter detects horizontal edges

Core question: How does rotating a filter change the feature it detects?

Run and watch: Apply the Sobel y-direction filter to the same image and compare it with the x-direction result.

Predict first: Predict which bar of the cross will now produce the strongest response.

Explain afterward: Explain how the rotated weights measure top-to-bottom change.

Scenario 4: Max pooling reduces resolution

Core question: What information survives when each small block keeps only its numerically largest activation?

Run and watch: Switch to convolution followed by two-by-two max pooling and compare output dimensions.

Predict first: Predict which small features will remain visible after pooling.

Explain afterward: Explain the tradeoff between lower spatial detail and a smaller, more tolerant representation.

Scenario 5: Stacked convolutions create a larger theoretical receptive field

Core question: Why can one later output depend on a larger input region than either kernel covers alone?

Run and watch: Stack two three-by-three convolutions and inspect the effective receptive field.

Predict first: Predict the effective width and height before applying the second layer.

Explain afterward: Trace how one second-layer value depends on a five-by-five region of the original image.

✨ Featured comparison

Featured comparison

Switch kernels before training anything. The same image becomes edge, blur, or sharpened evidence depending on the filter.

Try two hand-built filters, then use the learned-kernel mode to ask what training is actually changing.

🧭 Visual explanation

Live state to watch

No state captured yet. Run or adjust the applet first.

Misread to avoid

📚 Lesson tour (5 steps)

Step 1/5: -

📝 Worksheet (4 questions)

Q1. Cross image, Identity kernel. The output image is:

Exactly the same as the input: the center weight is 1 and the rest are 0. Inverted: black and white are swapped. Blank: multiplying by the identity zeroes everything out.

Q2. Cross image, Sobel-X kernel. Which part of the cross lights up brightest?

The vertical bar: Sobel-X responds to horizontal intensity changes, which occur at vertical edges. The horizontal bar: Sobel-X lines up with edges running the same direction as its name. The center: the two bars overlap there, so the response is always largest.

Q3. Switch to "Conv → conv" mode (two stacked 3×3 kernels). The effective receptive field becomes:

3×3: stacking kernels doesn't change how far each output pixel can see. 5×5: each 3×3 layer adds one cell on every side, so two layers reach 5×5. 9×9: two 3×3 kernels multiply to a 9×9 window.

Q4. Turn on 🎯 Learn the filter, set the target to Sobel-X, and click Train. Starting from a random kernel, what happens to the 9 numbers as the loss falls?

They stay random: gradient descent only changes the output, never the kernel weights. They converge toward the Sobel-X weights: the random kernel learns to become the edge detector. They grow without bound: lowering the loss pushes every weight toward infinity.

🧪 Quick Assign · QA-CNN-01 · 10–15 min

QA-CNN-01 · Level 1 · 10–15 min
One convolution cell

Choose an image patch and kernel, predict one output-cell multiply-and-sum, then check the feature-map value.

Predict

Observe

Explain

Transfer

State snapshot appears here.

♿ Text and keyboard support

Keyboard path

Use Tab and Shift+Tab to move through controls.
Use Enter or Space on buttons, and arrow keys on sliders or select controls.
The visual region is focusable and described by the state summary below.

Text state summary

Reduced motion and non-visual support

Reduced-motion settings are honored where possible. The current state is also available as text, so the main result does not depend only on color, animation, or spatial position.

Accessibility note: this layer gives a text equivalent for the applet state. It does not replace a full human screen-reader audit.

↓ Read the explanation

A convolutional neural network processes an image by applying small grids of numbers, called kernels or filters, to local pixel neighborhoods. Draw on the 32×32 canvas, choose a 3×3 kernel, and inspect the multiply-and-sum operation that creates each output value.

What the operation does

Center the 3×3 kernel on an input location, multiply each of its nine entries by the aligned pixel value, and add the products. The sum becomes one output value. Then move the window and repeat. Most deep-learning libraries implement this operation as cross-correlation because the kernel is not flipped; it is commonly called convolution in CNN practice.

The Sobel-X kernel estimates change in the horizontal coordinate. It responds strongly where brightness changes from left to right, so it highlights mostly vertical edges. Positive and negative responses represent opposite edge directions.

An edge map begins with local arithmetic, not object recognition. The kernel produces a large magnitude when the pattern of nearby pixel values aligns with the differences encoded in its weights.

Absolute value and ReLU

Taking an absolute value discards response direction and keeps magnitude, so both light-to-dark and dark-to-light transitions appear bright. ReLU instead replaces negative values with zero. Many CNN blocks use an activation after a convolution, but architectures vary. One learned channel may preserve a response orientation while another channel learns a complementary filter; no single ReLU channel should be assumed to preserve all information.

Pooling and receptive fields

Convolution plus 2×2 max pooling: each 2×2 output region is reduced to its numerically largest value, not necessarily the value with largest magnitude when signed responses are present. Resolution is halved, computation falls, and small translations may affect the pooled representation less.
Two stacked 3×3 convolutions: with stride one and suitable padding, each final output depends on a 5×5 region of the original input. Stacking n such layers gives a theoretical receptive-field width of 2n + 1.

Small kernels are common because stacking them expands the receptive field while inserting nonlinear transformations between layers. Two 3×3 kernels use 18 spatial weights versus 25 for one 5×5 kernel per input-output channel pair, before biases and channel counts are considered. VGG popularized this design, although modern architectures also use 1×1, 5×5, 7×7, dilated, and larger depthwise kernels when useful.

From one kernel to many channels

A real CNN layer applies multiple learned kernels across all input channels. Each kernel produces an output feature map, and the stack of maps becomes the next layer's representation. Early features often resemble oriented edges or color contrasts; later features can combine simpler patterns into textures, parts, and task-relevant structures. These interpretations are tendencies, not fixed labels assigned to every channel.

What this model leaves out

Practical CNNs use kernels with height, width, and channel dimensions; learned biases; padding and stride choices; normalization; residual connections; and backpropagation through all operations. The applet isolates the local computation and the distinction between hand-designed and learned filters.

For teachers

Curriculum: Cross-correlation as multiply-and-sum, kernels, feature maps, edge direction, activation functions, pooling, receptive fields, and learned filters.

Pre-exploration prompts:

How could nine numbers detect a local brightness change?
Why might one filter respond to vertical edges and another to horizontal edges?
What information is lost when a response is replaced by its absolute value or clipped by ReLU?

Post-exploration prompts:

Draw vertical and horizontal lines, then compare Sobel-X and Sobel-Y.
Inspect one output location and verify every multiplication before revealing the sum.
Compare convolution followed by pooling with two stacked convolutions. Which quantities change?
Use the learner-versus-target view. Why can one example fail to determine a unique kernel?

Misconceptions to test: the operation already recognizes objects; Sobel-X detects horizontal edges because of its name; every convolution must be followed by ReLU; modern networks use only 3×3 kernels.

卷积神经网络通过把称为卷积核或滤波器的小型数字网格应用到局部像素邻域来处理图像。你可以在 32×32 画布上绘图，选择 3×3 卷积核，并检查生成每个输出值的乘加过程。

这一运算做了什么

把 3×3 卷积核对准一个输入位置，将九个核值分别与对应像素相乘，再把乘积相加。这个和成为一个输出值。随后移动窗口并重复。多数深度学习库实际执行的是互相关，因为卷积核没有翻转；在 CNN 语境中仍通常称为卷积。

Sobel-X 核估计水平方向坐标上的变化。它对亮度从左向右的变化反应强烈，因此主要突出垂直边缘。正响应与负响应表示相反的边缘方向。

边缘图首先来自局部算术，而不是物体识别。当邻近像素模式与卷积核权重编码的差分结构一致时，输出幅度就会较大。

绝对值与 ReLU

取绝对值会丢弃响应方向并保留幅度，因此由亮到暗和由暗到亮的变化都会显示为明亮边缘。ReLU 则把负值替换为零。许多 CNN 模块会在卷积后使用激活函数，但架构并不完全相同。一个学习到的通道可能保留某一方向响应，另一个通道可能学习互补滤波器；不能假设单个经过 ReLU 的通道保留了全部信息。

池化与感受野

卷积加 2×2 最大池化：每个 2×2 输出区域只保留最大值。分辨率减半，计算量降低，小幅平移对池化表示的影响也可能减小。
两个堆叠的 3×3 卷积：在步幅为一并使用适当填充时，最终每个输出依赖原始输入中的 5×5 区域。堆叠 n 个此类层会得到宽度为 2n + 1 的理论感受野。

小卷积核很常见，因为堆叠可以扩大感受野，并在层之间插入非线性变换。对每一对输入和输出通道而言，两个 3×3 核使用 18 个空间权重，一个 5×5 核使用 25 个，尚未计入偏置和通道数量。VGG 推广了这种设计，不过现代架构也会按需要使用 1×1、5×5、7×7、空洞卷积和更大的深度卷积核。

从一个卷积核到多个通道

真实 CNN 层会在所有输入通道上应用多个学习到的卷积核。每个核产生一个输出特征图，多个特征图组成下一层表示。早期特征常类似有方向的边缘或颜色对比，后期特征可把简单模式组合为纹理、局部部件和任务相关结构。这些是常见趋势，并不是每个通道都具有固定的人类标签。

这个模型省略了什么

实际 CNN 使用具有高度、宽度和通道维度的卷积核、学习到的偏置、不同填充与步幅、归一化、残差连接，以及穿过全部运算的反向传播。本工具集中呈现局部计算，以及手工滤波器与学习滤波器的区别。

教师指导

课程目标：把互相关理解为乘加、卷积核、特征图、边缘方向、激活函数、池化、感受野和学习滤波器。

探索前问题：

九个数字如何检测局部亮度变化？
为什么一个滤波器可能响应垂直边缘，另一个响应水平边缘？
取绝对值或用 ReLU 截断时会丢失什么信息？

探索后问题：

绘制垂直线和水平线，再比较 Sobel-X 与 Sobel-Y。
检查一个输出位置，在显示总和前验证每一次乘法。
比较卷积后池化与两个堆叠卷积。哪些量发生变化？
使用学习者与目标视图。为什么一个样本无法确定唯一卷积核？

需要检验的误解：该运算已经在识别物体；Sobel-X 因名称而检测水平边缘；每个卷积后都必须使用 ReLU；现代网络只使用 3×3 卷积核。