Skip to content

CNN MicroSim Ideas

Interactive MicroSims for Learning CNN Concepts

Prompt

A MicroSim is an in-browser interactive simulation written by a program such as p5.js that is used to illustrate a complex concept. What topics in the above outline could be learned with an interactive simulation where the student run a small simulation they must interact with. The simulation should have a start/stop/reset button, radio buttons and sliders in a control area that change drawing.

For each possible MicroSim, return the following:

Clever Name Description Input Controls Learning Objective Assessment

Response

Based on the chapter outline for Convolutional Neural Networks, here are several interactive MicroSim concepts that would effectively illustrate key concepts through simulation:

1. FilterVision

Clever Name: FilterVision

Description: An interactive simulation that demonstrates how convolutional filters work on real images. Users can apply different filters (edge detection, blurring, sharpening) to sample images and see the resulting feature maps in real-time.

Input Controls:

  • Start/Stop/Reset buttons
  • Slider for filter size (3x3, 5x5, 7x7)
  • Slider for filter intensity
  • Radio buttons for filter types (Sobel, Gaussian blur, emboss, custom)
  • Custom filter value inputs for advanced users

Learning Objective: Understand how different convolutional filters extract various features from images and how filter parameters affect the output.

Assessment: Ask students to identify which filter would best detect specific features (edges, textures, corners) in an image, and to explain why filter size affects the feature detection capability.

2. PoolingPlayground

Clever Name: PoolingPlayground

Description: A visualization that shows how max pooling and average pooling affect feature maps. Users can see the original image section, apply convolutions, and then observe how pooling reduces dimensions while preserving important information.

Input Controls:

  • Start/Stop/Reset buttons
  • Radio buttons for pooling type (Max, Average)
  • Slider for pooling window size (2x2, 3x3, 4x4)
  • Slider for stride value
  • Toggle for displaying numerical values

Learning Objective: Understand the differences between pooling types and how they preserve information while reducing computational requirements.

Assessment: Have students predict the output dimensions after applying different pooling operations and explain why max pooling might be preferred for certain types of features.

3. ActivationStation

Clever Name: ActivationStation

Description: A simulation that visualizes how different activation functions transform input signals in neural networks, with special emphasis on how they affect feature maps in CNNs.

Input Controls:

  • Start/Stop/Reset buttons
  • Radio buttons for activation functions (ReLU, Leaky ReLU, Sigmoid, Tanh)
  • Slider for function parameters (e.g., leak rate for Leaky ReLU)
  • Toggle for before/after comparison
  • Slider to adjust input values

Learning Objective: Understand how activation functions introduce non-linearity and how this impacts feature detection in CNNs.

Assessment: Ask students to identify which activation function would work best for specific scenarios and explain why ReLU has become the standard in most CNN architectures.

4. LayerViz

Clever Name: LayerViz

Description: An interactive model of a small CNN where users can see how an image transforms as it passes through multiple layers. The simulation shows activations at each layer and allows slowing down the forward pass.

Input Controls:

  • Start/Stop/Reset buttons
  • Slider for network depth (number of layers)
  • Radio buttons for different sample images
  • Toggle switches to enable/disable specific layers
  • Slider for "animation speed" of forward propagation

Learning Objective: Visualize the hierarchical feature extraction in CNNs, from low-level features in early layers to high-level concepts in deeper layers.

Assessment: Have students describe what types of features are detected at different depths of the network and explain why deeper networks can recognize more complex patterns.

5. BackpropTracker

Clever Name: BackpropTracker

Description: A visualization of how gradients flow backward through a CNN during training, showing which parts of the network are most affected by errors and how weights update.

Input Controls:

  • Start/Stop/Reset buttons
  • Slider for learning rate
  • Slider for batch size
  • Radio buttons for different loss functions
  • Toggle to show/hide gradient magnitudes

Learning Objective: Understand the backpropagation process in CNNs and how parameter updates occur during training.

Assessment: Ask students to explain what happens when learning rates are too high or too low, and how the gradient flow differs in early versus deep layers.

6. ArchitectBuilder

Clever Name: ArchitectBuilder

Description: A drag-and-drop interface for building simple CNN architectures, with real-time feedback on parameter count, computational complexity, and simulated performance on basic tasks.

Input Controls:

  • Start/Stop/Reset buttons
  • Drag-and-drop layer components
  • Sliders for layer parameters (filters, neurons, etc.)
  • Radio buttons for different datasets (MNIST, CIFAR-10)
  • Toggle for skip connections

Learning Objective: Learn the tradeoffs in CNN design and how different architectural choices affect model performance and computational requirements.

Assessment: Challenge students to design the smallest network that can achieve a target accuracy on a simple dataset, explaining their design decisions.

7. TransferInsight

Clever Name: TransferInsight

Description: A simulation demonstrating transfer learning by showing feature activations from pre-trained models and how they can be repurposed for new tasks with limited data.

Input Controls:

  • Start/Stop/Reset buttons
  • Radio buttons for pre-trained models (VGG, ResNet, etc.)
  • Slider for freezing/unfreezing layers
  • Slider for new dataset size
  • Toggle to compare from-scratch vs. transfer learning

Learning Objective: Understand how and why transfer learning works, and when to freeze or fine-tune pre-trained layers.

Assessment: Have students determine which layers should be frozen versus fine-tuned for specific target tasks, with justification based on the visualization.

8. ExplainableCNN

Clever Name: ExplainableCNN

Description: An interactive tool showing various CNN interpretability methods like activation maps, Grad-CAM, and feature visualization on sample images, helping students understand what the network "sees."

Input Controls:

  • Start/Stop/Reset buttons
  • Radio buttons for visualization technique
  • Slider for layer selection
  • Radio buttons for sample images
  • Toggle for superimposing visualizations on original image

Learning Objective: Learn techniques for making CNN decisions more transparent and interpretable.

Assessment: Ask students to use different visualization techniques to determine why a CNN might misclassify specific examples and how the network's "attention" differs across classes.

9. OptimizeNet

Clever Name: OptimizeNet

Description: A simulation demonstrating model optimization techniques like pruning and quantization, showing the effects on model size, inference speed, and accuracy.

Input Controls:

  • Start/Stop/Reset buttons
  • Slider for pruning threshold
  • Slider for quantization level (32-bit to 4-bit)
  • Radio buttons for optimization strategy
  • Toggle to show accuracy-vs-size tradeoff

Learning Objective: Understand methods for making CNNs more efficient for deployment on resource-constrained devices.

Assessment: Challenge students to optimize a model to fit within specific memory constraints while minimizing accuracy loss, explaining the tradeoffs they encounter.

10. AugmentationStation

Clever Name: AugmentationStation

Description: A hands-on tool demonstrating how data augmentation expands training datasets and improves CNN robustness, showing transformations applied to images and their impact on training.

Input Controls:

  • Start/Stop/Reset buttons
  • Toggle switches for different augmentation types (rotation, flip, crop, color)
  • Sliders for augmentation parameters (rotation angle, crop size, etc.)
  • Radio buttons for base image selection
  • Slider for augmentation intensity

Learning Objective: Understand how data augmentation helps prevent overfitting and improves model generalization.

Assessment: Have students design an augmentation strategy for specific scenarios (limited data, class imbalance, etc.) and explain how their choices would help the model generalize better.