SESSION 033 — Algorithm Optimization

CONCEPTS.UNLOCKED

📈

Big O Notation

O(1), O(n), O(n log n), O(n²) — analyzing how algorithms scale. Not about exact speed, but about how running time grows with input size.

🔲

The Naive Blur

For each pixel, average its k×k neighbors → O(n × k²). With k=10 on a 4K image: 8M pixels × 100 neighbors each = 800M operations.

↔↕

The Separable Blur

Blur horizontally, then vertically → O(n × 2k). Two passes of k operations instead of one pass of k² operations. Same visual result, dramatically fewer operations.

⏱

Benchmarking

Measure before and after optimization. console.time(), Performance API, or manual timestamps. Never optimize without data — measure first, then improve, then measure again.

⚖

Space vs Time Tradeoffs

Using extra memory to save time. The separable blur needs a temporary buffer (more memory) but runs much faster. Almost every optimization involves trading one resource for another.

📊

Growth Rate Comparison

O(1) = constant. O(log n) = barely grows. O(n) = linear. O(n log n) = slightly superlinear. O(n²) = explodes. O(2ⁿ) = universe-ending. The gap widens dramatically at scale.

HANDS-ON.TASKS

Implement (or Examine) Naive Blur

▶

// For each pixel, average all neighbors within radius
// O(n * k²) where n = pixels, k = blur radius

Each pixel reads k² neighbors. The nested loops make this quadratic in the blur radius.

Benchmark on Different Sizes

▶

Image Size	Naive Blur	Status
100×100	12ms	✅ Fine
500×500	280ms	⚠ Noticeable
1000×1000	1100ms	🔴 Slow
3840×2160	15000ms	🔴 Unacceptable!

Implement Separable Blur

▶

Two-pass approach: horizontal blur first, then vertical blur on the result.

Image Size	Separable Blur	Speedup
100×100	3ms	4×
500×500	35ms	8×
1000×1000	120ms	9×
3840×2160	800ms	19×

Same visual result. From 15 seconds to under 1 second on 4K. The bigger the image and blur radius, the bigger the speedup.

Plot Both Curves

▶

Plot the benchmark results: image size on X axis, time on Y axis. See the O(n × k²) curve shoot upward while O(n × 2k) stays nearly flat.

Big O with Concrete Examples

▶

Big O	Name	PixelCraft Example
O(1)	Constant	pixels[500] — instant regardless of size
O(n)	Linear	Grayscale — visits each pixel once
O(n log n)	Linearithmic	Sorting the gallery by name
O(n²)	Quadratic	Naive blur — nested loops
O(2ⁿ)	Exponential	Brute-force password cracking

O(2ⁿ) is why long passwords are secure — each additional character doubles the search space.

Close the Ticket

▶

git switch -c perf/PIXELCRAFT-021-optimize-blur
git add src/scripts/
git commit -m "Optimize blur with separable algorithm, 15x faster (PIXELCRAFT-021)"
git push origin perf/PIXELCRAFT-021-optimize-blur
# PR → Review → Merge → Close ticket ✅

CS.DEEP-DIVE

Algorithm analysis is the heart of CS.

For 8 million pixels:

// The difference at scale:

O(n) = ~8 million ops (fast)
O(n²) = ~64 trillion ops (impossible)

// The difference between O(n) and O(n²)
// at scale is the difference between
// "instant" and "heat death of the universe."

// Choosing the right algorithm is the most
// impactful decision a developer can make.

// This is why algorithm analysis is tested
// in every tech interview — it's that
// important.

"Performance Lab"

[A] Implement a sharpen filter (the opposite of blur — emphasize edges). Benchmark it. What's its Big O?

[B] Create a visual benchmark page: run both blur algorithms at 5 different sizes, plot the results as a bar chart using Canvas or a charting library.

[C] Research Gaussian blur vs box blur. What are the visual differences? What are the performance differences? Which does Photoshop use?

REF.MATERIAL

VIDEO

Big-O Notation in 100 Seconds — Fireship

Fireship

The fastest possible intro to Big O: O(1), O(n), O(n²), O(log n), O(n log n). Visual examples of how each scales.

BIG-OQUICKESSENTIAL

ARTICLE

Big-O Cheat Sheet

bigocheatsheet.com

Visual chart comparing all common Big O complexities. Shows growth curves side-by-side. Bookmark this.

BIG-OVISUALCHEATSHEET

VIDEO

Intro to Big O Notation — CS Dojo

CS Dojo

Gentle introduction with visual examples: constant, linear, quadratic, logarithmic. Good for building intuition before the math.

BIG-OBEGINNER

ARTICLE

Separable Filter — Wikipedia

Wikipedia

The math behind separable convolution: why a 2D kernel can be decomposed into two 1D passes, and the performance implications.

BLURALGORITHMMATH

ARTICLE

Performance Analysis — Chrome DevTools

Google Chrome

How to use the Performance tab: recording, analyzing flame charts, identifying bottlenecks, and measuring optimization impact.

BENCHMARKINGDEVTOOLS

ALGORITHM OPTIMIZATION