TENNIS ARENA
Pixel diorama · Tennis

A small tennis club on a floating island. Long rallies on clay, ball kids, an umpire on the high chair, marks on the court. A real 3D scene drawn as pixel art.

CLICKthe court to aim the next shot · Llob Ddrop shot · DRAGsideways to turn · SCROLLto zoom

How it's drawn
  1. A real 3D scene. Boxes, cones and extruded shapes in three.js: a club on an island of earth and rock, a court inside a chain-link fence with windscreens, a net that sags from 1.07 m at the posts to 0.914 m at the strap, the umpire's high chair, a stand, a clubhouse with a clock and a terrace, floodlights and poplars. Each person is a rig of about 20 boxes posed every frame with two-bone IK; a player's racket follows keyed paths through the backswing, contact and follow-through of a forehand, a two-handed backhand, a volley, a smash and a serve.
  2. Real ball physics. Gravity, air drag and the Magnus push of spin: topspin dips and kicks up, slice floats and stays low. Clay bounces high and slow, grass low and quick, a hard court in between. A ball can clip the net cord and trickle over, or not.
  3. Players that read the ball. Each predicts the ball's flight a few seconds ahead, picks where the strings can meet it after the bounce (or before it, at the net), runs there and swings in time. A shot is chosen from the situation (cross court, down the line, a slice when stretched, a lob or a pass when the other player comes in, a drop shot when they are deep) and its launch is solved to clear the net and land on the spot, then thrown a little off. Winners, errors and long rallies come out of that.
  4. The rules. Best of three short sets: first to four games, no-ad scoring (one deciding point at deuce), a tiebreak to five at 3–3, and a match tiebreak to ten instead of a third set. Faults, lets, aces and double faults; changes of ends after odd games. Winner stays on; the next player on the club ladder walks down from the terrace.
  5. The court keeps a record. On clay the ball leaves a mark where it lands, slides leave smears and shoes leave prints; on a close call the umpire climbs down to read the mark. Between sets the groundsmen drag the clay and the lines come up clean. Grass wears through behind the baselines. Ball kids fetch the dead balls and bounce a new one to the server.
  6. Rendered small. An orthographic camera at an isometric angle draws into a target of about 480×300 pixels with no anti-aliasing, snapped to whole pixels so nothing that stands still shimmers.
  7. Hard light, outlines, a fixed palette. One sun (or moon) with a hard-edged shadow map; floodlights at dusk and night. A pixel well in front of its neighbour in the depth buffer is darkened. Every pixel then takes the nearest of 64 colours, measured in OKLab, and each small pixel becomes an exact block of screen pixels.
  8. Rain. Streaks fall and splash, the lawn darkens and puddles spread from its low spots, showing a mirrored render of the club. Play stops, the players sit under their parasols, and the groundsmen pull the cover over the court.

Switch to Raw 3D to see the same scene before the pixel steps.

TENNIS ARENA