📘 WEEK 1: Introduction to Computer

Graphics (Compact Detailed Notes)

🔹 Computer Graphics – Definition
Computer Graphics (CG) is the field that deals with creating, storing, and manipulating images
using computers. These images can range from simple 2D pictures to complex 3D scenes such
as those used in video games and animated movies. The main goal of CG is to produce realistic
visuals, represent data visually, and provide better user interaction. Today, it is widely used in
movies (VFX), games, medical imaging (MRI, X-rays), and engineering design (CAD).

🔹 Course Objectives
The purpose of this course is to understand how images are generated and controlled by
computers. It covers how graphics hardware works, how mathematical concepts are applied in
graphics, and how real-world applications like games and simulations are developed. In simple
terms, it explains how images are created and manipulated digitally.

🔹 Standard Definitions & Terms

Pixel: The smallest unit of an image. A screen image is made up of millions of pixels, each
having its own color and brightness. For example, a resolution of 1920×1080 means 1920
columns and 1080 rows of pixels.

Resolution: Defines the quality of an image. Higher resolution means more pixels and a clearer
image, while lower resolution results in a blurry image.

Frame Buffer: A memory area where image data is stored before being displayed. Each pixel’s
color value is stored here.

Rendering: The process of converting data into a visual image, such as generating a realistic
image from a 3D model.
🔹 Scope of Computer Graphics
Computer Graphics has a wide range of applications. In entertainment, it is used for animation
and visual effects. In medicine, it helps in analyzing MRI and CT scans. Engineers use it for
designing structures through CAD software. In education, it enables simulations and virtual labs.
It is also essential in Virtual Reality (VR), where interactive 3D environments are created.

🔹 Levels of Computer Graphics

Computer Graphics can be divided into three levels. Low-level graphics deals with hardware
such as display devices and memory. Mid-level graphics uses APIs like OpenGL and DirectX to
interact with hardware. High-level graphics includes user applications such as games, design
tools, and animation software.

🔹 Pattern, Recognition & Classification

A pattern is any repeated structure such as textures or shapes. Pattern recognition is the
process of identifying these patterns using a computer, for example in face or handwriting
recognition. Pattern classification involves grouping recognized patterns into categories, such as
spam vs. non-spam emails or identifying objects in images.

🔹 Human Visual System

Brightness Adaptation: The human eye adjusts automatically to different lighting conditions,
such as moving from a dark room to bright sunlight.

Brightness Discrimination: The ability to detect small differences in brightness between

similar shades.

Contrast Sensitivity: The ability to distinguish an object from its background based on
brightness differences.

Mach Bands: An optical illusion where edges appear brighter or darker than they actually are,
caused by how the human brain enhances edges for better perception.
🔹 Image Formation Model
Image formation follows a simple process: light is emitted from a source, falls on an object,
reflects from the object, and reaches the eye or camera, forming an image. This concept is
essential for realistic rendering in computer graphics.

🔹 Historical Milestones
In the 1960s, the first computer graphics systems were developed with basic line drawings. In
the 1970s, raster graphics and frame buffers were introduced. The 1980s saw the rise of
personal computers and graphical user interfaces. In the 1990s, 3D graphics became popular,
especially in video games. Today, technologies like real-time rendering, virtual reality, and
artificial intelligence dominate the field.

📘 WEEK 2: Computer Graphics Hardware

(Compact Detailed Notes)
🔹 Introduction to Graphics Hardware
Computer Graphics requires both software and hardware. Software generates the image, while
hardware is responsible for displaying it. Efficient graphics performance depends heavily on the
hardware components used.

🔹 Video Display Devices

CRT (Cathode Ray Tube): An older technology where an electron beam strikes a
phosphor-coated screen to produce images. It is bulky, consumes more power, and is now
obsolete.

LCD (Liquid Crystal Display): A modern flat-panel display that uses liquid crystals to control
light from a backlight source. It is thin, lightweight, and energy efficient.

LED (Light Emitting Diode): An improved version of LCD with better brightness, contrast, and
energy efficiency, making it the most commonly used display today.
🔹 Raster-Scan Systems
Raster-scan is the most common display method, where the screen is divided into a grid of
pixels and the image is drawn line by line from top to bottom. Each pixel’s data is stored in the
frame buffer. The refresh rate determines how smoothly the image appears on the screen.

🔹 Graphics Workstations & Viewing Systems

Graphics workstations are high-performance computers designed for intensive graphics tasks
such as animation, 3D modeling, and CAD. They include powerful CPUs, GPUs, and large
memory. Viewing systems determine how the image is displayed, including factors like screen
size, resolution, and viewing angle.

🔹 Input Devices
Input devices allow users to interact with the system. A keyboard is used for text input, while a
mouse controls the pointer and performs actions like clicking and dragging. Joysticks are used
for directional control, mainly in gaming. Light pens allow direct drawing on the screen (used
with CRT), and scanners convert physical images into digital form.

🔹 Hard-Copy Devices
Hard-copy devices produce physical output. Printers are used for printing text and images on
paper, while plotters are used for large engineering drawings and designs.

🔹 Graphics Networks
Graphics networks allow sharing and processing of graphical data over networks. They are
used in remote collaboration, cloud rendering, and online gaming, where processing may occur
on a server and results are sent to users.
🔹 Graphics on the Internet
Graphics play a major role on the internet, including web animations, online games, and
streaming. Technologies like WebGL enable 3D graphics in browsers, while HTML5 Canvas
supports interactive graphics.

🔹 GPU (Important Concept)

The Graphics Processing Unit (GPU) is a specialized processor designed for fast graphics
computations and parallel processing. Unlike the CPU, which handles general tasks, the GPU is
optimized for rendering images and is essential for gaming and 3D applications.

📘 WEEK 3: Mathematical Preliminaries

(Compact Detailed Notes)
🔹 Points and Lines
A point represents a position in a 2D coordinate system and is written as (x, y). It has no size,
only location. A line is formed by connecting two points and extends infinitely in both directions.
The general equation of a line is y = mx + c, where m is the slope (rate of change) and c is the
intercept. In computer graphics, all shapes are ultimately built using points and lines, making
them fundamental elements.

🔹 Vector Definition and Components

A vector is a quantity that has both magnitude (length) and direction. It is commonly
represented as V = (x, y) in 2D space. Vectors are used to represent movement, direction, and
position changes in graphics. Each vector has components along the x-axis and y-axis, called
Vx and Vy, which help in performing calculations like translation and rotation.

🔹 Vector Algebra
Vector algebra provides mathematical rules to manipulate vectors, which is essential in graphics
for handling object movement, transformations, and physics-based operations. It allows
combining, scaling, and comparing vectors efficiently.

🔹 Vector Addition and Subtraction

👉
Vector addition is performed by adding corresponding components:​
(x₁ + x₂, y₁ + y₂).​
This represents combining two movements into one.

👉
Vector subtraction is done as:​
(x₁ − x₂, y₁ − y₂).​
It is used to find the difference between positions or determine direction from one point to
another.

🔹 Scalar and Vector Multiplication

👉
In scalar multiplication, a vector is multiplied by a number (scalar):​
k(x, y) = (kx, ky).​
This changes the magnitude (size) of the vector but not its direction.

👉
The dot product (scalar product) is calculated as:​
V · U = x₁x₂ + y₁y₂.​
It is useful for finding the angle between vectors and determining whether two vectors are
perpendicular (dot product = 0).

🔹 Unit Vectors and Normalization

A unit vector is a vector with magnitude equal to 1, used to represent direction only.​

👉
Normalization is the process of converting any vector into a unit vector using:​
V̂ = V / |V|​
where |V| is the magnitude of the vector. This is important in graphics for direction calculations
without affecting scale.

🔹 Matrices and Their Role

A matrix is a rectangular arrangement of numbers in rows and columns. In computer graphics,
matrices are used to perform transformations such as translation, rotation, and scaling. For
example, a 2×2 or 3×3 matrix can represent transformations applied to objects.

🔹 Matrix Operations
Matrix addition involves adding corresponding elements of matrices of the same size. Matrix
multiplication follows the row-by-column rule and is very important in graphics, as multiple
transformations can be combined using matrix multiplication. The order of multiplication matters
(AB ≠ BA). The transpose of a matrix is obtained by converting its rows into columns.

🔹 Matrices in Graphics Transformations

In graphics, points are often represented in matrix form, and transformations are applied by
multiplying these point matrices with transformation matrices. This allows efficient computation
and combination of multiple operations such as rotation followed by scaling.

🔹 Image Components in MATLAB

In MATLAB, images are represented as matrices. A grayscale image is stored as a 2D matrix,
where each element represents pixel intensity. A color image is stored as three separate
matrices representing Red, Green, and Blue (RGB) components.

🔹 Image Vector Operations in MATLAB

Vector operations can be applied to images since they are stored as matrices. For example,
adding a constant value increases brightness, while multiplying pixel values changes contrast.
These operations form the basis of image processing techniques.
📘 WEEK 4: OpenGL in Visual C++ .NET
(Compact Detailed Notes)
🔹 Introduction to OpenGL
OpenGL (Open Graphics Library) is a low-level, cross-platform, and cross-language API
used for developing 2D and 3D graphics applications. It provides a set of functions that allow
programmers to directly communicate with the graphics hardware. Because it is
platform-independent, the same code can run on different operating systems with minimal
changes.

🔹 Why Learn OpenGL

OpenGL is important because it helps in understanding how graphics are actually rendered at a
low level. It is widely used in game development, simulations, and visualization systems.
Learning OpenGL builds a strong foundation for advanced graphics programming and
understanding rendering pipelines.

🔹 Graphics Platform
A graphics platform includes the hardware (GPU, display devices) and software (drivers, APIs)
that work together to produce images. OpenGL acts as a bridge between the application and
the graphics hardware, ensuring efficient rendering.

🔹 GLUT – OpenGL Utility Toolkit

GLUT (Graphics Library Utility Toolkit) is a helper library used with OpenGL to simplify tasks
like:

●​ Creating windows
●​ Handling user input (keyboard, mouse)
●​ Managing the rendering loop

It reduces the complexity of writing platform-specific code.

🔹 Basic Steps in an OpenGL Program
1.​ Initialize GLUT: Set up the environment for OpenGL.
2.​ Create and Configure Window: Define window size, position, and display mode.
3.​ Initialize OpenGL (optional): Set background color, projection, etc.
4.​ Register Callback Functions: Functions for display, input, resizing.
5.​ Rendering Function: Contains code to draw objects on the screen.
6.​ Enter Event Processing Loop: Keeps the program running and responsive.

🔹 Rendering Process
Rendering is the process of drawing objects on the screen using OpenGL commands. It
involves defining shapes (points, lines, polygons) and specifying their color, position, and
transformations. The GPU processes these commands and displays the final image.

🔹 Window Resize Handling

When the window size changes, OpenGL adjusts the viewport using a resize callback function.
This ensures that the graphics are properly scaled and displayed without distortion.

🔹 Input Handling (Keyboard & Mouse)

OpenGL programs can handle user input through GLUT:

●​ Keyboard Input: Used for commands like movement or exiting the program
●​ Mouse Input: Used for clicking, dragging, and interaction

These inputs allow users to interact with graphical objects in real time.

🔹 Event Processing Loop

The main loop continuously checks for events such as input or screen updates. It ensures
smooth rendering and interaction. Without this loop, the program would terminate immediately.

📘 WEEK 5: Two-Dimensional Geometric

Transformations (Compact Detailed Notes)
🔹 Basic 2D Transformations
Transformations are operations that change the position, size, or orientation of objects.

●​ Translation: Moves an object from one position to another

●​ Rotation: Rotates an object around a fixed point
●​ Scaling: Changes the size of an object (increase or decrease)

These are the most fundamental operations in computer graphics.

🔹 Matrix Representation & Homogeneous Coordinates

Transformations are performed using matrices. A point (x, y) is represented in homogeneous
coordinates as (x, y, 1), which allows all transformations (including translation) to be expressed
using matrix multiplication. This makes calculations more efficient and consistent.

🔹 Inverse Transformations
An inverse transformation reverses the effect of a previous transformation. For example, if an
object is translated to the right, the inverse transformation moves it back to the left. This is
useful in undoing operations or mapping coordinates.

🔹 Composite Transformations
Multiple transformations can be combined into a single transformation using matrix
multiplication. For example, an object can be scaled, then rotated, and then translated in a
sequence. The order of transformations is very important because changing the order gives
different results.

🔹 Other 2D Transformations
Additional transformations include:

●​ Reflection: Flipping an object across a line (mirror effect)

●​ Shearing: Slanting the shape of an object

These are used for special effects and advanced graphics operations.

🔹 Raster Methods for Transformations

In raster graphics, transformations are applied at the pixel level. Instead of transforming the
object mathematically, each pixel is repositioned. This method is used in image processing.

🔹 OpenGL Raster Transformations

OpenGL provides functions to apply transformations directly to raster images (pixel data),
allowing efficient rendering and manipulation of images on the screen.

🔹 Coordinate System Transformations

Objects may exist in different coordinate systems (world coordinates, screen coordinates).
Transformations are used to convert coordinates from one system to another so that they can
be displayed correctly.

🔹 OpenGL Functions for Transformations

OpenGL provides built-in functions for transformations:

●​ glTranslate() → for translation

 ●​ glRotate() → for rotation
●​ glScale() → for scaling

These functions internally use matrices to perform operations.

🔹 Programming Examples
In OpenGL programs, transformations are applied to objects before rendering. For example, an
object can be moved, rotated, and resized using transformation functions, allowing dynamic and
interactive graphics.

📘 IMPORTANT EXAM QUESTIONS (Week

​

1–5)

🔹 Q1: Define Computer Graphics and write its

applications.
Definition:

Computer Graphics is a field of computer science that deals with creating, storing, and
manipulating images using a computer. These images can be 2D or 3D and are used to
represent real-world or imaginary objects visually.

Applications:

🎮 Entertainment: Movies, animation, video games

🏥 Medical Field: MRI, CT scan image analysis
●​

🏗️ Engineering: CAD for building and machine design

●​

📚 Education: Simulations and virtual labs

●​

🥽 VR/AR: Virtual reality environments

●​
●​

🔹 Q2: Explain Pixel, Resolution, and Frame Buffer.

Pixel:
 ●​ Smallest unit of an image
●​ Each pixel has color and brightness
●​ Images are made of millions of pixels

Resolution:

●​ Number of pixels in an image (e.g., 1920×1080)

●​ Higher resolution = clearer image
●​ Lower resolution = blurry image

Frame Buffer:

●​ Memory used to store image data before display

●​ Stores color values of each pixel
●​ Directly connected to display output

🔹 Q3: Explain Raster-Scan System.

Definition:

Raster-scan system is a display method in which the image is drawn line by line from top to
bottom using pixels.

Working:

●​ Screen divided into pixel grid

●​ Image stored in frame buffer
●​ Each line is scanned sequentially
●​ Display refreshed continuously

Key Points:

●​ Used in TVs and monitors

●​ Produces smooth images
●​ Depends on refresh rate

🔹 Q4: Explain CRT, LCD, and LED displays.

CRT (Cathode Ray Tube):
 ●​ Uses electron beam to create images
●​ Bulky and heavy
●​ High power consumption (old technology)

LCD (Liquid Crystal Display):

●​ Uses liquid crystals and backlight

●​ Thin and lightweight
●​ Energy efficient compared to CRT

LED (Light Emitting Diode):

●​ Advanced version of LCD

●​ Better brightness and contrast
●​ Most commonly used today

🔹 Q5: Define Vector and explain its operations.

Vector Definition:

A vector is a quantity that has both magnitude and direction. It is represented as V = (x, y).

Operations:

➕
➖
●​ Addition: (x1 + x2, y1 + y2)
●​ Subtraction: (x1 − x2, y1 − y2)

📌
●​ ✖ Scalar Multiplication: k(x, y) = (kx, ky)
●​ Dot Product: x1x2 + y1y2

Use in Graphics:

●​ Movement of objects
●​ Direction control
●​ Physics simulation

🔹 Q6: What is Unit Vector and Normalization?

Unit Vector:
 ●​ Vector with magnitude = 1
●​ Represents only direction

Normalization:

●​ Process of converting a vector into unit vector

●​ Formula: V̂ = V / |V|

Use:

●​ Direction control in graphics

●​ Lighting calculations

🔹 Q7: Explain OpenGL and its importance.

Definition:

OpenGL is a cross-platform graphics API used for creating 2D and 3D graphics applications.

Importance:

●​ Works across different systems

●​ Directly interacts with GPU
●​ Used in games, simulations, and visualization

Features:

●​ Hardware acceleration
●​ High performance rendering
●​ Cross-language support

🔹 Q8: What is GLUT and its purpose?

Definition:

GLUT (OpenGL Utility Toolkit) is a supporting library for OpenGL that simplifies window creation
and input handling.

Functions:
 ●​ Window creation
●​ Keyboard and mouse input
●​ Event handling loop

Benefit:

●​ Reduces programming complexity

●​ Makes OpenGL easier to use

🔹 Q9: Explain basic steps of OpenGL program.

Steps:

●​ Initialize GLUT
●​ Create window
●​ Set display mode
●​ Register callback functions
●​ Write rendering function
●​ Enter event loop

Purpose:

These steps ensure proper setup and continuous rendering of graphics.

🔹 Q10: Define Translation, Rotation, and Scaling.

Translation:

●​ Moves object from one position to another

Rotation:

●​ Rotates object around a fixed point

Scaling:

●​ Changes size of object (increase or decrease)

Use:
 ●​ Used in animations and transformations

🔹 Q11: What is Matrix and its role in graphics?

Definition:

A matrix is a rectangular array of numbers arranged in rows and columns.

Role in Graphics:

●​ Used for transformations

●​ Helps in rotation, scaling, translation
●​ Enables efficient calculations

Important:

●​ Matrix multiplication is used for combining transformations

●​ Order of multiplication matters (AB ≠ BA)

🔹 Q12: What is Rendering?

Definition:

Rendering is the process of generating an image from data using computer graphics
techniques.

Process:

●​ Objects defined mathematically

●​ Lighting and color applied
●​ Final image displayed on screen

Use:

●​ Games
●​ Animation
●​ Simulation