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:
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!
It fails on Firefox 4, because you’re passing NaN lineTo. How? You only pass it five points in addRect, so in the addLine function, which adds two at a time, gets undefined for the last three points of the array, and that’s coerced into a NaN by the rotate functions.
Of course, passing lineTo a NaN is undefined. Firefox ‘errors’ out the canvas state, which will mean any operations on it will fail until it is cleared.
Hello Keith,
For some reason this leaves some artifacts behind while drawing frames on Safari 5.0.3. Mac OSX Snow Leopard. I didn’t dive into the code yet so I cannot say what causes it.
Anyway thanks for the post.
http://twitpic.com/44z8y3
Wow, a post a day?! Looking forward to it 🙂
I’m looking forward to read more about JavaScript from an ActionScript developer perspective. So I tried your experiment on my machine. MacBook Pro i7. Chrome looks good, but with Firefox I see only this: http://twitpic.com/44zmbc and with Safari I get some weird drawing errors: http://twitpic.com/44zmgq . Is it just my machine?
The world–it seems to me–has already bought into the notion that Flash is a “dead” technology. I’m therefore working feverishly to get up to speed in JS. Luckily, so much of the information in your Actionscript books is universal. Allow me to thank you for that and for your self-imposed writing challenge. I benefit tremendously from your generous donation of time and knowledge, and will look forward to reading your posts.
OK, first big bug! If you’re learning this stuff, you get to learn along with me. If you know more than me, you get to teach me. 🙂
Sorted out the Firefox stuff. Makes me wonder why it was working in Chrome at all… Not sure about the Safari stuff. I’ll give a look today when I’m on my Mac at work, but I’m guessing that’s just a Safari drawing bug more than a bug in the code. Perhaps something with miters can handle it.
Excuse me, it looks like `NaN` is specified:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-canvas
Firefox has a bug in the implementation. They error out and return an internal error instead of ignoring the call: http://hg.mozilla.org/mozilla-central/file/ec8a059bea58/content/canvas/src/nsCanvasRenderingContext2D.cpp#l2037
For Safari, you’re clearing the canvas with `canvas.width = width;`. It looks like this has no effect on Safari unless you set it to a different value first. You probably want to use `canvas.clearRect(0, 0, width, height);`
Thanks. I’ll try the other method of clearing, though I’d seen the width setting method suggested.
OK, changed it to use clearRect, but still seeing the same artifacts in Safari. I blame Safari, but will continue to look for a workaround.
It’s cute! but still way behind Flash. It may be true that Flash ALONE is not the appropriate technology for web sites (throw-able products), but as a technology for developing web applications is much more appropriate than JS. It took ActionScript a long time to become a descent programming language. Doing JS is like going back a few years just because some dude decided that Flash is not cool!
I’d learn both technologies without prejudice but I think this buzz with HTML5 is a bit rushed. In my opinion Flash can be part of this package because it does a lot better for this kind of animations, video and 3D.
Seriously? Why does this have to become a battle? Why, when I do something in JavaScript, do you feel the need to defend Flash? Did I say anything bad about Flash? Did I say anything about JavaScript being better? I am so tired of the constant bickering of these two camps.
That is quite a coincidence, I dove in at almost the same time as you, and same here… That patterns book really led to my “ah ha!” moment. I come more from the .NET side of the world, though I did write an iPhone Web App emulator in Adobe Air, and I came with all the same pre-conceived notions and had them shattered as well.
I am really looking forward to seeing what you cook up. Between you and Grant Skinner, it seems all the great AS3 minds are giving JS / Canvas a good run through.
Enjoy the experience, learning new stuff is a blast.
Shaun
31 posts from an AS dev getting into JS. That’s really, really cool! I’ll be here and try to learn along with you. Thank you for challenging yourself in a public manner like this – I have no doubt it will very informative and inspiring.
http://paulirish.com/2011/requestanimationframe-for-smart-animating/
yeah, saw that the other day. someone posted it on twitter. maybe you?
Maybe… 🙂
“Totes McGoats.”
When I read that in that post I fell over. I have my 5-year old son running around saying “Slappin’ da bass mon” and listening to Moving Pictures. Life is great. OT yes.
This is awesome, and I too am getting more and more pumped on Javascript. I love seeing the well known Flash guys starting to enjoy JS. However I’m really looking forward to practical comparisons and approaches that would entail heavy patterns and event modeling across an entire application or game. My biggest battle right now is mimicing the method of writing classes for display objects (elements) and adding / killing them from the stage (DOM) programatically. After that hurdle, I’m super excited to start building games.
A JS book for AS developer seems backwards at first, but would be ideal.
“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”
Exactly. Javascript is still nasty, still a step back from OOP languages, no matter what hacks you employ. I still don’t see the clear advantage to switch to Canvas and Javascript. Having no plug-in requirement is nice, but hey, you have a BROWSER requirement now with HTML 5. Flash and Silverlight are moving on and innovating, HTML 5 is stuck in slow moving not-yet-widely-adopted standards. It’s not bickering, it’s fact. 🙂
ok, so stick to what you are comfortable with. don’t step outside that comfort zone, whatever you do.
Javascript, it’s cool and nice to mess around in, but for actual mass audience commercial work the Flash Player has more penetration then proper HTML browsers, and let’s you do basic stuff easier and faster (because of the IDE and lack of crossbrowser compatibility issues), and that’s basically where the real-world practical considerations stop.
BUT for fun it’s really usefull to dabble and work with everything you can get your hands on, and you will get better at all of it. Writing javascript let you look differently toward ActionScript of C# or whatever you normally use. I dont plan to ever do commercial work in Javascript, but that’s not because I cant do it, but because I have more power in ActionScript (workflow, libraries & experience) but that doesn’t mean I can’t leech coding concepts and approaches.
And in the end it all does the same kind of stuff, only with some different strength’s and weaknesses.
Really? JavaScript is only nice for messing around and dabbling with? But mass audience commercial work doesn’t use it? Wow. Well, we all have our own realities.
I didn’t mean to be insulting or demeaning.
I totaly admit javascript is essential to the current web: there wouldn’t be things like facebook or gmail as we know it without it, so respect to those who uild those kind of things.
In my comment on viability I was thinking more on the lines of rich interactive internet applications, with lots of video, animation, dynamic assets and data and nested interactive things.
Like games, marketing-campaigns (‘experience-sites’) and additions like the streetview-panorama-display in google maps. Those things need the newest Chrome to have any usable speed when run in javascript, which most common users don’t have.
(The dabbling and messing around was for personal pleasure and learning 😉
No problems. It just seems like some people are being very defensive about Flash, and I’m not trying to put Flash up against JS or compare the two at all. I just think it’s great to learn more stuff. The fact is there are far many more highly used RIAs built with JavaScript than in Flash. It’s no comparison really. I’m not saying that to bash Flash. I’m a Flash fanboy. It’s just a matter of fact that JavaScript is FAR more widely used for on line apps.
Look forward to your future posts. Thank you for doing and sharing that.
btw. Above example runs w/ decent framerate on HTC Desire – Android 2.2 w/ webkit 3.1 browser 😉
Thanks,
Stef
Any chance of showing some prototype examples?
Lookin forward to see what you can come up with! 🙂 I played around a bit with your wirelib framework. Is it ok that I added one of the resulting animations to my site? No info about lisensing here, soo.. Just to be on the safe side.. 🙂
Oh, good point. I’ll slap an MIT license on it tonight.
Try out this similar library http://bit.ly/canvask3d it is written using the JavaScript class pattern – commented code is there for download also.
Great!
I agree with you about as1/js, javascript may be frustrating but the main gap is the unexperience, not the loose languaje.
I have chose canvas too to avoid frustation and focus in javascript 🙂
Look forward to your future posts
PD: excuseme for my poor english 🙁
I am a bit biased towards canvas, I don’t like flash mostly because for what it used: banners and bad usability/close code sites (means no greasemonkey/css stylish).
I just hope canvas will not be used for ad banners in future.
Javascript and HTML5 are the future. While both JS and HTML5 do need some work in terms of browser support, proprietary technologies like FLASH and SILVERLIGHT are going away completely within the next 10-20 years.
So embrace JS and HTML5 now, or flail your arms later.
Hi Keith,
I’m VERY late to the party, but am pretty excited to be here. As an AS3 dev who has started 2012 with the manifesto not to develop anything that can’t be done with nothing more than a text editor and a browser, I’ve decided to take JavaScript seriously. I was looking for something which followed an AS3 whizzkid’s transition from AS3 to JS and ended up here. Couldn’t ask for more. Thanks for being so open with your learning curve…
For those arguing that OOP is some kind of ‘step-back,’ you should check out languages like LISP, Scheme, Clojure, Racket, Erlang, OCaml, and Haskell.
Sadly, Bell Labs dominated the industry and C++ became a mainstay, and OOP became some sort of dogma.
OOP is only a matter of preference. Functional languages are far more powerful, but also more difficult to grasp.
I couldn’t agree more. People view a certain methodology that has become popular like it was handed down on stone tablets from heaven. It is simply something somebody created and it works pretty well and it became mainstream. That doesn’t mean it’s the only way to do things or the best way, or that all other ways are inferior. People who think like that generally have very little experience beyond the thing they think is “correct”.
Wow Keith, you’ve done it again.
Was hunting around on the internet for places to study HTML5 game dev, couldn’t find very much worth mentioning, and then this bit101 link came up with an ENTIRE month full of tasty Javascript entries.
Your books have been crucial to my development as an as3 game guy: I’ve bought the Javascript version of the animation book and know without even reading this, that it’s going to be chock full of good information to help me on my way as an HTML5 developer.
Was recently at the Adobe Game Jam in NYC and brought your book along for reference. Needless to say almost everyone commented on it: “Oh, I remember that book!” “Great book!”, etc.
Thanks so much for this! Eager to get started!
Ben
P.S.
Any new books in the works?