Why is this exponential decay of distance resulting in one off by 99 [exact] error?

Question

I am working on an effect at http://classicorthodoxbible.com/new.html where the characters in the main description, wrapped in their own span's are moved from their usual resting place to a random location, and then get closer, by exponential decay, to their destination. The JavaScript is inlined in the page.

The JavaScript console shows debugging output: many identical logged lines of:

starting_x: 833 starting_y: 275.875 target_x: 833 target_y: 176.875 new.html:74

followed by reporting maximum call stack depth. Somehow, the code is making what is supposed to be exponential decay get stuck at an exact difference of 99, and becoming infinite recursion (the decay is by fiat declared to stop when the distance decays to less than two pixels between x and y).

The intended behavior is:

1. Produce marked-up output that has each rendered character of output (i.e. not tags) in its own SPAN.

2. Move the characters each to its own location.

3. Move them linearly towards their initial and final resting place, so that the distance between the present location and the target location decays exponentially.

The function that handles all moving of points (and having the infinite recursion) is below:

            function journey(index, starting_x, starting_y, target_x,
              target_y, starting_opacity, target_opacity, delay, radix)
                {
                if (1 || isNaN(starting_x) || isNaN(starting_y) || isNaN(target_x) || isNaN(target_y))
                    {
                    console.log('starting_x: ' + starting_x +
                      ' starting_y: ' + starting_y + ' target_x: ' +
                      target_x + ' target_y: ' + target_y);
                    // return;
                    }
                /* console.log(target_x - starting_x + ', ' + (target_y -
                  starting_y)); */
                if (Math.abs(starting_x - target_x) + Math.abs(starting_y -
                  target_y) < 2)
                    {
                    jQuery('#text_' + index).css({'left': target_x, 'top':
                      target_y, 'opacity': target_opacity, '-ms-filter':
                      'progid:DXImageTransform.Microsoft.Alpha(Opacity=' +
                      target_opacity * 100, 'filter': 'alpha(opacity=' +
                      target_opacity * 100});
                    }
                else
                    {
                    if (starting_x - target_x > 0)
                        {
                        var new_x = (target_x + Math.floor((starting_x -
                          target_x) * radix));
                        }
                    else
                        {
                        var new_x = (target_x + Math.ceil((starting_x -
                          target_x) * radix));
                        }
                    if (starting_x - target_x > 0)
                        {
                        var new_y = (target_y + Math.floor((starting_y -
                          target_y) * radix));
                        }
                    else
                        {
                        var new_y = (target_y + Math.ceil((starting_y -
                          target_y) * radix));
                        }
                    var new_opacity = target_opacity + (starting_opacity
                      - target_opacity) * radix;
                    journey(index, new_x, new_y, target_x, target_y,
                      new_opacity, target_opacity, delay, radix);
                    }
                }

Answer 1

Sorry, misread the code. What is the value of radix that you're passing in?

Also, the code would be a little easier to read if you only had one

if (starting_x - target_x > 0)

conditional.