Customized Easing function

[basjak]

HI guys:

am trying to use customized easing function but not seeing any difference whether it has been used or not. and the CircleEase() function does not see any change any behavior.

Thanks in advance.

 

    <canvas id="RenderTarget"></canvas>
    <script type="text/javascript">
        var Canvas = document.getElementById("RenderTarget");
        var Engine = new BABYLON.Engine(Canvas);
        var Scene = CreateScene();
        Engine.runRenderLoop(function () { Scene.render(); });
        window.addEventListener("resize", function () { Engine.resize(); });        

        function CreateScene() {
            var scene = new BABYLON.Scene(Engine);

            scene.clearColor = new BABYLON.Color3(125 / 255.0, 50 / 255.0, 0);

            var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
            var arc = new BABYLON.ArcRotateCamera("arc", 3 * Math.PI / 2, Math.PI / 8, 40, BABYLON.Vector3.Zero(), scene);
            arc.attachControl(Canvas, true);

            var mGreen = new BABYLON.StandardMaterial("green", scene);
            mGreen.diffuseColor = BABYLON.Color3.Green();
            mGreen.wireframe = true;

            var mRed = new BABYLON.StandardMaterial("red", scene);
            mRed.diffuseColor = BABYLON.Color3.Red();

            var Ground = BABYLON.Mesh.CreateTiledGround("Ground", -20, -20, 20, 20, { h: 8, w: 8 }, { h: 1, w: 1 }, scene);
            Ground.material = mGreen;

            var box = BABYLON.Mesh.CreateBox("box", 5, scene);
            box.material = mRed;

            var animationX = new BABYLON.Animation("animx", "position.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
            var animationZ = new BABYLON.Animation("animz", "position.z", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

            var keysX = [{ frame: 0, value: -30 }, { frame: 100, value: 30 }, { frame: 200, value: -30 }];
            var keysY = [{ frame: 0, value: -30 }, { frame: 100, value: 30 }, { frame: 200, value: -30 }];

            animationX.setKeys(keysX);
            animationZ.setKeys(keysY);

            var easingFunctionX = new BABYLON.CircleEase();

            var FunnyEase = (function (_super) {
                __extends(FunnyEase, _super);
                function FunnyEase() {
                    _super.apply(this, arguments);
                }
                FunnyEase.prototype.easeInCore = function (gradient) {
                    // Here is the core method you should change to make your own Easing Function
                    // Gradient is the percent of value change
                    box.material = mGreen;

                    return Math.pow(Math.pow(gradient, 4), gradient)*1000;
                };
                return FunnyEase;
            })(BABYLON.EasingFunction).EASINGMODE_EASEINOUT;

            easingFunctionX.setEasingMode(FunnyEase);
            animationX.setEasingFunction(easingFunctionX);

            box.animations.push(animationX);
            box.animations.push(animationZ);

            var animatable = scene.beginAnimation(box, 0, 200, true);

            return scene;
        }
    </script>

 

[GameMonetize]

Hello can you please provide an playground?

Here is a working sample of CircleEase: http://www.babylonjs-playground.com/?20

 

[basjak]

Hi delta kiosk.

am fine with the animation and the ease functions but in here am trying to use the customised ease function (funnyEase) but I see no results.

the problem is FunnyEase , not circleEase.

[GameMonetize]

Delta kiosk  this is the first time someone calls me this way

And if you want us to help you please provide a playground where you reproduce the issue

[basjak]

Sorry about the different name , it's the iPad keyboard auto correction .

 

in the script i provided on the top, at line 51,  I declared the variable funnyEase as a function to control the circleEase(), but the circle ease is still behaving as funnyEase does not exist.

[basjak]

By the way deltakosh. Thanks for this plugin. Am having amazing time learning it. A big project coming up very soon and will let u know when it finished. 

[GameMonetize]

Can't wait  But once again to help you I need a playground

[GameMonetize]

Hum btw I think I know what is going wrong: you should NOT instantiate a CircleEase but a FunnyEase

[basjak]

I thought already but funnyEase result is a BABYLON,setEasingMode cast function (or at least, it looks like this to me).

it would be nice to have some working sample to start.

however, I loaded the attachment of the html code.

it's about a box movin on a plane (ground) circumference. I put an alert message inside FunnyEasy but no response at all.

 

HtmlPage.html

[Temechon]

It would be nice to create a playground sample  Can you try to duplicate your HTML sample in the playground ?
Thank you !

[basjak]

@Deltakosh, @Temechon

you're right, I should have a play ground, I will make nice one tomorrow and put it in the server.

However, coming back to the Babylon.max.js, I managed to understand how the Ease functions is implemented.

so;

1- create funnyEase class (or it could be any variable name u choose).

2- create an object from gunnyEase, such as :

var ease = new funnyEase();

ease.setEasingMode(funnyEase.EASINGMODE_EASEINOUT);

3- set the easing function to the animation.

now, actually if the funnyEase class method returns gradient then, we should not expect any changes in the output so we can control other variables within the class that are independent from the output of the class method.

think the result would be the same as if we try to use complex animation. so we can embed a single ease function were a variable is controlled but the rest are independent but all in a single ease function.

Here is a sample for a box that rotates around a circle were x, z values have there own control functions embedded within the ease function that control the y position:

            var box = BABYLON.Mesh.CreateBox("box", 5, scene);
            //box.material = mRed;

            var animationX = new BABYLON.Animation("animx", "position.y", 30,
                BABYLON.Animation.ANIMATIONTYPE_FLOAT,
                BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
          
            var keysX = [{ frame: 0, value:   5 },  { frame: 1, value:  5 }];

            animationX.setKeys(keysX);

            var angle = 0;
            var FunnyEase = (function (_super) {
                __extends(FunnyEase, _super);
                function FunnyEase() {
                    _super.apply(this, arguments);
                }
                FunnyEase.prototype.easeInCore = function (gradient) {                   
                    box.position.x = 20 * Math.sin(angle);
                    box.position.z = 20 * Math.cos(angle);

                    angle = angle + 0.05;
                    if (angle >= 2 * Math.PI)
                        angle = 0;
             
                    return gradient;
                };
                return FunnyEase;
            })(BABYLON.EasingFunction);

            var ease = new FunnyEase();
            ease.setEasingMode(FunnyEase.EASINGMODE_EASEINOUT);

            animationX.setEasingFunction(ease);
          
            box.animations.push(animationX);

            var animatable = scene.beginAnimation(box, 0, 1, true);

 

 

Thanks guys for your time, at least I can out the solution in here until I make my own playGround.

 

Edited February 17, 2016 by basjak