Beyond the standards
Advanced Animation and Physics in
JavaScript

Beyond the standards
Advanced Animation and Physics in
JavaScript

Beyond the standards
Pushing the web beyond its limits

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

Okay then,
let‘s wait until
something
changes.

No way!
Let‘s push the
web!

Walk.
How to create a walking character

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

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

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

Scroll.
How to create a scrollable, isometric
world

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

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

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

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

Knowledge is power

New standards
Canvas, CSS Transforms

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

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

Example: Coverflow

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

..omg,
IE already has!

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

..but what about the rest?

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

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

Example: Canvas

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

Example: SVG

Pushing the standards
How library developers help
defining standards

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

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

Now everyone!
Let‘s push the
web!

Audience Response
Question?

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