Add Event Listeners for Lifecycle Methods (setup and draw)

[SableRaf]

Increasing Access

By allowing websites to synchronize with the lifecycle of p5.js sketches, users will experience smoother transitions and less visual jarring. This can be especially beneficial for individuals sensitive to abrupt visual changes.

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

Feature request details

Problem Description

Currently, there isn't a direct way to listen to lifecycle events such as when setup starts or ends, and when draw starts or ends. This can be beneficial for scenarios where users want to synchronize other animations or events on their page with the p5.js sketch lifecycle, like fading in a sketch once it's fully initialized.

Proposed Solution

Provide event listeners/hooks that can be attached to specific lifecycle moments:

• preloadStarted: Triggered when the preload function begins execution.
• preloadEnded: Triggered when the preload function completes.
• setupStarted: Triggered when the setup function begins execution.
• setupEnded: Triggered when the setup function completes.
• drawStarted: Triggered when the draw function begins execution.
• drawEnded: Triggered when the draw function completes.

For instance, in a slideshow containing multiple p5 sketches, we could listen to the setupEnded event on p5.js to smoothly fade in the next sketch once it has been initialized by p5.js and starts rendering on the canvas.

Alternatives considered

While users can currently use custom flags or counters to try and determine when certain functions start or end, having dedicated events would standardize this approach and make it more accessible and reliable.

[davepagurek]

I think we have pre and post hooks already for before/after draw described here: https://github.com/processing/p5.js/blob/main/contributor_docs/creating_libraries.md

Extending that to also have pre/post setup etc hooks in the same manner would make sense to me!

[msawired]

Great, didn't know about this! I think I could use pre and post for setup, however. There are many sketches that do not have or utilize draw function. Also, is there a reason registerMethod is used instead of a more traditional on? Are there any differences on how they behave? ie. Can we register multiple methods to the same event, can we 'unregister', etc.
I will play with what is available right now and post here any updates.

[davepagurek]

Multiple functions can be registered to the same event, but it looks like there isn't an unregisterMethod. Adding that would also help make this more complete!

[msawired]

Thank you very much for all this! This will be really helpful to help creating transitions.