Maths and RIA

By Stanley Fokstanley.fok@e-crusade.com

1. Smooth animation theory

12 basic principles of animation It was introduced by the Disney animators

in 1981

The main purpose was to produce an illusion of characters adhering to the basic laws of physics

but they also dealt with more abstract issues, such as emotional timing and character appeal.

12 basic principles of animation Squash and stretch Anticipation Staging Straight ahead action and pose to pose Follow through and overlapping action Slow in and slow out Arcs Secondary action Timing Exaggeration Solid drawing Appeal

Reference: http://en.wikipedia.org/wiki/12_basic_principles_of_animation

12 basic principles of animation

許誠毅 and Shrek

Some short videos

Short videos by Pixar:

http://www.youtube.com/watch?v=ZMmVXOWe5o0

http://www.youtube.com/watch?v=Xt9Fmsh2bk4&feature=related

Slow in and slow out

The movement of the human body, and most other objects, needs time to accelerate and slow down

Easingd

t

d

t

Arcs

Most objects’ actions occur along an arched trajectory

2. Applying easing in code

Traditional Easing method

The traditional easing formula:

myMc.x += (targetX – myMc.x) / FACTOR;

A smaller value of “FACTOR” makes the easing faster

Demo: 1_traditional_easing

Traditional Easing method Some drawbacks of this easing method:

Time of the easing is difficult to control Need a lot of programming effort for

optimization

private function handleEnterFrame() { myMc.x += (targetX – myMc.x) / FACTOR;

if (Math.abs(targetX – myMc.x) < 1) { myMc.x = targetX; delete this.onEnterFrame; }}

The current easing method Robert Penner introduced a set of easing

formulae

Reference: http://www.robertpenner.com/

By providing the easing time and target value, the easing formulae will interpolate the middle values for you

demo: http://www.robertpenner.com/easing/easing_demo.html

Common Tweening Libraries Some famous tweening libraries

Tweener TweenLite Boostworthy Animation System FuseKit Go KitchenSync

A comparison of these tweening libraries can be found at:http://dispatchevent.org/wp-content/uploads/2008/04/Tween-Engine-Comparisons.pdf

Tweener pros and consPros: Syntax is simple, easy to learn and use Can modify any properties of an object, not just MCs Small file size ~10KB Able to switch to time-based or frame-based mode Support for AS2 and AS3 Well documentation and support

Cons No sequencing supported

Tweener syntaxHere is a code sample:

Tweener.addTween(myMc, { _x: 100, _y: 100, time: 2, delay: 1, transition: “easeOutExpo”, onStart: Delegate.create(this,this.handleOnStart), onUpdate: Delegate.create(this,this.handleOnUpdate), onComplete: Delegate.create(this,this.handleOnComplete)});

Application of Tweener Tween every numeric properties of

movieclips x y width height scaleX scaleY alpha

Application of Tweener Numeric variables can also be tweened

Possible application can be: Tween sound volume Tween blur filter value Create number counter Tween camera position in 3D engine

Demo: 2_tweener_counter

Adv. of using Tweener No delay for time-based animation

Make animation continuous

Less timeline, smaller movieClip hierarchy Demo: 3_continuous_animation

Movieclip visible on stage, easy to be found

Animation sequence can be applied within one functionDemo: 4_animation_sequence

Use Tweener all the time? Using too much “Tweener.addTween” will

lead to large amount of computation

For example, tweening a lot of movieclips when mouse scroll

So what is the solution?

Demo: 5_tweener_not_suitable

Some more tricks about Tweener

Combination of different easing on different properties

Demo: 6_tweener_easing_combination

Create smooth feeling

3. Forming Curve and Surface

Forming Curve and Surface

Curves and Surfaces can be formed easily using the parametric equations

Forming Curve and Surface Parametric equations means to express the

x, y and z co-ordinate into general formula

For example, equation of parabola:

y = ax2

can be parameterized by using a free parameter t, and setting:

x = t, y = at2

Some common formulae Parabola

x = t, y = at2, where a is constant

Sine wavex = t, y = a sin(t), where a is constant

Circlex = a cos(t), y = a sin(t), where a is constant

Some common formulae (cont) Cylinder

x = a cos(t), y = a sin(t), z = buwhere a and b are constant

Helixx = a cos(t), y = a sin(t), z = btwhere a and b are constant

Spherex = R cos(A) sin(B)y = R sin(A) sin(B)z = R cos (B)where R is constant

Demo Time!

Demo: 7_curve_surface_forming

Let’s go further from the basic

1. How to formulate Ellipsoid?2. How to formulate Hemisphere?3. How to formulate Cone?

Playing with the formulae

Mac Fisheye effect concept

Demo: 8_mac_fisheye

Tweener with formula

Demo:9_tweener_and_formula

4. Introduction to vector

A

B

Length = |AB|

a

Addition of vector

Subtraction of vector

Scaling vector

Normalizing vector

A normal vector means its length is equal to 1

Dot product a · b = ||a|| ||b|| cosθ

Special case: a · b = cos θ, where a and b are normal vectors

a bθ

ECFF’s vector class Two classes: Vector2D and Vector3D Some useful functions:

var a:Vector2D = new Vector2D(3,4); var b:Vector2D = a.clone(); a.normalize(); var len:Number = a.getLength(); var dist:Number = a.getDistance(b); var c:Vector2D = a.plus(b); c = a.subtract(b); c = a.scale(100); var dotProduct:Number = a.dot(c);

Application of vector Can generalize geometry problems,

similar concept for 1D, 2D or 3D problems

Useful for collision detection and collision response

Good tutorial on using vector:http://www.tonypa.pri.ee/vectors/start.html

Vector usage example 1: Finding the angle from pt. B to pt. A

The most straight forward solution isto use Math.tan() forthe 4 quad

troublesome as there will be many cases to be considered

Vector usage example 1 (cont):var v:Vector2D = new Vector2D(b.x – a.x, b.y – a.y);

v.normalize();

var dotProduct:Number = v.y;//Actually it is doing dot product with the vector [0,1]//var dotProduct:Number = v.dot(new Vector(0,1));

var angle:Number = Math.acos(dotProduct);

angle = (a.x < 0) ? –angle : angle;

Vector usage example 2:

Create the explosion effect for 100 particles

The particles will finally lies on a ring with radius 100

Vector usage example 2 (cont):Foreach particles p

var v:Vector2D = new Vector2D(p._x,p._y);

v.normalize();

v.scale(100);

Tweener.addTween(p, { _x: v.x, _y: v.y, time: 0.5});

The same concept for 3D problem too!!!

Interesting site to share http://spectra.msnbc.com/

http://www.etsy.com/time_machine.php

http://ecodazoo.com/

http://seraf.mediabox.fr/wow-engine/as3-3d-physics-engine-wow-engine/

http://box2dflash.sourceforge.net/

You can also create cool RIA!!!