Global Sandbox Setup
Choose the Source Photograph
Select an image below. Hover over the image to flip it and reveal its numerical grid.
1. The Convolutional Pipeline
1. Input Image
Raw Pixels
Raw Pixels
2. Convolution
Feature Extraction
Feature Extraction
3. ReLU
Nonlinearity
Nonlinearity
4. Pooling
Downsampling
Downsampling
5. Flattening
To 1D Vector
To 1D Vector
6. Softmax
Task Logic
Task Logic
7. Output
Task Execution
Task Execution
Network Architecture Diagram
Click the diagram below to expand it to full screen.
2. The Paper Shredder
Standard neural networks require a 1D line of data. Click 'Shred Image' to unroll the photograph. Hover over any piece to flip it and reveal its numerical grid value. Notice how destroying the 2D layout completely destroys the geometry of the image.
3. Convolution: Feature Extraction
A CNN slides a filter over the photo to generate a new image (Feature Map). Select a filter below. Hover over the Feature Map output image to flip the cards and mathematically trace the calculation back to the input!
Input Photo (8x8)
⊗
Filter (3x3)
=
Feature Map (6x6)
Hover over the Feature Map image to trace the element-wise multiplication...
4. Nonlinearity (ReLU)
Notice the red areas? That is mathematical noise (negative numbers where the filter found the opposite of what it wanted). The ReLU formula $f(x) = \max(0, x)$ instantly squashes all negative noise to zero (pure black). Hover to flip and see the red negative numbers, then click 'Apply Threshold'.
Pre-ReLU Image (6x6)
Post-ReLU Image (6x6)
5. Max Pooling (Downsampling)
To increase the network's field of view, we shrink the image. Pooling divides the map into 2x2 blocks and extracts only the brightest pixel from each block. Hover over the 3x3 output to flip it, and watch it automatically highlight the exact 4 input numbers it condensed!
6x6 Input (Post-ReLU)
→
3x3 Pooled Image
6. Backpropagation (Learning)
CNNs don't start with perfect filters; they initialize with random noise. Backpropagation calculates the network's error and mathematically nudges the random numbers. Click 'Train Filter' to watch the random filter evolve. Notice how its messy Feature Map slowly snaps into focus to match the Target!
Random Filter
→
Current Feature Map
Error: High
Target Filter
→
Perfect Feature Map
7. Final Output Paradigms
Once the image has been processed through all the layers above, what does the network actually do with the final mathematical features? The architecture of the very last layer defines the task.
Softmax Formula: $P(x_i) = \frac{e^{x_i}}{\sum_j e^{x_j}}$
Softmax squashes raw neural scores into a probability distribution summing to 100%.
Target
0%
Background
0%
8. FAQ & Insights
Show me the code! How do I build this CNN natively in Java (DL4J & ND4J)? ▼
To build and train neural networks natively on the JVM, the industry standard is Deeplearning4j (DL4J) powered by ND4J (which handles the heavy matrix math, just like NumPy in Python). Notice how the DL4J Builder pattern perfectly mirrors the visual steps in our sandbox:
import org.deeplearning4j.nn.conf.MultiLayerConfiguration;
import org.deeplearning4j.nn.conf.NeuralNetConfiguration;
import org.deeplearning4j.nn.conf.inputs.InputType;
import org.deeplearning4j.nn.conf.layers.*;
import org.nd4j.linalg.activations.Activation;
import org.nd4j.linalg.learning.config.Adam;
import org.nd4j.linalg.lossfunctions.LossFunctions;
// 1. Define the Pipeline Architecture
MultiLayerConfiguration conf = new NeuralNetConfiguration.Builder()
// 7. Backpropagation Setup (Error calculation & learning rate)
.updater(new Adam(0.001))
.list()
// 2 & 3. Convolution (3x3 Filter) + ReLU
.layer(new ConvolutionLayer.Builder(3, 3)
.nIn(1).nOut(64)
.activation(Activation.RELU)
.build())
// 4. Max Pooling (Downsampling by 2x2 blocks)
.layer(new SubsamplingLayer.Builder(SubsamplingLayer.PoolingType.MAX)
.kernelSize(2, 2)
.build())
// 5. Final Output Task (Classification with Softmax)
.layer(new OutputLayer.Builder(LossFunctions.LossFunction.NEGATIVELOGLIKELIHOOD)
.nOut(10)
.activation(Activation.SOFTMAX)
.build())
// 6. The Paper Shredder (Flatten to 1D)
// DL4J handles flattening automatically when you specify the 2D input geometry!
.setInputType(InputType.convolutional(240, 240, 1))
.build();
import org.deeplearning4j.nn.conf.NeuralNetConfiguration;
import org.deeplearning4j.nn.conf.inputs.InputType;
import org.deeplearning4j.nn.conf.layers.*;
import org.nd4j.linalg.activations.Activation;
import org.nd4j.linalg.learning.config.Adam;
import org.nd4j.linalg.lossfunctions.LossFunctions;
// 1. Define the Pipeline Architecture
MultiLayerConfiguration conf = new NeuralNetConfiguration.Builder()
// 7. Backpropagation Setup (Error calculation & learning rate)
.updater(new Adam(0.001))
.list()
// 2 & 3. Convolution (3x3 Filter) + ReLU
.layer(new ConvolutionLayer.Builder(3, 3)
.nIn(1).nOut(64)
.activation(Activation.RELU)
.build())
// 4. Max Pooling (Downsampling by 2x2 blocks)
.layer(new SubsamplingLayer.Builder(SubsamplingLayer.PoolingType.MAX)
.kernelSize(2, 2)
.build())
// 5. Final Output Task (Classification with Softmax)
.layer(new OutputLayer.Builder(LossFunctions.LossFunction.NEGATIVELOGLIKELIHOOD)
.nOut(10)
.activation(Activation.SOFTMAX)
.build())
// 6. The Paper Shredder (Flatten to 1D)
// DL4J handles flattening automatically when you specify the 2D input geometry!
.setInputType(InputType.convolutional(240, 240, 1))
.build();
Behind the scenes, ND4J executes this exact architecture by converting your Java code into highly optimized C++ and CUDA instructions, allowing it to run the massive parallel matrix multiplications on GPUs just like Python frameworks do.
What is the exact sequence of a CNN training loop? ▼
Here is the exact lifecycle of a single image passing through the network (one iteration):
sequenceDiagram
participant Data as Input Image
participant Conv1 as L1: Convolution
participant ReLU1 as L1: ReLU
participant Pool1 as L1: Pooling
participant L2 as Layer 2 (Conv ➔ ReLU ➔ Pool)
participant L3 as Layer 3 (Conv ➔ ReLU ➔ Pool)
participant Flat as Flattening
participant Out as Classifier (Softmax)
Data->>Conv1: 1. Pass raw pixel array (2D or 3D)
rect rgb(240, 248, 255)
Note over Conv1, Pool1: Layer 1: Early Features (Extracting Basic Elements)
Note over Conv1: Slide learned filters over patches,
element-wise multiply and sum to
detect basic edges and vertical lines. Conv1->>ReLU1: 2. Pass feature map volume Note over ReLU1: Apply thresholding
(squash negatives to zero). ReLU1->>Pool1: 3. Pass activated edge features Note over Pool1: Downsample spatial dimensions
(e.g., Max Pooling). end Pool1->>L2: 4. Pass downsampled feature maps Note over L2: Middle Layers:
Filters combine early edges into parts
like circles, eyes, noses, and ears. L2->>L3: 5. Pass higher-level spatial features Note over L3: Deep Layers:
Filters combine parts into full,
complex structures like entire faces. L3->>Flat: 6. Pass final deep feature maps Note over Flat: Destroy spatial structure,
convert to a single 1D array. Flat->>Out: 7. Pass 1D feature array Note over Out: Calculate probability distribution
(e.g., Predicting which US President it is). Out-->>Data: 8. Return final classification
element-wise multiply and sum to
detect basic edges and vertical lines. Conv1->>ReLU1: 2. Pass feature map volume Note over ReLU1: Apply thresholding
(squash negatives to zero). ReLU1->>Pool1: 3. Pass activated edge features Note over Pool1: Downsample spatial dimensions
(e.g., Max Pooling). end Pool1->>L2: 4. Pass downsampled feature maps Note over L2: Middle Layers:
Filters combine early edges into parts
like circles, eyes, noses, and ears. L2->>L3: 5. Pass higher-level spatial features Note over L3: Deep Layers:
Filters combine parts into full,
complex structures like entire faces. L3->>Flat: 6. Pass final deep feature maps Note over Flat: Destroy spatial structure,
convert to a single 1D array. Flat->>Out: 7. Pass 1D feature array Note over Out: Calculate probability distribution
(e.g., Predicting which US President it is). Out-->>Data: 8. Return final classification
Why do standard neural networks fail on images? (The Paper Shredder) ▼
Standard fully-connected networks require 1D inputs. Flattening a 2D image acts like a paper shredder. It destroys the spatial context—the network no longer knows which pixel was next to which, mathematically erasing the geometry of the face or object. CNNs solve this by sliding a 2D filter over the image, preserving the structural layout.
Does the network "know" it is looking for a nose or an eye? ▼
No. The computer has no concept of biology. A filter is just a dumb grid of numbers looking for contrasting light and dark pixels. For example, a "Collar" filter mathematically just looks for dark pixels directly above bright pixels. If you feed it a zoomed-out photo of a man in a dark suit with bright shoes, the math will highlight the shoes because they match the exact same mathematical light/dark pattern!
How does Backpropagation find better filters if it's blind? ▼
CNNs start with completely random noise filters. If the network predicts "Cat" when the image is a "Dog," it calculates an Error (Loss). Backpropagation uses calculus to trace that error backward, nudging all the numbers slightly to reduce the error. Over thousands of images, the network accidentally discovers that detecting "dark circles" helps it get the right answer. The filters naturally evolve into edge and shape detectors through blind mathematical evolution.
Does Max Pooling only shrink the detected features or the whole image? ▼
It shrinks the entire image. Max Pooling acts like a net dragged across the whole Feature Map, extracting the highest number from every 2x2 patch. If it only kept the detected features and threw away the background, the spatial geometry would be destroyed. Shrinking the whole grid keeps the "nose" in the center and the "ears" at the top, just at a lower, more compressed resolution.
Why is the ReLU threshold so important? ▼
Without ReLU (Rectified Linear Unit), a CNN is just a series of linear multiplications. Because the physical world is non-linear (curves, shadows, complex shapes), we need a way to break the linearity. The simple formula $f(x) = \max(0, x)$ instantly squashes all negative mathematical noise to zero, introducing the non-linearity required to learn complex real-world boundaries.
Autonomous Driving: Waymo vs. Tesla (Pure Vision)? ▼
Waymo (Robotaxis): Relies heavily on LiDAR (lasers that shoot out to measure exact physical depth), Radar, and pre-mapped HD maps, combined with cameras. It is incredibly precise but expensive and geofenced to areas it has mapped.
Tesla (Pure Vision): Argues that humans drive using only two cameras (our eyes) and a neural net (our brain). Tesla relies almost entirely on CNNs and visual Transformers to process raw camera feeds in real-time, calculating depth, segmentation, and driving regressions dynamically without HD maps or LiDAR.
What exactly is a "Feature Map"? ▼
A Feature Map is the new "image" generated after a filter is applied. It looks like a glowing outline of the original photo. Bright spots indicate where the filter found a strong mathematical match, while dark spots indicate no match.
Why do we need multiple filters in one layer? ▼
A single filter can only look for one specific thing (e.g., vertical edges). To understand a complex image, a single layer might have 64 or 128 different filters running in parallel—one looking for horizontal edges, one looking for red colors, one looking for dark spots, etc.
What happens if the object is off-center? (Translation Invariance) ▼
Because the CNN slides the exact same filter across every single pixel of the image, it will find the "dog nose" regardless of whether it is in the top-left corner or dead center. Combined with Max Pooling, this grants the network Translation Invariance.
How do deeper layers see more complex things? ▼
This is called Hierarchical Feature Extraction. Layer 1 filters find basic lines and edges. Layer 2 filters run on top of the Layer 1 feature maps, combining those lines into shapes (like circles or squares). Layer 3 combines those shapes into complex objects (like eyes or wheels).
What is "Stride" in a Convolution? ▼
Stride is how many pixels the filter shifts each time it moves. A stride of 1 means it moves pixel by pixel. A stride of 2 means it jumps over a pixel every time, which generates a smaller output Feature Map and saves computational power.
What is "Padding" and why use it? ▼
When a 3x3 filter slides over an image, it can't perfectly reach the edge pixels without hanging off the side. Because of this, the output Feature Map naturally shrinks. "Padding" involves wrapping the original image in a border of artificial zeros (black pixels) so the filter can reach the edges, keeping the output size identical to the input.
What is the Softmax function used for? ▼
At the very end of a classification network, the CNN outputs raw, arbitrary scores (Logits), like "Dog: 120, Cat: 60." Softmax is a mathematical function that squashes these messy scores into a clean probability distribution that always equals 100% (e.g., "Dog: 88%, Cat: 12%").
Classification vs. Object Detection? ▼
Image Classification looks at a photo and outputs one single label for the whole image ("This is a Dog").
Object Detection (like R-CNN or YOLO) finds multiple objects inside the image, draws a bounding box around their exact X/Y coordinates, and classifies each box individually ("Dog here, Cat here, Tree here").
Object Detection (like R-CNN or YOLO) finds multiple objects inside the image, draws a bounding box around their exact X/Y coordinates, and classifies each box individually ("Dog here, Cat here, Tree here").
What is Semantic Segmentation? ▼
Instead of drawing boxes, Semantic Segmentation classifies every single pixel in the image. It outputs a color-coded mask showing exactly where the "road" ends and the "sidewalk" begins, which is critical for autonomous driving.
What is Regression in computer vision? ▼
Unlike Classification which outputs a discrete word ("Dog"), Regression outputs a continuous numerical value based on the image. For example, looking at a curved road and outputting exactly "14.5 degrees" to turn the steering wheel.
Why do we flatten the data at the very end? ▼
While convolutions preserve 2D geometry during feature extraction, the final decision-making process (like Softmax classification) requires standard 1D Dense layers. We flatten the final, highly-condensed 2D pooled feature maps into a 1D array to feed into the final output layer.
What is an Epoch? ▼
An Epoch is one complete pass of the entire training dataset through the neural network. Training a CNN usually requires dozens or hundreds of epochs, meaning the network looks at the same images over and over, refining its filters each time.
What is Overfitting? ▼
Overfitting happens when a CNN memorizes the exact training images instead of learning general patterns. For example, it might learn to identify a specific tree in the background of your dog photos rather than the dog itself. We combat this using techniques like Dropout and Data Augmentation.
Why do CNNs require GPUs to train? ▼
As you saw in the sandbox, sliding just one 3x3 filter across one 8x8 image requires hundreds of multiplication operations. A real 4K image with hundreds of filters across dozens of layers requires trillions of simultaneous matrix multiplications. CPUs are designed for sequential tasks, but GPUs contain thousands of cores specifically designed to do parallel matrix math simultaneously.