All articles

How a Crayon Drawing Ends Up Swimming on Your TV

No app, no console — just a web browser doing an impression of an ocean. A look at what's really happening when your fish swims off the page.

5 min read

A four-year-old holds a crayon drawing up to a phone. It's a fish, mostly — orange, with one fin in the wrong place and an eye the size of a dinner plate. A second later that exact fish is swimming across the television on the other side of the room, tail flicking, drifting past the coral like it has somewhere to be.

Kids take this completely in stride. Grown-ups tend to squint and ask how it works.

So here's how it works, without the parts that would put you to sleep.

It's a website. That's the strange part.

There's nothing to download. No console, no app store, no disc. You open a web page, the same as you would to read the news, and a living reef shows up.

That sounds ordinary until you remember what a browser tab usually does: it shows text and flat pictures that sit there and wait. Getting one to render a moving, three-dimensional ocean — light bending through the water, fish turning, bubbles climbing toward the surface — is closer to running a small video game than to loading a website. The fact that it happens in the same window where you check your email is the first quiet trick.

Talking straight to the graphics chip

Every phone, laptop, and TV has a chip inside it whose whole job is drawing things on the screen, fast. It's the part that makes video games look the way they do. For years, web pages weren't allowed near it. They got the slow, polite route, and it showed.

A technology called WebGL changed that. It lets a web page talk directly to that drawing chip — the very one a video game would reach for. That's the engine under the reef. It's the reason the water moves at all instead of sitting there like a photograph of water.

Three.js, or: thinking in fish instead of triangles

Talking to that chip directly is miserable work. At the lowest level everything is triangles and arithmetic — thousands of points described in numbers, with no notion of "fish" or "light" anywhere in sight. You could build a reef that way. You'd also still be building it next year.

So we lean on a toolkit called Three.js. It sits on top of all that math and lets us think in plain words instead. Put a light here. Hang a camera there. This is a fish; have it swim. Three.js handles the punishing arithmetic underneath, which frees us up to fuss over the things you'd actually notice. It's the difference between carving every gear by hand and being handed a workbench.

What a fish actually is

A fish in the reef is simpler than it looks. Take the drawing. Wrap it, the way a label wraps around a bottle, onto a basic shape that knows how to wiggle. Tell it to swim off. That's a fish.

The good part is that each one then looks after itself. Nobody up top is steering the whole school. Every fish decides on its own when to turn, when to dart, when to hang in the current and think about its life. We wrote the rules once — don't bump the glass, drift toward food, wander a little — and the reef mostly runs itself after that, the way a crowd of film extras will improvise if you tell them roughly where to stand.

The water is a beautiful lie

Now the part worth saying out loud: there is no water. No light either, and no sand, and the bubbles aren't bubbles.

The rippling glow on the seafloor, the soft beams slanting down from above, the haze that swallows the far edge of the reef — each one is a tiny program called a shader. A shader runs on that fast drawing chip and does one humble thing, millions of times a second: it decides what color a single dot on your screen should be, right now. Pile enough of those decisions on top of each other and you get light that dances across the sand. It's arithmetic doing a very good impression of an ocean. When it's working, the thought never crosses your mind, which is the whole idea.

It has to run on Grandma's TV and a hand-me-down phone

This is the unglamorous half of the job, and it's most of the job.

The reef can't only behave on an expensive machine. It has to stay smooth on a five-year-old phone and on the television in the living room, a thing built to play movies, not to run an aquarium. Smooth isn't a nicety here. A reef that stutters stops feeling alive, and a kid can tell instantly.

So a lot of the work is quiet housekeeping nobody ever sees. We squeeze every picture down into a form the graphics chip can swallow whole, so it loads quickly and barely takes up room. We never draw more than the screen can actually show. And when a device is plainly straining, the reef eases off rather than bulldozing ahead and going choppy. You're not supposed to notice any of that. Noticing none of it is how we know it worked.

From a crayon to a pixel

Back to the kid and the phone. When the drawing goes up to the camera, the camera reads it, lifts the fish off the paper, and hands it to the reef as a brand-new swimmer. A few seconds, start to finish.

And if someone else — coloring on their own phone in the next room — adds a fish, it shows up in the same reef on the TV a moment later. Their drawing takes a quick trip out to a server and back to every screen watching that tank. That's the entire multiplayer trick: one reef, many hands, no wires between them.

The best part is the part you never notice

You can read all of this, then watch a four-year-old hold up an orange smudge with too many fins, and not one word of it will cross their mind. They won't picture the drawing chip, or the toolkit, or the little programs choosing pixel colors a million times a second.

They'll just watch their fish swim. That was always the point. The technology did its finest work at the exact moment it vanished.

If you want to see it from the inside, color your first fish and hold it up.

Start your tank in seconds

Open it on any big screen, share the code, and watch the fish roll in.

Two kids coloring a fish on paper with crayons