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.
Recently I spent a rather large amount of time working on a silly star map that no one is likely to ever look at until after I’m famous and long dead, when it will be uncovered by digital archaeologists and mistaken for primitive astronomy. I have a point, I swear. Just give me a moment to process my thoughts.
I’ve been wanting to make some little something with CreateJS for a while now, but I was always studying things that related to my day-job. Now that the contract is over and I’m looking for a new position, I had a little time to try a little coding exercise. I created a sub-class for the framework’s Shape() class, and I’ve played around with the animation a bit. The results are actually very promising. Have a look at the source code for some details on how it works.
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.
Here’s a swanky little bit of animation from the HTML5 Canvas. If you don’t see it, then your browser doesn’t support canvas, which means that you’re using an old version of Internet Explorer. (You should stop doing that.) The goal was to see what I could draw programmatically with the canvas API.