I went back and looked at some old code in an experiment with the GSAP (aka Greensock) animation library.
So I cleaned up the code hiding that nastiness away. And the code is now on github.
View the animation here on you desktop, tablet or phone.
The authors employ a repeating MVC pattern for architecting their code. If you’ve ever built anything of complexity – nothing new there. But if not, this is a good place to grok that concept.
In this book you learn to build feature modules – with well defined APIs and strong isolation. They start simple and add complexity and are careful to explain their reasoning all they way through.
Only once in this book did a hit a wall and that was setting up the MongoDb database on a mac. I posted my issue on the discussion forum and got a quick response from the author.
I’m re-reading this book so that I can truly grok the concepts and techniques – and thereby sketch out and build well defined and scoped feature modules of any sort – a day planner, a slide show, a video player – that can be popped into the larger application with minimum fuss.
The bouncing ball logic is all handled by Box2dWebb – which is a port of a physics engine used in ActionScript.
Code break down:
Animation properties (bouncieness, etc) are set up in the init. A bit map (the soccer ball) is loaded into a createJS sprite and loaded on to the stage (canvas). A box2d object is created and added as a property of the createJS objects. On the ticker, the bitmap tracks the x, y position, and rotation of the physics object as it bounces around.
TODO Dive into the Box2DWebb code and figure out collision detection.
Note – As a Flash developer, I have found the CreateJS frame work to be both helpful and a little frustrating. There are a couple key version discrepancies that I had suss out on my own. Although, I did not use Flash for this little example, the CreateJS Toolkit that is built into Flash CC exports versions of the frame work that are not the latest. Apparently there is an update to Flash Professional that is due out soon and this will be addressed.
More canvas game set up experiments forth coming. Stand bye.