Forget about Web standards and go way beyond the usual capabilities of Web scripting languages. Learn how to create stunning effects using canvas/svg/vml, how to control animated graphics in JavaScript, and how to merge all kinds of standards and technologies to create a whole new world of possibilities. Using Paul\'s latest project as an example, he shows you how to adapt the things he talks about into new projects, featuring his new JavaScript game engine. Paul demonstrates how to control animated graphics in the browser, how to scale and rotate elements smoothly, and how to combine canvas, svg and filters with CSS to adapt new standards in browsers that don\'t support them. See how to move physics from the real world to the Web browser.

1. Beyond the standards
Advanced Animation and Physics in
JavaScript

2. Beyond the standards
Advanced Animation and Physics in
JavaScript

3. Beyond the standards
Pushing the web beyond its limits

4. Web Standards
+ Great theory
+ The way it should be
- Minor progress for 10 years
- Very difficult to push across parties

5. Okay then,
let‘s wait until
something
changes.

6. No way!
Let‘s push the
web!

7. Walk.
How to create a walking character

8. 1. The Basics
• Center or not?
• Click angles - How many possible directions?
• Preparing the images

9. 2. The animation(s)
• Animate the character by changing the image
• Move the character

10. 3. Tweak
• Walk in constant speed
• Easing
• Multiple clicks handling

11. Scroll.
How to create a scrollable, isometric
world

12. But that‘s not possible!
• Isometry needs
skewed, non-
retangle elements
• HTML doesn‘ t have
them

13. Don‘t think about limits
• So you cannot use
events that „bleed
through“ elements?
• Sure you can!
• Build your own event
structure in JavaScript

14. Don‘t limit yourself to a given
standard - you can always build your
own with JavaScript.

15. There‘s one fundamental thing
you need to know..

16. Knowledge is power

17. New standards
Canvas, CSS Transforms

18. Canvas
• Feels like a true HMTL element
• Easy JavaScript API
• Safari, Firefox, Opera
• ..IE support using ExCanvas
Get your hands dirty!

19. CSS Transforms
• Webkit-only (Safari,
iPhone, Android, Air)
• 2D transformations on
HTML elements
• Yes, all kinds of 2d
transformations:
Rotating, Scaling,
Skewing

20. Example: Coverflow

21. ...wouldn‘t it be cool to
have CSS transforms in
other browsers?

22. ..omg,
IE already has!

23. Transformie
• Parses stylesheets and inline styles, tracks
them using IE only onpropertychange
• Creates a custom matrix for every function
(rotate, scale, skew)
• Multiplies all matrices
• Creates the IE matrix filter on the element

24. ..but what about the rest?

25. CSS Transforms in other browsers
• Firefox (< 3.1)/Opera has no CSS transforms
• What can we do? Push the web!
• Two possible methods
• Rerender elements to canvas and modify them
• Insert elements into SVG and use its transform
features

26. The Canvas approach
• Find all instances of -webkit-transform
• For every found element:
• Create a new <canvas> element at the exact same position as
the original, with the same constrains
• Rotate/Modify/Translate the whole canvas by the values found in
the transform functions
• Literally draw borders, background and text for the original item
into the canvas and for all sub items
• Recompute the new constrains of the element

27. Example: Canvas

28. The SVG approach
• Find all instances of -webkit-transform
• For every found element:
• Serialize the whole node (outerHTML) into a string (without
positioning data in the style attribute)
• Wrap it around a prepared SVG XML Header
• Also insert the transform value as <g transform=‘...‘>
• Encode the whole string to base64
• Create a new embed element with the base64 string as data
source, and render it to the page

29. Example: SVG

30. Pushing the standards
How library developers help
defining standards

32. How a library dev smoothens the path
before web standards jump in
• The Copy approach
• Replicate an existing standard on other platforms with the help
of different technologies
• Example: Excanvas
• The „Lowest common multiple“ approach
• Take a couple of different standards across browsers and create
a subset that can be used across browsers
• Example: Dojox GFX

33. Using the LCM approach, we can help
define new standards.
..since we are the ones that try to
find a suitable subset for the end-
developer

34. Now everyone!
Let‘s push the
web!

35. Audience Response
Question?

36. Thank you for your attention!
http://paulbakaus.com