Image rotation algorithm for a square pixel grid

Question

I'm currently working on my own little online pixel editor.
Now I'm trying to add a rotation function. But I can't quite figure out how to realize it.

Here is the basic query for my pixel grid:

for (var y = 0;y < pixelAmount;y++) {
    for (var x = 0;x < pixelAmount;x++) {
        var name = y + "x" + x;

        newY = ?? ;
        newX = ?? ;

        if ($(newY + "x" + newX).style.backgroundColor != "rgb(255, 255, 255)")
        { $(name).style.backgroundColor = $(newY + "x" + newX).style.backgroundColor; }
    }
}

How do I calculate newY and newX?

IMHO, your problem is lack of center of rotation. – umbr Aug 28 '11 at 11:34 — umbr, Aug 28 '11 at 11:34

score 1 · Accepted Answer · edited May 23 '17 at 12:26

How do you rotate a two dimensional array?

from this^ post I got this method (in c#):

int a[4][4];
int n=4;
int tmp;
for (int i=0; i<n/2; i++){
        for (int j=i; j<n-i-1; j++){
                tmp=a[i][j];
                a[i][j]=a[j][n-i-1];
                a[j][n-i-1]=a[n-i-1][n-j-1];
                a[n-i-1][n-j-1]=a[n-j-1][i];
                a[n-j-1][i]=tmp;
        }
}

or this one:

int[,] array = new int[4,4] {
    { 1,2,3,4 },
    { 5,6,7,8 },
    { 9,0,1,2 },
    { 3,4,5,6 }
};

int[,] rotated = RotateMatrix(array, 4);

static int[,] RotateMatrix(int[,] matrix, int n) {
    int[,] ret = new int[n, n];

    for (int i = 0; i < n; ++i) {
        for (int j = 0; j < n; ++j) {
            ret[i, j] = matrix[n - j - 1, i];
        }
    }

    return ret;
}

the first method doesn't use a second array (/matrix) to save memory..

Thanks, I was able to implement the algorithm. It's actually that simple for 90° rotations (clockwise): `newY = x;` `newX = (pixelAmount - 1) - y;` But there is one problem left, the image gets doubled everytime. So I have to find a solution for that now. — , Aug 28 '11 at 10:38

score 0 · Answer 2 · answered Aug 28 '11 at 09:20

0

Take a look at this doc (Section 3: Rotating a bitmap with an angle of any value). It walks you through how to do the math and gives you some sample code (C++, but it should be good enough for what you need).

answered Aug 28 '11 at 09:20

Demian Brecht

21,135
5
42
46

Actually I just need 90° rotation. But thanks for the link, could be usefull later. (: – Aug 28 '11 at 10:33

score 0 · Answer 3 · answered Aug 28 '11 at 09:31

If very quick performance is not of huge importance (which is the case by default), you can consider rotating the picture clockwise by flipping it against the main diagonal and then horizontally. To rotate counterclockwise, flip horizontally, then against the main diagonal. The code is much simpler.

For diagonal flip you exchange the values of image[x,y] with image[y,x] in a loop like this

for( var x = 0; x < pixelAmount; ++x )
    for( var y = x + 1; y < pixelAmount; ++y )
        swap(image[x,y],image[y,x]);

For horizontal flip you do something like

    for( var y = 0; y < pixelAmount; ++y )
    {
        i = 0; j = pixelAmount - 1;
        while( i < j ) {
            swap( image[i,y], image[j,y] );
            ++i; --j;
        }
    }

Interessting, I tried that before, but it didn't work out pretty well. I think I'll go with aboves solution. — , Aug 28 '11 at 10:35

Image rotation algorithm for a square pixel grid

3 Answers3