CAAT.Path

CAAT.Path as a CAAT.Interpolator instance.

One feature of CAAT.Path instances is that they can be used as CAAT.Interpolators objects. The following functions from a CAAT.Interpolator instance produce interpolators by wrapping a CAAT.Path instance:

createQuadricBezierInterpolator(p0,p1,p2,pingpong). This function creates a CAAT.Interpolator based on a QuadricBezier curve. The point parameters must be normalized, that is values ranging from 0 to 1.

createCubicBezierInterpolator(p0,p1,p2,p3,pingpong). This function creates a CAAT.Interpolator based on a CubicBezier curve. The point parameters must be normalized, that is coordinate values ranging from 0 to 1.

createPathInterpolator(path,pingpong). This function creates a CAAT.Interpolator based on a CAAT.Path instance. The path can be of any kind.

Example

The following code creates two CAAT.Interpolator intances from a Quadric and a Cubic Bezier curves.


                    // locate canvas element.
                    var director= new CAAT.Director().initialize(
                            200,
                            100,
                            document.getElementById('_tut5_5')
                    );

                    // create and add Scene to director
                    var scene= director.createScene();

                    // add a CAAT.InterpolatorActor instance
                    scene.addChild(
                            new CAAT.InterpolatorActor().
                                create().
                                setInterpolator(
                                    new CAAT.Interpolator().createQuadricBezierInterpolator(
                            // for the curve
                                            {x:0, y:0},
                                            {x:1, y:0},
                                            {x:1, y:1},
                                            false
                                            )
                                ).
                                setBounds( 10, 10, 80, 80 ).
                                setFillStyle('#d0d0d0').
                            // avoid actor padding.
                                setGap(0)
                    );

                    scene.addChild(
                            new CAAT.InterpolatorActor().
                                create().
                                setInterpolator(
                                    new CAAT.Interpolator().createCubicBezierInterpolator(
                            // for the curve
                                            {x:0, y:0},
                                            {x:0, y:1},
                                            {x:1, y:0},
                                            {x:1, y:1},
                            // pingpong = true
                                            true
                                            )
                                ).
                                setBounds( 100, 10, 80, 80 ).
                                setFillStyle('#d0d0d0').
                            // avoid actor padding
                                setGap(0)
                    );

                    _director_1.loop(1);