Decorating With Processing.js
- To adaptively adjust the framerate based on the user’s browser
- To make it respond interactively to browser events other than on the canvas
The performance of HTML canvas on iOS (and probably other mobile OSs as well) is pretty poor, so I thought it would be a good idea to drop the framerate a bit. A simple browser check (using a jQuery plugin) is enough to do this.
Since the animation looks a lot cooler in fast motion, I decided to make it so it speeds up to 3X the frame rate when a visitor mouses over the title. Since I’m using jQuery for everything else on this site, it was easy enough to bind to the event listener and toggle back and forth between the two. At first I thought that the frameRate function would only work inside setup(), but it was not so. It looks like it’s possible to change the speed at any time from any event in the page.
This is most of what I added:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21