showtime

X-ray

See inside a real thing, in time with its own sound.

Film something doing its thing. showtime finds every event in the clip's sound, draws the inside moving on those exact frames, on the object as the camera moves or beside it, and proves it with a receipt.

19 of 19 events on their frame · audio 0.0 ms from the original

A typewriter, seen through. Clip: Erik Pålsson / Sounds of Changes, CC BY 3.0 · Source. The receipt is showtime xray verify reading the finished film: the sync marker on every frame against the events, and its audio against the original clip.

How it works

Three commands, or one sentence to your agent: “X-ray this clip of my typewriter, drawn on the machine.” It runs these for you, looks at the frames and tells you what it measured and what it drew.

  1. 1

    Film it, then measure it

    A real thing doing its thing, with its sound: a typewriter typing, a music box playing. A phone is fine. Every event in the sound gets its time and its frame; --track follows the object as the camera moves.

    showtime xray analyze clip.mp4 --job xray-typewriter
  2. 2

    Draw the inside

    Pick a mechanism from the library and a look: see-through on the object, beside the clip, or a living diagram; dark like a radiograph or light like a blueprint. Each strike peaks on its event's frame.

    showtime new xray xray-typewriter/project --mechanism typewriter --theme darkshowtime render xray-typewriter/project --job xray-typewriter
  3. 3

    Verify it

    The finished film is read back frame by frame and its sound is matched to the clip's. The line it prints goes on the end card and under the film wherever you post it.

    showtime xray verify xray-typewriter

See-through

The inside drawn on the object itself, inside its outline, as the camera moves. Objects only, never people.

Beside it, or as a diagram

When the object will not hold still, the inside sits beside the clip, or as an isometric living diagram.

Music from the sound

Pitches, key and tempo from an instrument's sound: a score for a piano, a tab for a guitar, a drum sheet for a kit.

Honest about what is drawn

On screen: what was measured (event times, counts, what the clip shows) and what was drawn (a generic mechanism of that kind).

No clip? Touch a living diagram

The same drawings, with no video: a living diagram you type on, press and drag. Each one is a single offline file made by showtime export html --interactive, live right here.

Type on a typewriter

Type on a typewriter

living diagram · type

Type on your keyboard and the machine types it: the key goes down, its typebar swings up and strikes, the letter lands on the paper, the carriage steps, the bell rings near the margin, and Enter returns the carriage.

Make your own with one line

“/showtime explain how a typewriter works inside, interactive: let me type on it.”

Make your own
showtime new diagram typewriter --example typewriter --theme darkshowtime export html typewriter --interactive
Embed

On a page of yours, with the script:

<script src="https://faviovazquez.github.io/showtime/xray/embed.js"></script>
<showtime-xray src="https://faviovazquez.github.io/showtime/media/xray/typewriter-figure.html" ratio="16/9" title="Type on a typewriter" poster="https://faviovazquez.github.io/showtime/media/xray/typewriter-figure.jpg"></showtime-xray>
What happens when you press a key

What happens when you press a key

living diagram · type

Type on your keyboard: the key goes down, its USB code waits for the next poll, the CPU takes the interrupt, and the screen draws it at its next refresh. Slowed down about 30 times; typical numbers, labelled.

Make your own with one line

“/showtime explain what happens when you press a key, interactive.”

Make your own
showtime new diagram press-a-key --example computershowtime export html press-a-key --interactive
Embed

On a page of yours, with the script:

<script src="https://faviovazquez.github.io/showtime/xray/embed.js"></script>
<showtime-xray src="https://faviovazquez.github.io/showtime/media/xray/computer-figure.html" ratio="16/9" title="What happens when you press a key" poster="https://faviovazquez.github.io/showtime/media/xray/computer-figure.jpg"></showtime-xray>
A heat pump: drag the weather

A heat pump: drag the weather

living diagram · drag

Drag the outdoor unit to make it colder or milder outside: the refrigerant and the heat moved per unit of power answer at once (illustrative numbers, from one formula).

Make your own with one line

“/showtime explain how a heat pump works, interactive: let me drag the weather.”

Make your own
showtime new diagram heat-pumpshowtime export html heat-pump --interactive
Embed

On a page of yours, with the script:

<script src="https://faviovazquez.github.io/showtime/xray/embed.js"></script>
<showtime-xray src="https://faviovazquez.github.io/showtime/media/xray/heat-pump-figure.html" ratio="16/9" title="A heat pump: drag the weather" poster="https://faviovazquez.github.io/showtime/media/xray/heat-pump-figure.jpg"></showtime-xray>

Lane 2: add yours

The library grows with every verified X-ray. Post a film to the gallery, or add a mechanism so everyone can draw that object; we post ours the same way, and every entry is there to copy.

Post your X-ray

Make it with the three commands above, on a clip you filmed yourself or one under a Creative Commons license. Then open the gallery form with the film's link, the object, the mechanism you used (or the new one you wrote), the verify line pasted as it printed, and the clip's credit and license.

Post an X-ray to the gallery

Add a mechanism

A new object starts as a copy of the closest entry in the mechanism library. Open a pull request that adds one folder:

skills/showtime/library/xray/<object>/
  mechanism.js   # its parts, four anchors, draw(k)
  diagram.js     # optional: the living-diagram scene
  README.md      # parts, what an event moves, measured vs drawn,
                 # "Verified on" + the receipt + the clip credit

The pull request checklist →

The receipt

We run showtime xray verify on the film: every event on its frame and the audio within 20 ms of the clip. A film without its line does not appear.

The credit

Your own footage, or a clip with a license that allows it (CC0, CC BY, CC BY-SA) and its credit line. No license found, no entry.

Objects only

An inside is drawn over machines and instruments, never over people. A person in the frame gets the beside-the-clip layout.

Copyable

Each entry lists the commands that made it and links its mechanism, so anyone can make their own from it with showtime new xray <dir> --mechanism <object>.

The X-ray guide: film it, pick a mechanism, music and drums, verify, share →