Mathematics for Computer Graphics
|
|-- Point Representation
|
|-- Vector Representation
| |
| |-- Vector Addition
| |-- Vector Multiplication
| |-- Scalar Product (Dot Product) of Two Vectors
| |-- Vector Product (Cross Product) of Two Vectors
|
|-- Matrices and Operations Related to Matrices
| |
| |-- Matrix Addition and Subtraction
| |-- Matrix Multiplication
| |-- Transpose of a Matrix
| |-- Determinant and Inverse of a Matrix
|
|-- Parametric Equations of Lines
|
|-- Parametric Equations of Conics (Circles, Ellipses, Parabolas, Hyperbolas)
Imagine placing a dot on a piece of paper; this dot represents a point. But how do we describe where this point is? We use a coordinate system for that.
A point is a fundamental element that represents a position in space. It does not have a size, shape, or any other property except its location.
In a 2D (two-dimensional) space, we use an X-axis (horizontal) and a Y-axis (vertical) to locate a point. A point is written as: \[ P(x, y) \]
For example:
In 2D graphics, every object you see; lines, shapes, images; is made up of points positioned at specific coordinates.
Now, in 3D (three-dimensional) space, we add another axis: the Z-axis, which represents depth. A 3D point is written as: \[ P(x, y, z) \]
For example:
Just like in 2D, every 3D model you see in games or animations is made up of points connected in space.
How far is one point from another? We use the distance formula to find out.
In 2D, for two points \( (x_1, y_1) \) and \( (x_2, y_2) \): \[ d = \sqrt{(x_2 - x_1)^2 + (y_2 - y_1)^2} \]
Example:
In 3D, the formula expands to include the \( z \)-coordinate: \[ d = \sqrt{(x_2 - x_1)^2 + (y_2 - y_1)^2 + (z_2 - z_1)^2} \]
Distance is important in graphics for detecting collisions, measuring object placement, and determining movement.
A vector is simply a quantity that has both magnitude (size) and direction. Imagine an arrow; it has a length (magnitude) and it points somewhere (direction). That’s exactly how vectors work!
In 2D space, a vector is usually represented as: \[ \mathbf{A} = (x, y) \] And in 3D space, it’s: \[ \mathbf{A} = (x, y, z) \]
For example, a vector \( \mathbf{A} = (3, 4) \) means it moves 3 units in the x-direction and 4 units in the y-direction.
A vector is a fundamental element in computer graphics that represents direction and magnitude. It is commonly used for movement, transformations, and physics-based calculations.
Adding two vectors means combining their effects. Imagine two forces pushing an object; one pushes forward, and one pushes sideways. The object moves in a diagonal direction, which is the result of adding the two vectors.
Mathematically, if we have two vectors:
\[ \mathbf{A} = (x_1, y_1, z_1), \quad \mathbf{B} = (x_2, y_2, z_2) \]Their sum is:
\[ \mathbf{A} + \mathbf{B} = (x_1 + x_2, y_1 + y_2, z_1 + z_2) \]Example:
In computer graphics, vector addition is used to calculate object movement, camera transitions, and even lighting effects.
Now, what happens when we multiply vectors? There are two ways to do this:
When a vector is multiplied by a number (scalar), its direction stays the same, but its length changes.
Mathematically, if we have a vector: \[ \mathbf{A} = (x, y, z) \]
And we multiply it by a scalar \( k \):
\[
k \mathbf{A} = (k \cdot x, k \cdot y, k \cdot z)
\]
Example:
In computer graphics, this is used for scaling objects. If you want to double an object’s size, you multiply its vectors by 2.
Vectors help define movement, forces, and transformations in 2D and 3D space, making them essential for animations, physics simulations, and rendering.
Now that we know how to add and multiply vectors by a scalar, let’s talk about a special kind of vector multiplication: the dot product. This operation tells us how much two vectors are aligned in the same direction.
Imagine you’re pushing a box. If you push in the same direction it moves, all your effort goes into moving it forward. But if you push at an angle, only part of your force moves the box forward. The dot product helps measure this effect mathematically.
Mathematically, the dot product of two vectors \( \mathbf{A} \) and \( \mathbf{B} \) is:
\[ \mathbf{A} \cdot \mathbf{B} = x_1 x_2 + y_1 y_2 + z_1 z_2 \]Or in another form: \[ \mathbf{A} \cdot \mathbf{B} = |\mathbf{A}| |\mathbf{B}| \cos \theta \]
where:
Example:
If the dot product is:
In computer graphics, the dot product is widely used for lighting effects, finding angles, and checking if objects are facing toward or away from a light source.
The dot product of two vectors gives a measure of their similarity in direction. It is useful for calculating angles, lighting effects, and physics simulations.
Unlike the dot product, which gives a scalar (just a number), the cross product gives a new vector that is perpendicular to both original vectors. It’s super useful in 3D graphics and physics.
Imagine you hold out your right hand: if your index finger points in one direction (vector A) and your middle finger points in another (vector B), your thumb will naturally point in a third direction; this is the cross product.
Mathematically, for two vectors: \[ \mathbf{A} = (x_1, y_1, z_1), \quad \mathbf{B} = (x_2, y_2, z_2) \]
Their cross product is:
\[ \mathbf{A} \times \mathbf{B} = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ x_1 & y_1 & z_1 \\ x_2 & y_2 & z_2 \end{vmatrix} \]Expanding this determinant:
\[ \mathbf{A} \times \mathbf{B} = \left( y_1 z_2 - z_1 y_2 \right) \mathbf{i} - \left( x_1 z_2 - z_1 x_2 \right) \mathbf{j} + \left( x_1 y_2 - y_1 x_2 \right) \mathbf{k} \]Example:
The cross product is widely used in graphics for calculating surface normals (which affect lighting), physics simulations (torque and rotational motion), and determining perpendicular directions.
The cross product of two vectors results in a new vector that is perpendicular to both. It is widely used for surface normals, physics simulations, and 3D transformations.
You can think of a matrix as a table of numbers arranged in rows and columns. It’s like a spreadsheet or a grid where each number is placed in a specific position.
In computer graphics, matrices are super important! They help with things like rotating, scaling, and moving objects in a 2D or 3D space.
A matrix is usually represented as:
\[ A = \begin{bmatrix} a_{11} & a_{12} & \dots & a_{1n} \\ a_{21} & a_{22} & \dots & a_{2n} \\ \vdots & \vdots & \ddots & \vdots \\ a_{m1} & a_{m2} & \dots & a_{mn} \end{bmatrix} \]Here:
For example, this is a 2×3 matrix (2 rows, 3 columns):
\[ B = \begin{bmatrix} 1 & 2 & 3 \\ 4 & 5 & 6 \end{bmatrix} \]Matrices are used in computer graphics for transformations like rotation, scaling, and translation.
Adding or subtracting matrices is pretty simple! You just add or subtract corresponding elements.
For two matrices:
\[ A = \begin{bmatrix} a_{11} & a_{12} \\ a_{21} & a_{22} \end{bmatrix}, \quad B = \begin{bmatrix} b_{11} & b_{12} \\ b_{21} & b_{22} \end{bmatrix} \]Their sum is:
\[ A + B = \begin{bmatrix} a_{11} + b_{11} & a_{12} + b_{12} \\ a_{21} + b_{21} & a_{22} + b_{22} \end{bmatrix} \]Example:
Similarly, for subtraction:
\[ A - B = \begin{bmatrix} a_{11} - b_{11} & a_{12} - b_{12} \\ a_{21} - b_{21} & a_{22} - b_{22} \end{bmatrix} \]Example:
\[ A - B = \begin{bmatrix} 2-1 & 3-6 \\ 4-7 & 5-2 \end{bmatrix} = \begin{bmatrix} 1 & -3 \\ -3 & 3 \end{bmatrix} \]Matrix addition and subtraction are useful in image processing, blending effects, and performing transformations in graphics.
Unlike addition and subtraction, multiplying matrices is a bit different. Instead of multiplying corresponding elements, we multiply rows by columns.
If we have:
\[ A = \begin{bmatrix} a_{11} & a_{12} \\ a_{21} & a_{22} \end{bmatrix}, \quad B = \begin{bmatrix} b_{11} & b_{12} \\ b_{21} & b_{22} \end{bmatrix} \]Their product is:
\[ A \times B = \begin{bmatrix} (a_{11}b_{11} + a_{12}b_{21}) & (a_{11}b_{12} + a_{12}b_{22}) \\ (a_{21}b_{11} + a_{22}b_{21}) & (a_{21}b_{12} + a_{22}b_{22}) \end{bmatrix} \]Example:
Important rules of matrix multiplication:
Matrix multiplication is widely used in computer graphics for transforming objects, applying 3D rotations, and handling perspective projections.
In graphics programming, matrices are used for transformations like translation, rotation, scaling, and perspective projection.
Let’s now move on to the transpose of a matrix. You can think of the transpose as flipping a matrix over its diagonal. In other words, the rows become columns, and the columns become rows.
If we have a matrix \( A \), the transpose of \( A \), denoted as \( A^T \), is formed by swapping the rows with the columns.
For example, for a matrix \( A \) as:
\[ A = \begin{bmatrix} 1 & 2 & 3 \\ 4 & 5 & 6 \end{bmatrix} \]The transpose \( A^T \) would be:
\[ A^T = \begin{bmatrix} 1 & 4 \\ 2 & 5 \\ 3 & 6 \end{bmatrix} \]Important points:
The transpose operation is useful in computer graphics when dealing with transformations, as well as when you need to switch between row-major and column-major data structures in matrices.
Now, let’s move on to the determinant and inverse of a matrix, which are key operations in linear algebra and essential in graphics and physics simulations.
The determinant of a matrix is a special number that can be calculated from its elements. It provides important information about the matrix, such as whether the matrix is invertible or singular.
If we have a 2×2 matrix:
\[ A = \begin{bmatrix} a_{11} & a_{12} \\ a_{21} & a_{22} \end{bmatrix} \]The determinant of \( A \), denoted \( \text{det}(A) \), is calculated as:
\[ \text{det}(A) = a_{11} \cdot a_{22} - a_{12} \cdot a_{21} \]Example:
If the determinant of a matrix is zero, the matrix is said to be singular and cannot be inverted. If the determinant is non-zero, the matrix is invertible.
The inverse of a matrix is another matrix that, when multiplied with the original matrix, gives the identity matrix (a matrix with ones on the diagonal and zeros elsewhere). In other words, if \( A \) is a matrix, its inverse is denoted \( A^{-1} \), and it satisfies: \[ A \times A^{-1} = I \]
For a 2×2 matrix \( A = \begin{bmatrix} a_{11} & a_{12} \\ a_{21} & a_{22} \end{bmatrix} \), its inverse is given by:
\[ A^{-1} = \frac{1}{\text{det}(A)} \begin{bmatrix} a_{22} & -a_{12} \\ -a_{21} & a_{11} \end{bmatrix} \]Example:
Example:
So, \( \text{det}(A) = 9 \).
Step 1: Calculate the Cofactor Matrix
The cofactor matrix \( C \) is formed by computing the cofactor of each element.
Formula: \( C_{ij} = (-1)^{i+j} \cdot M_{ij} \) where \( M_{ij} \) is the minor of element \( a_{ij} \).
\[ C_{11} = (-1)^{1+1} \begin{vmatrix} 5 & 6 \\ 8 & 9 \end{vmatrix} = (5 \cdot 9 - 6 \cdot 8) = 45 - 48 = -3 \] \[ C_{12} = (-1)^{1+2} \begin{vmatrix} 4 & 6 \\ 7 & 9 \end{vmatrix} = -1 \cdot (4 \cdot 9 - 6 \cdot 7) = -1 \cdot (36 - 42) = -1 \cdot (-6) = 6 \] \[ C_{13} = (-1)^{1+3} \begin{vmatrix} 4 & 5 \\ 7 & 8 \end{vmatrix} = (4 \cdot 8 - 5 \cdot 7) = 32 - 35 = -3 \] \[ C_{21} = (-1)^{2+1} \begin{vmatrix} 3 & 1 \\ 8 & 9 \end{vmatrix} = -1 \cdot (3 \cdot 9 - 1 \cdot 8) = -1 \cdot (27 - 8) = -19 \] \[ C_{22} = (-1)^{2+2} \begin{vmatrix} 2 & 1 \\ 7 & 9 \end{vmatrix} = (2 \cdot 9 - 1 \cdot 7) = 18 - 7 = 11 \] \[ C_{23} = (-1)^{2+3} \begin{vmatrix} 2 & 3 \\ 7 & 8 \end{vmatrix} = -1 \cdot (2 \cdot 8 - 3 \cdot 7) = -1 \cdot (16 - 21) = 5 \] \[ C_{31} = (-1)^{3+1} \begin{vmatrix} 3 & 1 \\ 5 & 6 \end{vmatrix} = (3 \cdot 6 - 1 \cdot 5) = 18 - 5 = 13 \] \[ C_{32} = (-1)^{3+2} \begin{vmatrix} 2 & 1 \\ 4 & 6 \end{vmatrix} = -1 \cdot (2 \cdot 6 - 1 \cdot 4) = -1 \cdot (12 - 4) = -8 \] \[ C_{33} = (-1)^{3+3} \begin{vmatrix} 2 & 3 \\ 4 & 5 \end{vmatrix} = (2 \cdot 5 - 3 \cdot 4) = 10 - 12 = -2 \]The cofactor matrix is:
\[ C = \begin{bmatrix} -3 & 6 & -3 \\ -19 & 11 & 5 \\ 13 & -8 & -2 \end{bmatrix} \]Step 2: Find the Adjoint Matrix
The adjoint matrix is the transpose of the cofactor matrix.
Formula: \( \text{adj}(A) = C^T \)
\[ \text{adj}(A) = C^T = \begin{bmatrix} -3 & -19 & 13 \\ 6 & 11 & -8 \\ -3 & 5 & -2 \end{bmatrix} \]Step 3: Calculate the Inverse Matrix
The inverse of matrix \( A \) is given by the formula:
Formula: \( A^{-1} = \frac{1}{\text{det}(A)} \cdot \text{adj}(A) \)
\[ A^{-1} = \frac{1}{9} \begin{bmatrix} -3 & -19 & 13 \\ 6 & 11 & -8 \\ -3 & 5 & -2 \end{bmatrix} \] \[ = \begin{bmatrix} -\frac{1}{3} & -\frac{19}{9} & \frac{13}{9} \\ \frac{2}{3} & \frac{11}{9} & -\frac{8}{9} \\ -\frac{1}{3} & \frac{5}{9} & -\frac{2}{9} \end{bmatrix} \]The inverse of a matrix is very useful in computer graphics for solving systems of equations, such as when transforming points and objects in 3D space or finding the proper scale and rotation to apply.
To summarize:
Let’s dive into lines! Lines are an essential concept in geometry and are used to represent relationships between points in space. In computer graphics, lines are used to create shapes, outlines, and paths for drawing objects. A line is defined by two points, and it extends infinitely in both directions. But when we talk about a **line segment**, it refers to a part of the line that has two specific endpoints.
A line segment is a part of a line that is bounded by two distinct endpoints. Unlike a line, which extends infinitely, a line segment has a finite length.
For example, if we have two points \( P(x_1, y_1) \) and \( Q(x_2, y_2) \), the line segment connecting these points is written as \( \overline{PQ} \).
Example: Let’s say we have the points \( P(1, 2) \) and \( Q(4, 6) \). The line segment between them is \( \overline{PQ} \), and it represents a finite distance between the two points.
The length of a line segment can be calculated using the distance formula: \[ \text{Length of the segment} = \sqrt{(x_2 - x_1)^2 + (y_2 - y_1)^2} \]
Example Calculation:
The length of the line segment \( \overline{PQ} \) is 5 units. This is a very useful formula for determining distances between points on a 2D plane.
The slope of a line is a measure of its steepness or inclination. It describes how much the line rises or falls as you move along the x-axis. In simpler terms, it tells you how much y changes as x changes.
If you have two points \( P(x_1, y_1) \) and \( Q(x_2, y_2) \), the slope \( m \) of the line passing through these points is given by the formula: \[ m = \frac{y_2 - y_1}{x_2 - x_1} \]
This formula tells you how much the y-coordinate changes for a unit change in the x-coordinate. The greater the value of the slope, the steeper the line.
Example:
The slope of the line passing through \( P(1, 2) \) and \( Q(4, 6) \) is \( \frac{4}{3} \), which means that for every 3 units you move horizontally, the line rises 4 units vertically.
The slope is also important in computer graphics for tasks like drawing lines with specific orientations or rotating objects.
The equation of a line can be written in various forms, but one common form is the slope-intercept form: \[ y = mx + b \]
Where:
Example:
The equation of the line is: \[ y = \frac{4}{3}x + \frac{2}{3} \]
This tells you that the line has a slope of \( \frac{4}{3} \) and crosses the y-axis at \( \frac{2}{3} \).
Lines are fundamental in computer graphics for drawing shapes, paths, and handling object transformations. They play an essential role in geometric calculations, rendering, and graphical representations.
Now let’s dive into parametric equations of a line in 2D. A parametric equation gives us a way to describe a line using a variable (usually denoted as \( t \)) that represents the position on the line. This allows us to represent the line in a more flexible way compared to the traditional slope-intercept form \( y = mx + b \).
In parametric form, we describe both \( x \) and \( y \) coordinates in terms of a parameter \( t \). The parameter \( t \) changes, and as it does, it moves along the line. When \( t \) is different, we get different points along the line.
For a line passing through two points \( A(x_0, y_0) \) and \( B(x_1, y_1) \), the parametric equations are:
\[ x = x_0 + t \cdot (x_1 - x_0) \] \[ y = y_0 + t \cdot (y_1 - y_0) \]Here, \( t \) is the parameter, and as it changes, the equations give the coordinates \( (x, y) \) of the points on the line between and beyond points \( A \) and \( B \). The values of \( t \) will give us the points that lie on the line.
Let’s say we have two points \( A(2, 3) \) and \( B(6, 7) \). We want to find the parametric equations of the line passing through these points.
Using the general formula:
\[ x = 2 + t \cdot (6 - 2) = 2 + 4t \] \[ y = 3 + t \cdot (7 - 3) = 3 + 4t \]So, the parametric equations for the line passing through \( A(2, 3) \) and \( B(6, 7) \) are:
\[ x = 2 + 4t \] \[ y = 3 + 4t \]Now, let’s solve for some specific values of \( t \) to find points on the line.
So, for \( t = 0 \), we have the point \( A(2, 3) \), for \( t = 1 \), we have the point \( B(6, 7) \), and for \( t = 2 \), we have the point \( (10, 11) \), which is another point along the line.
Let’s try another example. Suppose we have the points \( P(1, 1) \) and \( Q(4, 4) \). Find the parametric equations for the line passing through these points.
Using the formula:
\[ x = 1 + t \cdot (4 - 1) = 1 + 3t \] \[ y = 1 + t \cdot (4 - 1) = 1 + 3t \]The parametric equations for the line are:
\[ x = 1 + 3t \] \[ y = 1 + 3t \]Let’s find some points for different values of \( t \):
So, for \( t = 0 \), the point is \( (1, 1) \), for \( t = 1 \), the point is \( (4, 4) \), and for \( t = -1 \), the point is \( (-2, -2) \). As you can see, the line can be traced by adjusting \( t \) and finding the corresponding points.
Parametric equations are particularly useful because they allow us to describe lines in a way that makes it easy to calculate positions over time, animate objects along paths, and perform geometric transformations. It’s a flexible approach that works well in both 2D and 3D space.
Parametric equations provide a clear and efficient way to represent lines. By using a parameter \( t \), we can generate the coordinates of any point on the line between or beyond the given points. It’s very useful in computer graphics, motion simulations, and geometric calculations!
Now let's explore parametric equations of conics. Conics are curves formed by the intersection of a plane and a cone. There are four basic types of conic sections: circles, ellipses, parabolas, and hyperbolas. These curves can be described using parametric equations, which provide a way to express the coordinates of points on the conic curve using a parameter (usually \( t \)).
Each conic has its own unique parametric form, and we’ll look at how we can express them mathematically. Understanding parametric equations for conics is important in fields like computer graphics, physics, and engineering, as they are often used to represent curves and shapes.
Let’s start with a circle. A circle is defined by its center \( (h, k) \) and its radius \( r \). The parametric equations for a circle are derived from the basic equation of a circle \( (x - h)^2 + (y - k)^2 = r^2 \), where \( (h, k) \) is the center and \( r \) is the radius.
The parametric equations for a circle with center \( (h, k) \) and radius \( r \) are:
\[ x = h + r \cdot \cos(t) \] \[ y = k + r \cdot \sin(t) \]Here, \( t \) is the parameter, usually varying from \( 0 \) to \( 2\pi \), and as \( t \) changes, the coordinates \( (x, y) \) trace the points on the circle.
Example: Let’s say we have a circle with center \( (0, 0) \) and radius \( 5 \). The parametric equations would be:
\[ x = 0 + 5 \cdot \cos(t) = 5 \cdot \cos(t) \] \[ y = 0 + 5 \cdot \sin(t) = 5 \cdot \sin(t) \]As \( t \) varies from \( 0 \) to \( 2\pi \), the coordinates \( (x, y) \) trace out the circle.
An ellipse is similar to a stretched or squished circle. It is defined by its center \( (h, k) \), its semi-major axis \( a \) (the longest radius), and its semi-minor axis \( b \) (the shortest radius). The parametric equations for an ellipse are:
\[ x = h + a \cdot \cos(t) \] \[ y = k + b \cdot \sin(t) \]Here, \( t \) is the parameter that varies from \( 0 \) to \( 2\pi \), and as \( t \) changes, the points \( (x, y) \) trace the ellipse.
Example: Let’s take an ellipse with center \( (0, 0) \), semi-major axis \( a = 6 \), and semi-minor axis \( b = 3 \). The parametric equations for the ellipse are:
\[ x = 0 + 6 \cdot \cos(t) = 6 \cdot \cos(t) \] \[ y = 0 + 3 \cdot \sin(t) = 3 \cdot \sin(t) \]As \( t \) varies from \( 0 \) to \( 2\pi \), the points \( (x, y) \) trace out the ellipse.
A parabola is a curve that is symmetric and U-shaped. The general equation of a parabola is \( y = ax^2 + bx + c \), but we can express it parametrically. For a parabola with the vertex at \( (h, k) \), opening upwards or downwards, the parametric equations are:
\[ x = t \] \[ y = a(t - h)^2 + k \]Here, \( t \) is the parameter that represents the x-coordinate, and as \( t \) changes, the y-coordinate is calculated according to the equation. For a parabola opening upwards, \( a > 0 \), and for a parabola opening downwards, \( a < 0 \).
Example: Let’s take a parabola with vertex at \( (0, 0) \) and opening upwards with \( a = 1 \). The parametric equations would be:
\[ x = t \] \[ y = t^2 \]As \( t \) changes, the points \( (x, y) \) trace the parabola.
A hyperbola is a curve formed by two separate branches, and it has two foci. The general equation for a hyperbola is \( \frac{x^2}{a^2} - \frac{y^2}{b^2} = 1 \), but we can express it in parametric form. The parametric equations for a hyperbola are:
\[ x = a \cdot \cosh(t) \] \[ y = b \cdot \sinh(t) \]Here, \( t \) is the parameter, \( \cosh(t) \) and \( \sinh(t) \) are the hyperbolic cosine and sine functions, respectively, and as \( t \) changes, the points \( (x, y) \) trace out the two branches of the hyperbola.
Example: Let’s take a hyperbola with \( a = 3 \) and \( b = 2 \). The parametric equations would be:
\[ x = 3 \cdot \cosh(t) \] \[ y = 2 \cdot \sinh(t) \]As \( t \) changes, the coordinates \( (x, y) \) trace the hyperbola.
Parametric equations are extremely useful because they allow us to easily describe and manipulate conic curves. For example, in computer graphics and animation, we can animate objects moving along these curves or design paths based on conics. The parameter \( t \) provides flexibility to adjust the movement, speed, and direction along the curve.
Parametric equations give us a powerful tool for representing conics like circles, ellipses, parabolas, and hyperbolas. These equations provide an elegant and simple way to describe complex curves, making them essential in various fields such as graphics, physics, and engineering.