general solutions for realtime js performance

[hellochar]

Problem: too much js computation per frame makes things slow. We want to adapt our computation across different cpu speeds.

Detecting performance:

0. don't detect; let user decide perf
1. do a stress test when user first loads page
   • save quality in localStorage
2. realtime monitor framerate

Perf data modelling:

1. "low" | "medium" | "high"
2. "perf" slider number between 0-1 that represents how "fast" this machine goes
3. two numbers - "cpu" speed and "gpu" speed.
4. separate properties for: texture size, cpu speed, gpu speed, sfx on/off, etc.

How sketches actually implement quality:

1. each sketch handles quality separately (e.g. through if/else checks), just looks it up from a service
   • need sketches to adapt to changing quality values
2. we provide a few APIs to make doing quality easier:
   • "tunable number" - e.g. number of points in the particle system; write common logic to handle changing this number to adapt to the performance
   • "job queue" - common API to break up all the computation into specific, 16ms-at-a-time portions.