2D Translation Transformation

Translation is one of the most basic and important transformations in computer graphics. It is used whenever an object needs to move from one position to another without changing its shape, size, or orientation.

In modern graphics systems, translation is used almost everywhere. Whether it is a game character moving on the screen, a mobile app animation, a popup window sliding into view, or an object moving in an animated movie, translation transformation plays a major role.

Translation is the foundation of motion in computer graphics. Without translation, graphical objects would remain fixed at one position and no movement would be possible.

This topic explains translation transformation in detail, including its mathematical representation, matrix form, examples, properties, applications, advantages, and limitations.

What is 2D Translation Transformation?

Translation is a transformation that moves an object from one location to another in a two-dimensional plane.

It changes only the position of the object while preserving:

• Shape
• Size
• Orientation
• Angles
• Parallelism

In simple words, translation means shifting an object from one point to another.

Understanding Translation Geometrically

Suppose a point exists at: P(x, y)

If the point moves:

• 5 units to the right
• 3 units upward

then its coordinates change accordingly.

Example 

Original point: (2, 3)

After movement: (7, 6)

Thus, the point has been translated.

Real-Life Examples of Translation

1. Video Games

Characters move left, right, up, and down using translation.

Examples

• Car movement in racing games
• Player movement in action games

2. Mobile Applications

UI elements slide across the screen using translation.

Examples

• Notification panels
• Animated menus
• Sliding cards

3. Animation

Objects move frame-by-frame using translation transformation.

Examples

• Walking animation
• Flying birds
• Moving vehicles

4. Robotics

Robots move in physical space using translation coordinates.

5. Computer Simulations

Objects in simulations move using translation mathematics.

Translation Parameters

Translation uses two important parameters.

Where:

• t_x controls horizontal movement
• t_y controls vertical movement

Translation Equations

Suppose the original point is: (x, y)

After translation by: (t_x, t_y)

the new coordinates become:

• x' = x + t_x
• y' = y + t_y

Where:

• x' = transformed x-coordinate
• y' = transformed y-coordinate

1. Understanding Positive and Negative Translation

Translation can occur in different directions depending on the values of tx and ty.

Positive Translation

If translation values are positive:

• t_x > 0
• t_y > 0

then the object moves:

• Right
• Upward

Example

Translate point: (2, 3)

by: (4,5)

Then:

• x' = 2 + 4 = 6
• y' = 3 + 5 = 8

New point: (6,8)

Negative Translation

If translation values are negative:

• t_x < 0
• t_y < 0

then the object moves:

• Left
• Downward

Example

Translate point: (5, 6)

by: (-2, -3)

Then:

• x' = 5 - 2 = 3
• y' = 6 - 3 = 3

New point: (3, 3)

2. Translation Along a Single Axis

Translation may occur only along one axis.

Horizontal Translation

If t_y = 0

then movement occurs only horizontally.

Example (2, 3) → (7, 3)

Vertical Translation

If t_x = 0

then movement occurs only vertically.

Example (2, 3) → (2, 8)

Matrix Representation of Translation

In computer graphics, transformations are usually represented using matrices.

Homogeneous coordinates make matrix representation possible.

The translation matrix is:

| 1  0  tx |
| 0  1  ty |
| 0  0   1 |

The point matrix is:

| x |
| y |
| 1 |

Transformation formula: P' = T × P

Translation Matrix Example

Translate point: (2, 3) by (t_x, t_y) = (4, 5)

Step 1: Represent Point in Homogeneous Form

| 2 |
| 3 |
| 1 |

Step 2: Construct Translation Matrix

| 1  0  4 |
| 0  1  5 |
| 0  0  1 |

Step 3: Multiply Matrices

| 1  0  4 |   | 2 |   | 6 |
| 0  1  5 | × | 3 | = | 8 |
| 0  0  1 |   | 1 |   | 1 |

Result: (6, 8)

Thus, the translated point becomes: (6, 8)

Translation of Objects

Translation can be applied not only to single points but also to complete graphical objects such as triangles, rectangles, polygons, and curves.

When an object is translated, every vertex of the object is moved by the same translation values.

The shape, size, and orientation of the object remain unchanged.

Example: Translation of a Triangle

Suppose the vertices of a triangle are A(1, 1) B(3, 1) C(2, 4) Translate the triangle by (t_x, t_y) = (4, 2)

This means:

• Move 4 units along the x-axis
• Move 2 units along the y-axis

The translation equations are: 

• x' = x + t_x
• y' = y + t_y

Where:

• x' = new x-coordinate
• y' = new y-coordinate

Step-by-Step Calculation

1. Translation of Point A(1, 1)

Original point: A(1, 1)

Using translation formula:

x' = x + tx
   = 1 + 4
   = 5

y' = y + ty
   = 1 + 2
   = 3

Therefore: A'(5, 3)

2. Translation of Point B(3, 1)

Original point: B(3, 1)

Using translation formula:

x' = x + tx
   = 3 + 4
   = 7

y' = y + ty
   = 1 + 2
   = 3

Therefore: B'(7, 3)

3. Translation of Point C(2, 4)

Original point: C(2, 4)

Using translation formula:

x' = x + tx
   = 2 + 4
   = 6

y' = y + ty
   = 4 + 2
   = 6

Therefore: C'(6, 6)

Final Translated Coordinates After translation, the new vertices of the triangle become A'(5, 3) B'(7, 3) C'(6, 6)

Properties of Translation

Translation transformation has several important properties.

1. Shape Preservation

Translation does not change the shape of the object.

2. Size Preservation

The size of the object remains unchanged.

3. Orientation Preservation

The direction of the object remains same.

4. Distance Preservation

Distance between points remains constant.

5. Parallelism Preservation

Parallel lines remain parallel after translation.

Advantages of Translation

Translation provides many advantages in computer graphics.

1. Simple Implementation

Translation is mathematically simple.

2. Fast Computation

Graphics hardware performs translation quickly.

3. Smooth Motion

Translation creates smooth object movement.

4. Preserves Object Structure

Object appearance remains unchanged.

Applications of Translation

Translation is widely used in modern graphics systems.

1. Computer Animation

Objects move from frame to frame using translation.

2. Gaming

Player movement and camera movement use translation.

3. GUI Systems

Windows and menus slide using translation.

4. Robotics

Robot movement uses translation coordinates.

5. Mobile UI Design

Modern apps use translation animations extensively.

6. Image Processing

Images are shifted using translation transformation.

Translation in Modern Technologies

Translation is used internally in:

• Flutter applications
• Android UI animations
• CSS animations
• OpenGL graphics programming
• Unity game engine
• Unreal Engine
• Augmented reality systems

Almost every moving graphical object uses translation transformation.

Limitations of Translation

Although translation is useful, it also has limitations.

1. Cannot Rotate Objects

Translation only changes position.

2. Cannot Resize Objects

Object size remains fixed.

3. Cannot Change Shape

Translation preserves object structure.

Summary

Translation transformation is one of the fundamental operations in computer graphics. It is used to move graphical objects from one location to another while preserving their original appearance.

Using homogeneous coordinates and matrices, translation becomes efficient and easy to implement. Translation is widely used in games, animation, GUI systems, robotics, and modern mobile applications.

Understanding translation is essential because it forms the basis of object movement and animation in computer graphics systems.

Frequently Asked Questions (FAQs)

1. What is translation transformation?

Translation is a transformation that moves an object from one position to another.

2. What are translation parameters?

Translation parameters are:

• t_x
• t_y

3. Does translation change object shape?

No, translation preserves shape and size.

4. Why are homogeneous coordinates used in translation?

They allow translation to be represented using matrix multiplication.

5. What is the translation matrix?

| 1  0  tx |
| 0  1  ty |
| 0  0   1 |