DIAGRAM_001[ magnetic storage disk ] © 1987
HD

Did you know your phone can detect your finger before it even touches the glass? Beneath that smooth surface lies an invisible mesh of conductive traces that sense the electrical properties of your skin, mapping every gesture with remarkable precision.

DIAGRAM_002
x: 4 y: 3

These conductors form an intricate grid pattern, and when your finger disrupts the local capacitance, the system triangulates the exact position. The math behind it is elegant in its simplicity.

DIAGRAM_003

Ever noticed how some blur effects look natural while others seem artificial? The secret lies in something called a convolution kernel - a grid of numbers that determines how neighboring pixels blend together.

1
2
1
2
4
2
1
2
1
1/16 × kernel
gaussian distribution

The most pleasing blurs use a bell-shaped distribution of weights, heavier in the center and tapering toward the edges. This mimics how light actually scatters through imperfect lenses.

Those little handles you drag in design tools aren't just visual aids - they're direct manipulations of mathematical control points that define the curvature of the path.

t = 0.12 | DIAGRAM_004
P0P1P2P3
t = 0.12

These are Bézier curves, invented for car body design in the 1960s. The same mathematics now powers every font on your screen and every icon in your apps.

The challenge is that screens are grids of discrete pixels, but curves are continuous. Converting one to the other requires clever approximations and optical tricks.

DIAGRAM_005
without anti-aliasing
3×3 sample

This process - called rasterization - uses techniques like sub-pixel rendering and anti-aliasing to fool your visual cortex into perceiving smooth edges where only jagged steps exist.

If any of this sparks your curiosity, if you've ever looked at a screen and wondered what's really happening underneath, this book is for you.

This isn't a programming tutorial or a certification guide. It's an exploration of the fascinating machinery hidden inside the devices we take for granted.

We live surrounded by technology we barely understand. Our grandparents could repair their own radios; we struggle to explain how a text message actually travels.

Reading this won't make you a better coder by next week. But understanding the fundamentals changes how you think about problems. And honestly? It's just deeply satisfying to finally know how things work.

No computer science degree required. The diagrams do the heavy lifting. All you need is curiosity.

HOW THINGS WORK

DIAGRAM_006[ electron beam display ] © 1982
READY_

Stay updated:

Follow along for new chapters, behind-the-scenes looks at upcoming diagrams, and early access to content.

Follow @SignalGradient
DIAGRAM_007[ magnetic platter assembly ] © 2004
3.5" HDD

Stay in the loop:

New chapters, work-in-progress diagrams, and behind-the-scenes updates.

Follow on X
writing progress: 36/36 chapters (100%)
████████████████████

© 2025 How Things Work. All rights reserved.