Understanding interpolation method in javafx

Question

I'm trying to create an animation in JavaFX.

I'm having difficulty understanding a method though.

Can anyone explain what exactly the interpolate method at the bottom does?

More specifically, how does it use the modulus?

import javafx.animation.Interpolator;
import javafx.animation.Transition;
import javafx.geometry.Rectangle2D;
import javafx.scene.image.ImageView;
import javafx.util.Duration;

public class SpriteAnimation extends Transition {

    private  ImageView imageView;

    private  int count;            
    private  int columns;         
    private  int offsetX;         
    private  int offsetY;         
    private  int width;            
    private  int height;          
    private int lastIndex;

    public SpriteAnimation(
            ImageView imageView, 
            Duration duration, 
            int count,   int columns,
            int offsetX, int offsetY,
            int width,   int height) {

        this.imageView = imageView;       
        this.count     = count;       
        this.columns   = columns;
        this.offsetX   = offsetX;       
        this.offsetY   = offsetY;
        this.width     = width;
        this.height    = height;

        setCycleDuration(duration);  
        setInterpolator(Interpolator.LINEAR); 
    }

    protected void interpolate(double k) {
        // 
        int index = Math.min((int) Math.floor(k * count), count - 1);
        if (index != lastIndex) {

            int x = (index % columns) * width  + offsetX;
            int y = (index / columns) * height + offsetY;
            imageView.setViewport(new Rectangle2D(x, y, width, height));

            lastIndex = index;
        }
    }
}

Answer 1

When the transition runs different values for k will be passed to the interpolate. At the beginning of the animation 0.0 will be passed for k and at the end of the animation 1.0 will be passed.

int index = Math.min((int) Math.floor(k * count), count - 1);

Calculates the index in the range 0 to count-1. BTW: I'd prefer (int) (k * count) to (int) Math.floor(k * count), since a cast to int truncates the floating point value anyways.

On a change of the index the part of the image the ImageView should display is modified to show the appropriate part of the image. Here you iterate through the sprites line by line from left to right.

index % columns

is the rest of the division of index by columns. This means for every increment of index by one the result will increase by 1 until columns is reached; in that case it starts over at 0 instead.

Because of this property, it can be used to determine the horizontal position of image to be displayed. You just have to multiply with the width of a sprite to get the x coordinates of the left.

index / columns

is the division of index by columns without rest, i.e. index / columns and (index - index % columns) / columns result in the same value. The result increases by 1 for every columns you add to index; it increases by 1 when index % column starts over at 0. Therefore it can be used to determine the y coordinate of the sprite; You just have multiply by the height of a sprite.

Examples for columns = 3

index   |   index % 3  |   index / 3
--------------------------------------
  0     |     0        |     0
  1     |     1        |     0
  2     |     2        |     0
  3     |     0        |     1
  4     |     1        |     1
  5     |     2        |     1
  6     |     0        |     2
             ...
 31     |     1        |     10

This way you iterate through sprites in the following order

-------------------
|  1  |  2  |  3  |
-------------------
|  4  |  5  |  6  |
-------------------
        ...
-------------------
| 31  | 32  |     |
-------------------