Handout 1
Core Concepts
Computer Graphics: The use of computers to create and manipulate images.
1. Modeling: Mathematical specification of shape and appearance properties.
2. Rendering: Creation of shaded images from 3D computer models.
3. Animation: Creating an illusion of motion using a sequence of images.
Raster: An array of pixels arranged in a grid on a screen. Pixels use RGB values
between 0 and 1 to specify colors. Examples:
• Red: (1, 0, 0)
• Green: (0, 1, 0)
• Blue: (0, 0, 1)
Resolution & Precision:
• Resolution: Number of pixels in the raster.
• Precision: Number of bits per pixel.
Buffer & Framebuffer: A buffer temporarily stores data. The framebuffer stores pixel
data, including color, depth, and sometimes stencil buffers.
Animations: A sequence of images called frames displayed at a specific frame rate
(measured in FPS).
GPU & Shaders:
• GPU: Specialized for rendering with parallel processing.
• Shaders: Programs that perform computations in the rendering process.
Examples of shader programming languages:
o HLSL: Used with DirectX on Microsoft platforms.
o Metal Shading Language: Used on Apple devices.
o GLSL: Cross-platform, used with OpenGL.
The Graphics Pipeline (OpenGL)
1. Application Stage:
o Creates the window for graphics.
o Loads data into the GPU (e.g., textures, vertex shaders).
o Sends vertex data via vertex buffer objects (VBOs) and stores
associations in vertex array objects (VAOs).
2. Geometry Processing:
o The vertex shader computes the final positions of points (vertices).
o Transformations:
▪ Model Transformation: Adjusts an object's position, size, and
orientation.
▪ View Transformation: Transforms world coordinates to camera
view coordinates.
▪ Projection Transformation: Clips points outside the viewing
region.
3. Rasterization:
o Converts geometric shapes into pixels.
o Assembles primitives (points, lines, triangles) and creates fragments for
each pixel.
4. Pixel Processing:
o The fragment shader determines the final color of each pixel using:
▪ Base color, interpolated vertex colors.
▪ Textures and lighting effects.
Handout 2
Key Areas of Computer Graphics
1. Modeling: The mathematical representation of shapes and appearance properties that
can be stored and manipulated on a computer.
2. Rendering: Producing shaded images from 3D models.
3. Animation: Creating the illusion of motion by displaying a sequence of images.
4. Raster: A grid of pixels displayed on a screen, where each pixel's color is represented
by RGB values (Red, Green, Blue), ranging from 0 to 1.
Important Terminologies:
• Resolution: The number of pixels in the raster, impacting image clarity.
• Precision: Number of bits per pixel.
• Framebuffer: Memory storage for pixel data, including color, depth, and stencil buffers.
• Frame Rate (FPS): Speed at which frames (images) are displayed in animations.
GPU and Shaders
• GPU (Graphics Processing Unit): Handles rendering tasks more efficiently than a
CPU, primarily using shaders to perform calculations.
• Shader: A program executed on the GPU to manage specific tasks like rendering pixels
and vertices.
• APIs and Shader Languages:
o DirectX & HLSL: Used on Microsoft platforms.
o Metal & Metal Shading Language: For Apple devices.
o OpenGL & GLSL: Cross-platform library, widely used for graphics rendering.
Graphics Pipeline in OpenGL
1. Application Stage: Initializing the window, sending data to the GPU, and managing
attribute data through vertex buffer objects (VBOs) and vertex array objects (VAOs).
2. Geometry Processing: Determining the position of vertices through vertex shaders and
transformations (model, view, and projection).
3. Rasterization: Grouping vertices into geometric primitives (lines, triangles) and creating
fragments (data for pixel colors).
4. Pixel Processing: Determining the final color of each pixel using fragment shaders,
texture mapping, and lighting calculations.
Pygame Overview
Pygame is a Python library designed for creating interactive, graphics-based
applications, such as video games.
Phases of a Pygame Application
1. Startup: Initialize objects, values, and load necessary resources.
2. Main Loop: Consists of processing input, updating variables, and rendering graphics
continuously.
3. Shutdown: Executed when the user decides to exit the program.
Pygame Features
• Window Creation: Use pygame.display.set_mode() to define the size of the application
window.
• Rendering Points: OpenGL's GLSL vertex shaders control the position of points, lines,
and shapes in 3D space.
• Uniform Variables: Global variables used in shaders for tasks like translating shapes or
setting colors consistently across vertices.
User Input Handling in Pygame
• Discrete Events: Captured when a key is pressed or released (e.g., keydown, keyup
events).
• Continuous Events: Actions (like moving an object) that persist while a key is held
down.
