Times as ever are a changing. Carrying on from my last article on websockets, I’ll be looking at how the user interfaces of future web applications will work. For truly spectacular human computer interaction it is necessary to demand more than what’s possible with the usual elements of the document object model (DOM). For this web developers have invariably turned to Flash for videos and online browser based gaming. Often cited as the nail in the coffin for Flash, the HTML5 Canvas draft specification is now almost fully implemented on the latest versions of most browsers. With mobile and tablet devices we are seeing more and more having native support for Flash removed. But do not shed a tear.
Yes. Why? Here are a few reasons.
- It’s more efficient with fewer lines of code and smaller deliverable size
- It is debuggable via the browser
- No compilation step
- Intuitive event handling
Of course with any emerging technology there is the issue of lacking community support and mature frameworks with which to work with it. However, we are already seeing a number of new frameworks and ports emerging and gaining popularity. Here are a few to consider with some demos.
The new Canvas element in HTML5 is powerful, but it can be difficult to work with. It has no internal concept of discrete display elements, so you are required to manage updates manually. The Easel Javascript library provides a retained graphics mode for canvas including a full hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.
In the following example we see many loaded bitmap images handled simultaneously with make shift force under gravity applied and a small impulse force. We see how well easel manages the rendering of the layers given canvas itself has no concept of discrete objects. Mouse over the black area and click to begin spawning images:
Box2d is a physics engine written for C++. It has been ported to many other languages and now there is a version for javascript and canvas ported from the flash version. Box2d is a rigid body simulator that can handle dynamics and collisions of free bodies, fixtures and joints. Unlike the previous example, the objects created in this framework will instantly afford real world dynamics. In the example below we see a swinging set of pendulums. Click on the canvas to reset the program:
WebGL is a cross-platform JS API used to create 3D graphics in a Web browser. Based on OpenGL ES 2.0, it will be familiar will persons with exposure to the standard OpenGL API, which would include most University educated IT professionals. Because it runs in the HTML5 Canvas element, WebGL fully integrates with all DOM interfaces. Major browser vendors Google (Chrome), Opera (Opera), Mozilla (Firefox), and Apple (Safari) are members of the Khronos consortium’s WebGL Working Group. It’s key advantage is its hardware-accelerated 3D graphics capability.
The following is best viewed in Chrome. To rotate the cube click on it and use the keyboard arrow keys to set it spinning in a certain direction.
In conclusion there are some exciting possibilities on the horizon. It will certainly all begin to kick off when all major modern browser have native webGL support allowing for hardware accelerated 3D graphics. As ever Microsoft are dragging their heals and are keeping their cards close to their chest on this one. Google seem to be in full force behind openGL being the first to implement it. Also head on over tohttp://www.chromeexperiments.com/webgl for some really impressive examples. As I mentioned before this new technology goes hand in hand with the new low latency duplex websockets in terms of bumping the browser up to being an infallible platform for distributed systems. We shall have to wait and see.
Fabric is a drawing tool that utilizes the HTML5 Canvas. It comes with a built in SVG parser. It was envisioned in order to createa high performance SVG manipulation tool for use on T-Shirt design websites. Using Fabric.js, you can create objects on canvas such as rectangles, circles, polygons, or more complex shapes consisting of hundreds or thousands of simple paths. You can then scale, move, and rotate these objects using the mouse by default as well as modify their display properties. You can also manipulate these objects in group with a simple mouse selection. Visit http://kangax.github.com/fabric.js/svg_rendering/ for some example of the complex SVG objects you can render and manipulate.
Below is an example where you can select and resize, and rotate the letters of the Nublue logo.
