Kyle Phillips
Engineer & Creative · Google NYC
Octet
A byte of graphics history: the evolution of rendering told through 256 vertices.
June, 2026
Octet: A Byte of Graphics History is an interactive audiovisual journey through 50 years of computer graphics — from 1970s analog vector displays to modern neural rendering — told entirely through a single byte of geometry: eight eras, 256 vertices (2⁸ = 256).
Octet: A Byte of Graphics History — an interactive WebGL and Web Audio experience chronicling eight eras of computer graphics through 256 vertices.
One Byte, Eight Eras, 256 Vertices
Most histories of computer graphics read like textbooks, and most technical demos swap out entire scenes to show off a new rendering trick. With Octet, I wanted the geometry itself to be the protagonist.
An octet is eight bits — one byte of data — and 2⁸ gives you 256 possible states. That mathematical symmetry became the creative constraint for the entire piece: what if you allocated a single static buffer of 256 points (Float32Array(256 * 3)) at startup and never added or removed a vertex?
Instead of hard-cutting between separate 3D models, those same 256 points continuously re-index, fold, and morph in real time across eight defining eras of rendering (Bits 0 through 7):
- Bit 0 — The Vector Era (1970s): Continuous oscilloscope paths drawn as glowing phosphor trajectories before pixels existed, paired with a pure LFO-modulated analog sine wave.
- Bit 1 — The Raster Awakening (1980s): The points quantize into a 16×16 framebuffer grid, cycling between procedural color palettes and classic 8-bit arcade sprite frames over bit-crushed square-wave arpeggios.
- Bit 2 — The Dimensional Breach (Early 1980s): Mathematics unlocks the Z-axis. The 16×16 grid lifts into a cyan perspective wireframe terrain with reverberant FM synthesis.
- Bit 3 — The Polygon Era (Early 1990s): Vertices wrap into a closed, flat-shaded torus mesh — evoking fixed-function silicon — complete with bass-reactive CRT chromatic aberration and industrial percussion.
- Bit 4 — The Texture Era (Mid 1990s): The mesh re-projects into a UV-mapped sphere with bilinear filtering and perspective-correct surface detail.
- Bit 5 — The Shader Revolution (2000s): The fixed pipeline breaks open. Programmable vertex and fragment shaders displace the surface with 3D simplex noise, studio environment reflections, and Fresnel specular highlights.
- Bit 6 — The Simulation Era (2010s): The GPU becomes a parallel physics engine, driving the 256 vertices through a curl-noise fluid simulation with cinematic depth-of-field and sub-bass swells.
- Bit 7 — The AI / Neural Era (Present): Geometry gives way to latent space. The 256 points cycle through an 8×8×4 tensor matrix, four 64-node deep activation layers, and latent classification clusters, scored by rapid-fire 32nd-note FM data streams.
Under the Hood: Continuous Shader Morphing & Procedural Sound
Keeping all eight eras inside a single geometry buffer meant every transition had to happen inside a unified GLSL shader pipeline without visual pops. Rather than swapping meshes, a continuous uniform (uMode from 0.0 to 7.0) interpolates vertex positions, point sizes, surface normals, and fragment shading across all eight topological states while cross-fading line, point, and indexed triangle draw calls.
Audio is treated as an equal half of the rendering pipeline rather than background music. Built with Tone.js, each era synthesizes its own soundscape live in the browser — routing real-time FFT bass, mid, and high-frequency energy back into the shaders and @react-three/postprocessing stack so the geometry, bloom, and chromatic aberration physically react to the sound of each era.
Exhibited at Google Creative House at Cannes
Octet was created at Google Creative Lab using Google AI Studio and Gemini alongside Three.js, React Three Fiber, and custom GLSL shaders, and was featured at Google's inaugural Creative House at the Cannes Lions International Festival of Creativity.
Designed as a villa experience away from the beach, Google Creative House brought global creative directors, agency leads, and technologists hands-on with Google's newest AI models around a clear thesis: AI to amplify human creativity, not replace it. Octet anchored our interactive touchscreen library (Viberary) — demonstrating how a creative technologist can pair conversational AI prototyping in AI Studio with deep graphics craft and a sharp conceptual constraint to build an exhibition-ready piece in days.
It continues a thread running through my work — from AutoDraw and Teachable Machine to Infinite Wonderland and the Gemini Live Web Console — of using interactive craft to make the arc of computing and AI tangible, playful, and felt.