Volume 12 Issue 06 June 2024, Page no.

– 4298-4310
Index Copernicus ICV: 57.55, Impact Factor: 8.316
DOI: 10.47191/ijmcr/v12i6.07

Applications of Matrices in Computer Graphics

Muhammad Hanif
Department of Applied Mathematics, Noakhali Science and Technology University, Noakhali 3814, Noakhali, Bangladesh

ARTICLE INFO ABSTRACT

Published Online: In this paper, the usage of matrix in computer graphics is shown. A brief overview of geometric
15 June 2024 transformations in computer graphics is given. The "Matrix - Computer Graphics" application
software is created for the representation and easier understanding of relations between
geometric transformations and matrix calculus. We introduce and explore the basic matrix
operation such as translation, rotation, scaling, reflection, shearing in 2D and 3D and at end we
Corresponding Author: explain about the parallel and perspective view. These concepts commonly appear in video
Muhammad Hanif game graphics. The work has also shown some programming in using C/C++ code.
KEYWORDS: 2D and 3D matrix transformations, Computer graphics, Programming C/C+, application software.
Mathematics Subject Classification Number 2020: 05C85, 05C90, 15A09, 15A10, 15A12

I. INTRODUCTION and rooms are lighted, and the way different materials appear.
In mathematics, a matrix (plural: matrices) is a rectangular We call this work “realistic image synthesis”. Computer
array of numbers, symbols, or expressions, arranged in rows graphics is a computing field that involves the creating,
and columns. It is necessary to enclose the elements of a storing and processing of image content via computer. It has
matrix in parentheses or brackets. Each value in a matrix is a wide application in science, engineering, art and especially
called an element. Provided that they have the same size, two in the field of entertainment, movies and video games. [2, 3].
matrices can be added or subtracted element by element. The It is important to note that computer graphics applications are
rule of matrix multiplication, however, is that two matrices used for various educational purposes. For example,
can be multiplied only when the number of columns in the computer graphics applications can, in the education process,
first equals the number of rows in the second. A major help people with learning difficulties [10], assist students in
application of matrices is to represent linear transformations understanding computer science algorithms [4], as well as
such as rotation, scaling, reflection, shear etc. The term increasing our' interest in programming and computer
computer graphics includes almost everything on computers graphics [1]. The usefulness of a matrix in computer graphics
that is not text or sound. Today almost every computer can do is its ability to convert geometric data into different
some graphics, and people have even come to expect to coordinate systems. A matrix is composed of elements
control their computer through icons and pictures rather than arranged in rows and columns. In simple terms, the elements
just by typing. Here in our lab at the Program of Computer of a matrix are coefficients that represents the scale or rotation
Graphics, we think of computer graphics as drawing pictures a vector will undergo during a transformation. The use of
on computers, also called rendering. The pictures can be matrices in computer graphics is widespread. Many industries
photographs, drawings, movies, or simulations - pictures of like architecture, cartoon, automotive that were formerly
things, which do not yet exist and maybecould never exist. Or done by hand drawing now are done routinely with the aid of
they may be pictures from places we cannot see directly, such computer graphics. Video gaming industry, maybe the
as medical images from inside our body. We spend much of earliest industry to rely heavily on computer graphics, is now
our time improving the way computer pictures can simulate representing rendered polygon in 3- Dimensions. In video
real world scenes. gaming industry, matrices are major mathematic tools to
We want images on computers to not just look more realistic,
but also to be more realistic in their colors, the way objects

4298 Muhammad Hanif , IJMCR Volume 12 Issue 06 June 2024

 “Applications of Matrices in Computer Graphics”
construct and manipulate a realistic animation of a polygonal
figure. Examples of matrix operations include translations,

Figure 1. Images on computer graphics based on matrix theory

rotations, and scaling.

In this paper, we apply the matrix based linear transformations in computer graphics and understand about modeling, and interactive
control of 2D or 3D computer graphics and create the various formats for storing and working with image in computer graphics.

II. METHODOLOGY
We will use the linear transformation of matrix theory to our work. The following linear equations can be defined:

Translation: A translation basically means adding a vector to a point, making a point transforms to a
new point. Translation is a geometric transformation that moves the current point to the point for a given vector

. Translation is shown in
Figure 2

Figure 2: Translation
Therefore, point ′ can be written as:
′= +𝑡𝑡
and in matrix notation as:
.
Rotation: Let (0, 0) and be a point and an angle given respectively. Rotation around the point (0, 0) by the angle is a
transformation that maps every point in the plane to the point ′ in such a manner that the following properties are true:

4299 Muhammad Hanif , IJMCR Volume 12 Issue 06 June 2024

 “Applications of Matrices in Computer Graphics”
and

3a 3b

Figure 3: Rotation

By convention, rotation by the positive angle goes counter-clockwise (Fig. 3a), while rotation by the negative angle goes
clockwise (Fig. 3b). Rotation of the point ( ,y) located at the angle from the horizontal coordinate with a distance from the
origin of the coordinate system leads to a new point ′( ′, ′). By using standard trigonometry, coordinates of the point ( ,) can be
expressed as:
= cos
= sin
Similarly, coordinates of the point ′( ′, ′) can be expressed as:
′ = cos( + )
′ = sin( + )
By using the above equations, as well as addition formulas, the following formulas can be obtained:
′ = cos cos − sin sin = cos − sin
′ = cos sin + sin cos = sin + cos

which can be in a matrix form written as:

Scaling: Scaling is the process of changing the size and proportion of the image. It is the process of expanding or compressing the
dimension of an object. There are two factors used in scaling transformation i.e. and Scaling operation can achieved by
multiplying each vertex coordinate (𝑥,𝑦) of the polygon by scaling factor. and to produce the transformed coordinates as ′( ′,
′).
′=𝑆𝑥∙
′=𝑆𝑦∙
The scaling factors , scales the object in X and Y direction respectively. In the matrix form, above equations can be
written as:

The scaling process of the of the square is shown in Fig. 4 .

Figure 4. Proportional scaling of the square

4300 Muhammad Hanif , IJMCR Volume 12 Issue 06 June 2024
 “Applications of Matrices in Computer Graphics”
Reflection: Reflection is a transformation which generates the mirror image of an object. The mirror image for two dimensional
reflections is generated by rotating the object 180 degree on the x-axis of reflection. It is a special case of a scaling where the size
of the object does not change. For the scaling factors 𝑆𝑥 = −1 and 𝑆𝑦 =1, reflecting is about the axis. If the scaling factors are 𝑆𝑥
=1 and 𝑆𝑦 = −1, there is a reflection about the axis. For the scaling factors 𝑆𝑥 = 𝑆𝑦 = −1, reflection is about the and axes. In
Fig. 5, reflections about the x and 𝑦 axes of Super Mario, the main character in the Super Mario video games as an original object,
are shown.

Figure 5. Reflection

Shear: A transformation that slants the shape of an object is called the shear transformation. Also skewing the object with respect
to the or axis is called shear transformation. Skewing by the angle with respect to the axis and by the angle with respect
to the axis is illustrated in Fig. 6.

Figure 6: shear Coordinates of the point ′( ′, ) can be defined as

′ = + ∙tan ′ = + ∙tan .
In the matrix form, point ′ can be represented as:

III. IMPLEMENTATION
Since the dawn of computers, Hollywood has greatly demonstrated a Hacker or a Programmer as someone sitting on a computer
typing random keys on computer which ultimately compiles to a Falling matrix like simulation. Here, we will try to implement a
similar falling matrix simulation on the console using C++.

4301 Muhammad Hanif , IJMCR Volume 12 Issue 06 June 2024

 “Applications of Matrices in Computer Graphics”

Figure 7: Falling matrix

The idea here is to print random characters over a defined width, where the two successive characters may or may not have certain
amount of gap defined randomly. A certain amount of delay between printing successive lines has to be implemented in order to
have a ‘falling effect’.

Cubic Bezier Curve Implementation

A Bezier curve is a mathematically defined curve used in two-dimensional graphic applications like adobe Illustrator, Ink scape etc.
The curve is defined by four points: the initial position and the terminating position i.e P0 and P3 respectively (which are called
“anchors”) and two separate middle points i.e P1 and P2(which are called “handles”) in our example. Bezier curves are frequently
used in computer graphics, animation, modeling etc.
Bezier curves can be generated under the control of other points. Approximate tangents by using control points are used to generate
curve. The Bezier curve can be represented mathematically as –

Where is the set of points and represents the Bernstein polynomials. i.e.
Blending Function which are given by –
Where n is the polynomial order, i is the index, and u/t is the variable which has from 0 to 1.
Let us define our cubic Bezier curve mathematically.
So a Bezier curve id defined by a set of control points to
where n is called its order (n = 1 for linear, n = 2 for quadratic, etc.). The first and last control points are always the endpoints of the
curve; however, the intermediate control points (if any) generally do not lie on the curve.

4302 Muhammad Hanif , IJMCR Volume 12 Issue 06 June 2024

 “Applications of Matrices in Computer Graphics”

Figure 8. Construction of a cubic Bezier curve

Implementation test:
We are given with four control points B0[1,0], B1[2,2], B2[6,3], B3[8,2], so determine the five points that lie on the curve also draw
the curve on the graph.

Solution:
Given curve has four control points hence it is a cubic Bezier curve, So, the parametric equation of cubic Bezier curve is

So, for t = 0 the coordinate will be,

So, for t=0.7 the coordinate will be,

IV RESULT AND DISCUSSION

We have tried to get closer to who are dealing with computer science, especially computer graphics, the mathematical background
of computer graphics in which the term matrix is in the center. Although computer graphics is nowadays usually 3D, in this paper
we have looked at 2D transformations, 3D transformation and some program in order to show. In simpler way the relationship
between the matrix calculus and geometric transformations used in computer graphics. For this purpose, the "Matrix in Computer
Graphics" application gives a contribution in the visualization and easier learning of relationships between the matrices and their
applications on display and positioning, as well as on transforming different objects on a computer. We have found the graphs of
our results are as follows:

4303 Muhammad Hanif , IJMCR Volume 12 Issue 06 June 2024

 “Applications of Matrices in Computer Graphics”

Line translation Rectangle translation

Scaling of Objects

Scaling of Objects 3D Translation

3D Scaling 3D Rotation

4304 Muhammad Hanif , IJMCR Volume 12 Issue 06 June 2024

 “Applications of Matrices in Computer Graphics”

Cubic Bezier cure Cubic Bezier cure

V. FUTURE WORK 4. Naps, T. L. (2005). JHAVÉ: Supporting Algorithm

We have the chance to talk about computer graphics and Visualization. IEEE Computer Graphics and
math that are often overlooked as unrelated. It is hoped that Applications, 25(5), 49-55.
this activity on matrix using in computer graphics not only https://doi.org/10.1109/MCG.2005.110
offers teachers with greater opportunities to either introduce 5. Petricek, T. & Skeet, J. (2010). Real-World Functional
or consolidate certain mathematical concepts and algorithms, Programming: With Examples in F# and C#, 1st
but also to convince their students that mathematics plays an Edition. Manning Publications.
important role in various walks of life and hence is a useful 6. Salomon, D. (2011).The computer graphics manual,
and meaningful field of study. There are huge opportunities Volume 2. Springer-Verlag London Limited.
of matrices to implement to computer graphics and finding https://doi.org/10.1007/978-0-85729-886-7
more possibly use results in future. 7. Sharp, J. (2013).Microsoft Visual C# 2013 Step by
Step (Step by Step Developer), 1st Edition. Microsoft
ACKNOWLEDGEMENT Press.
The Research Cell of Noakhali Science and Technology 8. Skala, V. (2006). Length, Area and Volume
University, Noakhali 3814, Bangladesh for providing the Computation in Homogeneous Coordinates.
financial support to work with this article. International Journal of Image and Graphics, 06(04),
625-639.
REFERENCES https://doi.org/10.1142/S0219467806002422
1. Bruno, J., Jan, V., & Slaby, A. (2009).Computer 9. Srivastav, M. K. (2016). Transformation of an Object
Graphics in Computer Science Education. Problems of in Computer Graphics: A Case Study of Mathematical
Education in the 21st Century, 11, 60-68. Matrix Theory. Elixir Comp. Engg. 100, 43396-43399.
2. Hearn, D. D., Baker, M. P., & Carithers, W. 10. Vera, L., Campos, R., Herrera, G., & Romero, C.
(2014).Computer Graphics with Open GL, 4th Edition. (2007). Computer graphics applications in the
Pearson Education Limited. education process of people with learning difficulties.
3. Hughes, J. F., van Dam, A., McGuire, M., Sklar, D. F., Computer& graphics, 31,649658.
& Foley, J. D. (2014). Computer Graphics: Principles https://doi.org/10.1016/j.cag.2007.03.003
and Practice, 3rd Edition. Addison-Wesley.

Appendix
Implementation of falling matrix
// C++ program for implementation of falling matrix.
#include<iostream>
#include<string>
#include<thread>
#include<cstdlib>
#include<ctime>
#include<chrono>

// Width of the matrix line

const int width = 70;

4305 Muhammad Hanif , IJMCR Volume 12 Issue 06 June 2024

 “Applications of Matrices in Computer Graphics”

// Defines the number of flips in Boolean Array 'switches' const int flipsPerLine =5;

// Delay between two successive line print const int sleepTime = 100;

using namespace std;

4306 Muhammad Hanif , IJMCR Volume 12 Issue 06 June 2024

 “Applications of Matrices in Computer Graphics”

4307 Muhammad Hanif , IJMCR Volume 12 Issue 06 June 2024

 “Applications of Matrices in Computer Graphics”

4308 Muhammad Hanif , IJMCR Volume 12 Issue 06 June 2024

 “Applications of Matrices in Computer Graphics”

4309 Muhammad Hanif , IJMCR Volume 12 Issue 06 June 2024

 “Applications of Matrices in Computer Graphics”

4310 Muhammad Hanif , IJMCR Volume 12 Issue 06 June 2024