Tinkering with CreateJS

See the Pen Spinning Square Class with CreateJS by Brian Cribb (@briancribb) on CodePen.

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.

Visually, it isn’t much. I’ve built a little app that puts six squares on a canvas, spins them and moves them to the right. As the squares zip along, they pick up speed until… well, forever. I don’t have any breaks or top speed for them. But no worries, I’m using requestAnimationFrame, so it won’t pull on your computer’s resources when you’re looking at another tab. I didn’t put the app on this page because I didn’t want to load the CreateJS framework onto my blog just for that. To check it out, have a look at this pen. Also, here’s a screenshot.

Over all, I’m rapidly falling in love with EaselJS. That’s the part of CreateJS that deals with drawing on the canvas. It automates things that are a pain to keep track of, and it helps keep the code clean. At the end of the day, you’ll code faster and better using this than just building something on your own.

That being said, I strongly suggest that you learn to program the canvas straight up before using this framework. It’s designed to be a bridge between ActionScript 3.0 and the HTML5 canvas API, so it helps to know both to some degree. I’m not sure how lost someone would be if they had never seen ActionScript 3.0, but I’m fairly certain that a lack of canvas knowledge will hurt you. There are many things that the canvas can do, and a framework isn’t always the best choice.

For example, at the time of this writing I have some code floating around in the header of my site. That’s a small animation without any interaction from the user, so it would be a waste to build it with CreateJS. Even worse, it would mean unnecessary additions to page weight.

By programming things like this without a framework, I become more familiar with what the canvas can do and how to get the most out of every animation frame without needlessly dragging the processor down.

But I digress. The take-away from this post should be this: read tutorials, the source code for the demos and the online docs. Lots of groovy stuff can be found by just looking around on the CreateJS documentation.