How to convert image with subpixel accuracy?

Question

I have a system that requires moving the image on the screen. I am currently using png and just putting it in the desired screen coordinates.

Due to the combination of screen resolution and the required frame rate, some frames are identical, since the image has not yet moved the full pixel. Unfortunately, the screen resolution is not negotiable.

I have a general idea of ​​how sub-pixel rendering of smoothing edges works, but I could not find a resource (if one exists) regarding how I can use shading to translate the image by less than one pixel.

Ideally, this could be used with any image, but if it were only possible with a simple shape, such as a circle or ring, it would also be acceptable.

Answer 1

Subpixel interpolation is relatively simple. Typically, you apply what constitutes a multi-pass filter with a constant phase shift, where the phase shift corresponds to the desired subpixel image shift. Depending on the required image quality, you can use, for example, the 5th item of Lanczos or another sinc window function, and then apply this in one or both axes depending on whether you want an X or Y shift or both.

. 0,5 [ 0.22954, 0.65507, 0.95725, 0.95725, 0.65507 ]. , x - 2 x + 2, .

const float kCoeffs[5] = { 0.22954f, 0.65507f, 0.95725f, 0.95725f, 0.65507f };

for (y = 0; y < height; ++y)         // for each row
    for (x = 2; x < width - 2; ++x)  // for each col (apart from 2 pixel border)
    {
        float p = 0.0f;              // convolve pixel with Lanczos coeffs

        for (dx = -2; dx <= +2; ++dx)
            p += in[y][x + dx] * kCoeffs[dx + 2];

        out[y][x] = p;               // store interpolated pixel
    }