WebGL uses the same Canvas element as Canvas2D. This time a different ’3D’ context is retrieved. The 3D context conforms to the WebGL standard run by the Khronos group.

Examples:
Chrome experiments
Water demo

Tutorials:
NeHe ports
Khronos introduction

CSS animations are based around ‘keyframing’. This is very similar to ‘tweening’ in Flash. Markers are set for values of an object at a given time. Transitions with easing equations will then describe the type of movement between them.

This appears to be very useful for web designers to add fades and animations to their web pages. The main drawback is that it is not as widely supported as SVG or Canvas2D.

There is a tool currently in preview release from Adobe called “Edge”. Adobe Edge allows you to build up very complex animation using this type of key-framing. It is very intuitive and certainly worth investigation by Flash animators.

Examples:
CSS3 image gallery
CSS3 Spiderman Animation
3D cube

Tutorials:
CSS keyframes
The principals of animation in CSS

Each drawn shape is remembered as an object in the SVG document, similar to the display list, which is subsequently rendered to the screen. Each object can have animations, filters and events attached to it, in a similar way to one might expect with ActionScript object.

Child Objects are usually described within the HTML page, however, they can be added and removed at run-time using JavaScript. The JavaScript is then used to perform operations to alter the objects. CSS can also be applied to the objects.

SVG is particularly useful for full page graphics, charts and event driven animations.

Examples:
SVG-WOW
SVG filter example

Tutorials:
iProgrammer
A list apart

Canvas is relatively low level compared with Flash. There is no display list equivalent but complex shapes, images and text can all be drawn. If you wish to use a display list, there are ‘scene graph’ libraries for canvas. For example, try ‘EaselJS’ by Grant Skinner.

On initial investigation, it appears to be good for small screen sizes and for small but complex animations. This particularly includes particle systems, lightning generators and other cg snippets. Full 2D games can also be easily created.

Examples:
Pirates Love Daisies
The browser Fountain

Tutorials:
Mozilla Canvas Tutorial

The emerging new standard is a platform with multiple separate API’s. A well formulated presentation listing all new elements of HTML5 with examples can be found at HTML5 rocks. There are many other non-graphics features which may be useful when planning a project. To get a full overview of the graphics capabilities available there are a variety of technologies on which we need to focus. These include:

Cavnas2D
SVG
CSS3 Transitions, Transformations and Animations.
WebGL

Another invaluable resource is caniuse. It is a site where you can search for any HTML feature and see in which browsers it is supported or will be supported.

There will be 4 more parts to this group of posts. Each will give a 30 second overview to one of the 4 API’s listed above.

My session was designed to give a very quick introduction to how to get things moving and animating using the features provided by the new standard. It included walkthroughs of Canvas2D, SVG and CSS3 Animations.

There are lots of HTML5 links which I stated I would post onto this page. I will do so over the course of the weekend in a series of posts quickly recapping the main points of each API.

For now, these are the session slides and the set of the haphazard coding examples.

Also, on a different note, that you to everybody who has bought the Cleverbot iOS app over the last few days. It is now 46th overall in the US app store.

Rollo Carpenter, the developer of Cleverbot has been in the news lately. He has been interview for the BBC World service and on the front page of the BBC online site. Also, articles have appeared on Engadget as well as in the Daily Mail newspaper here in he UK. Another appearance in New Scientist magazine also complements the large article on Cleverbot which appeared in the same magazine this time last year. The most recent pieces refer to the near-miss of Cleverbot almost passing the Turing test. A small improvement could see Cleverbot mark a major milestone in computing history. Here’s to Cleverbot passing the Turing test in the near future. Some of the links are posted below:

Cleverbot on the BBC
The Daily Mail
Existor (I made Avatar).
The Cleverbot app

Also some snippets from App store reviews, thank you to everybody that has taken the time to write one:

“This app is extremely addictive and entertaining” Jdog 1928 (5 Stars)
“It is hard to overstate my satisfaction” A Concerned lolcat (5 Stars)
“This is now my favorite app” RUL Specture (5 Stars)
“Totally worth the money. Impressive application for sure!” Bongozzzzzzz (5 Stars)
“I totally love this app!” EmoRobot1997 (5 Star)
“It works great and actually looks like a real person talking” Rainbow Unicorn (5 Stars)
“I love the fact you can change bubble colours, it would be good if the SMS app had this.” 0045136 (5 Stars)
“Seriously the other bot you are talking to is actually another human” Bar Owner (1 Star)
“You are simply connected to other victims of this scam” C R (1 Star).

Yesterday morning I gave a lecture at University Campus Suffolk. Students on the games design course work with programming in ActionScript. The students also learn 3D modelling in 3D Studio Max. OpenGL is a technology that fits nicely in the gap between these two disciplines. The lecture was designed to give a quick introduction to OpenGL and how it is relevant within the gaming industry. Finally, it moved into explaining how to get started with some OpenGL ES.

Slides and notes from the lecture can be found here. Also, further back in this blog there are other OpenGL lecture slides and relevant posts.

Feel free to post any questions as comments or to email me directly if you would prefer.

Good luck to everyone with their upcoming project deadlines and especially to the third years with their future careers. It has been a pleasure working with you over the last academic year.

A PDF document of the slides and a zip archive of the code which accompanied the lecture can be downloaded from here and here respectively. The example project requires Adobe Flash CS5.

Thank you to all who attended.