CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
Manoz
Manoz

Reputation: 6587

Math.abs in javascript

I am confused with math.abs(). I did Research through internet but couldn't find any relation with this bouncing ball's animation. I want to know how this works and how ball is bouncing smoothly after using math.abs() function? 

function bounce() {
    if (x + dx > 293 || x + dx < 0) {
        dx = -dx;
    }
    if (y >= 290) {
        y = 290;
    }
    if (y + dy > 290 || y + dy < 0) {
        dx *= 0.99;
        dy = -dy;
    }
    //if (Math.abs(dx) < 0.01) {
       // dx = 0;
    }
    dy++;
}

I did comment the line confusing me. Anyone please let me know that how important this function for this animation.

Fiddle

Upvotes: 5

Views: 15755

Answers (2)

Rune FS
Rune FS

Reputation: 21742

dx is reduced by 1% every time the last condition is met (if (y + dy > 290 || y + dy < 0) {)

this calculation can go on forever but would yield jagged results because the floating point precision errors would become a large factor compared to dx so better stop the ball bouncing when it is already slow which is what the test using Math-abs is for. In english you could read

if (Math.abs(dx) < 0.01)

as if the speed of the ball in the x direction is less than 0.01 then stop the ball

Upvotes: 3

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382102

dx is the displacement on x.

Math.abs(dx) is the absolute speed on x, that is the value without the sign, always positive or null.

if (Math.abs(dx) < 0.01) {

could have been written as

if (dx>-0.01 && dx < 0.01) {

Basically, this line with the following one stops the ball along x if it's already slow.

Upvotes: 15

Related Questions