beyond the standards

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 standardsCanvas, 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 standardsHow 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!

Question?

Audience Response

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