In NumPy, there is a function called roll. The documentation describes it as follows:
Roll array elements along a given axis.
Elements that roll beyond the last position are re-introduced at the first.
Concretely, calling roll on an image could produce the following shifted version:
My question is how to achieve the same effect in JavaScript for arbitrary shift values along the width and height axes and how to make it animatable, such that one can see the transition from the original image to the shifted version.
So the answer is embarrassingly simple. It can be achieved like so:
#imageDiv {
background-image: url(the_image.png);
background-repeat: repeat;
}
After which you can simply animate the background-position property on imageDiv (for instance background-position: 42px 69px).