画像の回転やうずまき状の回転について説明します。
画像を時計回りに 90度 回転させる場合はそれほど難しい計算は必要ありません。
ここではわかりやすさを重視して、5 x 5 ドットのサイズの正方形の画像の、画像の真ん中の点（2,2）を中心にした回転について紹介します。
コンピュータでは、画像の各点は左下の図のように、左上の点を原点（0,0)とした座標で表現します。
上の真ん中の画像を右の画像になるように時計回りに 90度 回転させる場合を考えてみましょう。
わかりやすいように、それぞれの点に 1 から 25 までの番号を表示してあります。
まず、一番上の行に注目します。「１、２、３、４、５」の点はそれぞれ以下のように移動します。
| 番号 | １ | ２ | ３ | ４ | ５ |
| 元の座標 | (0,0) | (1,0) | (2,0) | (3,0) | (4,0) |
| 回転後の座標 | (4,0) | (4,1) | (4,2) | (4,3) | (4,4) |
上記の表から、一番上の行の点が (x, 0) の場合、回転後に (4, x) に移動することがわかります。
次に上から2番目の行について注目します。「６、７、８、９、１０」の点が (x, 1) の場合、回転後に (3, x) に移動することが分かります。
このことから、(x, y) の点は回転後に (?, x) に移動することが分かります（?についてはこの後考えます）。
次に一番左の列について注目します。「１、６、１１、１６、２１」の点はそれぞれ以下のように移動します。
| 番号 | １ | ６ | １１ | １６ | ２１ |
| 元の座標 | (0,0) | (0,1) | (0,2) | (0,3) | (0,4) |
| 回転後の座標 | (4,0) | (3,0) | (2,0) | (1,0) | (0,0) |
上記の表から、一番左の列の点が (0, y) の場合、回転後に (4 - y, 0) に移動することがわかります。
次に上から2番目の列について注目します。「２、７、１２、１７、２２」の点が (1, y) の場合、回転後に (4 - y, 1) に移動することが分かります。
これまでの事をまとめると、(x, y) の点は回転後に (4 - y, x) に移動することが分かります。
次に画像の大きさが s x s ドットの場合について考えます。上記と全く同じ方法から、(x, y) の点は回転後に (s - y - 1, x) に移動することが分かります。
図形の時計回りへ90度回転する処理は画像の各点について、上記の法則で移動すれば良いことが分かります。
この方法は足し算と引き算だけを使って行うことができます。
計算は省略しますが、180度と270の回転は以下の法則で点を移動します。
180度：(x, y) の点は回転後に (s - x - 1, s - y - 1) に移動する。
270度：(x, y) の点は回転後に (y, s - x - 1) に移動する。
s x s ドットの正方形の回転について、表にまとめます。
また、回転に似た処理として、左右反転、上下反転についても紹介します。
いずれも足し算と引き算だけを使って行うことができます。
| 回転角度 | 90度 | 180度 | 270度 | 左右反転 | 上下反転 |
| 元の座標 | (x, y) | (x, y) | (x, y) | (x, y) | (x, y) |
| 回転（反転）後の座標 | (s - y - 1, x) | (s - x - 1, s - y - 1) | (y, s - x) | (s - x - 1, y) | (x, s - y - 1) |
90度、180度、270度以外の角度で回転させる場合は、残念ながら四則演算だけでは計算を行うことはできません。
任意の角度で回転させる場合は、三角関数(sin, cos)を使う必要があります。
座標が (x, y) の点を(cx, cy)の点を中心に r 度時計回りに回転させた場合の座標は以下の式で計算できます。
（計算を導き出す方法はややこしいので省略しますが、高校の数学の知識で計算できます）
なお、上記で紹介した90度、180度、270度の回転は、この式に当てはめることで導き出すこともできます。
((x - cx) * cos(r) - (y - cy) * sin(r) + cx, (x - cx) * sin(r) + (y - cy) * cos(r) + cy)
こちらのページの「回転」の右のボタンやスライダーを操作することで、様々な角度の回転処理（画像の真ん中の点を中心に回転させています）を実際に確認することができます。
画像を渦巻き状に回転する処理を行うにはいくつかの方法がありますが、そのうちの一つを紹介します。
下の図のように、点を回転させる角度を回転の中心からの距離に比例して回転させることによってうずまき状に回転することができます。
下図の点Ａ、点Ｂ、点Ｃはそれぞれ中心からの距離の比率が１倍、２倍、３倍の距離にあります。
これらの点を中心からの距離に比例して回転するとそれぞれ赤い色の点の位置に移動します。
マウスを下の図の上に移動すると、点Ｃの回転後の赤い点が移動し、その際にそれぞれの点が何度回転するかが表示されます。
上記の方法は回転処理と同様に三角関数の計算が必要です。
下記に画像をいくつかのパターンでうずまき処理を行ったものを表にします。
こちらのページの「回転」の右のボタンやスライダーを操作することで、様々な角度のうずまき処理を実際に確認することができます。
（画像の真ん中の点を中心に回転させています。半径のスライダーで示す長さが倍率１で回転する半径を表します）
|
|
|
|