Draws Using Previous Frame State

← All Butter documentation

In general, Butter components will have a better user experience if they draw directly vased on time and fields, rather than on the state of variables that get incrementally updated every draw. If a component relies on incremental state, then it will be a little less responsive when users update its fields.

When editing your component, in the right sidebar, there is a toggle at the top labelled Draws Using Previous Frame State:

  • If a sketch does not draw using the previous frame state, it means that it fully redraws the canvas every frame using only field values and no data recreated from the previous frame.

    This means that you can seek anywhere on the timeline and the sketch can immediately draw the frame.

  • If a sketch does draw using the previous frame state, then when you seek ahead, it has to quickly go through all the in between frames on its way there to make sure it looks correct at the end.

There are a few ways in which your sketch might be using previous frame state:

  • You don't fully clear the canvas each frame, so visuals build up over time:

  • You incrementally update variables each frame (e.g. by calling x++ in draw, or running a physics simulation):

Butter will try to automatically detect when your sketch needs Draws Using Previous Frame State toggled on. You can always manually toggle it on or off.