BIT-101 [2003-2017]

Over the last few weeks I’ve taken a deep dive into JavaScript and Canvas. It’s been a blast, a real eye opener and paradigm shift. As with a lot of other Flash developers, whenever I’ve thought about “HTML5” I’ve thought something along the lines of “Ewww… JavaScript! I don’t want to go back to loose typing and prototype. I left all that behind with AS1!” I think part of the presumption is because JavaScript doesn’t have many of the more hardcore “developer-y” features like classes, inheritance, data types, etc. that it is somehow “less professional” than similar languages that do have these features, like ActionScript. Perhaps some Flash developers look back at the code they wrote when they were writing AS1 and assume that JS devs are doing the same thing. Not taking into account that the AS1 they were writing years ago was perhaps pretty early in their coding career. At least, that’s how I was viewing thing to some degree, and I’m sure I’m not alone.

The fact, as I have discovered, is that JavaScript development is every bit as serious as AS3 dev. While the language itself may be a lot looser, this winds up requiring that developers be very careful what they do. Since all JS programs on a web page essentially play in the same big sandbox with the window object as its root, you have to be very careful about what you let creep into that global scope so that you don’t wind up polluting it for any other programs that might be running on the page at the same time. With this in mind, there are a bunch of patterns and conventions in use that are pretty fascinating to study. I HIGHLY recommend the book, JavaScript Patterns:

There’s a lot of JavaScript that looks pretty strange to AS programmers, and this book will explain why it is all written that way.

Next up, I needed something cool to program. Anyone who knows me knows that I wouldn’t be too excited about coding up some sort of form based Rich Internet Application. YAAAAAAWN! No, I need to make magic! I need to make things move! So next up was Canvas. Since I’m recommending books, the Canvas Pocket Reference is also very helpful.

If you’re not familiar with Canvas, just think of it as an alternate flash.display.Graphics. It has a drawing API that’s somewhat similar, but different in a lot of ways. I got tripped up quite a bit by the differences in the beginning, but finally got the hang of it. It’s not rocket science, but don’t go into it with any preconceptions.

I decided that for the month of March, I’m going to try to do a post each day about JavaScript and / or Canvas. These will probably be most interesting to those coming from an ActionScript background or otherwise beginning to learn about the subject. 31 posts! Yes, I can do it! Some may be nothing more than simple experiments, others more beefy. No idea just yet.

To start with, allow me to introduce what I’ve come up with over the last few weeks. It’s a pretty simple framework for drawing 3D lines in Canvas, called WireLibJS. Let’s start off with a simple demo. Click to see it in action:

WireLibJS March 01 Demo

And here’s the JavaScript Code that would go into creating that:

[php lang=“JavaScript”]$(function() {
var i, points = [];

wirelib.initWithCanvas($("#canvas")[0]);

for(i = 0; i < 20; i += 1) { points.push(Math.random() * 500 - 250, -400 + Math.random() * 500 - 250, Math.random() * 500 - 250); } wirelib.addLine(points); wirelib.addBox(0, 0, 0, 300, 300, 300); wirelib.addCircle(-200, 400, 0, 200, 32); wirelib.addRect(200, 400, 0, 400, 250); wirelib.loop(24, function() { wirelib.rotateY(0.01); wirelib.draw(); }); });[/php] I’ll save the explanations for future posts, since I’ve now committed to so many. But the code above should be largely self-explanatory, and you can always view source to get at everything. Note, the library itself may change and evolve over the coming weeks. I’m going to do my best to make sure it doesn’t break earlier demos, but don’t consider it complete until the end of the month. OK, day one done!