Алгоритм поворота изображения для квадратной пиксельной сетки

Question

В настоящее время я работаю над собственным небольшим онлайн-редактором пикселей.
Сейчас я пытаюсь добавить функцию вращения. Но я не могу понять, как это реализовать.

Вот основной запрос для моей сетки пикселей:

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; }
    }
}

Как рассчитать newY и newX?

Answer 1

Как вращать двумерный массив?

из этого поста ^ я получил этот метод (в 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;
        }
}   

или этот:

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;
}

первый метод не использует второй массив (/ matrix) для экономии памяти ..

Answer 2

Если очень быстрое исполнение не имеет большого значения (что имеет место по умолчанию), вы можете рассмотреть возможность поворота изображения по часовой стрелке, перевернув его по основной диагонали, а затем по горизонтали. Чтобы повернуть против часовой стрелки, переверните по горизонтали, а затем по основной диагонали. Код намного проще.

Для диагонального переворота вы меняете значения image[x,y] на image[y,x] в цикле, подобном этому

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

Для горизонтального переворота вы делаете что-то вроде

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

Answer 3

Взгляните на этот документ (Раздел 3: Поворот растрового изображения с углом любого значения). В нем рассказывается, как выполнять математику, и приводится пример кода (C ++, но он должен быть достаточно хорош для того, что вам нужно).