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)

What the CNN "sees."

Each pixel = the kernel multiplied + summed over its 3×3 input neighbourhood. Grayscale = magnitude (abs on).

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 any cell on the output canvas to see the 3×3 input window centered on it, the kernel, and the dot-product math that produced that pixel.

(click on the output canvas to inspect a cell)
🎨 Multi-channel demo (RGB → 1 output)
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 strongest 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 see a larger region

Core question: Why can two small filters detect a pattern larger than either filter 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:

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

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

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?

🧪 Student response packet

Choose a filter, inspect the sliding-window calculation, then explain what feature the kernel makes visible.

State snapshot appears here.
♿ Text and keyboard support

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