← Playground一覧に戻る

Starlight Relay — Ending

An 82-second anime ending for the same show that doesn't exist: the runner from the opening and her relay team-mate walk home along a river at blue hour, watch a train cross the bridge and share a pair of headphones under the stars — a 3D rig drawn at human proportions, a ray-traced GLSL background and a sampled-piano ballad.

Cut 06 61+10

Starlight Relay — Ending

Where an anime opening is loud and fast, the ending is where a show lets its characters breathe: a slow song, long shots, a staff roll crawling up one side of the picture, and usually somebody walking home. This is the ending for the same show as the opening — twenty-six bars of a ballad at 76 BPM.

The runner from the opening walks home along a river embankment with her relay team-mate, the anchor. It is blue hour: the sun has just gone, the sky is still pink over the far bank, and the street lamps along the path come on one after another as the two pass under them. The anchor hands over the relay baton, and their footsteps, which start out of step, fall into step. They stop at the top of the slope as a train crosses the bridge, then sit on the grass, and the runner lifts the headphones from her neck and gives one side to her friend. Until both cups are on, the song is muffled — the way the opening kept it muffled until her own headphones went on. Then it is night: the city across the water is lit window by window, the Milky Way comes out, and a meteor goes over.

What changed from the opening

The opening’s heroine is flat 2D shapes on a 2D rig. Here both characters are 3D skeletons — pelvis, a two-joint spine, neck, head, two-bone IK for the legs and arms — seen through a real perspective camera, so the camera can walk beside them, circle round in front, look up from the grass or down from behind. Each part is projected and drawn as a flat, painted shape, but its outline comes from 3D: a face is the convex hull of a cloud of points on the skull, cheeks, jaw, nose and lips, so it has the right shape from any angle. The proportions are a person’s rather than a cartoon’s — about seven and a half heads tall, a torso long enough for the legs, shoulders that slope down from the neck to a rounded cap over the arm, arms that taper to the wrist, hands a little under half as wide as they are long. The faces keep the kind of prettiness of an ’80s city-pop album cover: natural almond eyes a touch larger than life with a clean dark lash line and a small wing, a small nose, glossy lips. The eyes, lid creases, brows, nose and lips are drawn in the plane tangent to the face at each feature, so they foreshorten as the head turns.

The walk is built from the gait cycle rather than from poses. A foot strikes with the heel, rolls flat, lifts the heel and pushes off the toe; the pelvis is highest over the planted foot, drops on the swinging side and twists with the forward leg; the chest counter-rotates and the arms swing against the legs. Plant positions are fixed per step, so feet never slide. One step lands on every beat of the song, and the anchor’s steps, a fifth of a cycle late at first, drift into line with the runner’s in cut 04 — you can hear it in the footsteps.

The shading is lit by the scene. Each character’s key light is the sum of the street lamps around her by inverse square, plus what is left of the afterglow, over a sky ambient that darkens with the night. A shape is shaded by clipping it to copies of itself shifted towards the light on screen, layered at rising opacity so the terminator is soft rather than a hard cel edge, so as they walk under a lamp its shadow line sweeps across them from front to back, and a warm rim appears once the lamp is behind. The lamps also cast their shadows on the path.

Thirty-odd locks of hair, the ponytail, the pleats of the skirt and the hoodie drawstrings are Verlet chains with gravity, the breeze off the river, a gust in cut 03, and collision against the head, shoulders, body and legs. They are simulated once when the page loads, cut by cut, and stored at 30 Hz in the frame of whatever they hang from, so the scrubber can go anywhere.

The background

Nothing behind them is drawn in 2D. One GLSL fragment shader ray-traces the scene per pixel from the same camera as the characters: a sky that runs from the afterglow to night, streaked clouds lit pink from below and clearing after dark, a crescent moon, a few thousand stars and the Milky Way; distant mountains; three rows of buildings on the far bank, each window switching on at its own moment as it gets dark; a TV tower with aviation lights; the truss bridge and its train; the river, which reflects all of that through moving ripples, stretched into long streaks by distance; the grass slope, the path, and the pools of light under the lamps. The shader writes inverse depth into its alpha channel, so a second pass can blur the background by how far each pixel is from the focus — street lamps turn into bokeh behind the close-ups — before the characters are laid on top and the frame gets bloom, grain and a grade.

The song

The piano is the Salamander Grand Piano by Alexander Holm, sampled; the strings, bass, flute, music box and brushes are Tone.js synthesizers. The intro and the outro quote the opening’s chorus on a music box, slowed to half its speed. The night is in the mix too: the river, crickets in the grass that grow in number as it gets dark, the train’s wheels on the rail joints as it crosses, and the two pairs of footsteps. Tone’s transport is the clock for the picture.

Click the picture — or press Space — to pause and resume. The cut numbers above the scrubber jump to each cut; the timecode is seconds + frames at 24 fps.

Cut sheet

CutBarsShot
011–4Tilt down from the sky to the embankment; title
025–8Tracking beside them; the lamps come on; the baton changes hands
039–10Close two-shot walking backwards in front of them; a gust
0411–12Their feet; the anchor falls into step
0513–16From behind at the edge of the slope; a train crosses the bridge
0617–20Sitting on the grass; the headphones are shared
0721–24Wide from behind, tilting up to the stars; a meteor
0825–26End card
SectionChords
IntroGmaj7 – A/G – F♯m7 – Bm7 A7sus4, the opening’s chorus on a music box
VerseD – A/C♯ – Bm – F♯m/A – G – D/F♯ – Em7 – A7, a descending bass
ChorusGmaj7 – A7 – F♯m7 – Bm7, twice, turning through F♯7
OutroGmaj7 – A/G – F♯m7 – Bm7 – Em7 A7sus4 – Dmaj9