Physics-based animation have certain kind of allure to me. That's why I'm fascinated by games like "Angry Birds" and "Cut The Rope". I could spend hours fiddling with the game's physics, such as watching the rope swing around when the rope is cut at different length, the elasticity of the different birds when it hit the ground, etc.
My dull relationship with physics
My contact with physics-learning since young has been minimal to say the least. When it was time to drop a single subject (too many subjects to juggle!) during my junior college years, physics was the first to walk the plank.
I once taken a 3D game module in university that had given me some bare foundation on topics like velocity, speed and gravity. But that never materialised into anything as the module assignments were trivial and it somehow failed to make me see the "bigger" picture. I simply wasn't inspired.
A Spark
Recently I came across this mobile website by Nimble Tank. It was beautiful, creative and most certainly a fore-runner in interaction design of mobile sites. I found myself caught up within the site for a few hours.(The tetris game was addictive!). By sprinkling the site with a few physics-based interactions, the site successfully
- captivated my attention to stay
- made me read all their messages
- had me coming back to the site again
All in all, it was a breath of fresh air for me and it got me searching for "Physics-based animation for Dummies" resources that will make sense for a noob like me.
Flash, yucks... Javascript, yeah~!
The first book that fitted what I wanted to learn was Foundation ActionScript 3.0 Animation: Making Things Move! by the legendary Keith Peters. I know Actionscript syntax is pretty close to Javascript but my hunch was that someone might have already written a JS version of the book, and true to it, I found Foundation HTML5 Animation with JavaScript. Not surprisingly, Keith Peters was the co-writer for the book.
Here's a wheel, here's a brake. Now make a car!
The book was really well-written and I caught on really fast. The examples given excited me. I was able to manipulate a curve line to follow my mouse cursor and make balls bounce off walls while understanding the concept behind it. It doesn't sound like much because all of these are just simple examples showing off basic physics concepts: collision detection, velocity, frame-rates, springs etc.
I needed a side project whereby I could piece the jigsaw pieces together and make something cool. Then I remembered a google doodle that I was amazed by, many months back.
Looking at the doodle now make sense to me. The reason the ball flies away, when the cursor move towards them, is because of a collision with a transparent ball. Due to the springiness property given to the individual balls, the balls doesn't fly directly back to their original position. Instead, it acts like a spring where it went beyond the target and back several times before stopping at the original position.
Boing, boing
After a few hours of coding, I managed to achieve the effects that I was looking for. The animation code could be further optimized but it seemed smooth on my Chrome,Firefox and Mobile Safari. Oh ya, I had a couple of hours free, so I made it touch-optimized too! I swear it's ten times more fun.