Drive it

Every button below calls the player directly. The log shows what it tells its listeners, and the flag is a cue.

0.0 / 3.0 s

timeScale1

repeat

const player = createPlayer(program, drawer, { repeat: -1 });

// the buttons
player.play();
player.pause();
player.reverse();
player.restart();
player.seek(1.5);
player.glide(2.4, 0.8, "power2.inOut");
player.windDown(1.2);

// speed and repeat, as set now
player.timeScale = 1;
player.repeat = -1;

// the log, and the flag's wave (a second player)
player.on("start", () => log("start"));
player.on("complete", () => log("complete"));
player.on("reverseComplete", () => log("reverseComplete"));
player.cue(1.5, () => {
  log("cue");
  flag.restart();
});

Playing

A player started between two frames starts at that very moment. Seeking has no side effects: any moment, in any order, draws the same, and fires nothing.

play(): Plays forwards from where it is.
reverse(): Plays backwards from where it is.
pause(): Stops where it is.
restart(): Back to the start, playing forwards.
seek(time): Draws the clip at time seconds, laps included. A playing player carries on from there.

Gliding and winding down

A glide moves the playhead to a moment over time, then stays there. Anything else you tell the player takes over at once. A scroll scrub is a glide aimed again on every scroll.

glide(to, seconds, ease?)default ease "none": Moves the playhead from where it is to to seconds over seconds, along ease, then stays.
windDown(seconds): Slows steadily to a stop over seconds, covering half as far as at full speed, then pauses.

Speed and repeat

timeScalenumberdefault 1: 1 is real time, 2 twice as fast.
repeatnumberdefault 0: Laps after the first: 0 plays once, -1 forever.
durationnumber: One lap, in seconds. Read only.
timenumber: The playhead within its lap. Read only.
totalTimenumber: Seconds since the first lap started, laps included. Read only.
playingboolean: Whether it plays now. Read only.
reversedboolean: Whether it plays (or last played) backwards. Read only.

Events and cues

Listeners hear about a frame after it is drawn, never from inside a call, so a listener can safely start another player.

on(event, listener)() => void: Listens for an event. Returns what stops listening.
"start": It left the very start going forwards: after restart(), or play() from the start. Not per lap.
"complete": It ran to the end of its run going forwards.
"reverseComplete": It came back to the start going backwards.
"update": It drew a frame.
cue(at, listener)() => void: Calls listener each time the playhead passes at seconds into a lap going forwards. Returns what stops it.

Making one

createPlayer(program, drawer, options?)Player: A player for a compiled clip, drawn by drawer.
options.clockClockdefault the page's frame clock: Where time comes from while it plays.
options.repeatnumberdefault 0: Laps after the first: 0 plays once, -1 forever.
destroy(): Stops, and puts the artwork back exactly as it was before the first draw.

NextClocks and the stage