Electronics: 7-Segment Display Logic
From early calculator screens to digital alarm clocks and street indicators, the 7-Segment Display is one of the most ubiquitous electronic components in the world. But how do we represent decimal digits $(0-9)$ using a simple set of seven light-emitting diodes (LEDs)?
The answer lies in Digital Logic gates and Bitmask Mapping. In this column, we study these mathematical principles and build a Procedural Cyberpunk LED Chronometer in p5.js.
The Electronics Glossary
- 7-Segment Display: An electronic display device with seven LEDs arranged in an "8" shape, activated in combinations to represent numerical digits.
- Bitmask: A binary string used to toggle specific states (on or off) in a register.
- Beveling: Slanting or angling the endpoints of a shape to ensure neat, physical joints when segments meet.
1. The Segment Bitmask
A standard 7-segment display labels its seven diodes as letters from A to G:
A (0)
---
F | | B (1)
(5)| G |
--- (6)
E | | C (2)
(4)| |
---
D (3)
We represent the state of these segments as an array of seven booleans [A, B, C, D, E, F, G], mapping each digit to its binary mask:
0⟹[true, true, true, true, true, true, false](all active except G)1⟹[false, true, true, false, false, false, false](only B and C active)8⟹[true, true, true, true, true, true, true](all segments active)
2. Hexagonal Beveling & Glow Physics
In standard web drawings, segments are drawn as simple rectangles. However, hardware screens bevel the endpoints at $45^\circ$ angles so that adjacent segments meet without overlapping.
We map each segment procedurally as a hexagon polygon:
- Horizontal: \(\text{Vertices} = \left[(x + t/2, y), (x + L - t/2, y), (x + L, y + t/2), (x + L - t/2, y + t), (x + t/2, y + t), (x, y + t/2)\right]\)
- Vertical: \(\text{Vertices} = \left[(x, y + t/2), (x + t/2, y), (x + t, y + t/2), (x + t, y + L - t/2), (x + t/2, y + L), (x, y + L - t/2)\right]\)
Where $L$ is segment length and $t$ is thickness. To represent glowing neon gas tubes, we implement the HTML5 Canvas shadow API:
\[\text{Shadow}_{\text{Blur}} = \text{Glow}, \quad \text{Shadow}_{\text{Color}} = \text{Color}_{\text{Neon}}\]Procedural LED Chronometer
Select neon glow color, adjust thickness, and slide the speed multiplier to watch the digital digits, calendar dates, and waves cycle.
Explore the codebase and run standalone project builds via: shubhamkrshandilya/clock-seven-segment