top of page
  • Alex Ricciardi

Understanding Vectors: Foundations, Applications, and Transformations in Computer Graphics

This article explores the fundamental concepts of vectors, their mathematical properties, and their applications in computer graphics, particularly in transformations such as translation, scaling, and rotation within multidimensional Euclidean spaces.


Alexander S. Ricciardi

September 8th, 2024

 
Vectors Transformations

Vectors are a fundamental component in geometry, and they are a crucial concept in Computer Science for science for performing operations in multidimensional spaces, they are used in fields like computer graphics, machine learning, and scientific computing to represent directions, implement transformations, optimize algorithms, and process data. In this post, I will define what a vector is and discuss its applications in graphic visualization.


Mathematically a vector is characterized by magnitude and direction. In physics and mathematics, the vector is used to define a quantity with direction and magnitude. In a vector space, a mathematical structure formed by a collection of vectors, a vector is an object that can be added to other vectors and multiplied by scalars (real or complex numbers).


Some characteristics of vector space are:v, u, and w are vectorsα and β are scalars:

  • Commutativity: u + v = v + u

  • Associativity: (u + v) + w = u + (v + w)

  • Zero vector: There exists a zero vector 0 such that v + 0 = v

  • Inverse elements of addition: For each vector v there exists a vector -v   such that v + (-v) = 0

  • Distributivity of scalar multiplication: a(u + v)=αu + αv  

  • Distributivity of scalar multiplication: (α + β)v =αv + βv(a + b)

  • Associativity of scalar multiplication: α(βv) = (αβ)v


In affine space, a vector space with points, a vector can be defined as a directed line segment between any two points from one point to the other (Angle & Shreiner, 2020). They can be represented by a point-point notation in the form of v = P - Q, where v is the vector, P and Q are the points. The direction of the vector is from P to Q and its magnitude is the length between the two points. 


Some characteristics of affine space are:α and β are scalars

  • No origin: Affine spaces do not have a fixed point of origin.

  • Point-Vector Operations: You can add a vector to a point to get another point, and subtract one point from another to get a vector.

  • Affine Combinations: An affine combination of points is a weighted sum, a sum where the weights (a coefficient similar to a scalar) add up to 1. For example, the point P = αP + βP where α + β =1, is an affine combination of points P and P


In Euclidean space, a type of affine space, distances between points can be measured, angles between vectors can be also measured using the vectors’ dot product, and cartesian coordinates are used.


Some characteristics of Euclidean space are:


  • Distance: The distance between two points is determined by the Euclidean distance formula,.

  • Angles: Angles between vectors are measured using the dot product.

  • Cartesian Coordinates: Points in Euclidean space are represented using Cartesian coordinates.

  • Orthogonality: Vectors are orthogonal (perpendicular) if their dot product is equal to 90 degrees.

  • Dot Product: The dot product of two vectors measures the angle between them.

Formula Dot product of vectors
  • Norm or Magnitude: The length (magnitude) of a vector is computed as the square root of the sum of the squares of its components.

Formula norm-Magnitude
  • Transformation Operations: Computation of linear transformations such as translation, rotation, scaling, and reflection.


A common example of an Euclidean space is R­. The 2D plane R² and 3D space R³ are often visualized using Euclidean space operations, making them ideal for applications in computer graphics, where vectors are used in modeling and rendering, they are used to determine object position, camera movements, and lightning calculation. One of the most useful applications of vectors is in transformations, where they are utilized for the following types of transformations :


  • Translation: Moving objects in space by adding a translation vector to their coordinates.


    P' = P + T


    Where:

    P and P' are position vectors.

    T is a translation.


  • Scaling: Resizing objects by multiplying their coordinates by scaling factors.


    P' = S ⋅ P


    Where:

    P and P' are position vectors.

    S is a scaling matrix, not a vector.


  • Rotation: Rotating objects around an axis using rotation matrices derived from vectors.


    P′ = R ⋅ P


    Where:

    P and P' are position vectors.

    R is a rotation matrix, not a vector.


  • Shearing and Reflection: are complex transformations that modify the shape and orientation of an object using various vector operations.


Let's visit the concept of rotation about the y-axis. To perform this transformation we will need to use the following matrix (counterclockwise rotation):

Rotation Matrix

Where:

  • Θ is the rotation angle (dictates the length of the rotation)


Applying the rotation to point P (technically the point does not rotate it changes position following a circular path, this is because points are one-dimensional, they represent a location in a system).

Point vector

Where:

  • 1 is the homogeneous coordinate, used for matrix transformations in 3D space. It converts the point 3D vector into a matrix that can be easily used for matrix calculation, particularly for translation transformation. The following video explains why it is used in graphic visualizationQuick Understanding of Homogeneous Coordinates for Computer Graphics.


Computing the rotation using the dot product:

Point Transformation Matrix

Where:

  • P' is the location of the new point after applying the rotation about the y-axis, notice that the value of y did not change only the x and z values did.


Below is the representation of a 2D made of two independent components, the “I” shaped object and the circles, the object is the logo for my Blog website and GitHub page.

Rotation Visualization

Note that the 'I' shape and the circles rotate about the z-axis in 3D (if the object was a 3D object) and about a fixed point, the center of the object, in 2D in opposite directions. Once both components complete a 360° rotation, they reverse direction, switching from counterclockwise to clockwise and vice versa. The animation runs on an infinite loop.


In summary, vectors are fundamental geometric concepts that are essential in computer science for operations in multidimensional spaces. They have applications in fields like computer graphics, machine learning, and scientific computing. In this post, I explored their applications in graphic visualization, including their role in transformations such as translation, scaling, and rotation within Euclidean space.


 

References:


Angel, E., & Shreiner, D. (2020). Chapter 4  Geometric object and transformation. Interactive computer graphics. 8th edition. Pearson Education, Inc. ISBN: 9780135258262


Miolith (2023, December 3). Quick understanding of homogeneous coordinates for computer graphics [Video]. YouTube. https://www.youtube.com/watch?v=o-xwmTODTUI&t=134s

Comments


bottom of page