if it.

moves
they.will (_) ->
_.watch it

Samstag, 25. September 2010

 > who
[
{"name": "Sebastian Deutsch", "twitter": "sippndipp"},
{"name": "Stephan Seidt", "twitter": "evilhackerdude"}
]

Samstag, 25. September 2010

Samstag, 25. September 2010
 Drawing & Animation

• Canvas
• SVG
• CSS3
• Other low-level techniques we won’t cover

Samstag, 25. September 2010

 canvas
Samstag, 25. September 2010
 Demo

Samstag, 25. September 2010

 Quick Recap
<canvas id="c"
width="256"
height="256">
</canvas>

c = document
.getElementById 'c'
.getContext '2d'

Samstag, 25. September 2010

 ... then you go apeshit.
fillRect
strokeRect
clearRect
beginPath
closePath
stroke
fill
moveTo
lineTo
arc
quadraticCurveTo
bezierCurveTo

Samstag, 25. September 2010

Samstag, 25. September 2010
 Canvas Animations

• Manual redrawing
• Main draw loop
• Clear canvas
• Change position
• Draw objects

Samstag, 25. September 2010

Samstag, 25. September 2010
 Canvas Interaction

• Manual, too
• Get x/y from click event
• Custom collision detection

Samstag, 25. September 2010

 Libs

• ProcessingJS
• three.js

Samstag, 25. September 2010

 Pros

• 100% flexibility
• Very fast for some things
• Read image data to jpeg/png

Samstag, 25. September 2010

 Cons

• Resolution dependent
• Not accessible
• Text rendering... not trivial

Samstag, 25. September 2010

 Demos

• http://9elements.com/io/projects/html5/
canvas/
• http://networkmap.projects.9elements.de/
• http://9elements.com/projects/bbc_final/

Samstag, 25. September 2010

 svg
scalable vector graphics
Samstag, 25. September 2010
 Demo

Samstag, 25. September 2010

 svg Recap

• XML
• 2D vector graphics
• Filters, animations, sounds (WTF!), etc
• DOM based

Samstag, 25. September 2010

 Drawing a red dot

<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" width="980" height="400">

<circle cx="50" cy="50" r="50"

fill="#ff0000" stroke="none"/>

</svg>

Samstag, 25. September 2010

 Animation.. um, XML?!
<svg version="1.1"
width="320" height="320"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="circleGrad">
<stop offset="0%" stop-color="rgb(255, 255, 0)" />
<stop offset="100%" stop-color="rgb( 0, 255, 0)" />
</radialGradient>
</defs>

<ellipse fill="url(#circleGrad)" stroke="#000" cx="50%"

cy="50%" rx="50%" ry="50%">
<animate attributeName="rx" values="0%;50%;0%" dur="2s"
repeatCount="indefinite" />
<animate attributeName="ry" values="0%;50%;0%" dur="2s"
repeatCount="indefinite" />
</ellipse>
</svg>

Samstag, 25. September 2010

Samstag, 25. September 2010
 BUT

Samstag, 25. September 2010

 SVG, JS-style

• Raphaël
• Declarative JS > XML
• Has a cool animate function
• VML fallback for IE

Samstag, 25. September 2010

 Interaction

• Easy!
• Use browser’s native capabilities
• Just addEventListener

Samstag, 25. September 2010

 Pros

• SVG is resolution independent

• Event handling is a piece of cake
• Since it’s XML it could be accessible

Samstag, 25. September 2010

 Cons

• No pixel manipulation
• Usually slower than canvas
• Needs Raphaël for backwards comp.

Samstag, 25. September 2010

 Demos

• http://hackfwd.com/dilution
• http://9elements.com/projects/mozilla/

Samstag, 25. September 2010

 CSS3
Samstag, 25. September 2010
 Demo

Samstag, 25. September 2010

 CSS3 recap

• Effects? webkitTransition!
• Animation?
• webkitTransition
• webkitAnimation

Samstag, 25. September 2010

 webkitTransition =
'-webkit-transform 1s ease-out 0s'

Samstag, 25. September 2010

 webkitTransition =
'-webkit-transform 1s ease-out 0s'

Animated
property

Samstag, 25. September 2010

 webkitTransition =
'-webkit-transform 1s ease-out 0s'

Animated
Duration
property

Samstag, 25. September 2010

 webkitTransition =
'-webkit-transform 1s ease-out 0s'

Animated Timing
Duration
property Function

Samstag, 25. September 2010

 webkitTransition =
'-webkit-transform 1s ease-out 0s'

Animated Timing Initial

Duration
property Function Delay

Samstag, 25. September 2010

 Timing = Sugar

• Special timing functions

• Demo

Samstag, 25. September 2010

 webkitTransform

• translate3d(x, y, z)
• scale3d(x, y, z)
• rotateX(a), rotateY(a), rotateZ(a)
• matrix3d(...)

Samstag, 25. September 2010

 What makes CSS3
animations uber-useful?

Samstag, 25. September 2010

Samstag, 25. September 2010
 On iOS devices they’re
hardware accelerated!

Samstag, 25. September 2010

 Interaction is
of course native.

Samstag, 25. September 2010

Samstag, 25. September 2010
Samstag, 25. September 2010
Samstag, 25. September 2010
Samstag, 25. September 2010
 There’s no “best”

Samstag, 25. September 2010

 But here’s some advice:

Samstag, 25. September 2010

 Target Device

• Does it support your technique?

• How do different techniques compare?
• Efficiency (FPS)
• Responsiveness (Events)

Samstag, 25. September 2010

 A vague rule of thumb

if mobile?
'css3'
else
lasers()

Samstag, 25. September 2010

Samstag, 25. September 2010
 Thanks
Questions?

Samstag, 25. September 2010