totalFrames

← All Butter documentation

Unlike regular p5.js sketches, Butter components run for a finite amount of time that users control on the timeline.

In addition to knowing how many frames have gone by so far via frameCount, in Butter, you can see how many frames the component will continue to run for via the global totalFrames property.

As an example, if you wanted a 60-frame fade out at your component's end, you could use:

// Pass `true` at the end to clamp the output in the 0-1 range
const opacity = map(currentFrame, totalFrames - 60, totalFrames, 1, 0, true);