Add rotation transformation documentation

readonlymemory1 · Jul 26, 2022 · 401ae49 · 401ae49
1 parent 25011fd
commit 401ae49
Show file tree

Hide file tree

Showing 14 changed files with 53 additions and 1 deletion.
diff --git a/cursor/resize-handle.png b/cursor/resize-handle.png
diff --git a/cursor/rotate-handle.png b/cursor/rotate-handle.png
diff --git a/rotate.md b/rotate.md
@@ -1,5 +1,57 @@
 # Rotate Selection
 
-![Rotate Handles](rotate/rotatehandles.gif)
+Any selection can be rotated using either [handles](rotate.md#handles) or [menu options](rotate.md#menu-options), both methods will rotate the selection around the [pivot point](rotate.md#rotation-pivot) using the chosen [algorithm](rotate.md#rotation-algorithms).
+
+## Rotation Pivot
+
+![Rotation Pivot](rotate/pivot-point-context-bar.png)
+
+Selection is rotated around a single, defined point (![Rotation Pivot](rotate/pivot-point.png)). By default the pivot point is set in the center of the selection and is not visible until you start rotating the image.
+
+Its placement and visibility settings can be changed from the context bar of any selection tool. Rotation pivot can also be moved with a mouse by holding <kbd>Left click</kbd> and dragging the point.
+
+![Rotation Pivot Settings](rotate/pivot-point-settings.gif)
+![Moving the Rotation Pivot with a mouse](rotate/pivot-point-mouse-move.gif)
+
+## Handles
+
+Selection can be rotated by moving your mouse to the outer part of a handle (![Handle](rotate/handle.png)), holding <kbd>Left click</kbd> and dragging your mouse around the canvas.
+
+![Rotate Handles](rotate/rotate-handles.gif)
+
+Cursor change will indicate whether dragging a handle will resize or rotate the selection.
+
+|        |                   Resize                   |                   Rotate                   |
+| ------ | :----------------------------------------: | :----------------------------------------: |
+| Cursor | ![Resize Handle](cursor/resize-handle.png) | ![Rotate Handle](cursor/rotate-handle.png) |
 
 With <kbd>Shift</kbd> key you can snap angles (0º, 45º, 90º, etc.)
+
+## Menu Options
+
+![Edit > Rotate](rotate/edit-rotate.png)
+
+Selection can be rotated by 90º or 180º using menu options under _Edit > Rotate_.
+
+![Rotate Menu Options](rotate/rotate-menu-options.gif)
+
+## Rotation Algorithms
+
+![Rotation Algorithms](rotate/rotation-algorithms.png)
+
+There are two rotation algorithms available:
+
+- Fast Rotation
+- [RotSprite](https://en.wikipedia.org/wiki/Pixel-art_scaling_algorithms#RotSprite)
+
+While RotSprite is widely accepted as an algorithm producing better results, the choice is up to your preferences.
+
+![Fast Rotation vs RotSprite](rotate/rotation-algorithm.gif)
+
+---
+
+**SEE ALSO**
+
+[Flip](flip.md) |
+[Resize](resize.md) |
+[Move](move-selection.md)
diff --git a/rotate/edit-rotate.png b/rotate/edit-rotate.png
diff --git a/rotate/handle.png b/rotate/handle.png
diff --git a/rotate/pivot-point-context-bar.png b/rotate/pivot-point-context-bar.png
diff --git a/rotate/pivot-point-menu.png b/rotate/pivot-point-menu.png
diff --git a/rotate/pivot-point-mouse-move.gif b/rotate/pivot-point-mouse-move.gif
diff --git a/rotate/pivot-point-settings.gif b/rotate/pivot-point-settings.gif
diff --git a/rotate/pivot-point.png b/rotate/pivot-point.png
diff --git a/rotate/rotate-handles.gif b/rotate/rotate-handles.gif
diff --git a/rotate/rotate-menu-options.gif b/rotate/rotate-menu-options.gif
diff --git a/rotate/rotation-algorithm.gif b/rotate/rotation-algorithm.gif
diff --git a/rotate/rotation-algorithms.png b/rotate/rotation-algorithms.png