New Animation API

[lucasdinonolte]

TL;DR

Adds a draw loop helper to mechanic core. This helper is exposed to design functions through the engine. The goal of this is to remove boilerplate from design functions.

Implements the changes explored and discussed in #156

What this does

Core

• adds frameRate setting to mechanic instance (defaults to 60)
  • frameRate is passed to the webm writer and used to prepare a draw loop helper
• adds defaultSettings file that is merged with user provided settings (mostly to create visibility for the default settings)
• adds a singleton drawloop helper to mechanic core
  • whenever a new instance of mechanic is created the draw loop helper is configured with the frameRate setting
  • a singleton was chosen to be entirely sure we can reset the draw loop before reloading a function
• adds registerFrameCallback and registerDoneCallback methods to mechanic core
  • these can be used by engines to register their onFrame and onDone methods
  • this is needed so common logic (like resetting the draw loop on Done) can be handled by core instead of being duplicated in every engine
  • imho this also streamlines the readbility of each engine a tiny bit
• adds callbacksForEngine to mechanic core
  • this returns an object of callbacks (frame, done, drawLoop …) that an engine can pass to a function
  • the function takes an overwrite-argument to allow engines to overwrite callbacks if they need
  • engine p5 uses this to output an error if you try to use mechanic's draw loop

All engines

• Refactor engines to work with the updated API (registerFrameCallback, registerDoneCallback and callbacksForEngine)
• Refactor engines to expose frame, done and drawLoop to the design function directly, instead of on the mechanic object passed in
  • state and setState remain on mechanic to avoid namespace collisions with React
  • for consistency this is true for all engines

Engine Canvas

• Add getCanvas helper to engine that provides the user with a density-aware preview canvas
  • this is just for preview, this does not implement different pixel densities on export to keep the scope of this PR limited
  • pixel Density for export should be implemented on another PR (#144 did some exploration)
• When using getCanvas a user no longer needs to pass canvas to done or frame
  • done and frame still accept a canvas to be passed to them, to keep it backwards compatible with functions creating their own canvas

Engine p5

• Call sketch.frameRate with mechanic.settings.frameRate before starting rendering on the sketch

DSI Logo Maker

• Refactor all functions to new API
  • Logo Animated SVG renders a bit stuttery, but this does not seem to be related to the changes. It's the same on main

Create-Mechanic

• Refactor all function-templates and examples to new API

Discussion

I tried to keep this PR as concise as possible, but given it needs to touch almost all parts of mechanic it has become fairly large. I also tried to be expressive with code comments and added TODO labels where I feel unsure about a decision I've made. Looking forward to discussing this.

[netlify[bot]]

✅ Deploy Preview for dsi-logo-maker ready!

Name	Link
🔨 Latest commit	057cb304dfbd3f1d2f2b74f6dde07ecb56e3494c
🔍 Latest deploy log	https://app.netlify.com/sites/dsi-logo-maker/deploys/645cdc988f812f000891e1ff
😎 Deploy Preview	https://deploy-preview-157--dsi-logo-maker.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[lucasdinonolte]

@fdoflorenzano thanks for the initial set of comments. I just addressed them. From my point of view this should now be ready for you to play with writing some design functions using the new API to see how it feels :blush:

/cc @runemadsen