SVD Compression Visualizer

Run the SVD Compression Visualizer Fullscreen

Edit the SVD Compression Visualizer with the p5.js editor

About This MicroSim

This MicroSim demonstrates how Singular Value Decomposition enables image compression by keeping only the most significant components. Watch quality degrade gracefully as you reduce the number of singular values.

How to Use

Select an Image Pattern: Different patterns have different rank characteristics
Adjust Rank k: Control how many singular values to keep (1 to 16)
Show Error: Toggle to see the difference between original and reconstructed images

Key Insights

Singular values are ordered by importance - first few capture most information
Low rank images (gradients, simple shapes) compress well
Complex/noisy images need more components for good reconstruction
Compression ratio improves as k decreases, but quality suffers

Learning Objectives

Students will be able to: - Understand SVD as a sum of rank-1 matrices - Apply truncated SVD for lossy compression - Evaluate the quality-compression tradeoff - Connect singular value magnitude to image features

The Mathematics

The SVD decomposes an image matrix as:

\[\mathbf{I} = \sum_{i=1}^{r} \sigma_i \mathbf{u}_i \mathbf{v}_i^T\]

The truncated SVD keeps only k terms:

\[\mathbf{I}_k = \sum_{i=1}^{k} \sigma_i \mathbf{u}_i \mathbf{v}_i^T\]

Storage comparison: - Original: H × W values - Compressed: k × (H + W + 1) values

Lesson Plan

Introduction (5 minutes)

SVD reveals that images can be approximated as sums of simpler "building block" images. Each building block is the outer product of two vectors.

Exploration (10 minutes)

Start with Gradient image - observe it reconstructs perfectly with few components (it's nearly rank-1!)
Try Low Rank image - designed to show clear rank structure
Use Complex image - needs many components