I’ve been playing around with Ye Olde Canvas again. This time I wanted to use several techniques in one animation, including the Page Visibility API, and combine those with some behaviors outside of the canvas itself. I also wanted to put an Easter egg into my site. Because Spider-Man.
At the time of this writing, there’s a bunch of floating code in the header of my website. It’s brand new and kind of light, meaning that I tossed it together during the weekend. But it’s still a nifty animation.
A while back I built a silly little performance-testing animation that I called “Bouncer”. It’s nice, but I noticed recently that it was missing a vital component: an indication of the frame rate. I added one this morning, and I thought I would share the code with you.
I went a little crazy with this one. I know it doesn’t look like much, but there’s a lot going on inside that canvas thingy. If you click on the button or on the canvas, a bunch of black circles will bounce around with their own vectors, speeds, elasticity, and with a shared bit of gravity.