ScholarQuill logoScholarQuillUniversity Notes
  • Notes
  • Past Papers
  • Blogs
  • Todo
Login
ScholarQuill logoScholarQuillUniversity Notes
Login
NotesPast PapersBlogsTodo
More
SubjectsDiscussionCGPA CalculatorGPA CalculatorStudent PortalCourse Outline
About
About usPrivacy PolicyReportContact
Notes
Past Papers
Blogs
Todo
Analytics
    Current Subject
    🧩
    HCI & Computer Graphics
    COMP3145
    Progress0 / 73 topics
    Topics
    1. The Human: Input-output channels2. Human memory3. Thinking, Reasoning, Problem solving4. Emotions and Individual differences5. Psychology and design of interacting systems6. The Computer: Text entry devices7. Positioning, Pointing, and drawing devices8. Display devices9. Devices for virtual reality and 3D interaction10. Physical controls, Sensors and special devices11. Paper printing and scanning12. Memory, Processing and networks13. The Interaction: Models of interaction14. Frameworks and HCI15. Ergonomics16. Interaction styles17. Elements of the WIMP interfaces18. Interactivity and Context of interaction19. Usability Paradigm and Principles: Introduction20. Paradigms for interaction21. Interaction Design Basics: What is design22. Process of design and User focus23. Navigation design24. Screen design and layout25. Iteration and prototyping26. HCI in Software Process: Software life cycle27. Usability engineering28. Iterative design and prototyping29. Design rationale30. Design rules and Guidelines31. Golden rules and heuristics32. HCI patterns33. Evaluation techniques and methods34. Task analysis35. Universal design36. User support systems37. Computer Supported Cooperative Work38. Groupware systems39. Implementation of synchronous groupware40. Ubiquitous computing41. History of Computer Graphics42. Graphics architectures and software43. Imaging and vision: Pinhole camera, Human vision, Synthetic camera44. Modeling vs. rendering45. OpenGL Architecture46. Displaying simple two-dimensional geometric objects47. Positioning systems and windowed environment48. Color perception and models49. RGB, CMY, HLS color models50. Color transformations51. Color in OpenGL: RGB and indexed color52. Input: Network environment and client-server computing53. Input measures: event, sample and request input54. Using callbacks and picking55. Affine transformations: translation, rotation, scaling, shear56. Homogeneous coordinates and concatenation57. Current transformation and matrix stacks58. Three Dimensional Graphics: Classical viewing59. Specifying views in 3D60. Affine transformation in 3D61. Projective transformations62. Ray tracing63. Shading: Illumination and surface modeling64. Phong shading model65. Polygon shading66. Rasterization: Line drawing via Bresenham's algorithm67. Clipping and polygonal fill68. BitBlt operations69. Hidden surface removal (z buffer)70. Discrete Techniques: Buffers71. Reading and writing bitmaps and pixel maps72. Texture mapping73. Compositing
    COMP3145›Affine transformations: translation, rotation, scaling, shear
    HCI & Computer GraphicsTopic 55 of 73

    Affine transformations: translation, rotation, scaling, shear

    8 minread
    1,324words
    Intermediatelevel

    1. Affine Transformations – Definition

    Definition: An affine transformation is a geometric transformation that preserves:

    • Points, straight lines, and planes
    • Parallelism of lines (parallel lines remain parallel)

    Affine transformations are widely used in 2D and 3D computer graphics for moving, rotating, resizing, or skewing objects.

    Mathematically, in 2D, an affine transformation can be represented as:

    [x′ y′]=[ab cd][x y]+[tx ty]\begin{bmatrix} x' \ y' \end{bmatrix} = \begin{bmatrix} a & b \ c & d \end{bmatrix} \begin{bmatrix} x \ y \end{bmatrix} + \begin{bmatrix} tx \ ty \end{bmatrix}[x′ y′​]=[a​b c​d​][x y​]+[tx ty​]

    Or in homogeneous coordinates (common in graphics):

    [x′ y′ 1]=[abtx cdty 001][x y 1]\begin{bmatrix} x' \ y' \ 1 \end{bmatrix} = \begin{bmatrix} a & b & tx \ c & d & ty \ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \ y \ 1 \end{bmatrix}[x′ y′ 1​]=[a​b​tx c​d​ty 0​0​1​][x y 1​]

    Where (tx,ty)(tx, ty)(tx,ty) are translation components, and the 2×2 matrix defines rotation, scaling, or shear.


    2. Types of Affine Transformations

    A. Translation

    Definition:

    • Moving an object from one position to another without changing its shape, size, or orientation.

    Formula in 2D:

    x′=x+tx,y′=y+tyx' = x + tx, \quad y' = y + tyx′=x+tx,y′=y+ty

    Matrix Form (homogeneous coordinates):

    T=[10tx 01ty 001]T = \begin{bmatrix} 1 & 0 & tx \ 0 & 1 & ty \ 0 & 0 & 1 \end{bmatrix}T=[1​0​tx 0​1​ty 0​0​1​]

    Example:

    • Moving a triangle 5 units right and 3 units up.

    B. Rotation

    Definition:

    • Rotating an object around the origin or a pivot point by an angle θ.

    Formula in 2D (around origin):

    x′=xcos⁡θ−ysin⁡θ,y′=xsin⁡θ+ycos⁡θx' = x \cos \theta - y \sin \theta, \quad y' = x \sin \theta + y \cos \thetax′=xcosθ−ysinθ,y′=xsinθ+ycosθ

    Matrix Form:

    R=[cos⁡θ−sin⁡θ0 sin⁡θcos⁡θ0 001]R = \begin{bmatrix} \cos\theta & -\sin\theta & 0 \ \sin\theta & \cos\theta & 0 \ 0 & 0 & 1 \end{bmatrix}R=[cosθ​−sinθ​0 sinθ​cosθ​0 0​0​1​]

    Note: To rotate around a point (px,py)(px, py)(px,py), first translate to origin, rotate, then translate back.


    C. Scaling

    Definition:

    • Changing the size of an object in the x and/or y direction.

    Formula in 2D:

    x′=sx⋅x,y′=sy⋅yx' = sx \cdot x, \quad y' = sy \cdot yx′=sx⋅x,y′=sy⋅y

    Matrix Form:

    S=[sx00 0sy0 001]S = \begin{bmatrix} sx & 0 & 0 \ 0 & sy & 0 \ 0 & 0 & 1 \end{bmatrix}S=[sx​0​0 0​sy​0 0​0​1​]

    Notes:

    • Uniform scaling: sx=sysx = sysx=sy → preserves shape
    • Non-uniform scaling: sx≠sysx \neq sysx=sy → may stretch/compress

    D. Shear

    Definition:

    • Shifting one coordinate proportionally to another, effectively slanting the shape.

    Formulas in 2D:

    • X-shear: x′=x+shx⋅y,y′=yx' = x + sh_x \cdot y, \quad y' = yx′=x+shx​⋅y,y′=y
    • Y-shear: x′=x,y′=y+shy⋅xx' = x, \quad y' = y + sh_y \cdot xx′=x,y′=y+shy​⋅x

    Matrix Forms:

    X-shear: Hx=[1shx0 010 001],Y-shear: Hy=[100 shy10 001]\text{X-shear: } H_x = \begin{bmatrix} 1 & sh_x & 0 \ 0 & 1 & 0 \ 0 & 0 & 1 \end{bmatrix}, \quad \text{Y-shear: } H_y = \begin{bmatrix} 1 & 0 & 0 \ sh_y & 1 & 0 \ 0 & 0 & 1 \end{bmatrix}X-shear: Hx​=[1​shx​​0 0​1​0 0​0​1​],Y-shear: Hy​=[1​0​0 shy​​1​0 0​0​1​]

    Example:

    • Slanting a rectangle so that its top edge moves more than the bottom edge.

    3. Key Properties of Affine Transformations

    • Straight lines remain straight
    • Parallel lines remain parallel
    • Ratios of distances along a line are preserved
    • Shapes may change size or orientation but basic collinearity is preserved

    4. Summary Table

    Transformation Effect Matrix Form (2D Homogeneous)
    Translation Move object [10tx 01ty 001]\begin{bmatrix}1 & 0 & tx \ 0 & 1 & ty \ 0 & 0 & 1\end{bmatrix}[1​0​tx 0​1​ty 0​0​1​]
    Rotation Rotate object [cos⁡θ−sin⁡θ0 sin⁡θcos⁡θ0 001]\begin{bmatrix}\cosθ & -\sinθ & 0 \ \sinθ & \cosθ & 0 \ 0 & 0 & 1\end{bmatrix}[cosθ​−sinθ​0 sinθ​cosθ​0 0​0​1​]
    Scaling Resize object [sx00 0sy0 001]\begin{bmatrix}sx & 0 & 0 \ 0 & sy & 0 \ 0 & 0 & 1\end{bmatrix}[sx​0​0 0​sy​0 0​0​1​]
    Shear Slant object X-shear: [1shx0 010 001]\begin{bmatrix}1 & sh_x & 0 \ 0 & 1 & 0 \ 0 & 0 & 1\end{bmatrix}[1​shx​​0 0​1​0 0​0​1​]Y-shear: [100 shy10 001]\begin{bmatrix}1 & 0 & 0 \ sh_y & 1 & 0 \ 0 & 0 & 1\end{bmatrix}[1​0​0 shy​​1​0 0​0​1​]
    Previous topic 54
    Using callbacks and picking
    Next topic 56
    Homogeneous coordinates and concatenation

    Past Papers

    Open this section to load past papers

    Click on Show Past Papers to see past papers.
    On This Page
      Reading Stats
      Est. reading time8 min
      Word count1,324
      Code examples0
      DifficultyIntermediate