Understanding Animation/Physics/Math Implemention with EaselJS

Question

This is in part an EaselJS problem and in part a Physics/animation programming question.

I'm trying to learn EaselJS by studying the examples included in the EaselJS zip file. Right now, I'm looking at the SimpleTransform example,(http://bit.ly/LebvtV) where the robot rotates and fades into the background and expands towards the foreground. I find this effect really cool, and would like to learn how to achieve it. However, when I came to this set of code, I'm lost:

function tick() {
angle += 0.025;
var value = (Math.sin(angle) * 360);
bmp.setTransform (bmp.x , bmp.y , bmp.scaleX , bmp.scaleY , value/2 , bmp.skewX, bmp.skewY , bmp.regX , bmp.regY );
bmp.scaleX = bmp.scaleY = ((value)/360) + 0.25;
stage.update();
}

(For those unfamiliar with EaselJS, tick() is a function that dictates the actions on each tick, whose interval is set with setFPS. So if I've set FPS to be 20, then tick() will execute its statements 20 times in a second. I believe. And bmp here is a Bitmap object that points to the robot image.)

I've never been a wizard in Math, but I do understand the basics. I can see that angle += 0.025; is used to increased the angle variable so that the value passed into setTransform can change with time. However, I can't understand why a) 0.025 is used. b) what (Math.sin(angle) * 360) and ((value)/360) + 0.25 means, and c) why value is not just passed into setTransform, but divided by 2 (value/2).

I know it might be a challenge to explain this here, but any help is appreciated. In fact, if anyone thinks I'm a noob and needs to go study some Physics first, I'll most appreciate if someone can point me to a resource (book/url) for me to turn to.

Thanks in advance.

Answer 1

I can understand why you are confused. The code isn't efficient and that makes it harder to figure out what is going on. But here is the gist of it:

a) 0.025 is used because it is approximately π/125. With a Ticker speed of 25FPS, this means that the angle value will start at 0 and get to π at just about 5 seconds. π is used because Math.sin uses radians, not degrees (π radians == 180 degrees)

b) Math.sin(angle) will essentially start at 0, increase until it hits 1, decrease until it hits -1, then increase back to 0 -- all over a period of 10 seconds with sinusoidal rhythm.

(Math.sin(angle) * 360) has the same behavior as Math.sin(angle), just with a range of -360 to 360.

((value)/360) + 0.25) has the same behavior as Math.sin(angle), just with a range of -0.75 to 1.25.

c) value/2 is there so the robot only rotates 180 degrees instead of 360 degrees. I know what you are thinking -- why multiply by 360 only to divide by 2 one line later? Well, there is no reason for it really.

Here's a slightly clearer version of tick:

    function tick() {
        angle += Math.PI/125;
        var sineValue = Math.sin(angle);

        bmp.rotation = sineValue * 180;
        bmp.scaleX = bmp.scaleY = sineValue + 0.25;

        stage.update();
    }

Answer 2

b) The Math.sin(angle)*360 seems like a conversion between degrees and radians.

Math.sin( x ) always evaluates to -1>=x>=1,

and therefore

Math.sin( angle ) is  also always -1>=angle>=1

(we just substituted x), and

var value = Math.sin( angle ) * 360 is always -360>=value>=360.

(In the context of degrees rotated that is thus 1 whole rotation left or one whole rotation right).

We can see that the setTransform function exists as follows:

p.setTransform = function(x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY) {}

Obviously, we can see that there is a direct connection between value & angle. What we further see is that both the transform & scaleX are again depending on value. We can pull the conclusion that each tick there will be -after some calculations- a changing transform and scaleX.

So as the variable 'value' is passed as a parameter, this means that we wish to rotate 'this' much, as much as value tells us (-360>=x>=360). That means, /2 and 0.025 is just configured like this.

Hope this is helpful :-)