I have been experimenting with the new HTML5 canvas element and trying to get up to speed on the syntax. As a seasoned ActionScript developer, I find JavaScript easy to understand, but difficult to write. I find myself thinking Flash and trying to work a Flash approach. Anyhow, I have tried canvas with raw JavaScript and canvas with Raphael and now canvas with Processing.js.
They all have advantages and drawbacks. Processing.js is giving me the most fun for now and I can’t wait till they finish implementing the entire set of methods, or at least what’s left that can be implemented into canvas.
I have read some eager articles saying that canvas will be the end of Flash. That may be true at some point in the future, but I can tell ya right now it’s not even close. With no dedicated VM, it craps out if you try anything with a couple hundred worthy sprites on screen. Also, objects are painted onto the canvas and no longer exist as objects you can have a pointer to. You basically have to paint the the canvas each time with your updates. For example, Processing uses pushMatrix() and popMatrix() to store and restore stage translations. This is pissing me off and I am still trying to get my head around it. I just want to move stuff around. On the other hand, when you paint, you can have an infinite amount of detail without worrying about overhead, like when you pipe movieclips into Bitmap object in Flash.
It’s all good though and a step in the right direction as far as I am concerned. No plugins, no 3rd party expensive IDE’s etc. It’s all free range and organic, yay.
As with all things animation and drawing, I like to start off with basic math and growing plants, trees, etc. Processing has no real shading, 3d or drop shadowing built in right now and it’s kind of refreshing going back to the old way of thinking where you have to fake it all.
Here is a demo of the alien plant thing I am writing. It takes about 20 mins to draw the entire 360° view. The depth and dimension is all fake like I said, drawing all the highlights, shadows etc in separate passes with slight offsets.
