FPS Graph

The minimal shape of a live metric: a graph fed one sample per animation frame. Good as a starting point before layering on a full render loop like the edge detector.

Source

const fps = pp.graph({
  label: "FPS",
  min: 0,
  max: 120,
  history: 180,
});

let previous = performance.now();

function frame(now: number) {
  const delta = now - previous;
  previous = now;

  fps.push(1000 / delta, now);

  requestAnimationFrame(frame);
}

requestAnimationFrame(frame);

Notable details

• fps.push(value, time) takes an explicit timestamp as its second argument — reusing the now already provided by requestAnimationFrame avoids an extra performance.now() call per frame.
• history: 180 caps how many samples the graph retains; older samples roll off as new ones arrive.
• There is no cleanup to write here: the graph automatically pauses drawing when hidden, and destroy() releases everything if you remove the control later.